DYN-6857-homepage-preferences

src/App.js

@@ -3,6 +3,7 @@ import { useState, useEffect } from 'react';
 import { IntlProvider } from 'react-intl';
 import { getMessagesForLocale } from './localization/localization.js';
 import { LayoutContainer } from './components/LayoutContainer.jsx';
+import { SettingsProvider } from './components/SettingsContext.jsx';
 
 function App() {
   const [locale, setLocale] = useState('en');
@@ -23,7 +24,9 @@ function App() {
 
   return (
     <IntlProvider locale={locale} messages={messages}>
-      <LayoutContainer id='homeContainer' />
+      <SettingsProvider>
+        <LayoutContainer id='homeContainer' />
+      </SettingsProvider>
     </IntlProvider>
   );
 }

src/components/MainContent.jsx

@@ -6,19 +6,35 @@ import { FormattedMessage } from 'react-intl';
 
 export function MainContent({ selectedSidebarItem }){
     const [isDisabled, setIsDisabled] = useState(false);
+    const [settings, setSettings] = useState(null);
 
     const setShowStartPageChanged = (showStartPage) => {
         setIsDisabled(!showStartPage);
     };
 
+    const setHomePageSettings = (settingsJson) => {
+        try{
+            if (settingsJson) {
+                const settingsObject = JSON.parse(settingsJson);
+                setSettings(settingsObject);
+            } else {
+                console.log(`Received null or empty settings`);
+            }
+        }catch(exeption){
+            console.log($`Failed to set the HomePage settings with the following error ${exception}`);
+        }
+    }
+
     useEffect(() => {
-        // Set the setShowStartPageChanged global function
+        // Set global functions
         window.setShowStartPageChanged = setShowStartPageChanged;
+        window.setHomePageSettings = setHomePageSettings;
 
         return () => {
             delete window.setShowStartPageChanged;
+            delete window.setHomePageSettings;
         };
-    }, [isDisabled]); 
+    }, [isDisabled, settings]); 
 
     return (
         <>
@@ -31,10 +47,10 @@ export function MainContent({ selectedSidebarItem }){
                 )}
 
                 <div className={`page-container ${selectedSidebarItem === 'Recent' ? '' : 'hidden'}`}>
-                    <RecentPage setIsDisabled={setIsDisabled} />
+                    <RecentPage setIsDisabled={setIsDisabled} recentPageViewMode={settings?.recentPageViewMode || "grid"} />
                 </div>
                 <div className={`page-container ${selectedSidebarItem === 'Samples' ? '' : 'hidden'}`}>
-                    <SamplesPage />
+                    <SamplesPage samplesViewMode={settings?.samplesViewMode || "grid"} />
                 </div>
                 <div className={`page-container ${selectedSidebarItem === 'Learning' ? '' : 'hidden'}`}>
                     <LearningPage />

src/components/Recent/CustomAuthorCellRenderer.jsx

@@ -15,8 +15,6 @@ export const CustomAuthorCellRenderer = ({ value, row }) => {
   const author = value;
   const isOldFormat = author === intl.formatMessage({ id: 'recent.item.old.format' });
 
-  console.log(author);
-  console.log(isOldFormat);
   return (
     <div className={styles["title-cell"]}>
         <p>{author}</p>

src/components/Recent/PageRecent.jsx

@@ -6,12 +6,15 @@ import { CustomLocationCellRenderer } from './CustomLocationCellRenderer.jsx';
 import { CustomAuthorCellRenderer } from "./CustomAuthorCellRenderer.jsx";
 import { GraphTable } from './GraphTable.jsx';
 import { GridViewIcon, ListViewIcon } from '../Common/CustomIcons.jsx';
-import { openFile } from '../../functions/utility.js';
+import { openFile, saveHomePageSettings } from '../../functions/utility.js';
 import { FormattedMessage } from 'react-intl';
 import { Tooltip } from '../Common/Tooltip.jsx';
+import { useSettings } from '../SettingsContext.jsx';
 
-export function RecentPage ({ setIsDisabled }){
-    const [viewMode, setViewMode] = useState('grid'); 
+export function RecentPage ({ setIsDisabled, recentPageViewMode }){    
+    const { settings, updateSettings } = useSettings();
+    const [viewMode, setViewMode] = useState(recentPageViewMode); 
+    const [initialized, setInitialized] = useState(false);
 
     // Set a placeholder for the graphs which will be used differently during dev and prod 
     let initialGraphs = [];
@@ -48,6 +51,21 @@ export function RecentPage ({ setIsDisabled }){
         };
     }, []); 
 
+    useEffect(() => {
+        // Set the viewMode based on the HomePage preferences
+        setViewMode(recentPageViewMode);
+    }, [recentPageViewMode]); 
+
+    useEffect(() => {
+        if (initialized || recentPageViewMode !== viewMode) {
+            setInitialized(true);
+            updateSettings({ recentPageViewMode: viewMode });
+
+            // Send settings to Dynamo to save
+            saveHomePageSettings({ ...settings, recentPageViewMode: viewMode });
+        } 
+    }, [viewMode]);
+
     // This variable defins the table structure displaying the graphs
     const columns = React.useMemo(() => [
         {

src/components/Samples/PageSamples.jsx

@@ -6,11 +6,14 @@ import { GridViewIcon, ListViewIcon } from '../Common/CustomIcons.jsx';
 import { Tooltip } from '../Common/Tooltip.jsx';
 import { CustomSampleFirstCellRenderer } from "./CustomSampleFirstCellRenderer.jsx";
 import { SamplesGrid } from './SamplesGrid.jsx';
-import { openFile, showSamplesFilesInFolder } from '../../functions/utility.js';
+import { openFile, showSamplesFilesInFolder, saveHomePageSettings } from '../../functions/utility.js';
+import { useSettings } from '../SettingsContext.jsx';
 
-export function SamplesPage (){
-    const [viewMode, setViewMode] = useState('grid'); 
+export function SamplesPage ({ samplesViewMode }){
+    const { settings, updateSettings } = useSettings();
+    const [viewMode, setViewMode] = useState(samplesViewMode); 
     const [collapsedRows, setCollapsedRows] = useState({});
+    const [initialized, setInitialized] = useState(false);
 
     // Set a placeholder for the graphs which will be used differently during dev and prod 
     let initialSamples = [];
@@ -51,6 +54,22 @@ export function SamplesPage (){
         };
     }, []); 
 
+
+    useEffect(() => {
+        // Set the viewMode based on the HomePage preferences
+        setViewMode(samplesViewMode);
+    }, [samplesViewMode]); 
+
+    useEffect(() => {
+        if (initialized || samplesViewMode !== viewMode) {
+            setInitialized(true);
+            updateSettings({ samplesViewMode: viewMode });
+
+            // Send settings to Dynamo to save
+            saveHomePageSettings({ ...settings, samplesViewMode: viewMode });
+        } 
+    }, [viewMode]);
+
     // This variable defins the table structure displaying the graphs
     const columns = React.useMemo(() => [
         {

src/components/SettingsContext.jsx

@@ -0,0 +1,25 @@
+import React, { createContext, useContext, useState, useEffect } from 'react';
+
+// Create the context
+const SettingsContext = createContext();
+
+// Provider component that wraps the app components
+export function SettingsProvider({ children }) {
+    const [settings, setSettings] = useState({});
+
+    // Update settings
+    const updateSettings = (newSettings) => {
+        setSettings(prev => ({ ...prev, ...newSettings }));
+    };
+
+    return (
+        <SettingsContext.Provider value={{ settings, updateSettings }}>
+            {children}
+        </SettingsContext.Provider>
+    );
+}
+
+// Use settings hook
+export function useSettings() {
+    return useContext(SettingsContext);
+}

src/functions/utility.js

@@ -48,3 +48,13 @@ export function showSamplesFilesInFolder() {
     chrome.webview.hostObjects.scriptObject.ShowSampleFilesInFolder();
   }
 }
+
+/**
+ * A call to a backend function requesting to save the current HomePage settings
+ */
+export function saveHomePageSettings(settings) {
+  if (chrome.webview !== undefined) {
+    const settingsJson = JSON.stringify(settings);
+    chrome.webview.hostObjects.scriptObject.SaveSettings(settingsJson);
+  }
+}