Merge branch 'feat/loading-state'

AAISS · Nov 27, 2023 · d4cfaac · d4cfaac
2 parents 514743d + ee6ba85
commit d4cfaac
Show file tree

Hide file tree

Showing 2 changed files with 57 additions and 48 deletions.
diff --git a/frontend/src/pages/schedule/SchedulePage.jsx b/frontend/src/pages/schedule/SchedulePage.jsx
@@ -1,10 +1,19 @@
-import useSchedulePage from './useSchedulePage.js';
+import { CircularProgress } from '@mui/material';
 import ObjListTable from '../../components/table/ObjListTable.jsx';
+import useSchedulePage from './useSchedulePage.js';
 import './SchedulePage.css';
 
 export default function SchedulePage() {
   const { tableWorkshopsData, tablePresentationsData } = useSchedulePage();
 
+  if (!tableWorkshopsData || !tablePresentationsData) {
+    return (
+      <div id="table-container">
+        <CircularProgress />
+      </div>
+    );
+  }
+
   return (
     <div id="table-container">
       <ObjListTable data={tableWorkshopsData} title={'Workshops'} />

diff --git a/frontend/src/pages/workshops/WorkshopsPage.jsx b/frontend/src/pages/workshops/WorkshopsPage.jsx
@@ -1,51 +1,51 @@
-import ItemCard from "../../components/item-card/item-card.jsx";
-import Toast from "../../components/toast/Toast.jsx";
-import {Helper} from "../../utils/Helper.js";
-import useWorkshopsPage from "./useWorkshopsPage.js";
+import { CircularProgress } from '@mui/material';
+import ItemCard from '../../components/item-card/item-card.jsx';
+import Toast from '../../components/toast/Toast.jsx';
+import { Helper } from '../../utils/Helper.js';
+import useWorkshopsPage from './useWorkshopsPage.js';
 
 export default function WorkshopsPage() {
+  const { parsedItemsList, addToCart, toastData, setOpenToast, openToast } = useWorkshopsPage();
 
-    const {
-        parsedItemsList,
-        addToCart,
-        gridTemplateColumnsValue,
-        toastData,
-        setOpenToast,
-        openToast,
-    } = useWorkshopsPage()
+  const getItemsList = () => {
+    if (parsedItemsList) {
+      return parsedItemsList.map((item, index) => (
+        <ItemCard
+          key={index}
+          isWorkshop={item.isWorkshop}
+          title={item.name}
+          description={item.desc && Helper.omitLongString(item.desc, 50)}
+          purchaseState={0}
+          presenterName={item.presenters.join(', ')}
+          startDate={new Date(item.start_date).toLocaleString()}
+          endDate={new Date(item.end_date).toLocaleString()}
+          level={item.level}
+          onClickAddToCart={() =>
+            addToCart({
+              id: item.id,
+              type: item.isWorkshop ? 'workshop' : 'presentation',
+            })
+          }
+        />
+      ));
+    }
 
-    return (
-        <section style={{
-          display: 'flex',
-          flexWrap: 'wrap',
-          justifyContent: 'center',
-          gap: '20px',
-        }}>
-            {toastData && <Toast
-                open={openToast}
-                setOpen={setOpenToast}
-                alertType={toastData.type}
-                message={toastData.message}
-            />}
-            {parsedItemsList && parsedItemsList.map((e, index) => {
-                return (
-                    <ItemCard
-                        key={index}
-                        isWorkshop={e.isWorkshop}
-                        title={e.name}
-                        description={e.desc && Helper.omitLongString(e.desc, 50)}
-                        purchaseState={0}
-                        presenterName={e.presenters.join(", ")}
-                        startDate={new Date(e.start_date).toLocaleString()}
-                        endDate={new Date(e.end_date).toLocaleString()}
-                        level={e.level}
-                        onClickAddToCart={() => addToCart({
-                            id: e.id,
-                            type: e.isWorkshop ? "workshop" : "presentation"
-                        })}
-                    />
-                )
-            })}
-        </section>
-    )
-}
+    return <CircularProgress />;
+  };
+
+  return (
+    <section
+      style={{
+        display: 'flex',
+        flexWrap: 'wrap',
+        justifyContent: 'center',
+        gap: '20px',
+      }}
+    >
+      {toastData && (
+        <Toast open={openToast} setOpen={setOpenToast} alertType={toastData.type} message={toastData.message} />
+      )}
+      {getItemsList()}
+    </section>
+  );
+}