fix day details page showing that there's no observations before load…

…ing the page
luomus · Dec 17, 2024 · c21f7bd · c21f7bd
1 parent a50b7bd
commit c21f7bd
Show file tree

Hide file tree

Showing 13 changed files with 163 additions and 95 deletions.
diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml
@@ -34,7 +34,7 @@ jobs:
     - name: Set up Node.js
       uses: actions/setup-node@v4
       with:
-        node-version: '18.x'
+        node-version: '20.x'
     - name: Install frontend packages
       run: npm install
       working-directory: ./frontend

diff --git a/Dockerfile b/Dockerfile
@@ -1,4 +1,4 @@
-FROM node:18 AS builder
+FROM node:20 AS builder
 
 COPY /frontend /front
 

diff --git a/frontend/.nvmrc b/frontend/.nvmrc
@@ -1 +1 @@
-18
+20
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -29,7 +29,7 @@
     "react-dom": "^18.3.1",
     "react-i18next": "^15.1.1",
     "react-redux": "^9.1.2",
-    "react-router-dom": "^6.28.0",
+    "react-router-dom": "^7.0.2",
     "react-scripts": "^5.0.1",
     "redux": "^5.0.1",
     "redux-thunk": "^3.1.0",

diff --git a/frontend/public/index.html b/frontend/public/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" style="height: 100%">
   <head>
     <meta charset="utf-8" />
     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
@@ -26,9 +26,9 @@
     -->
     <title>Lintuasemasovellus</title>
   </head>
-  <body>
+  <body style="height: 100%; margin: 0;">
     <noscript>You need to enable JavaScript to run this app.</noscript>
-    <div id="root"></div>
+    <div id="root" style="height: 100%;"></div>
     <!--
       This HTML file is a template.
       If you open it directly in the browser, you will see an empty page.

diff --git a/frontend/src/App.js b/frontend/src/App.js
@@ -9,47 +9,26 @@ import { getPerson, getCurrentUser } from "./services";
 import { setUser } from "./reducers/userReducer";
 import { setUserObservatory } from "./reducers/userObservatoryReducer";
 import { initializeStations } from "./reducers/obsStationReducer";
-import { makeStyles } from "@mui/styles";
 import { clean as DraftsClean } from "./services/draftService";
 import { initializeSpecies } from "./reducers/speciesReducer";
+import LoadingSpinner from "./globalComponents/LoadingSpinner";
+import { makeStyles } from "@mui/styles";
 
-const App = () => {
+const useStyles = makeStyles({
+  mainContainer: {
+    height: "calc(100% - 50px)",
+    display: "flex",
+    flexDirection: "column"
+  },
+  container: {
+    height: "100%",
+    display: "flex",
+    flexDirection: "column"
+  },
 
-  const useStyles = makeStyles({
-    flexi: {
-      display: "flex",
-      alignItems: "center",
-      justifyContent: "center",
-      flexDirection: "column",
-      height: "95vh",
-      width:"98vw",
-    },
-    spinner: {
-      padding: "0px",
-      margin: "60px 60px",
-      fontSize: "10px",
-      position: "relative",
-      borderTop: "1.1em solid lightgrey",
-      borderRight: "1.1em solid lightgrey",
-      borderBottom: "1.1em solid lightgrey",
-      borderLeft: "1.1em solid #2691d9",
-      animation: "$spin 1.1s infinite linear",
-      "&, :after": {
-        borderRadius: "50%",
-        width: "10em",
-        height: "10em",
-      },
-    },
-    "@keyframes spin": {
-      "0%": {
-        transform: "rotate(0deg)",
-      },
-      "100%": {
-        transform: "rotate(360deg)",
-      },
-    },
-  });
+});
 
+const App = () => {
   const classes = useStyles();
   const dispatch = useDispatch();
 
@@ -95,15 +74,12 @@ const App = () => {
 
   if (userLoading || initialDataLoading) {
     return (
-      <div className={classes.flexi}>
-        <div className={classes.spinner}>
-        </div>
-      </div>
+      <LoadingSpinner/>
     );
   } else if (!user.id) {
     return (
       <CssBaseline>
-        <div>
+        <div className={classes.mainContainer}>
           <Login />
           <Footer />
         </div>
@@ -112,15 +88,15 @@ const App = () => {
   } else if (userObservatory !== "") {
     return (
       <CssBaseline>
-        <div>
-          <NavBar user={user} />
+        <div className={classes.mainContainer}>
+          <NavBar user={user}/>
           <Routes>
-            <Route path="/listdays" element={<DayList userObservatory={userObservatory} />} />
-            <Route path="/daydetails/:day" element={<DayDetails userObservatory={userObservatory} />} />
-            <Route path="/manual" element={<UserManual />} />
-            <Route path="/" element={<HomePage user={user} userObservatory={userObservatory} />} />
+            <Route path="/listdays" element={<DayList userObservatory={userObservatory}/>}/>
+            <Route className={classes.container} path="/daydetails/:day" element={<DayDetails userObservatory={userObservatory}/>}/>
+            <Route path="/manual" element={<UserManual/>}/>
+            <Route path="/" element={<HomePage user={user} userObservatory={userObservatory}/>}/>
           </Routes>
-          <Footer />
+          <Footer/>
         </div>
       </CssBaseline>
     );

diff --git a/frontend/src/globalComponents/LoadingSpinner.js b/frontend/src/globalComponents/LoadingSpinner.js
@@ -0,0 +1,49 @@
+import React from "react";
+import { makeStyles } from "@mui/styles";
+
+const useStyles = makeStyles({
+  spinnerContainer: {
+    height: "100%",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    flexDirection: "column"
+  },
+  spinner: {
+    padding: "0px",
+    margin: "60px 60px",
+    fontSize: "10px",
+    position: "relative",
+    borderTop: "1.1em solid lightgrey",
+    borderRight: "1.1em solid lightgrey",
+    borderBottom: "1.1em solid lightgrey",
+    borderLeft: "1.1em solid #2691d9",
+    animation: "$spin 1.1s infinite linear",
+    "&, :after": {
+      borderRadius: "50%",
+      width: "10em",
+      height: "10em",
+    },
+  },
+  "@keyframes spin": {
+    "0%": {
+      transform: "rotate(0deg)",
+    },
+    "100%": {
+      transform: "rotate(360deg)",
+    },
+  }
+});
+
+const LoadingSpinner = () => {
+  const classes = useStyles();
+
+  return (
+    <div className={classes.spinnerContainer}>
+      <div className={classes.spinner}>
+      </div>
+    </div>
+  );
+};
+
+export default LoadingSpinner;
diff --git a/frontend/src/pages/dayDetails/generalDayDetails/DailyActionsEdit.js b/frontend/src/pages/dayDetails/generalDayDetails/DailyActionsEdit.js
@@ -1,7 +1,7 @@
 import React from "react";
 import PropTypes from "prop-types";
 import {
-  TextField, Button, IconButton, Typography, FormGroup, FormControlLabel, Box
+  TextField, Button, IconButton, Typography, FormGroup, FormControlLabel
 } from "@mui/material";
 import { useTranslation } from "react-i18next";
 import { CheckCircle, Edit, RemoveCircleOutlineRounded } from "@mui/icons-material";
@@ -65,11 +65,9 @@ const DailyActionsEdit = ({ selectedActions, errorsInActions, actionsEditMode, o
               disabled InputProps={{ disableUnderline: true }} />}
             label={<span style={{ color: "rgba(0, 0, 0, 1)" }}>{t("attachments")}</span>} labelPlacement="start" />
 
-          <Box>
-            <IconButton id="actionsButton" size="small" style={{ left: "100px", alignItems: "left" }} onClick={onActionsEditOpen} variant="contained" color="primary"  >
-              <Edit fontSize="default" />
-            </IconButton>
-          </Box>
+          <IconButton id="actionsButton" size="small" onClick={onActionsEditOpen} variant="contained" color="primary"  >
+            <Edit fontSize="default" />
+          </IconButton>
         </FormGroup>
         : <div style={{
           display: "flex",

diff --git a/frontend/src/pages/dayDetails/index.js b/frontend/src/pages/dayDetails/index.js
@@ -5,10 +5,12 @@ import {
 } from "@mui/material";
 import { makeStyles } from "@mui/styles";
 import { useTranslation } from "react-i18next";
-import { useSelector } from "react-redux";
+import { useDispatch, useSelector } from "react-redux";
 import PropTypes from "prop-types";
 import { GeneralDayDetails } from "./generalDayDetails";
 import { ObservationEdit } from "./observationEdit";
+import { retrieveDays } from "../../reducers/daysReducer";
+import LoadingSpinner from "../../globalComponents/LoadingSpinner";
 
 const useStyles = makeStyles(() => ({
   paper: {
@@ -24,19 +26,35 @@ export const DayDetails = ({ userObservatory }) => {
 
   const classes = useStyles();
   const { t } = useTranslation();
+  const dispatch = useDispatch();
 
   const dayList = useSelector(state => state.days);
 
   const [thisDay, setThisDay] = useState(null);
   const [dayId, setDayId] = useState();
+  const [loading, setLoading] = useState(true);
 
   useEffect(() => {
+    if (!dayList) {
+      dispatch(retrieveDays());
+    }
+  }, [dayList]);
+
+  useEffect(() => {
+    if (!dayList) {
+      return;
+    }
     const thisDay = dayList.find(d => d.day === day && d.observatory === userObservatory) || null;
     setThisDay(thisDay);
     setDayId(thisDay ? thisDay.id : null);
+    setLoading(false);
   }, [dayList, day, userObservatory]);
 
-  if (!dayId) {
+  if (loading) {
+    return (
+      <LoadingSpinner/>
+    );
+  } else if (!dayId) {
     return (<>
       <Paper className={classes.paper}>
         <Typography variant="h4" component="h2" >