From bcf614c5353a89dee49b0ff73cc6a57f0e786f8b Mon Sep 17 00:00:00 2001
From: Samuel Rowe <samuelrowe1999@gmail.com>
Date: Sun, 31 Jul 2022 12:48:37 +0530
Subject: [PATCH] feat(frontend): updated `Records` to use `useAccordionState`

 * Added `defaultOpen` prop.
---
 services/frontend/src/components/Records.tsx | 15 +++++++++------
 1 file changed, 9 insertions(+), 6 deletions(-)

diff --git a/services/frontend/src/components/Records.tsx b/services/frontend/src/components/Records.tsx
index a060873..41b63f6 100644
--- a/services/frontend/src/components/Records.tsx
+++ b/services/frontend/src/components/Records.tsx
@@ -15,8 +15,11 @@ import Record, { IFieldType } from "./Record";
 import { useFormikContext } from "formik";
 import lodash from "lodash";
 import IconButton from "@mui/joy/IconButton";
+import { useAccordionState } from "../hooks";
+import { useParams } from "react-router-dom";
 
 export interface IRecordsProps {
+  defaultOpen?: boolean;
   title: string;
   name: string;
   fields: (index: number) => IFieldType[];
@@ -93,6 +96,7 @@ const Records: FunctionComponent<IRecordsProps> = (
   props: IRecordsProps
 ): ReactElement => {
   const {
+    defaultOpen = false,
     title,
     name,
     fields,
@@ -103,14 +107,13 @@ const Records: FunctionComponent<IRecordsProps> = (
     renderBorder
   } = props;
 
-  const [open, setOpen] = useState(false);
-
   const formik = useFormikContext();
   const items = lodash.get(formik.values, name);
 
-  const handleToggle = useCallback(() => {
-    setOpen((open) => !open);
-  }, []);
+  const { uuid } = useParams<{ uuid: string }>();
+
+  const id = `${uuid}.${name}`;
+  const { open, toggle } = useAccordionState(id, defaultOpen);
 
   const handleNew = useCallback(() => {
     formik.setFieldValue(`${name}[${items.length}]`, newValue);
@@ -134,7 +137,7 @@ const Records: FunctionComponent<IRecordsProps> = (
 
   return (
     <Group empty={empty}>
-      <Top onClick={handleToggle}>
+      <Top onClick={toggle}>
         <GroupTitle>{title}</GroupTitle>
         <ExpandButton size="sm" variant="plain">
           {open && <ChevronUpIcon className="h-5 w-5" />}