From 05495b9c54f7ab60d6f3cba92cadafed413aa2c4 Mon Sep 17 00:00:00 2001
From: Meijer <Annika.Meijer@gov.bc.ca>
Date: Thu, 12 Dec 2024 16:38:19 -0800
Subject: [PATCH] support accordion card

---
 app/src/features/support/SupportPage.tsx      |  9 ++-
 .../components/AccordionSupportCard.tsx}      | 56 ++++++++-----------
 2 files changed, 29 insertions(+), 36 deletions(-)
 rename app/src/{components/buttons/HelpAccordionMarkdown.tsx => features/support/components/AccordionSupportCard.tsx} (70%)

diff --git a/app/src/features/support/SupportPage.tsx b/app/src/features/support/SupportPage.tsx
index ca239b37c3..82a06a01f3 100644
--- a/app/src/features/support/SupportPage.tsx
+++ b/app/src/features/support/SupportPage.tsx
@@ -15,10 +15,11 @@ import Divider from '@mui/material/Divider';
 import Paper from '@mui/material/Paper';
 import Stack from '@mui/material/Stack';
 import Typography from '@mui/material/Typography';
+import AccordionSupportCard from 'features/support/components/AccordionSupportCard';
 import PageHeader from 'components/layout/PageHeader';
-import { AccordionStandardCard } from 'features/standards/view/components/AccordionStandardCard';
 import { ReactNode, useState } from 'react';
 import { StandardsToolbar } from '../standards/components/StandardsToolbar';
+import { MarkdownTypeNameEnum } from 'interfaces/useMarkdownApi.interface';
 
 // FAQ SECTIONS MAY NEED TO BE FORMATTED IN A DIFFERENT WAY, I DONT KNOW HOW BUT IM THINKING ABOUT IT
 
@@ -462,7 +463,7 @@ const SupportPage = () => {
 
               <Stack gap={2}>
                 {dataMap[currentView]?.map((item: IDataItem, index: number) => (
-                  <AccordionStandardCard
+                  <AccordionSupportCard
                     key={index}
                     label={item.label || 'No Label Provided'} // Provide a default value
                     subtitle={
@@ -472,8 +473,10 @@ const SupportPage = () => {
                         item.description
                       )
                     }
-                    ornament={item.unit ? <Box>{item.unit}</Box> : undefined}
                     colour={grey[100]}
+                    markdownType={
+                      MarkdownTypeNameEnum.PROJECTS_AND_SURVEYS
+                    }
                   />
                 )) || <Typography>No content available for this section.</Typography>}
               </Stack>
diff --git a/app/src/components/buttons/HelpAccordionMarkdown.tsx b/app/src/features/support/components/AccordionSupportCard.tsx
similarity index 70%
rename from app/src/components/buttons/HelpAccordionMarkdown.tsx
rename to app/src/features/support/components/AccordionSupportCard.tsx
index 75af0256ba..3f59f101c6 100644
--- a/app/src/components/buttons/HelpAccordionMarkdown.tsx
+++ b/app/src/features/support/components/AccordionSupportCard.tsx
@@ -1,17 +1,13 @@
-import { mdiPlusBoxOutline } from '@mdi/js';
-import { Icon } from '@mdi/react';
-import { Button } from '@mui/material';
-import { CustomMarkdown } from 'components/markdown/CustomMarkdown';
-import { useBiohubApi } from 'hooks/useBioHubApi';
-import { useDialogContext } from 'hooks/useContext';
-import { MarkdownTypeNameEnum } from 'interfaces/useMarkdownApi.interface';
-import { PropsWithChildren, useState } from 'react';
 import { mdiChevronDown, mdiChevronUp } from '@mdi/js';
+import { Icon } from '@mdi/react';
 import { Collapse } from '@mui/material';
 import Box from '@mui/material/Box';
 import Paper, { PaperProps } from '@mui/material/Paper';
 import Typography from '@mui/material/Typography';
-import React, { ReactElement } from 'react';
+import { CustomMarkdown } from 'components/markdown/CustomMarkdown';
+import { useBiohubApi } from 'hooks/useBioHubApi';
+import { MarkdownTypeNameEnum } from 'interfaces/useMarkdownApi.interface';
+import React, { PropsWithChildren, ReactElement, useState } from 'react';
 
 // Accordion Support Card Component
 interface IAccordionSupportCardProps extends PaperProps {
@@ -20,16 +16,22 @@ interface IAccordionSupportCardProps extends PaperProps {
   ornament?: ReactElement;
   colour: string;
   disableCollapse?: boolean;
+  onExpand?: () => void; // Added callback for expand action
 }
 
 export const AccordionSupportCard = (props: PropsWithChildren<IAccordionSupportCardProps>) => {
-  const { label, subtitle, children, colour, ornament, disableCollapse, ...paperProps } = props;
+  const { label, subtitle, children, colour, ornament, disableCollapse, onExpand, ...paperProps } = props;
   const [isCollapsed, setIsCollapsed] = useState(true);
   const expandable = (children || subtitle) && !disableCollapse;
 
   const handleHeaderClick = () => {
     if (expandable) {
-      setIsCollapsed(!isCollapsed);
+      const newCollapseState = !isCollapsed;
+      setIsCollapsed(newCollapseState);
+      if (onExpand && newCollapseState === false) {
+        // Trigger onExpand only when expanding
+        onExpand();
+      }
     }
   };
 
@@ -79,36 +81,24 @@ interface IHelpAccordionMarkdownProps {
 
 const HelpAccordionMarkdown = (props: PropsWithChildren<IHelpAccordionMarkdownProps>) => {
   const { markdownType, label, colour, subtitle } = props;
-  const dialogContext = useDialogContext();
+  const [markdownContent, setMarkdownContent] = useState<string | null>(null); // State for fetched content
   const biohubApi = useBiohubApi();
 
-  const createDialogConfig = (markdown: any) => ({
-    open: true,
-    dialogContent: <CustomMarkdown markdown={markdown.data} />,
-    hasSubmitted: markdown.participated,
-    onSubmit: async (score: number) => {
-      await biohubApi.markdown.insertScore({ markdownId: markdown.markdown_id, score });
-      dialogContext.setScoreDialog({ hasSubmitted: true });
-    },
-    onOk: () => {
-      dialogContext.setScoreDialog({ open: false });
-    }
-  });
-
-  // Open the markdown dialog
-  const handleOpenDialog = async () => {
+  const fetchMarkdownContent = async () => {
     const { markdown } = await biohubApi.markdown.getMarkdown({ typeName: markdownType });
-
     if (markdown) {
-      dialogContext.setScoreDialog(createDialogConfig(markdown));
+      setMarkdownContent(markdown.data);
     }
   };
 
   return (
-    <AccordionSupportCard label={label} colour={colour} subtitle={subtitle}>
-      <Button onClick={handleOpenDialog} startIcon={<Icon path={mdiPlusBoxOutline} size={1} />}>
-        Get Help
-      </Button>
+    <AccordionSupportCard
+      label={label}
+      colour={colour}
+      subtitle={subtitle}
+      onExpand={fetchMarkdownContent} // Trigger fetchMarkdownContent when expanding
+    >
+      {markdownContent ? <CustomMarkdown markdown={markdownContent} /> : <Typography>Loading content...</Typography>}
     </AccordionSupportCard>
   );
 };