Reusing ListContainer rather than extending it 🔁🔁

- adding a readOnly parameter for items that can be edited such as assigned scenarios/scenes - adjust styles so can have two ListContainers on the page - formatting code
UoaWDCC · Sep 25, 2023 · 02739fc · 02739fc
1 parent cee0bf8
commit 02739fc
Show file tree

Hide file tree

Showing 4 changed files with 38 additions and 90 deletions.
diff --git a/frontend/src/components/ListContainer.js b/frontend/src/components/ListContainer.js
@@ -43,7 +43,6 @@ import useStyles from "./component.styles";
  */
 export default function ListContainer({
   data, // could be scenarios or scenes data
-  assignedScenarios,
   onItemSelected,
   onItemDoubleClick,
   wide,
@@ -52,11 +51,18 @@ export default function ListContainer({
   sceneSelectionPage,
   scenarioId,
   invalidNameId,
+  readOnly, // for scenes/scenarios that can't be edited/deleted by user
 }) {
   const classes = useStyles();
   const [selected, setSelected] = useState();
   const columns = wide ? 5 : 4;
 
+  if (readOnly) {
+    data = data.map((item) => {
+      return { ...item, isAssigned: true };
+    });
+  }
+
   /** Function which executes when an image in the image list is clicked. */
   const onItemClick = (event, item) => {
     if (event.detail === 2) {
@@ -80,8 +86,6 @@ export default function ListContainer({
           wide ? styles.scenarioListContainerWide : styles.scenarioListContainer
         }
       >
-        {!sceneSelectionPage && <h1>Created scenarios</h1>}
-
         <ImageList rowHeight={210} cols={columns} gap={30}>
           {addCard ? (
             <ImageListItem
@@ -93,6 +97,7 @@ export default function ListContainer({
               <DashedCard onClick={addCard} />
             </ImageListItem>
           ) : null}
+
           {data && data.length > 0
             ? data.map((item) => (
                 <ImageListItem
@@ -148,83 +153,6 @@ export default function ListContainer({
               ))
             : null}
         </ImageList>
-
-        {assignedScenarios ? (
-          <>
-            {!sceneSelectionPage && <h1>Assigned scenarios</h1>}
-
-            <ImageList rowHeight={210} cols={columns} gap={30}>
-              {addCard ? (
-                <ImageListItem
-                  className={classes.listContainerItem}
-                  key={-1}
-                  cols={1}
-                  height={200}
-                >
-                  <DashedCard onClick={addCard} />
-                </ImageListItem>
-              ) : null}
-
-              {assignedScenarios && assignedScenarios.length > 0
-                ? assignedScenarios.map(({ _id, name }) => (
-                    <ImageListItem
-                      className={classes.listContainerItem}
-                      key={_id}
-                      cols={1}
-                      height={200}
-                      onClick={(event) =>
-                        onItemClick(event, { _id, isAssigned: true })
-                      }
-                      onContextMenu={() =>
-                        onItemRightClick({ _id, isAssigned: true })
-                      }
-                    >
-                      <div
-                        className={
-                          wide ? styles.imageListItemWide : styles.imageListItem
-                        }
-                      >
-                        <Box
-                          height={160}
-                          border={5}
-                          borderRadius={10}
-                          borderColor={_id === selected ? "#035084" : "#747474"}
-                          overflow="hidden"
-                          textAlign="center"
-                          sx={{
-                            background: "#f1f1f1",
-                            "&:hover": {
-                              background: "#cccccc",
-                            },
-                          }}
-                        >
-                          {sceneSelectionPage ? (
-                            <Thumbnail
-                              url={`${process.env.PUBLIC_URL}/play/${scenarioId}/${_id}`}
-                            />
-                          ) : (
-                            <Thumbnail
-                              url={`${process.env.PUBLIC_URL}/play/${_id}`}
-                            />
-                          )}
-                        </Box>
-                        <input
-                          className={styles.text}
-                          defaultValue={name}
-                          onBlur={onItemBlur}
-                          key={_id}
-                        />
-                      </div>
-
-                      {invalidNameId === _id && (
-                        <p1 className="nullNameWarning">invalid null name</p1>
-                      )}
-                    </ImageListItem>
-                  ))
-                : null}
-            </ImageList>
-          </>
-        ) : null}
       </div>
     </>
   );

diff --git a/frontend/src/containers/pages/ScenarioSelectionPage.js b/frontend/src/containers/pages/ScenarioSelectionPage.js
@@ -1,13 +1,15 @@
 import React, { useContext, useEffect, useState } from "react";
 import { useHistory } from "react-router-dom";
+import "styling/ScenarioSelectionPage.module.scss";
+
 import MenuItem from "@material-ui/core/MenuItem";
-import ContextMenu from "../../components/ContextMenu";
-import SideBar from "../../components/SideBar";
-import ListContainer from "../../components/ListContainer";
-import ScreenContainer from "../../components/ScreenContainer";
-import ScenarioContext from "../../context/ScenarioContext";
-import { usePut, useDelete } from "../../hooks/crudHooks";
-import AuthenticationContext from "../../context/AuthenticationContext";
+import ContextMenu from "components/ContextMenu";
+import SideBar from "components/SideBar";
+import ListContainer from "components/ListContainer";
+import ScreenContainer from "components/ScreenContainer";
+import ScenarioContext from "context/ScenarioContext";
+import { usePut, useDelete } from "hooks/crudHooks";
+import AuthenticationContext from "context/AuthenticationContext";
 import AccessLevel from "../../enums/route.access.level";
 
 /**
@@ -132,14 +134,29 @@ export default function ScenarioSelectionPage({ data = null }) {
             ""
           )}
         </ContextMenu>
+
+        <h1>Created scenarios</h1>
         <ListContainer
           data={data || scenarios}
-          assignedScenarios={assignedScenarios || []}
           onItemSelected={setCurrentScenario}
           onItemDoubleClick={editScenario}
           onItemBlur={changeScenarioName}
           invalidNameId={invalidNameId}
         />
+
+        <h1>Assigned scenarios</h1>
+        {assignedScenarios && assignedScenarios.length ? (
+          <ListContainer
+            data={assignedScenarios || []}
+            onItemSelected={setCurrentScenario}
+            onItemDoubleClick={() => {}}
+            onItemBlur={() => {}}
+            invalidNameId={invalidNameId}
+            readOnly
+          />
+        ) : (
+          <p>You have no assigned scenarios</p>
+        )}
       </div>
     </ScreenContainer>
   );

diff --git a/frontend/src/styling/ListContainer.module.scss b/frontend/src/styling/ListContainer.module.scss
@@ -1,7 +1,7 @@
 .scenarioListContainer {
   width: 85vw;
-  height: 100vh;
-  overflow-y: scroll;
+  // height: 100vh;
+  overflow-y: auto;
   overflow-x: hidden;
   padding-right: 30px;
   padding-left: 30px;

diff --git a/frontend/src/styling/ScenarioSelectionPage.module.scss b/frontend/src/styling/ScenarioSelectionPage.module.scss
@@ -0,0 +1,3 @@
+h1 {
+    margin-left: 15px;
+}