From 26d371307a6637b0363c32d81d54ee5e792feae6 Mon Sep 17 00:00:00 2001
From: itsvick <vivek_kasture@techjoomla.com>
Date: Thu, 5 Dec 2024 17:35:34 +0530
Subject: [PATCH] Issue #PS-0000 fix: Updated course-hierarchy

---
 src/pages/course-hierarchy/[identifier].tsx | 95 ++++++++++++---------
 1 file changed, 54 insertions(+), 41 deletions(-)

diff --git a/src/pages/course-hierarchy/[identifier].tsx b/src/pages/course-hierarchy/[identifier].tsx
index 3e75207..3b23c15 100644
--- a/src/pages/course-hierarchy/[identifier].tsx
+++ b/src/pages/course-hierarchy/[identifier].tsx
@@ -16,56 +16,69 @@ import { serverSideTranslations } from 'next-i18next/serverSideTranslations';
 import ResourceCard from '@/components/ResourceCard';
 
 const RecursiveAccordion = ({ data }: { data: any[] }) => {
-  let router = useRouter();
+  const router = useRouter();
 
   const renderAccordion = (nodes: any[], level = 0) => {
-    return nodes.map((node, index) => (
-      <Box key={`${node.name}-${index}`} sx={{ marginBottom: '16px' }}>
-        {level === 0 ? (
-          <>
-            {/* Render level 0 name as heading */}
-            <Typography
-              variant="h1"
-              sx={{
-                marginBottom: '0.75rem',
-                fontWeight: 'bold',
-                borderBottom: '1px solid #ddd',
-                paddingBottom: '4px',
-                paddingLeft: '4px'
-              }}
-            >
-              {node.name}
-            </Typography>
-            {/* Render children as accordions */}
-            {node.children && renderAccordion(node.children, level + 1)}
-          </>
-        ) : node.contentType === 'Resource' ? (
-          <Grid container>
-            <Grid item xs={6} md={4} lg={3} sx={{ mt: 2 }}>
-              <ResourceCard title={node?.name} resource={node?.resourceType} identifier={node?.identifier} mimeType={node?.mimeType} />
-            </Grid>
-          </Grid>
+    const resourceNodes = nodes.filter(node => node.contentType === 'Resource');
+    const nonResourceNodes = nodes.filter(node => node.contentType !== 'Resource');
 
-        ) : (
-          <Accordion sx={{ marginLeft: `${(level - 1) * 2}px` }}>
-            <AccordionSummary expandIcon={<ExpandMoreIcon />}>
-              <Typography variant="body1" fontWeight={600}>
-                {node?.name}
-              </Typography>
-            </AccordionSummary>
-            <AccordionDetails>
-              {/* Recursively render children */}
-              {node?.children && renderAccordion(node?.children, level + 1)}
-            </AccordionDetails>
-          </Accordion>
+    return (
+      <>
+        {resourceNodes.length > 0 && (
+          <Grid container spacing={2} sx={{ marginBottom: '16px' }}>
+            {resourceNodes.map((node, index) => (
+              <Grid item xs={6} md={4} lg={3} key={`${node.name}-${index}`}>
+                <ResourceCard
+                  title={node?.name}
+                  resource={node?.resourceType}
+                  identifier={node?.identifier}
+                  mimeType={node?.mimeType}
+                />
+              </Grid>
+            ))}
+          </Grid>
         )}
-      </Box>
-    ));
+
+        {nonResourceNodes.map((node, index) => (
+          <Box key={`${node.name}-${index}`} sx={{ marginBottom: '16px' }}>
+            {level === 0 ? (
+              <>
+                <Typography
+                  variant="h1"
+                  sx={{
+                    marginBottom: '0.75rem',
+                    fontWeight: 'bold',
+                    borderBottom: '1px solid #ddd',
+                    paddingBottom: '4px',
+                    paddingLeft: '4px',
+                  }}
+                >
+                  {node.name}
+                </Typography>
+                {node.children && renderAccordion(node.children, level + 1)}
+              </>
+            ) : (
+              <Accordion sx={{ marginLeft: `${(level - 1) * 2}px` }}>
+                <AccordionSummary expandIcon={<ExpandMoreIcon />}>
+                  <Typography variant="body1" fontWeight={600}>
+                    {node?.name}
+                  </Typography>
+                </AccordionSummary>
+                <AccordionDetails>
+                  {node?.children && renderAccordion(node?.children, level + 1)}
+                </AccordionDetails>
+              </Accordion>
+            )}
+          </Box>
+        ))}
+      </>
+    );
   };
 
   return <Box>{renderAccordion(data)}</Box>;
 };
 
+
 export default function CourseHierarchy() {
   const router = useRouter();
   const [doId, setDoId] = useState<string | null>(null);