fix(app): retains group toggle open status

.changeset/twelve-ducks-rhyme.md

@@ -0,0 +1,5 @@
+---
+"@viron/app": minor
+---
+
+retains group toggle open status

packages/app/src/hooks/endpoint.ts

@@ -28,6 +28,7 @@ import {
   useEndpointListUngroupedGlobalStateValue,
   useEndpointGroupListGlobalStateSet,
   useEndpointGroupListSortedGlobalStateValue,
+  useEndpointGroupToggleState,
 } from '~/store';
 import {
   Endpoint,
@@ -922,3 +923,28 @@ export const useEndpoint = (): UseEndpointReturn => {
   );
   return ret;
 };
+
+export const useEndpointGroupToggle = (id: string) => {
+  const [endpointGroups, setEndpointGroups] = useEndpointGroupToggleState();
+
+  const isOpenToggle =
+    endpointGroups.find((group) => group.id === id)?.isOpenToggle ?? false;
+
+  const setIsOpenToggle = () => {
+    setEndpointGroups((groups) => {
+      const index = groups.findIndex((group) => group.id === id);
+
+      if (index === -1) {
+        return groups;
+      }
+
+      return groups.map((group, i) =>
+        i === index
+          ? { ...group, isOpenToggle: group.isOpenToggle !== true }
+          : group
+      );
+    });
+  };
+
+  return { isOpenToggle, setIsOpenToggle };
+};

packages/app/src/pages/dashboard/endpoints/_/body/index.tsx

@@ -7,7 +7,7 @@ import Head from '~/components/head';
 import ChevronDownIcon from '~/components/icon/chevronDown/outline';
 import ChevronRightIcon from '~/components/icon/chevronRight/outline';
 import PlusIcon from '~/components/icon/plus/outline';
-import { useEndpoint } from '~/hooks/endpoint';
+import { useEndpoint, useEndpointGroupToggle } from '~/hooks/endpoint';
 import { Trans, useTranslation } from '~/hooks/i18n';
 import { Props as LayoutProps } from '~/layouts/';
 import Modal, { useModal } from '~/portals/modal';
@@ -143,12 +143,12 @@ type GroupProps = {
   list: Endpoint[];
 };
 const Group: React.FC<GroupProps> = ({ group, list }) => {
-  const [isOpened, setIsOpened] = useState<boolean>(!!list.length);
+  const { isOpenToggle, setIsOpenToggle } = useEndpointGroupToggle(group.id);
   const handleToggleClick = () => {
-    setIsOpened((currVal) => !currVal);
+    setIsOpenToggle();
   };
 
-  const ToggleIcon = isOpened ? ChevronDownIcon : ChevronRightIcon;
+  const ToggleIcon = isOpenToggle ? ChevronDownIcon : ChevronRightIcon;
 
   return (
     <div>
@@ -177,7 +177,7 @@ const Group: React.FC<GroupProps> = ({ group, list }) => {
         className={classnames(
           'grid grid-cols-1 @[740px]:grid-cols-2 @[995px]:grid-cols-3 gap-6 mt-2 py-2',
           {
-            hidden: !isOpened,
+            hidden: !isOpenToggle,
           }
         )}
       >

packages/app/src/store/index.ts

@@ -102,3 +102,6 @@ export const useEndpointGroupListItemGlobalStateValue = (
 export const useEndpointGroupListItemGlobalStateSet = (
   params: Parameters<typeof endpointGroupListItemSelector>[0]
 ) => useGlobalStateSet(endpointGroupListItemSelector(params));
+
+export const useEndpointGroupToggleState = () =>
+  useGlobalState(endpointGroupListAtom);

packages/app/src/types/index.ts

@@ -31,6 +31,7 @@ export type EndpointGroup = {
   name: string;
   description?: string;
   priority?: number;
+  isOpenToggle?: boolean;
 };
 
 export type EndpointID = string;