#17: Calls API to edit entity fields

components/CoordinatesList/CoordinatesList.tsx

@@ -9,7 +9,10 @@ import {
   Typography,
 } from "@mui/material";
 import { Fragment, FunctionComponent, useEffect, useState } from "react";
+import { useAppDispatch, useAppSelector } from "../../config/hooks";
+import { selectSession } from "../../features/sessions/slice";
 import { IEntity } from "../../models/IEntity";
+import SessionService from "../../services/SessionService";
 import EntityDialog from "../EntityDialog/EntityDialog";
 
 interface CoordinatesListProps {
@@ -23,12 +26,19 @@ const CoordinatesList: FunctionComponent<CoordinatesListProps> = ({
   const [isCollapseOpen, setIsCollapseOpen] = useState<boolean>(false);
   const [isDialogOpen, setIsDialogOpen] = useState<boolean>(false);
   const { coordinates } = entity;
+  const session = useAppSelector(selectSession);
+  const dispatch = useAppDispatch();
 
   useEffect(() => {
-    setLabel(entity.id);
+    setLabel(entity.label);
     setColor(entity.color);
   }, [entity]);
 
+  const saveEntity = async (entityData: IEntity) => {
+    await SessionService.editEntity(session.id, entityData);
+    setIsDialogOpen(false);
+  };
+
   return (
     <Fragment>
       <div
@@ -87,12 +97,10 @@ const CoordinatesList: FunctionComponent<CoordinatesListProps> = ({
         </Container>
       </Collapse>
       <EntityDialog
-        open={isDialogOpen}
-        setOpen={setIsDialogOpen}
-        label={label}
-        setLabel={setLabel}
-        color={color}
-        setColor={setColor}
+        entity={entity}
+        isDialogOpen={isDialogOpen}
+        onCancel={() => setIsDialogOpen(false)}
+        onSave={saveEntity}
       />
     </Fragment>
   );

components/DynamicModeContainer/DynamicModeContainer.tsx

@@ -11,11 +11,10 @@ import { grey } from "@mui/material/colors";
 import { collection, doc, onSnapshot } from "firebase/firestore";
 import { Fragment, FunctionComponent, useEffect, useState } from "react";
 import { db } from "../../config/firebaseClient";
-import { useAppDispatch, useAppSelector } from "../../config/hooks";
-import { selectSession, updateEntities } from "../../features/sessions/slice";
+import { useAppDispatch } from "../../config/hooks";
+import { updateEntities } from "../../features/sessions/slice";
 import { ICoordinatesData } from "../../models/ICoordinatesData";
 import { IEntity } from "../../models/IEntity";
-import { getRandomColor } from "../../utils/colors";
 import MapContainer from "../MapContainer/MapContainer";
 
 interface DynamicModeContainerProps {
@@ -26,31 +25,36 @@ const DynamicModeContainer: FunctionComponent<DynamicModeContainerProps> = ({
   sessionId,
 }) => {
   const dispatch = useAppDispatch();
-  const session = useAppSelector(selectSession);
 
-  const buildEntities = (coordinatesData: ICoordinatesData[]): IEntity[] => {
-    const entitiesIds = [...new Set(coordinatesData?.map(({ id }) => id))];
-    return entitiesIds.map((entityId) => ({
-      id: entityId,
-      label: entityId,
-      color: getRandomColor(),
-      coordinates: coordinatesData.filter(({ id }) => id === entityId),
+  const buildEntities = (
+    entitiesData: IEntity[],
+    coordinatesData: ICoordinatesData[]
+  ): IEntity[] => {
+    const entitiesIds = [...new Set(entitiesData?.map(({ id }) => id))];
+    return entitiesData.map((entity) => ({
+      ...entity,
+      coordinates: coordinatesData.filter(({ id }) => id === entity.id),
     }));
   };
 
   useEffect(() => {
     if (sessionId) {
       const sessionRef = doc(db, "sessions", sessionId);
       const coordinatesRef = collection(sessionRef, "coordinates");
+      const entitiesRef = collection(sessionRef, "entities");
+      let coordinatesData: ICoordinatesData[] = [];
 
-      const unsubscribe = onSnapshot(coordinatesRef, ({ docs }) => {
-        const coordinatesData = docs.map((doc) =>
-          doc.data()
-        ) as ICoordinatesData[];
-
-        dispatch(updateEntities(buildEntities(coordinatesData)));
+      const unsubscribeCoordinates = onSnapshot(coordinatesRef, ({ docs }) => {
+        coordinatesData = docs.map((doc) => doc.data()) as ICoordinatesData[];
+      });
+      const unsubscribeEntities = onSnapshot(entitiesRef, ({ docs }) => {
+        const entitiesData = docs.map((doc) => doc.data()) as IEntity[];
+        dispatch(updateEntities(buildEntities(entitiesData, coordinatesData)));
       });
-      return () => unsubscribe();
+      return () => {
+        unsubscribeCoordinates();
+        unsubscribeEntities();
+      };
     }
   }, [sessionId]);
 

components/EntityDialog/EntityDialog.tsx

@@ -6,50 +6,37 @@ import DialogContent from "@mui/material/DialogContent";
 import DialogTitle from "@mui/material/DialogTitle";
 import TextField from "@mui/material/TextField";
 import { FunctionComponent, useEffect, useState } from "react";
+import { IEntity } from "../../models/IEntity";
 import ColorPicker from "../ColorPicker/ColorPicker";
 
 interface EntityDialogProps {
-  open: boolean;
-  setOpen: (open: boolean) => void;
-  label: string;
-  setLabel: (label: string) => void;
-  color: string;
-  setColor: (color: string) => void;
+  entity: IEntity;
+  isDialogOpen: boolean;
+  onSave: (entity: IEntity) => void;
+  onCancel: () => void;
 }
 const EntityDialog: FunctionComponent<EntityDialogProps> = ({
-  open,
-  setOpen,
-  label,
-  setLabel,
-  color,
-  setColor,
+  entity,
+  isDialogOpen,
+  onSave,
+  onCancel,
 }) => {
+  const { color, label } = entity;
   const [currentColor, setCurrentColor] = useState<string>("");
   const [currentLabel, setCurrentLabel] = useState<string>("");
 
   useEffect(() => {
     setCurrentColor(color);
     setCurrentLabel(label);
-  }, [open]);
-
-  const handleSubmit = () => {
-    setColor(currentColor);
-    setLabel(currentLabel);
-    setOpen(false);
-  };
+  }, [isDialogOpen]);
 
   return (
     <div>
-      <Dialog open={open} onClose={() => setOpen(false)}>
+      <Dialog open={isDialogOpen} onClose={onCancel}>
         <DialogTitle>Edit entity</DialogTitle>
 
         <DialogContent>
-          <Box
-            component="form"
-            onSubmit={handleSubmit}
-            noValidate
-            sx={{ mt: 1 }}
-          >
+          <Box component="form" noValidate sx={{ mt: 1 }}>
             <div
               style={{
                 display: "flex",
@@ -77,7 +64,9 @@ const EntityDialog: FunctionComponent<EntityDialogProps> = ({
               />
             </div>
             <Button
-              onClick={handleSubmit}
+              onClick={() =>
+                onSave({ ...entity, label: currentLabel, color: currentColor })
+              }
               type="button"
               fullWidth
               variant="contained"
@@ -87,7 +76,7 @@ const EntityDialog: FunctionComponent<EntityDialogProps> = ({
           </Box>
         </DialogContent>
         <DialogActions>
-          <Button onClick={() => setOpen(false)}>Cancel</Button>
+          <Button onClick={onCancel}>Cancel</Button>
         </DialogActions>
       </Dialog>
     </div>

services/SessionService.ts

@@ -1,4 +1,5 @@
 import axios from "axios";
+import { IEntity } from "../models/IEntity";
 
 const SessionService = {
   create: async (): Promise<string> => {
@@ -14,6 +15,25 @@ const SessionService = {
       return id;
     }
   },
+  editEntity: async (
+    sessionId: string,
+    entity: IEntity
+  ): Promise<{ statusCode: number; message: string }> => {
+    const { id: entityId, coordinates, ...body } = entity;
+    const response = await axios.put(
+      `/api/session/${sessionId}/entity/${entityId}`,
+      { id: entityId, ...body }
+    );
+    const { status, data } = response;
+
+    if (status != 200) {
+      const message = "Error while updating entity";
+      console.error(message);
+      throw new Error(message);
+    } else {
+      return data;
+    }
+  },
 };
 
 export default SessionService;