Merge pull request #78 from topcoder-platform/TCA-443_persist-layout-in-localstorage

TCA-443 - persist layout selection in localstorage

Author: vas3a

client/src/templates/Challenges/classic/action-row.tsx

@@ -3,6 +3,7 @@ import { useTranslation } from 'react-i18next';
 
 import BreadCrumb from '../components/bread-crumb';
 import EditorTabs from './editor-tabs';
+import { DesktopLayoutPanels } from './use-desktop-layout-state';
 
 interface ActionRowProps {
   block: string;
@@ -14,7 +15,7 @@ interface ActionRowProps {
   showInstructions: boolean;
   showPreview: boolean;
   superBlock: string;
-  togglePane: (pane: string) => void;
+  togglePane: (pane: DesktopLayoutPanels) => void;
   showBreadcrumbs?: boolean;
 }
 
@@ -46,7 +47,7 @@ const ActionRow = ({
             className={
               showInstructions ? 'btn-tab-primary' : 'btn-tab-primary--outline'
             }
-            onClick={() => togglePane('showInstructions')}
+            onClick={() => togglePane(DesktopLayoutPanels.Instructions)}
           >
             {t('learn.editor-tabs.instructions')}
           </button>
@@ -57,7 +58,7 @@ const ActionRow = ({
           className={
             showConsole ? 'btn-tab-primary' : 'btn-tab-primary--outline'
           }
-          onClick={() => togglePane('showConsole')}
+          onClick={() => togglePane(DesktopLayoutPanels.Console)}
         >
           {t('learn.editor-tabs.console')}
         </button>
@@ -67,7 +68,7 @@ const ActionRow = ({
             className={
               showNotes ? 'btn-tab-primary' : 'btn-tab-primary--outline'
             }
-            onClick={() => togglePane('showNotes')}
+            onClick={() => togglePane(DesktopLayoutPanels.Notes)}
           >
             {t('learn.editor-tabs.notes')}
           </button>
@@ -78,7 +79,7 @@ const ActionRow = ({
             className={
               showPreview ? 'btn-tab-primary' : 'btn-tab-primary--outline'
             }
-            onClick={() => togglePane('showPreview')}
+            onClick={() => togglePane(DesktopLayoutPanels.Preview)}
           >
             {t('learn.editor-tabs.preview')}
           </button>

client/src/templates/Challenges/classic/desktop-layout.tsx

@@ -1,5 +1,5 @@
 import { first } from 'lodash-es';
-import React, { useState, ReactElement } from 'react';
+import React, { ReactElement } from 'react';
 import { ReflexContainer, ReflexSplitter, ReflexElement } from 'react-reflex';
 import { sortChallengeFiles } from '../../../../../utils/sort-challengefiles';
 import { GoogleTagManager } from '../../../analytics/google-tag-manater';
@@ -10,6 +10,7 @@ import {
   ResizeProps
 } from '../../../redux/prop-types';
 import ActionRow from './action-row';
+import { useDesktopLayoutState } from './use-desktop-layout-state';
 
 type Pane = { flex: number };
 
@@ -43,32 +44,10 @@ const reflexProps = {
 };
 
 const DesktopLayout = (props: DesktopLayoutProps): JSX.Element => {
-  const [showInstructions, setShowInstructions] = useState(true);
-  const [showNotes, setShowNotes] = useState(false);
-  const [showPreview, setShowPreview] = useState(true);
-  const [showConsole, setShowConsole] = useState(false);
-
-  const togglePane = (pane: string): void => {
-    switch (pane) {
-      case 'showInstructions':
-        setShowInstructions(!showInstructions);
-        break;
-      case 'showPreview':
-        setShowPreview(!showPreview);
-        break;
-      case 'showConsole':
-        setShowConsole(!showConsole);
-        break;
-      case 'showNotes':
-        setShowNotes(!showNotes);
-        break;
-      default:
-        setShowInstructions(false);
-        setShowConsole(false);
-        setShowPreview(false);
-        setShowNotes(false);
-    }
-  };
+  const {
+    layoutState: { showInstructions, showNotes, showPreview, showConsole },
+    togglePane
+  } = useDesktopLayoutState();
 
   const getChallengeFile = () => {
     const { challengeFiles } = props;

client/src/templates/Challenges/classic/use-desktop-layout-state.tsx

@@ -0,0 +1,62 @@
+import { useReducer } from 'react';
+
+const STORAGE_KEY = 'fcc:desktop:layout:state';
+
+export enum DesktopLayoutPanels {
+  Instructions = 'showInstructions',
+  Notes = 'showNotes',
+  Preview = 'showPreview',
+  Console = 'showConsole'
+}
+
+interface DesktopLayoutState {
+  [DesktopLayoutPanels.Instructions]: boolean;
+  [DesktopLayoutPanels.Notes]: boolean;
+  [DesktopLayoutPanels.Preview]: boolean;
+  [DesktopLayoutPanels.Console]: boolean;
+}
+
+const defaultLayoutState: DesktopLayoutState = {
+  [DesktopLayoutPanels.Instructions]: true,
+  [DesktopLayoutPanels.Notes]: false,
+  [DesktopLayoutPanels.Preview]: true,
+  [DesktopLayoutPanels.Console]: false
+};
+
+const readFromStorage = (
+  defaultState: DesktopLayoutState
+): DesktopLayoutState => {
+  const lsData = localStorage.getItem(STORAGE_KEY);
+
+  try {
+    return (JSON.parse(lsData ?? '') as DesktopLayoutState) || defaultState;
+  } catch {
+    return defaultState;
+  }
+};
+
+const layoutReducer = (
+  state: DesktopLayoutState,
+  panel: DesktopLayoutPanels
+) => {
+  const nextState = {
+    ...state,
+    [panel]: !state[panel]
+  };
+
+  localStorage.setItem(STORAGE_KEY, JSON.stringify(nextState));
+
+  return nextState;
+};
+
+export const useDesktopLayoutState = () => {
+  const [layoutState, dispatch] = useReducer(
+    layoutReducer,
+    readFromStorage(defaultLayoutState)
+  );
+
+  return {
+    layoutState,
+    togglePane: dispatch
+  };
+};