#8: Update track list to material UI style

lehnerpat · May 24, 2022 · f303911 · f303911
1 parent 6e4e467
commit f303911
Show file tree

Hide file tree

Showing 5 changed files with 102 additions and 83 deletions.
diff --git a/package.json b/package.json
@@ -5,6 +5,7 @@
   "dependencies": {
     "@emotion/react": "^11.9.0",
     "@emotion/styled": "^11.8.1",
+    "@mui/icons-material": "^5.8.0",
     "@mui/material": "^5.8.0",
     "@react-hook/resize-observer": "^1.2.5",
     "@testing-library/jest-dom": "^5.16.4",

diff --git a/src/common/components/LoadSaveFile.tsx b/src/common/components/LoadSaveFile.tsx
@@ -1,15 +1,11 @@
 import { FC } from "react";
-import styled from "@emotion/styled";
-import { Panel } from "./Panel";
 import { useLocation } from "wouter";
 import { PageRouting } from "../../page-routing";
 import { TrackLocalStorageService } from "../../track-models/TrackLocalStorageService";
 import { Tracks } from "../../track-models";
 import { useFileUpload } from "../hooks/useFileUpload";
-import Button from "@mui/material/Button";
-import Card from "@mui/material/Card";
-import Grid from "@mui/material/Grid";
-import Box from "@mui/material/Box";
+import { Button, Grid } from "@mui/material";
+import { TopLevelCard } from "./TopLevelCard";
 
 interface LoadSaveFileProps {
   onDownloadRequested?: () => string;
@@ -44,24 +40,22 @@ export const LoadSaveFile: FC<LoadSaveFileProps> = ({ onDownloadRequested }) =>
   };
 
   return (
-    <Box sx={{ padding: "0 1em" }}>
-      <Card raised sx={{ padding: "0.5em" }}>
-        <Grid container spacing={2}>
-          <Grid item xs>
-            <Button onClick={showUploadDialog} variant="contained" size="large" fullWidth>
-              Upload file...
+    <TopLevelCard>
+      <Grid container spacing={2} sx={{ padding: "0.5em" }}>
+        <Grid item xs>
+          <Button onClick={showUploadDialog} variant="contained" size="large" fullWidth>
+            Upload file...
+          </Button>
+        </Grid>
+        <Grid item xs>
+          {!!onDownloadRequested && (
+            <Button onClick={onDownloadButtonClicked} variant="contained" size="large" fullWidth>
+              Download current file...
             </Button>
-          </Grid>
-          <Grid item xs>
-            {!!onDownloadRequested && (
-              <Button onClick={onDownloadButtonClicked} variant="contained" size="large" fullWidth>
-                Download current file...
-              </Button>
-            )}
-          </Grid>
+          )}
         </Grid>
-        <HiddenFileInput />
-      </Card>
-    </Box>
+      </Grid>
+      <HiddenFileInput />
+    </TopLevelCard>
   );
 };
diff --git a/src/common/components/TopLevelCard.tsx b/src/common/components/TopLevelCard.tsx
@@ -0,0 +1,11 @@
+import { Card } from "@mui/material";
+import { FC, ReactNode } from "react";
+
+interface TopLevelCardProps {
+  children: ReactNode;
+}
+export const TopLevelCard: FC<TopLevelCardProps> = ({ children }) => (
+  <Card raised sx={{ margin: "1em 2em" }}>
+    {children}
+  </Card>
+);
diff --git a/src/pages/StartPage/IncludedTrackSelector.tsx b/src/pages/StartPage/IncludedTrackSelector.tsx
@@ -1,75 +1,81 @@
 import { FC, useState } from "react";
-import styled from "styled-components";
-import { Panel } from "../../common/components/Panel";
 import { IncludedData } from "../../included-data";
 import { Link } from "wouter";
 import { PageRouting } from "../../page-routing";
 import { TrackLocalStorageService } from "../../track-models/TrackLocalStorageService";
+import { List, ListItem, ListItemButton, ListItemText, Collapse, Divider, IconButton } from "@mui/material";
+import { ExpandLess, ExpandMore, Delete } from "@mui/icons-material";
+import { TopLevelCard } from "../../common/components/TopLevelCard";
 
 export const IncludedTrackSelector: FC = () => {
   const [localTracks, setLocalTracks] = useState(listLocalTracks());
+  const [isExampleTracksOpen, setExampleTracksOpen] = useState(true);
+  const [isLocalTracksOpen, setLocalTracksOpen] = useState(true);
 
   return (
-    <Panel>
-      <h3>Example tracks:</h3>
-      <ul>
-        {IncludedData.map((r) => (
-          <li key={r.uuid}>
-            <TrackLink href={PageRouting.viewTrackPage(r.uuid)}>{r.title}</TrackLink>
-          </li>
-        ))}
-      </ul>
-      {localTracks && localTracks.length > 0 && (
-        <>
-          <h3>Tracks saved in browser:</h3>
-          <ul>
-            {localTracks.map((r) => (
-              <li key={r.uuid}>
-                <TrackLink href={PageRouting.viewTrackPage(r.uuid)}>{r.title}</TrackLink>{" "}
-                <DeleteItemLink
-                  href="#"
-                  onClick={() => {
-                    TrackLocalStorageService.delete(r.uuid);
-                    setLocalTracks(listLocalTracks());
-                  }}
-                >
-                  (Delete this)
-                </DeleteItemLink>
-              </li>
-            ))}
-          </ul>
-        </>
-      )}
-    </Panel>
-  );
-};
-
-const TrackLink = styled(Link)`
-  &,
-  &:visited {
-    color: #ddd;
-  }
+    <>
+      <TopLevelCard>
+        <List>
+          <ListItemButton onClick={() => setExampleTracksOpen(!isExampleTracksOpen)}>
+            <ListItemText
+              primary="Example tracks"
+              primaryTypographyProps={{ fontSize: "130%", fontWeight: "medium" }}
+            />
+            {isExampleTracksOpen ? <ExpandLess /> : <ExpandMore />}
+          </ListItemButton>
+          <Collapse in={isExampleTracksOpen}>
+            <List component="div" disablePadding>
+              {IncludedData.map((r) => (
+                <ListItemButton component={Link} href={PageRouting.viewTrackPage(r.uuid)} key={r.uuid} sx={{ pl: 4 }}>
+                  <ListItemText primary={r.title} />
+                </ListItemButton>
+              ))}
+            </List>
+          </Collapse>
 
-  &:hover,
-  &:focus,
-  &:active {
-    color: white;
-  }
-`;
+          <Divider />
 
-const DeleteItemLink = styled.a`
-  &,
-  &:visited {
-    color: #bbb;
-    font-size: 80%;
-  }
-
-  &:hover,
-  &:focus,
-  &:active {
-    color: #ffbbbb;
-  }
-`;
+          <ListItemButton onClick={() => setLocalTracksOpen(!isLocalTracksOpen)}>
+            <ListItemText
+              primary="Tracks saved in browser"
+              primaryTypographyProps={{ fontSize: "130%", fontWeight: "medium" }}
+            />
+            {isLocalTracksOpen ? <ExpandLess /> : <ExpandMore />}
+          </ListItemButton>
+          <Collapse in={isLocalTracksOpen}>
+            <List component="div" disablePadding>
+              {localTracks && localTracks.length > 0 ? (
+                localTracks.map((r) => (
+                  <ListItem
+                    key={r.uuid}
+                    disablePadding
+                    secondaryAction={
+                      <IconButton
+                        edge="end"
+                        onClick={() => {
+                          TrackLocalStorageService.delete(r.uuid);
+                          setLocalTracks(listLocalTracks());
+                        }}
+                      >
+                        <Delete />
+                      </IconButton>
+                    }
+                  >
+                    <ListItemButton component={Link} href={PageRouting.viewTrackPage(r.uuid)} sx={{ pl: 4 }}>
+                      <ListItemText primary={r.title} />
+                    </ListItemButton>
+                  </ListItem>
+                ))
+              ) : (
+                <ListItemText primary="No local tracks" />
+              )}
+            </List>
+          </Collapse>
+        </List>
+      </TopLevelCard>
+    </>
+  );
+};
 
 function listLocalTracks() {
   return TrackLocalStorageService.getList();

diff --git a/yarn.lock b/yarn.lock
@@ -1550,6 +1550,13 @@
     prop-types "^15.8.1"
     react-is "^17.0.2"
 
+"@mui/icons-material@^5.8.0":
+  version "5.8.0"
+  resolved "https://registry.yarnpkg.com/@mui/icons-material/-/icons-material-5.8.0.tgz#c85768434bda885c64a8e4b9e222e73912244570"
+  integrity sha512-ScwLxa0q5VYV70Jfc60V/9VD0b9SvIeZ0Jddx2Dt2pBUFFO9vKdrbt9LYiT+4p21Au5NdYIb2XSHj46CLN1v3g==
+  dependencies:
+    "@babel/runtime" "^7.17.2"
+
 "@mui/material@^5.8.0":
   version "5.8.0"
   resolved "https://registry.yarnpkg.com/@mui/material/-/material-5.8.0.tgz#7451cecde57a24a9c407ec5122369240f5e7fae3"