MPDX-8408 Filter Panel User Options (#1160)

* add useUserPreference()

* Make PGA Report filters always show like angular

Author: caleballdrin

pages/accountLists/[accountListId]/contacts/ContactsWrapper.tsx

@@ -8,6 +8,7 @@ import {
   ContactFilterSetInput,
   TaskFilterSetInput,
 } from 'src/graphql/types.generated';
+import { useUserPreference } from 'src/hooks/useUserPreference';
 import { sanitizeFilters } from 'src/lib/sanitizeFilters';
 import { getQueryParam } from 'src/utils/queryParam';
 
@@ -76,7 +77,10 @@ export const ContactsWrapper: React.FC<Props> = ({
   const [searchTerm, setSearchTerm] = useState(
     getQueryParam(query, 'searchTerm') ?? '',
   );
-  const [filterPanelOpen, setFilterPanelOpen] = useState(true);
+  const [filterPanelOpen, setFilterPanelOpen] = useUserPreference({
+    key: 'contact_filters_collapse',
+    defaultValue: false,
+  });
 
   // Only allow the ids filter in map view, and remove the ids filter in other views
   const activeFilters = useMemo(() => {

pages/accountLists/[accountListId]/reports/partnerGivingAnalysis/[[...contactId]].page.test.tsx

@@ -115,9 +115,8 @@ describe('partnerGivingAnalysis page', () => {
   });
 
   it('renders filters panel', async () => {
-    const { getByRole, findByRole } = render(<TestingComponent />);
+    const { findByRole } = render(<TestingComponent />);
 
-    userEvent.click(getByRole('img', { name: 'Toggle Filter Panel' }));
     expect(await findByRole('heading', { name: 'Filter' })).toBeInTheDocument();
   });
 
@@ -128,11 +127,11 @@ describe('partnerGivingAnalysis page', () => {
 
     const leftPanel = getByTestId('SidePanelsLayoutLeftPanel');
 
-    userEvent.click(getByRole('button', { name: 'Toggle Filter Panel' }));
-    expect(leftPanel).toHaveStyle('transform: none');
-
     userEvent.click(await findByTestId('FilterPanelClose'));
     expect(leftPanel).toHaveStyle('transform: translate(-100%)');
+
+    userEvent.click(getByRole('button', { name: 'Toggle Filter Panel' }));
+    expect(leftPanel).toHaveStyle('transform: none');
   });
 
   it('changes the URL when a contact is selected', async () => {
@@ -162,7 +161,6 @@ describe('partnerGivingAnalysis page', () => {
     );
     const searchBar = getByPlaceholderText('Search Contacts');
     userEvent.type(searchBar, 'John');
-    userEvent.click(getByRole('button', { name: 'Toggle Filter Panel' }));
     userEvent.click(
       await findByRole('combobox', { name: 'Designation Account' }),
     );

pages/accountLists/[accountListId]/reports/partnerGivingAnalysis/[[...contactId]].page.tsx

@@ -41,7 +41,7 @@ const PartnerGivingAnalysisReportPage: React.FC = () => {
   const { t } = useTranslation();
   const accountListId = useAccountListId();
   const { appName } = useGetAppSettings();
-  const [panelOpen, setPanelOpen] = useState<Panel | null>(null);
+  const [panelOpen, setPanelOpen] = useState<Panel | null>(Panel.Filters);
   const reportRef = useRef<PartnerGivingAnalysisReportRef>(null);
 
   const router = useRouter();

pages/accountLists/[accountListId]/tasks/[[...contactId]].page.tsx

@@ -29,6 +29,7 @@ import { useAccountListId } from 'src/hooks/useAccountListId';
 import useGetAppSettings from 'src/hooks/useGetAppSettings';
 import { useMassSelection } from 'src/hooks/useMassSelection';
 import useTaskModal from 'src/hooks/useTaskModal';
+import { useUserPreference } from 'src/hooks/useUserPreference';
 import theme from 'src/theme';
 import {
   TaskFilterTabsTypes,
@@ -114,7 +115,10 @@ const TasksPage: React.FC = () => {
     setContactId: setContactFocus,
   } = useTasksContactContext();
   const contactDetailsOpen = !!contactDetailsId;
-  const [filterPanelOpen, setFilterPanelOpen] = useState(true);
+  const [filterPanelOpen, setFilterPanelOpen] = useUserPreference({
+    key: 'tasks_filters_collapse',
+    defaultValue: false,
+  });
 
   //#region Filters
 

src/hooks/useUserPreference.test.tsx

@@ -18,6 +18,7 @@ const mutationSpy = jest.fn();
 interface WrapperProps {
   cached?: boolean;
   json?: boolean;
+  invalidJson?: boolean;
 }
 
 /**
@@ -26,7 +27,7 @@ interface WrapperProps {
  * The component returned from this function can be passed as the `wrapper` option to `renderHook`.
  **/
 const makeWrapper = (props: WrapperProps = {}) => {
-  const { cached = true, json = false } = props;
+  const { cached = true, json = false, invalidJson = false } = props;
 
   const cache = createCache();
   if (cached) {
@@ -52,7 +53,11 @@ const makeWrapper = (props: WrapperProps = {}) => {
         UserOption: {
           userOption: {
             key,
-            value: json ? '["initial"]' : 'initial',
+            value: json
+              ? invalidJson
+                ? 'malformed JSON'
+                : '["initial"]'
+              : 'initial',
           },
         },
         UpdateUserOption: {
@@ -152,4 +157,19 @@ describe('useUserPreference', () => {
       value: '["changed"]',
     });
   });
+
+  it('uses the default value when json.parse errors', async () => {
+    const { result, waitForNextUpdate } = renderHook(
+      () => useUserPreference({ key, defaultValue: [defaultValue] }),
+      {
+        wrapper: makeWrapper({ cached: true, json: true, invalidJson: true }),
+      },
+    );
+
+    expect(result.current[0]).toEqual(['cached']);
+
+    await waitForNextUpdate();
+
+    expect(result.current[0]).toEqual([defaultValue]);
+  });
 });

src/hooks/useUserPreference.ts

@@ -42,11 +42,15 @@ export const useUserPreference = <T>({
     if (typeof defaultValue === 'string') {
       setValue((data.userOption.value ?? defaultValue) as T);
     } else {
-      setValue(
-        typeof data.userOption.value === 'string'
-          ? JSON.parse(data.userOption.value)
-          : defaultValue,
-      );
+      try {
+        setValue(
+          typeof data.userOption.value === 'string'
+            ? JSON.parse(data.userOption.value)
+            : defaultValue,
+        );
+      } catch {
+        setValue(defaultValue);
+      }
     }
   }, [data]);