#825 Save displayStyle to localStorage

Author: Polleps

browser/CHANGELOG.md

@@ -13,6 +13,7 @@ This changelog covers all five packages, as they are (for now) updated as a whol
 - [#850](https://github.com/atomicdata-dev/atomic-server/issues/850) Add drag & drop sorting to ResourceArray inputs.
 - [#757](https://github.com/atomicdata-dev/atomic-server/issues/757) Add drag & drop sorting to sidebar.
 - [#873](https://github.com/atomicdata-dev/atomic-server/issues/873) Add option to allow multiple resources in relation columns (Tables).
+- [#825](https://github.com/atomicdata-dev/atomic-server/issues/825) Folder display styles are now saved locally instead of on the resource. The display style property will now act as the default view style.
 
 ### @tomic/lib
 
@@ -44,6 +45,7 @@ This changelog covers all five packages, as they are (for now) updated as a whol
 - Added `useCollectionPage` hook.
 - Fix bug where `useCollection` would fetch the collection twice on mount.
 - `useServerURL` no longer stores the server url in localstorage.
+- BREAKING CHANGE: Removed the `useLocalStorage` hook.
 
 ### @tomic/cli
 

browser/data-browser/src/components/SideBar/usePanelList.ts

@@ -1,10 +1,9 @@
-import { useLocalStorage } from '@tomic/react';
-
 export enum Panel {
   Ontologies = 'ontologies',
 }
 
 import { useCallback, useMemo } from 'react';
+import { useLocalStorage } from '../../hooks/useLocalStorage';
 
 export const usePanelList = (): {
   enabledPanels: Set<Panel>;

browser/data-browser/src/helpers/AppSettings.tsx

@@ -6,16 +6,12 @@ import {
   useMemo,
 } from 'react';
 import { DarkModeOption, useDarkMode } from './useDarkMode';
-import {
-  useLocalStorage,
-  useCurrentAgent,
-  useServerURL,
-  Agent,
-} from '@tomic/react';
+import { useCurrentAgent, useServerURL, Agent } from '@tomic/react';
 import toast from 'react-hot-toast';
 import { SIDEBAR_TOGGLE_WIDTH } from '../components/SideBar';
 import { handleError } from './loggingHandlers';
 import { serverURLStorage } from './serverURLStorage';
+import { useLocalStorage } from '../hooks/useLocalStorage';
 
 interface ProviderProps {
   children: ReactNode;

browser/data-browser/src/helpers/useDarkMode.tsx

@@ -1,5 +1,5 @@
 import { Dispatch, useEffect, useState } from 'react';
-import { useLocalStorage } from '@tomic/react';
+import { useLocalStorage } from '../hooks/useLocalStorage';
 
 export enum DarkModeOption {
   /** Always use dark mode */

browser/data-browser/src/hooks/useDriveHistory.ts

@@ -1,6 +1,6 @@
-import { useLocalStorage } from '@tomic/react';
 import { useCallback, useMemo } from 'react';
 import { useSavedDrives } from './useSavedDrives';
+import { useLocalStorage } from './useLocalStorage';
 
 const MAX_DRIVE_HISTORY = 5;
 

browser/react/src/useLocalStorage.ts renamed to browser/data-browser/src/hooks/useLocalStorage.ts

@@ -6,11 +6,7 @@ const listeners = new Map<
 >();
 
 export type SetLocalStorageValue<T> = (value: T | ((val: T) => T)) => void;
-/**
- * Hook for storing information to LocalStorage. Note that if you use this same
- * hook in multiple component instances, these will *not* share state! If you
- * want that behavior, you should use this hook inside a Context object.
- */
+
 export function useLocalStorage<T>(
   key: string,
   initialValue: T,

browser/data-browser/src/views/CollectionPage.tsx

@@ -6,7 +6,6 @@ import {
   useNumber,
   useResource,
   useString,
-  useLocalStorage,
   useStore,
   properties,
 } from '@tomic/react';
@@ -35,6 +34,7 @@ import { ResourcePageProps } from './ResourcePage';
 import { useEffectOnce } from '../hooks/useEffectOnce';
 import { Row } from '../components/Row';
 import { EditableTitle } from '../components/EditableTitle';
+import { useLocalStorage } from '../hooks/useLocalStorage';
 
 const displayStyles = [
   {

browser/data-browser/src/views/FolderPage/index.tsx

@@ -1,10 +1,8 @@
 import {
   classes,
-  properties,
-  useArray,
   useCanWrite,
   useResources,
-  useString,
+  type DataBrowser,
 } from '@tomic/react';
 import { useMemo } from 'react';
 import { styled } from 'styled-components';
@@ -15,39 +13,49 @@ import { ResourcePageProps } from '../ResourcePage';
 import { DisplayStyleButton } from './DisplayStyleButton';
 import { GridView } from './GridView';
 import { ListView } from './ListView';
+import { useLocalStorage } from '../../hooks/useLocalStorage';
 
-const displayStyleOpts = {
-  commit: true,
-};
+type PreferredFolderStyles = Record<string, string>;
 
 const viewMap = new Map([
   [classes.displayStyles.list, ListView],
   [classes.displayStyles.grid, GridView],
 ]);
 
-const subResourceOpts = {
-  commit: true,
+const displayStyleStorageKey = 'folderDisplayPrefs';
+
+const useDisplayStyle = (
+  subject: string,
+): [
+  preferredStyle: string | undefined,
+  setPreferredStyle: (style: string) => void,
+] => {
+  const [preferredStyles, setPreferredStyles] =
+    useLocalStorage<PreferredFolderStyles>(displayStyleStorageKey, {});
+
+  const setPreferredStyle = (style: string) => {
+    setPreferredStyles({ ...preferredStyles, [subject]: style });
+  };
+
+  return [preferredStyles[subject], setPreferredStyle];
 };
 
-export function FolderPage({ resource }: ResourcePageProps) {
-  const [subResourceSubjects] = useArray(
-    resource,
-    properties.subResources,
-    subResourceOpts,
-  );
-  const [displayStyle, setDisplayStyle] = useString(
-    resource,
-    properties.displayStyle,
-    displayStyleOpts,
+export function FolderPage({
+  resource,
+}: ResourcePageProps<DataBrowser.Folder>) {
+  const [preferedDisplayStyle, setPreferedDisplayStyle] = useDisplayStyle(
+    resource.subject,
   );
 
+  const displayStyle = preferedDisplayStyle ?? resource.props.displayStyle;
+
   const View = useMemo(
     () => viewMap.get(displayStyle!) ?? ListView,
     [displayStyle],
   );
 
-  const subResources = useResources(subResourceSubjects);
-  const navigateToNewRoute = useNewRoute(resource.getSubject());
+  const subResources = useResources(resource.props.subResources ?? []);
+  const navigateToNewRoute = useNewRoute(resource.subject);
   const [canEdit] = useCanWrite(resource);
 
   return (
@@ -56,7 +64,7 @@ export function FolderPage({ resource }: ResourcePageProps) {
         <TitleBarInner>
           <EditableTitle resource={resource} />
           <DisplayStyleButton
-            onClick={setDisplayStyle}
+            onClick={setPreferedDisplayStyle}
             displayStyle={displayStyle}
           />
         </TitleBarInner>

browser/data-browser/src/views/ResourcePage.tsx

@@ -5,6 +5,7 @@ import {
   properties,
   Resource,
   urls,
+  type OptionalClass,
 } from '@tomic/react';
 
 import { ContainerNarrow } from '../components/Containers';
@@ -31,8 +32,8 @@ import { Main } from '../components/Main';
 import { OntologyPage } from './OntologyPage';
 
 /** These properties are passed to every View at Page level */
-export type ResourcePageProps = {
-  resource: Resource;
+export type ResourcePageProps<Subject extends OptionalClass = never> = {
+  resource: Resource<Subject>;
 };
 
 type Props = {

browser/react/src/index.ts

@@ -27,7 +27,6 @@ export * from './useServerURL.js';
 export * from './useCurrentAgent.js';
 export * from './useChildren.js';
 export * from './useDebounce.js';
-export * from './useLocalStorage.js';
 export * from './useMarkdown.js';
 export * from './useServerSearch.js';
 export * from './useCollection.js';