#13: Refactors map to use session instead of files

Ateixs · Jun 1, 2022 · ab42d2a · ab42d2a
1 parent 67f947b
commit ab42d2a
Show file tree

Hide file tree

Showing 12 changed files with 146 additions and 156 deletions.
diff --git a/components/CoordinatesList/CoordinatesList.tsx b/components/CoordinatesList/CoordinatesList.tsx
@@ -8,14 +8,16 @@ import {
   ListItemText,
 } from "@mui/material";
 import { Fragment, FunctionComponent, useState } from "react";
-import { IFile } from "../../pages/_app";
+import { IEntity } from "../../models/IEntity";
 
 interface CoordinatesListProps {
-  file: IFile;
+  entity: IEntity;
 }
-const CoordinatesList: FunctionComponent<CoordinatesListProps> = ({ file }) => {
+const CoordinatesList: FunctionComponent<CoordinatesListProps> = ({
+  entity,
+}) => {
   const [open, setOpen] = useState<boolean>(false);
-  const { filename, data, color } = file;
+  const { id, color, coordinates } = entity;
 
   return (
     <Fragment>
@@ -28,13 +30,13 @@ const CoordinatesList: FunctionComponent<CoordinatesListProps> = ({ file }) => {
         <ListItemIcon sx={{ minWidth: 0, mr: 2, color }}>
           <Circle fontSize="small" />
         </ListItemIcon>
-        <ListItemText primary={filename} />
+        <ListItemText primary={id} />
         {open ? <ExpandLess /> : <ExpandMore />}
       </ListItemButton>
       <Collapse in={open} timeout="auto" unmountOnExit>
         <Container sx={{ maxHeight: 200, overflow: "auto" }}>
           <List component="div" disablePadding>
-            {data?.map((row, index) => (
+            {coordinates?.map((row, index) => (
               <ListItemText
                 key={`coordinate-${index}`}
                 primary={`${row.latitude}, ${row.longitude}`}

diff --git a/components/FilesSelectionContainer/FilesSelectionContainer.tsx b/components/FilesSelectionContainer/FilesSelectionContainer.tsx
@@ -15,22 +15,22 @@ import Papa from "papaparse";
 import { ChangeEvent, FunctionComponent } from "react";
 import { useAppDispatch, useAppSelector } from "../../config/hooks";
 import {
-  add,
-  changeColor,
-  remove,
-  selectFiles,
-} from "../../features/files/slice";
+  createEntity,
+  deleteEntity,
+  editEntity,
+  selectEntities,
+} from "../../features/sessions/slice";
 import ColorPicker, { Colors } from "../ColorPicker/ColorPicker";
 import FileUploadButton from "../FileUploadButton/FileUploadButton";
 import Link from "../Link/Link";
 
 const FilesSelectionContainer: FunctionComponent = () => {
   const dispatch = useAppDispatch();
-  const files = useAppSelector(selectFiles);
+  const entities = useAppSelector(selectEntities);
 
   const getRandomColor = (): string => {
     const colors = Object.keys(Colors);
-    const index = Math.floor(Math.random() * colors.length) + 1;
+    const index = Math.floor(Math.random() * colors.length);
     const key = colors[index];
 
     return Colors[key];
@@ -42,10 +42,10 @@ const FilesSelectionContainer: FunctionComponent = () => {
       skipEmptyLines: true,
       complete: ({ data }) => {
         dispatch(
-          add({
-            filename: file.name,
+          createEntity({
+            id: file.name,
             color: getRandomColor(),
-            data,
+            coordinates: data,
           })
         );
       },
@@ -68,18 +68,18 @@ const FilesSelectionContainer: FunctionComponent = () => {
     }
   };
 
-  const onRemoveFile = (index: number) => {
-    dispatch(remove(index));
+  const onRemoveFile = (id: string) => {
+    dispatch(deleteEntity(id));
   };
 
-  const onChangeColor = (index: number, evt: SelectChangeEvent) => {
+  const onChangeColor = (id: string, evt: SelectChangeEvent) => {
     const selectedColor = evt?.target?.value;
 
     if (!selectedColor) {
       return;
     }
 
-    dispatch(changeColor({ index, color: selectedColor }));
+    dispatch(editEntity({ id, color: selectedColor }));
   };
 
   return (
@@ -103,13 +103,13 @@ const FilesSelectionContainer: FunctionComponent = () => {
           className="buttons-stack"
           sx={{ my: 2 }}
         >
-          {files.length < 5 && (
+          {entities.length < 5 && (
             <FileUploadButton
-              variant={files.length === 0 ? "contained" : "outlined"}
+              variant={entities.length === 0 ? "contained" : "outlined"}
               onSelectFile={onSelectFile}
             />
           )}
-          {files.length > 0 && (
+          {entities.length > 0 && (
             <Link href="/static/map">
               <Button variant="contained" size="small" endIcon={<Send />}>
                 {" "}
@@ -119,22 +119,22 @@ const FilesSelectionContainer: FunctionComponent = () => {
           )}
         </Stack>
 
-        {files.length > 0 && (
+        {entities.length > 0 && (
           <List>
-            <ListSubheader>Selected files</ListSubheader>
-            {files.map(({ filename, color }, index) => (
+            <ListSubheader>Selected entities</ListSubheader>
+            {entities.map(({ id, color }, index) => (
               <ListItem key={index} sx={{ pb: 0 }}>
                 <Chip
                   className="filename-item-content"
                   variant="outlined"
                   color="secondary"
-                  label={<Typography noWrap>{filename}</Typography>}
-                  onDelete={() => onRemoveFile(index)}
+                  label={<Typography noWrap>{id}</Typography>}
+                  onDelete={() => onRemoveFile(id)}
                   deleteIcon={<Delete fontSize="small" />}
                 />
                 <ColorPicker
                   selectedColor={color}
-                  onChangeColor={(evt) => onChangeColor(index, evt)}
+                  onChangeColor={(evt) => onChangeColor(id, evt)}
                 />
               </ListItem>
             ))}

diff --git a/components/Map/Map.tsx b/components/Map/Map.tsx
@@ -1,17 +1,17 @@
 import { Wrapper } from "@googlemaps/react-wrapper";
 import { FunctionComponent, useEffect, useRef, useState } from "react";
-import { IFile } from "../../pages/_app";
+import { IEntity } from "../../models/IEntity";
 
-interface MapContainerProps {
+interface MapWrapperProps {
   center: google.maps.LatLngLiteral;
   zoom: number;
-  files: IFile[];
+  entities: IEntity[];
 }
 
-const MapContainer: FunctionComponent<MapContainerProps> = ({
+const MapWrapper: FunctionComponent<MapWrapperProps> = ({
   center,
   zoom,
-  files,
+  entities,
 }) => {
   const ref = useRef<HTMLDivElement>(null);
   const [map, setMap] = useState<google.maps.Map>();
@@ -37,11 +37,11 @@ const MapContainer: FunctionComponent<MapContainerProps> = ({
   }, [center, ref, zoom, map]);
 
   useEffect(() => {
-    files.forEach(({ data, color }) => {
+    entities?.forEach(({ coordinates, color }) => {
       new google.maps.Polyline({
         geodesic: true,
         map,
-        path: data?.map((row) => ({
+        path: coordinates?.map((row) => ({
           lat: Number(row.latitude),
           lng: Number(row.longitude),
         })),
@@ -50,20 +50,20 @@ const MapContainer: FunctionComponent<MapContainerProps> = ({
         strokeWeight: 2,
       });
     });
-  }, [files, map]);
+  }, [entities, map]);
 
   return <div ref={ref} id="map" />;
 };
 
 interface MapProps {
-  files: IFile[];
+  entities: IEntity[];
 }
 
-const Map: FunctionComponent<MapProps> = ({ files }) => {
+const Map: FunctionComponent<MapProps> = ({ entities }) => {
   const NEXT_PUBLIC_GOOGLE_API_KEY = process.env.NEXT_PUBLIC_GOOGLE_API_KEY;
   const center = {
-    lat: Number(files[0]?.data?.[0].latitude),
-    lng: Number(files[0]?.data?.[0].longitude),
+    lat: Number(entities[0]?.coordinates?.[0].latitude),
+    lng: Number(entities[0]?.coordinates?.[0].longitude),
   };
 
   if (!NEXT_PUBLIC_GOOGLE_API_KEY) {
@@ -72,7 +72,7 @@ const Map: FunctionComponent<MapProps> = ({ files }) => {
 
   return (
     <Wrapper apiKey={NEXT_PUBLIC_GOOGLE_API_KEY}>
-      <MapContainer center={center} zoom={14} files={files} />
+      <MapWrapper center={center} zoom={14} entities={entities} />
     </Wrapper>
   );
 };

diff --git a/components/MapContainer/MapContainer.tsx b/components/MapContainer/MapContainer.tsx
@@ -0,0 +1,46 @@
+import { Grid, List, Paper, Typography } from "@mui/material";
+import { Fragment, FunctionComponent } from "react";
+import { useAppSelector } from "../../config/hooks";
+import { selectSession } from "../../features/sessions/slice";
+import CoordinatesList from "../CoordinatesList/CoordinatesList";
+import Map from "../Map/Map";
+
+const MapContainer: FunctionComponent = () => {
+  const session = useAppSelector(selectSession);
+
+  return (
+    <Grid container spacing={1} sx={{ my: 2 }}>
+      <Grid item xs={8}>
+        <Paper>
+          <Map entities={session?.entities} />
+        </Paper>
+      </Grid>
+      <Grid item xs={4}>
+        {session?.entities?.length === 0 ? (
+          <Typography component="h3" variant="h3" sx={{ m: 1 }}>
+            No entities found.
+          </Typography>
+        ) : (
+          <Fragment>
+            <Typography
+              component="h2"
+              variant="h2"
+              sx={{ m: 1, fontWeight: "bold" }}
+            >
+              Entities list
+            </Typography>
+            <Paper>
+              <List>
+                {session?.entities?.map((entity, fileIndex) => (
+                  <CoordinatesList entity={entity} key={`file-${fileIndex}`} />
+                ))}
+              </List>
+            </Paper>
+          </Fragment>
+        )}
+      </Grid>
+    </Grid>
+  );
+};
+
+export default MapContainer;
diff --git a/components/ModeSelector/ModeSelector.tsx b/components/ModeSelector/ModeSelector.tsx
@@ -2,17 +2,17 @@ import { Button, Container, Paper, Stack, Typography } from "@mui/material";
 import { useRouter } from "next/router";
 import { Fragment, FunctionComponent } from "react";
 import { useAppDispatch } from "../../config/hooks";
-import { create } from "../../features/sessions/slice";
+import { createSession } from "../../features/sessions/slice";
 import SessionService from "../../services/SessionService";
 import Link from "../Link/Link";
 
 const ModeSelector: FunctionComponent = () => {
   const dispatch = useAppDispatch();
   const router = useRouter();
 
-  const createSession = async () => {
+  const handleDynamicButtonClick = async () => {
     const id = await SessionService.create();
-    dispatch(create(id));
+    dispatch(createSession(id));
     router.push(`/dynamic?sessionId=${id}`);
   };
 
@@ -31,7 +31,7 @@ const ModeSelector: FunctionComponent = () => {
           />
           <ModeCard
             href="/dynamic"
-            onButtonClick={createSession}
+            onButtonClick={handleDynamicButtonClick}
             buttonText="Dynamic"
             description="A session will begin and you can send coordinates via API to display on map."
           />

diff --git a/config/store.ts b/config/store.ts
@@ -1,10 +1,9 @@
 import { Action, configureStore, ThunkAction } from "@reduxjs/toolkit";
-import filesReducer from "../features/files/slice";
 import sessionReducer from "../features/sessions/slice";
 
 export function makeStore() {
   return configureStore({
-    reducer: { files: filesReducer, session: sessionReducer },
+    reducer: { session: sessionReducer },
   });
 }
 

diff --git a/features/files/slice.ts b/features/files/slice.ts