fix: little improvements

- add missing event types colors and icons - add skeleton for image loading in the "add plant" window - little improvements
MDeLuise · Sep 11, 2023 · 39fd9c3 · 39fd9c3
1 parent e676f55
commit 39fd9c3
Show file tree

Hide file tree

Showing 6 changed files with 100 additions and 50 deletions.
diff --git a/README.md b/README.md
@@ -135,7 +135,7 @@ The application was developed with being used with Docker in mind, thus this met
 1. Run the following command in the terminal inside the `frontend` folder
  `npm start`
 
-Then, the frontend of the system will be available at `http://localhost:3000`, and the backend at `http://localhost:8085/api`.
+Then, the frontend of the system will be available at `http://localhost:3000`, and the backend at `http://localhost:8080/api`.
 
 
 #### Change port binding
@@ -212,8 +212,8 @@ To fix a bug or create a feature, follow these steps:
 * Commits should follow the [semantic commit](https://www.conventionalcommits.org/en/v1.0.0/) specification, although not mandatory.
 
 #### Local environment
-If you want to make some changes in the project, you can use the following commands:
-* in order to run the frontend: `cd frontend`, then `npm run dev`.
-* in order to run the backend: `cd backend`, then `./mvnw spring-boot:run -Dspring-boot.run.profiles=dev -DcopyFiles`. This enables the `dev` profile, which uses an embedded h2 database instead of one external mysql instance, and creates a user with username `user` and password `user` with a predefined plant's collection. Also a dummy user uploaded image is copied under `/tmp/plant-it/` directory.
+If you want to test some changes in the project, you can use the following commands:
+* in order to run the frontend: `cd frontend`, then `npm run dev` (available at `localhost:3000` by default).
+* in order to run the backend: `cd backend`, then `./mvnw spring-boot:run -Dspring-boot.run.profiles=dev -DcopyFiles` (available at `localhost:8085` by default). This enables the `dev` profile, which uses an embedded h2 database instead of one external mysql instance, and creates a user with username `user` and password `user` with a predefined plant's collection. Also a dummy user uploaded image is copied under `/tmp/plant-it/` directory.
 
 Consider that this environment speed up the developing process, but the app should be tested (at least for new big features) even without the `dev` backend profile and with a local docker deployment.
diff --git a/frontend/src/components/AddPlant.tsx b/frontend/src/components/AddPlant.tsx
@@ -1,4 +1,4 @@
-import { Box, Button, Divider, Drawer, Switch, TextField } from "@mui/material";
+import { Box, Button, Divider, Drawer, Skeleton, Switch, TextField } from "@mui/material";
 import { AxiosInstance } from "axios";
 import { botanicalInfo, plant } from "../interfaces";
 import { useEffect, useState } from "react";
@@ -16,16 +16,17 @@ export default function AddPlant(props: {
  name?: string,
  printError: (err: any) => void;
 }) {
- const [plantName, setPlantName] = useState<string>();
+ const [plantName, setPlantName] = useState<string>("");
  const [plantNameError, setPlantNameError] = useState<string>();
- const [family, setFamily] = useState<string>();
- const [genus, setGenus] = useState<string>();
- const [species, setSpecies] = useState<string>();
- const [date, setDate] = useState<Dayjs | null>(dayjs(new Date()));
+ const [family, setFamily] = useState<string>("");
+ const [genus, setGenus] = useState<string>("");
+ const [species, setSpecies] = useState<string>("");
+ const [date, setDate] = useState<Dayjs>(dayjs(new Date()));
  const [useDate, setUseDate] = useState<boolean>(true);
  const [selectedImage, setSelectedImage] = useState<File>();
  const [downloadedImg, setDownloadedImg] = useState<string>();
  const [imageDownloaded, setImageDownloaded] = useState<boolean>(false);
+ const [imageLoaded, setImageLoaded] = useState<boolean>(false);
 
  const readImage = (imageUrl: string): void => {
  props.requestor.get(`image/content${imageUrl}`)
@@ -47,6 +48,9 @@ export default function AddPlant(props: {
  };
 
  const setImageSrc = (): string => {
+ if (!props.open) {
+ return "";
+ }
  return imageDownloaded ? `data:application/octet-stream;base64,${downloadedImg}` :
  setAbsoluteImageUrl(props.entity?.imageUrl, process.env.PUBLIC_URL);
  };
@@ -152,7 +156,7 @@ export default function AddPlant(props: {
  scientificName: plantName,
  family: family,
  genus: genus,
- species: species != undefined ? species : plantName,
+ species: species != "" ? species : plantName,
  isSystemWide: false,
  };
  let plantToAdd = {
@@ -213,10 +217,12 @@ export default function AddPlant(props: {
  };
 
  const cleanup = (): void => {
+ setImageLoaded(false);
  setSelectedImage(undefined);
  setDownloadedImg(undefined);
- setFamily(undefined);
- setGenus(undefined);
+ setImageDownloaded(false);
+ setFamily("");
+ setGenus("");
  setPlantName("");
  setUseDate(true);
  setDate(dayjs(new Date()));
@@ -230,7 +236,7 @@ export default function AddPlant(props: {
 
  useEffect(() => {
  setImageDownloaded(false);
- setImageSrc();
+ props.open && setImageSrc();
  setName();
  }, [props.entity, props.name, props.open]);
 
@@ -279,18 +285,30 @@ export default function AddPlant(props: {
  position: "relative",
  }}>
  {
- props.entity != undefined &&
+ !imageLoaded && props.entity !== undefined &&
+ <Skeleton
+ variant="rounded"
+ animation="wave"
+ sx={{
+ width: "100%",
+ height: "100%",
+ }}
+ />
+ }
+ {
+ props.entity != undefined && props.open &&
  <img
  src={imgSrc}
  style={{
  height: "100%",
  width: "100%",
  objectFit: "cover"
  }}
+ onLoad={() => setImageLoaded(true)}
  />
  }
  {
- selectedImage != undefined &&
+ selectedImage != undefined && props.open &&
  <>
  <Box
  style={{
@@ -312,19 +330,22 @@ export default function AddPlant(props: {
  </Box>
  </>
  }
- <Box sx={{
- backgroundColor: "primary.main",
- width: "100%",
- height: "100%",
- justifyContent: "center",
- alignItems: "center",
- display: selectedImage == undefined ? "flex" : "none",
- }}
- onClick={() => {
- document.getElementById("upload-image")?.click();
- }}>
- <AddPhotoAlternateOutlinedIcon fontSize="large" />
- </Box>
+ {
+ props.entity == undefined &&
+ <Box sx={{
+ backgroundColor: "primary.main",
+ width: "100%",
+ height: "100%",
+ justifyContent: "center",
+ alignItems: "center",
+ display: selectedImage == undefined ? "flex" : "none",
+ }}
+ onClick={() => {
+ document.getElementById("upload-image")?.click();
+ }}>
+ <AddPhotoAlternateOutlinedIcon fontSize="large" />
+ </Box>
+ }
 
  </Box>
  <TextField
@@ -353,7 +374,7 @@ export default function AddPlant(props: {
  label="Date of purchase"
  value={date}
  disabled={!useDate}
- onChange={(newValue) => setDate(newValue)}
+ onChange={(newValue) => setDate(newValue != undefined ? newValue : dayjs(new Date()))}
  sx={{
  flexGrow: 1
  }}
@@ -366,23 +387,23 @@ export default function AddPlant(props: {
  disabled={props.entity != undefined}
  label="Family"
  fullWidth
- value={props.entity?.family}
+ value={props.entity?.family != undefined ? props.entity?.family : ""}
  onChange={(event) => setFamily(event.target.value)}
  />
  <TextField
  variant="outlined"
  disabled={props.entity != undefined}
  fullWidth
  label="Genus"
- value={props.entity?.genus}
+ value={props.entity?.genus != undefined ? props.entity?.genus : ""}
  onChange={(event) => setGenus(event.target.value)}
  />
  <TextField
  variant="outlined"
  disabled={props.entity != undefined}
  fullWidth
  label="Species"
- value={props.entity?.species}
+ value={props.entity?.species != undefined ? props.entity?.species : ""}
  onChange={(event) => setSpecies(event.target.value)}
  />
 

diff --git a/frontend/src/components/Auth.tsx b/frontend/src/components/Auth.tsx
@@ -1,5 +1,5 @@
 import { useEffect, useState } from "react";
-import { AxiosError, AxiosInstance } from 'axios';
+import { AxiosInstance } from 'axios';
 import { NavigateFunction, useNavigate } from "react-router";
 import secureLocalStorage from "react-secure-storage";
 import Avatar from '@mui/material/Avatar';

diff --git a/frontend/src/components/LogEntry.tsx b/frontend/src/components/LogEntry.tsx
@@ -6,6 +6,10 @@ import AutorenewOutlinedIcon from '@mui/icons-material/AutorenewOutlined';
 import QuestionMarkOutlinedIcon from '@mui/icons-material/QuestionMarkOutlined';
 import LunchDiningOutlinedIcon from '@mui/icons-material/LunchDiningOutlined';
 import BatterySaverOutlinedIcon from '@mui/icons-material/BatterySaverOutlined';
+import VisibilityOutlinedIcon from '@mui/icons-material/VisibilityOutlined';
+import ShowerOutlinedIcon from '@mui/icons-material/ShowerOutlined';
+import ScienceOutlinedIcon from '@mui/icons-material/ScienceOutlined';
+import WavesOutlinedIcon from '@mui/icons-material/WavesOutlined';
 import { MutableRefObject, ReactElement } from "react";
 import KeyboardArrowRightIcon from '@mui/icons-material/KeyboardArrowRight';
 import { alpha } from "@mui/material";
@@ -23,6 +27,10 @@ export default function LogEntry(props: {
  case "transplanting": return <AutorenewOutlinedIcon />;
  case "fertilizing": return <LunchDiningOutlinedIcon />;
  case "biostimulating": return <BatterySaverOutlinedIcon />;
+ case "observation": return <VisibilityOutlinedIcon />;
+ case "misting": return <ShowerOutlinedIcon />;
+ case "treatment": return <ScienceOutlinedIcon />;
+ case "water_changing": return <WavesOutlinedIcon />;
  default: return <QuestionMarkOutlinedIcon />;
  }
  };
@@ -34,6 +42,10 @@ export default function LogEntry(props: {
  case "transplanting": return "rgb(121, 72, 36)";
  case "fertilizing": return "rgb(234, 94, 7)";
  case "biostimulating": return "rgb(234, 147, 7)";
+ case "treatment": return "rgb(123, 152, 60)";
+ case "observation": return "rgb(92, 93, 94)";
+ case "misting": return "rgb(4, 34, 77)";
+ case "water_changing": return "rgb(149, 187, 241)";
  default: return "rgb(226, 233, 243)";
  }
  };

diff --git a/frontend/src/components/PlantDetails.tsx b/frontend/src/components/PlantDetails.tsx
@@ -225,7 +225,14 @@ function PlantHeader(props: {
  }}>
  {
  !imageLoaded && !checkedImages &&
- <Skeleton variant="rounded" animation="wave" sx={{ width: "100%", height: "100%", }} />
+ <Skeleton
+ variant="rounded"
+ animation="wave"
+ sx={{
+ width: "100%",
+ height: "100%",
+ }}
+ />
  }
  {
  imageIds.length === 0 && checkedImages &&

diff --git a/frontend/src/components/SearchPage.tsx b/frontend/src/components/SearchPage.tsx
@@ -113,8 +113,16 @@ function AddNewBotanicalInfo(props: {
  }}
  onClick={() => props.addClick()}
  >
- {!imageLoaded &&
- <Skeleton variant="rounded" animation="wave" sx={{ width: "100%", height: "100%" }} />
+ {
+ !imageLoaded &&
+ <Skeleton
+ variant="rounded"
+ animation="wave"
+ sx={{
+ width: "100%",
+ height: "100%"
+ }}
+ />
  }
 
  <Box sx={{
@@ -250,19 +258,21 @@ export default function SearchPage(props: {
  />
  </>
  }
- {botanicalInfos.map(botanicalInfo => {
- return <BotanicalEntity
- entity={botanicalInfo}
- requestor={props.requestor}
- addClick={(arg: botanicalInfo) => {
- setSelectedBotanicalInfo(arg);
- setAddPlantOpen(true);
- }}
- addEntity={(en: plant) => props.plants.push(en)}
- key={botanicalInfo.id}
- printError={props.printError}
- />;
- })}
+ {
+ botanicalInfos.map((botanicalInfo, index) => {
+ return <BotanicalEntity
+ entity={botanicalInfo}
+ requestor={props.requestor}
+ addClick={(arg: botanicalInfo) => {
+ setSelectedBotanicalInfo(arg);
+ setAddPlantOpen(true);
+ }}
+ addEntity={(en: plant) => props.plants.push(en)}
+ key={index}
+ printError={props.printError}
+ />;
+ })
+ }
  <AddNewBotanicalInfo addClick={() => {
  setSelectedBotanicalInfo(undefined);
  setAddPlantOpen(true);