From 7d28a4d397ac51b31774e1eb76e03ae67d71847d Mon Sep 17 00:00:00 2001
From: "philipp.monz" <philipp.monz@fairkom.eu>
Date: Fri, 2 Jun 2023 14:35:28 +0200
Subject: [PATCH] Spinner during fetch
---
.../{registerwork => bundel}/Spinner.jsx | 0
.../registerwork/registerworkFileUpload.jsx | 11 +-
Frontend/src/pages/MyWorksPage.jsx | 110 +++++++++--------
Frontend/src/pages/SearchWorksPage.jsx | 111 ++++++++++--------
4 files changed, 130 insertions(+), 102 deletions(-)
rename Frontend/src/components/{registerwork => bundel}/Spinner.jsx (100%)
diff --git a/Frontend/src/components/registerwork/Spinner.jsx b/Frontend/src/components/bundel/Spinner.jsx
similarity index 100%
rename from Frontend/src/components/registerwork/Spinner.jsx
rename to Frontend/src/components/bundel/Spinner.jsx
diff --git a/Frontend/src/components/registerwork/registerworkFileUpload.jsx b/Frontend/src/components/registerwork/registerworkFileUpload.jsx
index bfc633a..1c1bb33 100644
--- a/Frontend/src/components/registerwork/registerworkFileUpload.jsx
+++ b/Frontend/src/components/registerwork/registerworkFileUpload.jsx
@@ -1,10 +1,11 @@
-import React, { useState, useCallback } from "react";
-import FormatService from "../../services/FormatService";
+import React, { useCallback, useState } from "react";
+
import ApiService from "../../services/ApiService";
-import { useDropzone } from "react-dropzone";
-import { XIcon } from "@heroicons/react/outline";
-import Spinner from "./Spinner";
import EasyTrans from "../bundel/EasyTrans";
+import FormatService from "../../services/FormatService";
+import Spinner from "../bundel/Spinner";
+import { XIcon } from "@heroicons/react/outline";
+import { useDropzone } from "react-dropzone";
const RegisterWorkFileUpload = (props) => {
const [fileUploaded, setFileUploaded] = useState(false);
diff --git a/Frontend/src/pages/MyWorksPage.jsx b/Frontend/src/pages/MyWorksPage.jsx
index 9ea817f..18cfaa4 100644
--- a/Frontend/src/pages/MyWorksPage.jsx
+++ b/Frontend/src/pages/MyWorksPage.jsx
@@ -3,6 +3,7 @@ import React, { useEffect, useState } from "react";
import ApiService from "../services/ApiService";
import EasyTrans from "../components/bundel/EasyTrans";
import Pagination from "../components/bundel/Pagination";
+import Spinner from "../components/bundel/Spinner";
import UserWorkListElement from "../components/bundel/UserWorkListElement";
import WorkTypIcon from "../components/registerwork/WorkTypIcon";
@@ -14,9 +15,11 @@ const MyWorksPage = () => {
const [totalPages, setTotalPages] = useState();
const [totalElements, setTotalElements] = useState();
const [pagination, setPagination] = useState();
+ const [isLoading, setIsLoading] = useState(true);
useEffect(() => {
const fetchData = async () => {
+ setIsLoading(true);
try {
const result = await ApiService.getUserWorkList2(page, itemsPerPage);
setUserWorkList(result?.content);
@@ -25,7 +28,8 @@ const MyWorksPage = () => {
setPagination(result?.pageable);
} catch (error) {
console.error("Error:", error);
- throw error;
+ } finally {
+ setIsLoading(false);
}
};
@@ -34,55 +38,65 @@ const MyWorksPage = () => {
return (
<>
- <div className="max-w-7xl mx-auto px-2 sm:px-6 lg:px-8 my-2">
- {workView ? (
- userWorkList.length > 0 ? (
- userWorkList.map((userWork) => {
- return (
- <UserWorkListElement
- key={userWork.id}
- userWork={userWork}
- searchWork={true}
- editable="true"
- ></UserWorkListElement>
- );
- })
+ {isLoading ? (
+ <div className="flex justify-center">
+ <div className="flex justify-center column p-10">
+ <Spinner />
+ </div>
+ </div>
+ ) : (
+ <div className="max-w-7xl mx-auto px-2 sm:px-6 lg:px-8 my-2">
+ {workView ? (
+ userWorkList.length > 0 ? (
+ userWorkList.map((userWork) => {
+ return (
+ <UserWorkListElement
+ key={userWork.id}
+ userWork={userWork}
+ searchWork={true}
+ editable="true"
+ ></UserWorkListElement>
+ );
+ })
+ ) : (
+ <div className="flex items-center justify-center ">
+ <p className="text-2xl text-gray-500">
+ <EasyTrans>NoElementsFound</EasyTrans>
+ </p>
+ </div>
+ )
) : (
- <div className="flex items-center justify-center ">
- <p className="text-2xl text-gray-500"><EasyTrans>NoElementsFound</EasyTrans></p>
- </div>
- )
- ) : (
- <div className="grid grid-cols-1 gap-y-10 sm:grid-cols-2 gap-x-6 lg:grid-cols-3 xl:grid-cols-4 xl:gap-x-8">
- {userWorkList.map((work) => (
- <a key={work.id} href={work.href} className="group">
- <div className="aspect-w-1 aspect-h-1 bg-fairbrightgreen rounded-lg overflow-hidden xl:aspect-w-7 xl:aspect-h-8">
- <div className="flex justify-center items-center w-full h-full">
- <WorkTypIcon
- type="Document" //TODO Worktype zurückgeben work.type
- className="w-full h-full object-center object-cover group-hover:opacity-75"
- ></WorkTypIcon>
+ <div className="grid grid-cols-1 gap-y-10 sm:grid-cols-2 gap-x-6 lg:grid-cols-3 xl:grid-cols-4 xl:gap-x-8">
+ {userWorkList.map((work) => (
+ <a key={work.id} href={work.href} className="group">
+ <div className="aspect-w-1 aspect-h-1 bg-fairbrightgreen rounded-lg overflow-hidden xl:aspect-w-7 xl:aspect-h-8">
+ <div className="flex justify-center items-center w-full h-full">
+ <WorkTypIcon
+ type="Document" //TODO Worktype zurückgeben work.type
+ className="w-full h-full object-center object-cover group-hover:opacity-75"
+ ></WorkTypIcon>
+ </div>
</div>
- </div>
- <h3 className="text-sm text-gray-700">{work.licence}</h3>
- <p className="mt-1 text-lg font-medium text-gray-900">
- {work.title}
- </p>
- </a>
- ))}
- </div>
- )}
- {totalElements == 0 ?? (
- <Pagination
- page={page}
- setPage={setPage}
- totalPages={totalPages}
- itemsPerPage={itemsPerPage}
- setItemsPerPage={setItemsPerPage}
- totalElements={totalElements}
- />
- )}
- </div>
+ <h3 className="text-sm text-gray-700">{work.licence}</h3>
+ <p className="mt-1 text-lg font-medium text-gray-900">
+ {work.title}
+ </p>
+ </a>
+ ))}
+ </div>
+ )}
+ {totalElements == 0 ?? (
+ <Pagination
+ page={page}
+ setPage={setPage}
+ totalPages={totalPages}
+ itemsPerPage={itemsPerPage}
+ setItemsPerPage={setItemsPerPage}
+ totalElements={totalElements}
+ />
+ )}
+ </div>
+ )}
</>
);
};
diff --git a/Frontend/src/pages/SearchWorksPage.jsx b/Frontend/src/pages/SearchWorksPage.jsx
index 044423d..bf7770f 100644
--- a/Frontend/src/pages/SearchWorksPage.jsx
+++ b/Frontend/src/pages/SearchWorksPage.jsx
@@ -4,6 +4,7 @@ import ApiService from "../services/ApiService";
import Controlbar from "../components/bundel/Controlbar";
import EasyTrans from "../components/bundel/EasyTrans";
import Pagination from "../components/bundel/Pagination";
+import Spinner from "../components/bundel/Spinner";
import UserWorkListElement from "../components/bundel/UserWorkListElement";
import WorkTypIcon from "../components/registerwork/WorkTypIcon";
@@ -21,9 +22,10 @@ const SearchWorksPage = () => {
const [licence, setLicence] = useState();
const [sort, setSort] = useState("asc");
const [selectedTags, setSelectedTags] = useState([]);
+ const [isLoading, setIsLoading] = useState(true);
const fetchData = async () => {
- console.log(selectedTags);
+ setIsLoading(true);
try {
const result = await ApiService.getPublicWorkList(
title,
@@ -41,7 +43,8 @@ const SearchWorksPage = () => {
setPagination(result?.pageable);
} catch (error) {
console.error("Error:", error);
- throw error;
+ } finally {
+ setIsLoading(false);
}
};
@@ -82,56 +85,66 @@ const SearchWorksPage = () => {
selectedTags={selectedTags}
setSelectedTags={setSelectedTags}
></Controlbar>
- <div className="max-w-7xl mx-auto px-2 sm:px-6 lg:px-8 my-2">
- {workView ? (
- userWorkList.length > 0 ? (
- userWorkList.map((userWork, index) => {
- console.log(userWork);
- return (
- <UserWorkListElement
- key={index}
- userWork={userWork}
- searchWork={true}
- editable="false"
- ></UserWorkListElement>
- );
- })
- ) : (
+ {isLoading ? (
+ <div className="flex justify-center">
+ <div className="flex justify-center column p-10">
+ <Spinner />
+ </div>
+ </div>
+ ) : (
+ <div className="max-w-7xl mx-auto px-2 sm:px-6 lg:px-8 my-2">
+ {workView ? (
+ userWorkList.length > 0 ? (
+ userWorkList.map((userWork, index) => {
+ console.log(userWork);
+ return (
+ <UserWorkListElement
+ key={index}
+ userWork={userWork}
+ searchWork={true}
+ editable="false"
+ ></UserWorkListElement>
+ );
+ })
+ ) : (
<div className="flex items-center justify-center ">
- <p className="text-2xl text-gray-500"><EasyTrans>NoElementsFound</EasyTrans></p>
+ <p className="text-2xl text-gray-500">
+ <EasyTrans>NoElementsFound</EasyTrans>
+ </p>
</div>
- )
- ) : (
- <div className="grid grid-cols-1 gap-y-10 sm:grid-cols-2 gap-x-6 lg:grid-cols-3 xl:grid-cols-4 xl:gap-x-8">
- {userWorkList.map((work) => (
- <a key={work.id} href={work.href} className="group">
- <div className="aspect-w-1 aspect-h-1 bg-fairbrightgreen rounded-lg overflow-hidden xl:aspect-w-7 xl:aspect-h-8">
- <div className="flex justify-center items-center w-full h-full">
- <WorkTypIcon
- type="Document" //TODO Worktype zurückgeben work.type
- className="w-full h-full object-center object-cover group-hover:opacity-75"
- ></WorkTypIcon>
+ )
+ ) : (
+ <div className="grid grid-cols-1 gap-y-10 sm:grid-cols-2 gap-x-6 lg:grid-cols-3 xl:grid-cols-4 xl:gap-x-8">
+ {userWorkList.map((work) => (
+ <a key={work.id} href={work.href} className="group">
+ <div className="aspect-w-1 aspect-h-1 bg-fairbrightgreen rounded-lg overflow-hidden xl:aspect-w-7 xl:aspect-h-8">
+ <div className="flex justify-center items-center w-full h-full">
+ <WorkTypIcon
+ type="Document" //TODO Worktype zurückgeben work.type
+ className="w-full h-full object-center object-cover group-hover:opacity-75"
+ ></WorkTypIcon>
+ </div>
</div>
- </div>
- <h3 className="mt-4 text-sm text-gray-700">{work.licence}</h3>
- <p className="mt-1 text-lg font-medium text-gray-900">
- {work.title}
- </p>
- </a>
- ))}
- </div>
- )}
- {totalElements == 0 ?? (
- <Pagination
- page={page}
- setPage={setPage}
- totalPages={totalPages}
- itemsPerPage={itemsPerPage}
- setItemsPerPage={setItemsPerPage}
- totalElements={totalElements}
- />
- )}
- </div>
+ <h3 className="mt-4 text-sm text-gray-700">{work.licence}</h3>
+ <p className="mt-1 text-lg font-medium text-gray-900">
+ {work.title}
+ </p>
+ </a>
+ ))}
+ </div>
+ )}
+ {totalElements == 0 ?? (
+ <Pagination
+ page={page}
+ setPage={setPage}
+ totalPages={totalPages}
+ itemsPerPage={itemsPerPage}
+ setItemsPerPage={setItemsPerPage}
+ totalElements={totalElements}
+ />
+ )}
+ </div>
+ )}
</div>
);
};
--
GitLab