Merge pull request #7 from benjaminpeuple/25-subcategories-handling-i…

…n-contributorscategory-analysisid update(CategoryCard): change logic for subcategories display
benjaminpeuple · May 3, 2024 · ae3e68e · ae3e68e
2 parents 5baa6c1 + e34a137
commit ae3e68e
Showing 1 changed file with 36 additions and 36 deletions.
diff --git a/src/sections/contributor/category-analysis/CategoryCard.tsx b/src/sections/contributor/category-analysis/CategoryCard.tsx
@@ -38,6 +38,12 @@ interface CardState {
   category?: EmissionCategory
   description?: string
   formattedEmissionAmount: string
+  subCategories?: SubCategory[]
+}
+
+interface SubCategory {
+  id: number
+  name: string
 }
 
 export const CategoryCard = ({
@@ -49,6 +55,7 @@ export const CategoryCard = ({
   const theme = useTheme()
   const [cardState, setCardState] = useState<CardState>({
     formattedEmissionAmount: "",
+    subCategories: [],
   })
   const [selectedIndex, setSelectedIndex] = useState(0)
 
@@ -65,6 +72,12 @@ export const CategoryCard = ({
       const relevantCategories = categoryId
         ? expandId([categoryId], indexes.categoryHierarchy)
         : []
+      const subCategories = relevantCategories
+        .map((subCatId) => ({
+          id: subCatId,
+          name: indexes.categories[subCatId].name,
+        }))
+        .filter((subCat) => subCat.id !== categoryId)
       const { totalCategoryEmissions } = tidy(
         allEmissions,
         filter((edp) => relevantCategories.includes(edp.categoryId)),
@@ -90,7 +103,13 @@ export const CategoryCard = ({
     setSelectedIndex(index)
   }
 
-  const { scope, category, description, formattedEmissionAmount } = cardState
+  const {
+    scope,
+    category,
+    description,
+    formattedEmissionAmount,
+    subCategories,
+  } = cardState
 
   return (
     <MainCard sx={{ padding: 0, ...sxProps }}>
@@ -155,41 +174,22 @@ export const CategoryCard = ({
           >
             Subcategories
           </Typography>
-          <List
-            component="nav"
-            sx={{
-              p: 0,
-              "& .MuiListItemIcon-root": {
-                minWidth: 32,
-                color: theme.palette.grey[500],
-              },
-            }}
-          >
-            <ListItemButton
-              selected={selectedIndex === 0}
-              onClick={() => handleListItemClick(0)}
-            >
-              <ListItemText primary="Road transportation" />
-            </ListItemButton>
-            <ListItemButton
-              selected={selectedIndex === 1}
-              onClick={() => handleListItemClick(1)}
-            >
-              <ListItemText primary="Road transportation" />
-            </ListItemButton>
-            <ListItemButton
-              selected={selectedIndex === 2}
-              onClick={() => handleListItemClick(2)}
-            >
-              <ListItemText primary="Road transportation" />
-            </ListItemButton>
-            <ListItemButton
-              selected={selectedIndex === 3}
-              onClick={() => handleListItemClick(3)}
-            >
-              <ListItemText primary="Road transportation" />
-            </ListItemButton>
-          </List>
+          {subCategories && subCategories.length > 0 ? (
+            <List component="nav">
+              {subCategories.map((subCat) => (
+                <ListItemButton
+                  key={subCat.id}
+                  onClick={() => console.log("Subcategory clicked", subCat)}
+                >
+                  <ListItemText primary={subCat.name} />
+                </ListItemButton>
+              ))}
+            </List>
+          ) : (
+            <Typography sx={{ fontStyle: "italic" }} color="textSecondary">
+              No subcategories found
+            </Typography>
+          )}
         </Box>
       </Stack>
     </MainCard>