Ieee 259 add description box on teams homepage

hackathon_site/dashboard/frontend/src/api/types.ts

@@ -90,6 +90,7 @@ export interface Team {
     created_at: string;
     updated_at: string;
     profiles: ProfileWithUser[];
+    project_description: string;
 }
 
 export interface ProfileWithUser extends ProfileWithoutTeamNumber {

hackathon_site/dashboard/frontend/src/components/teamDetail/ProjectDescription/ProjectDescription.tsx

@@ -0,0 +1,100 @@
+import React, { useState } from "react";
+import { Formik, Form, Field, FormikValues } from "formik";
+import * as Yup from "yup";
+import { TextField, Button, Box, Grid } from "@material-ui/core";
+import { useDispatch } from "react-redux";
+import { updateProjectDescription } from "slices/event/teamDetailSlice";
+
+interface ProjectDescriptionProps {
+    teamCode: string;
+}
+
+const ProjectDescription = ({ teamCode }: ProjectDescriptionProps) => {
+    const dispatch = useDispatch();
+    const initialProjectDescription = "Write your project description here";
+    const [isEditing, setIsEditing] = useState(false);
+    const projectDescriptionSchema = Yup.object().shape({
+        projectDescription: Yup.string()
+            .max(500)
+            .required("Project description is required"),
+    });
+
+    const handleSubmit = async (values: FormikValues, { setSubmitting }: any) => {
+        try {
+            await dispatch(
+                updateProjectDescription({
+                    teamCode: teamCode,
+                    projectDescription: values.projectDescription,
+                })
+            );
+        } catch (error) {
+        } finally {
+            setSubmitting(false);
+        }
+    };
+
+    return (
+        <div>
+            <Formik
+                initialValues={{ projectDescription: initialProjectDescription }}
+                validationSchema={projectDescriptionSchema}
+                onSubmit={handleSubmit}
+            >
+                {({ isSubmitting, isValid }) => (
+                    <Form>
+                        <Field
+                            as={TextField}
+                            name="projectDescription"
+                            multiline
+                            fullWidth
+                            variant="outlined"
+                            disabled={!isEditing}
+                            rows={4}
+                            style={{ margin: "20px 5px 0 0" }}
+                        />
+                        <Box mt={2}>
+                            <Grid container justifyContent="flex-end">
+                                {isEditing ? (
+                                    <>
+                                        <Button
+                                            type="submit"
+                                            variant="contained"
+                                            disabled={!isValid || isSubmitting}
+                                            style={{
+                                                width: "120px",
+                                                marginRight: "10px",
+                                            }}
+                                        >
+                                            SUBMIT
+                                        </Button>
+                                        <Button
+                                            type="button"
+                                            variant="contained"
+                                            color="secondary"
+                                            style={{ width: "120px" }}
+                                            onClick={() => setIsEditing(false)}
+                                        >
+                                            CANCEL
+                                        </Button>
+                                    </>
+                                ) : (
+                                    <Button
+                                        type="button"
+                                        variant="contained"
+                                        color="primary"
+                                        style={{ width: "120px" }}
+                                        onClick={() => setIsEditing(true)}
+                                    >
+                                        EDIT
+                                    </Button>
+                                )}
+                            </Grid>
+                        </Box>
+                    </Form>
+                )}
+            </Formik>
+        </div>
+    );
+};
+
+export default ProjectDescription;

hackathon_site/dashboard/frontend/src/pages/Dashboard/Dashboard.tsx

@@ -34,6 +34,7 @@ import AlertBox from "components/general/AlertBox/AlertBox";
 import { openTeamModalItem } from "slices/ui/uiSlice";
 import EditTeam from "components/dashboard/EditTeam/EditTeam";
 import DateRestrictionAlert from "components/general/DateRestrictionAlert/DateRestrictionAlert";
+import ProjectDescription from "components/teamDetail/ProjectDescription/ProjectDescription";
 
 const Dashboard = () => {
     const dispatch = useDispatch();
@@ -122,6 +123,9 @@ const Dashboard = () => {
                         {fetchOrderError && <AlertBox error={fetchOrderError} />}
                         {/* TODO: add back in when incident reports are completed on the frontend */}
                         {/* <BrokenTable items={itemsBroken} openReportAlert={openBrokenTable} /> */}
+                        <ProjectDescription
+                            teamCode={team_code == null ? "None" : team_code}
+                        />
                         <PendingTables />
                         <CheckedOutTables />
                         <ReturnedTable />

hackathon_site/dashboard/frontend/src/slices/event/teamDetailSlice.test.ts

@@ -10,6 +10,7 @@ import {
     teamInfoErrorSelector,
     updateParticipantIdErrorSelector,
     updateParticipantIdProvided,
+    updateProjectDescription,
 } from "slices/event/teamDetailSlice";
 
 import { get, patch } from "api/api";
@@ -216,3 +217,58 @@ describe("updateParticipantIdProvided thunk", () => {
         );
     });
 });
+
+describe("updateProjectDescription thunk", () => {
+    it("Updates the store on API success", async () => {
+        const store = mockStore(); // Initialize mock store
+
+        // Define the parameters for the thunk
+        const params = {
+            teamCode: "A48E5",
+            projectDescription: "Updated project description",
+        };
+
+        const mockApiResponse = { ...mockTeam };
+        mockApiResponse.project_description = "Updated project description";
+        let mockResponse = makeMockApiResponse(mockApiResponse);
+        mockedPatch.mockResolvedValueOnce(mockResponse);
+
+        await store.dispatch(updateProjectDescription(params));
+
+        await waitFor(() => {
+            expect(mockedPatch).toHaveBeenCalledWith(
+                `/api/event/teams/${mockTeam.team_code}`,
+                {
+                    project_description: "Updated project description",
+                }
+            );
+        });
+    });
+    it("Dispatches snackbar on API failure", async () => {
+        const store = mockStore();
+
+        const params = {
+            teamCode: "A48E5",
+            projectDescription: "Updated project description",
+        };
+
+        mockedPatch.mockRejectedValueOnce(teamFailureResponse);
+        await store.dispatch(updateProjectDescription(params));
+
+        expect(mockedPatch).toHaveBeenCalledWith(
+            `/api/event/teams/${mockTeam.team_code}`,
+            {
+                project_description: "Updated project description",
+            }
+        );
+
+        const actions = store.getActions();
+
+        expect(actions).toContainEqual(
+            displaySnackbar({
+                message: "Could not update project description: Error 404",
+                options: { variant: "error" },
+            })
+        );
+    });
+});

hackathon_site/dashboard/frontend/src/slices/event/teamDetailSlice.ts

@@ -39,6 +39,11 @@ interface idProvidedParameters {
     idProvided: boolean;
 }
 
+interface UpdateProjectDescriptionParams {
+    teamCode: string;
+    projectDescription: string;
+}
+
 export const updateParticipantIdProvided = createAsyncThunk<
     Profile,
     idProvidedParameters,
@@ -103,6 +108,39 @@ export const getTeamInfoData = createAsyncThunk<
     }
 );
 
+export const updateProjectDescription = createAsyncThunk<
+    Team,
+    UpdateProjectDescriptionParams,
+    { state: RootState; rejectValue: RejectValue; dispatch: AppDispatch }
+>(
+    `${teamDetailReducerName}/updateProjectDescription`,
+    async ({ teamCode, projectDescription }, { rejectWithValue, dispatch }) => {
+        try {
+            const response = await patch<Team>(`/api/event/teams/${teamCode}`, {
+                project_description: projectDescription,
+            });
+            return response.data;
+        } catch (e: any) {
+            const message =
+                e.response.statusText === "Not Found"
+                    ? `Could not update project description: Error ${e.response.status}`
+                    : `Something went wrong: Error ${e.response.status}`;
+            dispatch(
+                displaySnackbar({
+                    message,
+                    options: {
+                        variant: "error",
+                    },
+                })
+            );
+            return rejectWithValue({
+                status: e.response.status,
+                message,
+            });
+        }
+    }
+);
+
 const teamDetailSlice = createSlice({
     name: teamDetailReducerName,
     initialState,
@@ -142,6 +180,19 @@ const teamDetailSlice = createSlice({
             state.isParticipantIdLoading = false;
             state.participantIdError = payload?.message ?? "Something went wrong";
         });
+
+        builder.addCase(updateProjectDescription.pending, (state) => {
+            state.isTeamInfoLoading = true;
+            state.teamInfoError = null;
+        });
+        builder.addCase(updateProjectDescription.fulfilled, (state, { payload }) => {
+            state.isTeamInfoLoading = false;
+            state.teamInfoError = null;
+        });
+        builder.addCase(updateProjectDescription.rejected, (state, { payload }) => {
+            state.isTeamInfoLoading = false;
+            state.teamInfoError = payload?.message ?? "Something went wrong";
+        });
     },
 });
 

hackathon_site/dashboard/frontend/src/testing/mockData.tsx

@@ -267,6 +267,7 @@ export const mockTeam: Team = {
             },
         },
     ],
+    project_description: "",
 };
 
 export const mockTeamMultiple = {
@@ -370,6 +371,7 @@ export const mockValidTeam: Team = {
             },
         },
     ],
+    project_description: "",
 };
 
 // Team with too many members
@@ -450,6 +452,7 @@ export const mockLargeTeam: Team = {
             },
         },
     ],
+    project_description: "",
 };
 
 export const mockHardware: Hardware[] = [