Save expanded categories

microsoft · May 7, 2024 · 0ae19f3 · 0ae19f3
1 parent 8dbd82c
commit 0ae19f3
Show file tree

Hide file tree

Showing 3 changed files with 63 additions and 2 deletions.
diff --git a/react-common/components/controls/Accordion/Accordion.tsx b/react-common/components/controls/Accordion/Accordion.tsx
@@ -13,6 +13,7 @@ export interface AccordionItemProps extends ContainerProps {
     children?: [React.ReactElement<AccordionHeaderProps>, React.ReactElement<AccordionPanelProps>];
     noChevron?: boolean;
     itemId?: string;
+    onExpandToggled?: (expanded: boolean) => void;
 }
 
 export interface AccordionHeaderProps extends ContainerProps {
@@ -61,6 +62,7 @@ export const AccordionItem = (props: AccordionItemProps) => {
         role,
         noChevron,
         itemId,
+        onExpandToggled,
     } = props;
 
     const { expanded } = useAccordionState();
@@ -77,6 +79,7 @@ export const AccordionItem = (props: AccordionItemProps) => {
         else {
             dispatch(setExpanded(panelId));
         }
+        onExpandToggled?.(!isExpanded);
     }, [isExpanded]);
 
     return (

diff --git a/teachertool/src/components/CatalogOverlay.tsx b/teachertool/src/components/CatalogOverlay.tsx
@@ -15,6 +15,8 @@ import { FocusTrap } from "react-common/components/controls/FocusTrap";
 import { logError } from "../services/loggingService";
 import { ErrorCode } from "../types/errorCode";
 import css from "./styling/CatalogOverlay.module.scss";
+import { addExandedCatalogTagAsync, getExpandedCatalogTags, removeExpandedCatalogTagAsync } from "../services/storageService";
+import exp from "constants";
 
 interface CatalogHeaderProps {
     onClose: () => void;
@@ -125,12 +127,33 @@ const CatalogList: React.FC = () => {
         return `accordion-item-${tag}`;
     }
 
+    function onTagExpandToggled(tag: string, expanded: boolean) {
+        if (expanded) {
+            /* await */ addExandedCatalogTagAsync(tag);
+        } else {
+            /* await */ removeExpandedCatalogTagAsync(tag);
+        }
+    }
+
     const tags = Object.keys(criteriaGroupedByTag);
+    if (tags.length === 0) {
+        return null;
+    }
+
+    const expandedTags = getExpandedCatalogTags();
+
+    // If no tags are expanded, expand the first one.
+    if (expandedTags.length === 0) {
+        addExandedCatalogTagAsync(tags[0]);
+        expandedTags.push(tags[0]);
+    }
+
+    const expandedIds = expandedTags.map(t => getItemIdForTag(t));
     return (
-        <Accordion className={css["catalog-list"]} multiExpand={true} defaultExpandedIds={[getItemIdForTag(tags[0])]}>
+        <Accordion className={css["catalog-list"]} multiExpand={true} defaultExpandedIds={expandedIds}>
             {tags.map(tag => {
                 return (
-                    <Accordion.Item itemId={getItemIdForTag(tag)}>
+                    <Accordion.Item itemId={getItemIdForTag(tag)} onExpandToggled={expanded => onTagExpandToggled(tag, expanded)} key={getItemIdForTag(tag)}>
                         <Accordion.Header>{tag}</Accordion.Header>
                         <Accordion.Panel>
                             {criteriaGroupedByTag[tag].map(c => {

diff --git a/teachertool/src/services/storageService.ts b/teachertool/src/services/storageService.ts
@@ -11,6 +11,7 @@ const KEY_PREFIX = "teachertool";
 const AUTORUN_KEY = [KEY_PREFIX, "autorun"].join("/");
 const LAST_ACTIVE_CHECKLIST_KEY = [KEY_PREFIX, "lastActiveChecklist"].join("/");
 const SPLIT_POSITION_KEY = [KEY_PREFIX, "splitPosition"].join("/");
+const EXPANDED_CATALOG_TAGS_KEY = [KEY_PREFIX, "expandedCatalogTags"].join("/");
 
 function getValue(key: string, defaultValue?: string): string | undefined {
     return localStorage.getItem(key) || defaultValue;
@@ -192,3 +193,37 @@ export async function deleteChecklistAsync(name: string) {
         setLastActiveChecklistName("");
     }
 }
+
+export function getExpandedCatalogTags(): string[] {
+    try {
+        const tags = getValue(EXPANDED_CATALOG_TAGS_KEY);
+        return tags ? JSON.parse(tags) : [];
+    } catch (e) {
+        logError(ErrorCode.localStorageReadError, e);
+        return [];
+    }
+}
+
+export async function setExpandedCatalogTags(tags: string[]) {
+    try {
+        setValue(EXPANDED_CATALOG_TAGS_KEY, JSON.stringify(tags));
+    } catch (e) {
+        logError(ErrorCode.localStorageWriteError, e);
+    }
+}
+
+export async function addExandedCatalogTagAsync(tag: string) {
+    const expandedTags = getExpandedCatalogTags();
+    expandedTags.push(tag);
+    await setExpandedCatalogTags(expandedTags);
+}
+
+export async function removeExpandedCatalogTagAsync(tag: string) {
+    const expandedTags = getExpandedCatalogTags();
+    const index = expandedTags.indexOf(tag);
+    if (index !== -1) {
+        expandedTags.splice(index, 1);
+        await setExpandedCatalogTags(expandedTags);
+    }
+}
+