list categories in accordions (#13)

* list categories in accordions
agile-learning-institute · Apr 23, 2024 · f8c277b · f8c277b
1 parent 9d48c88
commit f8c277b
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 67 deletions.
diff --git a/src/pages/Category.jsx b/src/pages/Category.jsx
@@ -1,32 +1,24 @@
-import { useState } from "react";
 import {
   Box,
   Button,
-  FormControl,
-  InputLabel,
-  MenuItem,
-  Select,
   Typography,
+  Accordion,
+  AccordionSummary,
+  AccordionDetails,
 } from "@mui/material";
 import { mockCategories } from "../mockdata/mockdata.js";
 import TopicItem from "../ui/TopicItem.jsx";
 import { useNavigate } from "react-router-dom";
 import { useTheme } from "@emotion/react";
 import { useMockTopics } from "../context/MockTopicsContext.jsx";
+import { ExpandMore } from "@mui/icons-material";
 
 function Category() {
-  const [category, setCategory] = useState("");
   const { state: mockTopics } = useMockTopics();
 
-  const currTopics = mockTopics.filter((topic) => {
-    return topic.Category === category;
-  });
   const navigate = useNavigate();
   const theme = useTheme();
 
-  function handleCategoryChange(e) {
-    setCategory(e.target.value);
-  }
   return (
     <Box>
       <Typography
@@ -50,59 +42,27 @@ function Category() {
         Add Topic
       </Button>
 
-      <div
-        style={{
-          display: "flex",
-          flexDirection: "column",
-          justifyContent: "center",
-          alignItems: "center",
-          gap: "1.5rem",
-        }}
-      >
-        <FormControl fullWidth>
-          {/* Selection for Category/Path */}
-          <InputLabel id="demo-simple-select-label"> Category</InputLabel>
-          <Select
-            labelId="demo-simple-select-label"
-            id="demo-simple-select"
-            value={category}
-            label="Category"
-            onChange={handleCategoryChange}
-          >
-            {mockCategories.map((cat, i) => (
-              <MenuItem key={i} value={cat}>
-                {cat}
-              </MenuItem>
-            ))}
-          </Select>
-        </FormControl>
-      </div>
-      {/* Conditionally render topics*/}
-      {category && (
-        <div
-          key={currTopics.length}
-          style={{
-            display: "flex",
-            flexDirection: "column",
-            alignItems: "center",
-          }}
-        >
-          <Typography
-            variant="h6"
-            color="initial"
-            sx={{ marginBottom: "0.5rem", marginTop: "1rem" }}
+      {/* Accordions */}
+
+      {mockCategories.map((cat) => (
+        <Accordion key={cat}>
+          <AccordionSummary
+            expandIcon={<ExpandMore />}
+            aria-label="Expand"
+            aria-controls="-content"
+            id="-header"
           >
-            Topics:
-          </Typography>
-          {currTopics?.length ? (
-            currTopics.map((topic) => (
-              <TopicItem isDraggable={false} key={topic.Id} topic={topic} />
-            ))
-          ) : (
-            <Typography>No Topics to Display</Typography>
-          )}
-        </div>
-      )}
+            <Typography>{cat}</Typography>
+          </AccordionSummary>
+          <AccordionDetails sx={{ backgroundColor: "#fff" }}>
+            {mockTopics
+              .filter((topic) => topic.Category === cat)
+              .map((topic) => (
+                <TopicItem isDraggable={false} key={topic.Id} topic={topic} />
+              ))}
+          </AccordionDetails>
+        </Accordion>
+      ))}
     </Box>
   );
 }

diff --git a/src/pages/UpdateTopic.jsx b/src/pages/UpdateTopic.jsx
@@ -204,7 +204,8 @@ function UpdateTopic() {
                 <Button
                   onClick={() => navigate(`/topic/skills/${topicId}/${i}`)}
                   size="small"
-                  sx={{ ml: 2 }}
+                  sx={{ ml: 2, flexShrink: 0 }}
+
                 >
                   Details
                 </Button>
@@ -268,7 +269,7 @@ function UpdateTopic() {
                   navigate(`/topic/resource/${topicId}/${res.Name}`)
                 }
                 size="small"
-                sx={{ ml: 2 }}
+                sx={{ ml: 2, flexShrink: 0 }}
               >
                 Details
               </Button>

diff --git a/src/ui/TopicItem.jsx b/src/ui/TopicItem.jsx
@@ -19,6 +19,7 @@ function TopicItem({ topic, isDraggable = true }) {
         display: "flex",
         width: "100%",
         justifyContent: "space-between",
+        alignItems: "center",
         maxWidth: {
           md: "70%",
           lg: "60%",
@@ -31,7 +32,7 @@ function TopicItem({ topic, isDraggable = true }) {
       <div key={topic.Id} style={{ display: "flex", alignItems: "center" }}>
         {isDraggable && <DragHandle sx={{ ml: "8px", mr: "18px" }} />} {topic.Name}
       </div>
-      <Button onClick={() => navigate(`/topic/${topic.Id}`)} size="small">
+      <Button onClick={() => navigate(`/topic/${topic.Id}`)} size="small" sx={{height: "30px", marginX: "2px"}}>
         EDIT
       </Button>
     </Typography>