Refactor components

maxidragon · Dec 4, 2023 · 0dd1b47 · 0dd1b47
1 parent de7fe67
commit 0dd1b47
Show file tree

Hide file tree

Showing 65 changed files with 950 additions and 710 deletions.
diff --git a/frontend/src/Components/AvatarComponent.tsx b/frontend/src/Components/AvatarComponent.tsx
@@ -2,19 +2,21 @@ import { useState, useCallback, useEffect } from "react";
 import Avatar from "react-avatar";
 import { getUserAvatar } from "../logic/auth";
 
-const AvatarComponent = (props: {
+interface Props {
   userId: number;
   username: string;
   size: string;
-}) => {
+}
+
+const AvatarComponent = ({ userId, username, size }: Props): JSX.Element => {
   const [avatarUrl, setAvatarUrl] = useState("");
 
   const getAvatarUrl = useCallback(async (): Promise<void> => {
-    const blob = await getUserAvatar(props.userId);
+    const blob = await getUserAvatar(userId);
     if (blob.status === 200) {
       setAvatarUrl(blob.url);
     }
-  }, [props.userId]);
+  }, [userId]);
 
   useEffect(() => {
     getAvatarUrl();
@@ -25,14 +27,14 @@ const AvatarComponent = (props: {
       {avatarUrl ? (
         <img
           style={{
-            width: props.size,
-            height: props.size,
+            width: size,
+            height: size,
             borderRadius: "50%",
           }}
           src={avatarUrl}
         />
       ) : (
-        <Avatar name={props.username} size={props.size} round={true} />
+        <Avatar name={username} size={size} round={true} />
       )}
     </>
   );

diff --git a/frontend/src/Components/CardComponents/NoteCard.tsx b/frontend/src/Components/CardComponents/NoteCard.tsx
@@ -1,10 +1,12 @@
-import Card from "@mui/material/Card";
-import CardContent from "@mui/material/CardContent";
-import Typography from "@mui/material/Typography";
 import { useNavigate } from "react-router-dom";
+import { Card, CardContent, Typography } from "@mui/material";
 import { Note } from "../../logic/interfaces";
 
-const NoteCard = (props: { note: Note }) => {
+interface Props {
+  note: Note;
+}
+
+const NoteCard = ({ note }: Props): JSX.Element => {
   const navigate = useNavigate();
   return (
     <Card
@@ -13,19 +15,18 @@ const NoteCard = (props: { note: Note }) => {
         width: 300,
         mr: 5,
         mt: 2,
-        cursor: props.note ? "pointer" : "normal",
+        cursor: note ? "pointer" : "normal",
       }}
       onClick={() => {
-        if (props.note.description) {
-          navigate(`/note/${props.note.id}`);
+        if (note.description) {
+          navigate(`/note/${note.id}`);
         }
       }}
     >
       <CardContent sx={{ display: "flex", flexDirection: "column" }}>
-        <Typography variant="h6">{props.note.title}</Typography>
+        <Typography variant="h6">{note.title}</Typography>
         <Typography variant="body2">
-          {props.note.description &&
-            props.note.description.substring(0, 200) + "..."}
+          {note.description && note.description.substring(0, 200) + "..."}
         </Typography>
       </CardContent>
     </Card>

diff --git a/frontend/src/Components/ModalComponents/ActionsButtons.tsx b/frontend/src/Components/ModalComponents/ActionsButtons.tsx
@@ -3,29 +3,31 @@ import { Box, Button } from "@mui/material";
 import { actionsButtons, buttonStyle } from "./modalStyles";
 import CancelIcon from "@mui/icons-material/Cancel";
 
-const ActionsButtons = (props: {
+interface Props {
   cancel: () => void;
   submit: () => void;
   submitText: string;
   submitIcon: ReactElement;
-}) => {
+}
+
+const ActionsButtons = ({ cancel, submit, submitText, submitIcon }: Props) => {
   return (
     <Box sx={actionsButtons}>
       <Button
         variant="contained"
         sx={buttonStyle}
         endIcon={<CancelIcon />}
-        onClick={props.cancel}
+        onClick={cancel}
       >
         Cancel
       </Button>
       <Button
         variant="contained"
         color="success"
-        endIcon={props.submitIcon}
-        onClick={props.submit}
+        endIcon={submitIcon}
+        onClick={submit}
       >
-        {props.submitText}
+        {submitText}
       </Button>
     </Box>
   );

diff --git a/frontend/src/Components/ModalComponents/ChangePasswordModal.tsx b/frontend/src/Components/ModalComponents/ChangePasswordModal.tsx
@@ -5,11 +5,9 @@ import { enqueueSnackbar } from "notistack";
 import { changePassword } from "../../logic/auth";
 import ActionsButtons from "./ActionsButtons";
 import EditIcon from "@mui/icons-material/Edit";
+import { ModalProps } from "../../logic/interfaces";
 
-const ChangePasswordModal = (props: {
-  open: boolean;
-  handleClose: () => void;
-}) => {
+const ChangePasswordModal = ({ open, handleClose }: ModalProps) => {
   const oldPasswordRef: React.MutableRefObject<
     HTMLInputElement | null | undefined
   > = useRef();
@@ -36,14 +34,14 @@ const ChangePasswordModal = (props: {
     const status = await changePassword(oldPassword, newPassword);
     if (status === 200) {
       enqueueSnackbar("Password has been changed", { variant: "success" });
-      props.handleClose();
+      handleClose();
     } else {
       enqueueSnackbar("Password change failed", { variant: "error" });
     }
   };
   return (
     <>
-      <Modal open={props.open} onClose={props.handleClose}>
+      <Modal open={open} onClose={handleClose}>
         <Box sx={style}>
           <Grid container sx={formStyle}>
             <Grid item>
@@ -81,7 +79,7 @@ const ChangePasswordModal = (props: {
             </Grid>
           </Grid>
           <ActionsButtons
-            cancel={props.handleClose}
+            cancel={handleClose}
             submit={handleSubmit}
             submitText={"Change password"}
             submitIcon={<EditIcon />}

diff --git a/frontend/src/Components/ModalComponents/Create/AddProjectParticipantModal.tsx b/frontend/src/Components/ModalComponents/Create/AddProjectParticipantModal.tsx
@@ -1,3 +1,4 @@
+import { useRef, useState } from "react";
 import {
   Box,
   Checkbox,
@@ -7,33 +8,29 @@ import {
   TextField,
   Typography,
 } from "@mui/material";
-import { useRef, useState } from "react";
+import { AddCircle as AddCircleIcon } from "@mui/icons-material";
 import { formStyle, style } from "../modalStyles";
 import { enqueueSnackbar } from "notistack";
-import ActionsButtons from "../ActionsButtons";
-import AddCircleIcon from "@mui/icons-material/AddCircle";
 import { addProjectParticipant } from "../../../logic/projectParticipants";
+import { ProjectModalProps } from "../../../logic/interfaces";
+import ActionsButtons from "../ActionsButtons";
 
-const AddProjectParticipantModal = (props: {
-  open: boolean;
-  handleClose: () => void;
-  projectId: number;
-}) => {
+const AddProjectParticipantModal = ({
+  open,
+  handleClose,
+  projectId,
+}: ProjectModalProps): JSX.Element => {
   const emailRef: React.MutableRefObject<HTMLInputElement | null | undefined> =
     useRef();
   const [isOwner, setIsOwner] = useState<boolean>(false);
 
   const handleCreate = async () => {
     if (!emailRef.current) return;
     const email = emailRef.current.value;
-    const response = await addProjectParticipant(
-      email,
-      props.projectId,
-      isOwner,
-    );
+    const response = await addProjectParticipant(email, projectId, isOwner);
     if (response.status === 201) {
       enqueueSnackbar("User added!", { variant: "success" });
-      props.handleClose();
+      handleClose();
     } else {
       enqueueSnackbar("Something went wrong!", { variant: "error" });
       if (response.data.title) {
@@ -45,7 +42,7 @@ const AddProjectParticipantModal = (props: {
   };
 
   return (
-    <Modal open={props.open} onClose={props.handleClose}>
+    <Modal open={open} onClose={handleClose}>
       <Box sx={style}>
         <Grid container sx={formStyle}>
           <Grid item>
@@ -69,7 +66,7 @@ const AddProjectParticipantModal = (props: {
           </Grid>
         </Grid>
         <ActionsButtons
-          cancel={props.handleClose}
+          cancel={handleClose}
           submit={handleCreate}
           submitText={"Create"}
           submitIcon={<AddCircleIcon />}

diff --git a/frontend/src/Components/ModalComponents/Create/CreateActivityModal.tsx b/frontend/src/Components/ModalComponents/Create/CreateActivityModal.tsx
@@ -1,16 +1,17 @@
+import { formStyle, style } from "../modalStyles";
 import { Box, Grid, Modal, TextField, Typography } from "@mui/material";
+import { AddCircle as AddCircleIcon } from "@mui/icons-material";
 import { useRef } from "react";
-import { formStyle, style } from "../modalStyles";
 import { enqueueSnackbar } from "notistack";
 import { DateTimePicker } from "@mui/x-date-pickers";
 import { createActivity } from "../../../logic/activities";
+import { ModalProps } from "../../../logic/interfaces";
 import ActionsButtons from "../ActionsButtons";
-import AddCircleIcon from "@mui/icons-material/AddCircle";
 
-const CreateActivityModal = (props: {
-  open: boolean;
-  handleClose: () => void;
-}) => {
+const CreateActivityModal = ({
+  open,
+  handleClose,
+}: ModalProps): JSX.Element => {
   const titleRef: React.MutableRefObject<HTMLInputElement | null | undefined> =
     useRef();
   const descriptionRef: React.MutableRefObject<
@@ -32,7 +33,7 @@ const CreateActivityModal = (props: {
     );
     if (response.status === 201) {
       enqueueSnackbar("Activity created!", { variant: "success" });
-      props.handleClose();
+      handleClose();
     } else {
       enqueueSnackbar("Something went wrong!", { variant: "error" });
       if (response.data.title) {
@@ -58,7 +59,7 @@ const CreateActivityModal = (props: {
     }
   };
   return (
-    <Modal open={props.open} onClose={props.handleClose}>
+    <Modal open={open} onClose={handleClose}>
       <Box sx={style}>
         <Grid container sx={formStyle}>
           <Grid item>
@@ -86,7 +87,7 @@ const CreateActivityModal = (props: {
           </Grid>
         </Grid>
         <ActionsButtons
-          cancel={props.handleClose}
+          cancel={handleClose}
           submit={handleCreate}
           submitText={"Create"}
           submitIcon={<AddCircleIcon />}

diff --git a/frontend/src/Components/ModalComponents/Create/CreateDocumentModal.tsx b/frontend/src/Components/ModalComponents/Create/CreateDocumentModal.tsx
@@ -1,16 +1,17 @@
-import { Box, Grid, Modal, TextField, Typography } from "@mui/material";
 import { useRef } from "react";
+import { Box, Grid, Modal, TextField, Typography } from "@mui/material";
+import { AddCircle as AddCircleIcon } from "@mui/icons-material";
 import { formStyle, style } from "../modalStyles";
 import { enqueueSnackbar } from "notistack";
-import ActionsButtons from "../ActionsButtons";
 import { createDocument } from "../../../logic/documents";
-import AddCircleIcon from "@mui/icons-material/AddCircle";
+import { ProjectModalProps } from "../../../logic/interfaces";
+import ActionsButtons from "../ActionsButtons";
 
-const CreateDocumentModal = (props: {
-  open: boolean;
-  handleClose: () => void;
-  projectId: number;
-}) => {
+const CreateDocumentModal = ({
+  open,
+  handleClose,
+  projectId,
+}: ProjectModalProps): JSX.Element => {
   const titleRef: React.MutableRefObject<HTMLInputElement | null | undefined> =
     useRef();
   const urlRef: React.MutableRefObject<HTMLInputElement | null | undefined> =
@@ -20,10 +21,10 @@ const CreateDocumentModal = (props: {
     if (!titleRef.current || !urlRef.current) return;
     const title = titleRef.current.value;
     const url = urlRef.current.value;
-    const response = await createDocument(props.projectId, title, url);
+    const response = await createDocument(projectId, title, url);
     if (response.status === 201) {
       enqueueSnackbar("Document created!", { variant: "success" });
-      props.handleClose();
+      handleClose();
     } else {
       enqueueSnackbar("Something went wrong!", { variant: "error" });
       if (response.data.title) {
@@ -39,7 +40,7 @@ const CreateDocumentModal = (props: {
     }
   };
   return (
-    <Modal open={props.open} onClose={props.handleClose}>
+    <Modal open={open} onClose={handleClose}>
       <Box sx={style}>
         <Grid container sx={formStyle}>
           <Grid item>
@@ -55,7 +56,7 @@ const CreateDocumentModal = (props: {
           </Grid>
         </Grid>
         <ActionsButtons
-          cancel={props.handleClose}
+          cancel={handleClose}
           submit={handleCreate}
           submitText={"Create"}
           submitIcon={<AddCircleIcon />}

diff --git a/frontend/src/Components/ModalComponents/Create/CreateGoalCategoryModal.tsx b/frontend/src/Components/ModalComponents/Create/CreateGoalCategoryModal.tsx
@@ -1,15 +1,16 @@
-import { Box, Grid, Modal, TextField, Typography } from "@mui/material";
 import { useRef } from "react";
+import { Box, Grid, Modal, TextField, Typography } from "@mui/material";
+import { AddCircle as AddCircleIcon } from "@mui/icons-material";
 import { formStyle, style } from "../modalStyles";
 import { enqueueSnackbar } from "notistack";
 import { createGoalCategory } from "../../../logic/goalCategories";
+import { ModalProps } from "../../../logic/interfaces";
 import ActionsButtons from "../ActionsButtons";
-import AddCircleIcon from "@mui/icons-material/AddCircle";
 
-const CreateGoalCategoryModal = (props: {
-  open: boolean;
-  handleClose: () => void;
-}) => {
+const CreateGoalCategoryModal = ({
+  open,
+  handleClose,
+}: ModalProps): JSX.Element => {
   const titleRef: React.MutableRefObject<HTMLInputElement | null | undefined> =
     useRef();
 
@@ -19,7 +20,7 @@ const CreateGoalCategoryModal = (props: {
     const response = await createGoalCategory(title);
     if (response.status === 201) {
       enqueueSnackbar("Category created!", { variant: "success" });
-      props.handleClose();
+      handleClose();
     } else {
       enqueueSnackbar("Something went wrong!", { variant: "error" });
       if (response.data.title) {
@@ -31,7 +32,7 @@ const CreateGoalCategoryModal = (props: {
   };
 
   return (
-    <Modal open={props.open} onClose={props.handleClose}>
+    <Modal open={open} onClose={handleClose}>
       <Box sx={style}>
         <Grid container sx={formStyle}>
           <Grid item>
@@ -44,7 +45,7 @@ const CreateGoalCategoryModal = (props: {
           </Grid>
         </Grid>
         <ActionsButtons
-          cancel={props.handleClose}
+          cancel={handleClose}
           submit={handleCreate}
           submitText={"Create"}
           submitIcon={<AddCircleIcon />}