Make jump links actually hideable

alinnert · alinnert · commit 6307e8e739e1 · 2024-10-11T01:21:46.000+02:00
Connect UI to toggle jump links to store and save information in
local storage.
diff --git a/eslint.config.js b/eslint.config.js
@@ -10,7 +10,7 @@ export default tseslint.config(
   { ignores: ['dist/**/*'] },
   js.configs.recommended,
   {
-    files: ['ui/**/*.{js,jsx,ts,tsx}'],
+    files: ['src/**/*.{js,jsx,ts,tsx}'],
     languageOptions: {
       globals: { ...globals.browser },
     },
@@ -30,7 +30,7 @@ export default tseslint.config(
   },
   reactPlugin.configs.flat['jsx-runtime'],
   {
-    files: ['ui/**/*.tsx'],
+    files: ['src/**/*.{ts,tsx}'],
     plugins: {
       'react-hooks': reactHooksPlugin,
     },
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -10,7 +10,7 @@
     "format": "prettier . --write"
   },
   "dependencies": {
-    "@headlessui/react": "^2.1.2",
+    "@headlessui/react": "^2.1.10",
     "@mdi/js": "^7.4.47",
     "@mdi/react": "^1.4.0",
     "classnames": "^2.3.1",
@@ -28,7 +28,7 @@
     "autoprefixer": "^10.4.2",
     "eslint": "^9.12.0",
     "eslint-plugin-react": "^7.37.1",
-    "eslint-plugin-react-hooks": "^5.1.0-rc-d5bba18b-20241009",
+    "eslint-plugin-react-hooks": "^5.1.0-rc-70fb1363-20241010",
     "fuzzysort": "^3.0.2",
     "globals": "^15.11.0",
     "postcss": "^8.4.31",
diff --git a/src/components/App/App.tsx b/src/components/App/App.tsx
@@ -26,11 +26,13 @@ import { useCustomizeMode } from './useCustomizeMode'
 import { useSearchMode } from './useSearchMode'
 import { useTheme } from './useTheme'
 import { useToggleDescriptions } from './useToggleDescriptions'
+import { useToggleJumpLinks } from './useToggleJumpLinks'
 
 export const WebdevHome: FC = () => {
   const customizeMode = useCustomizeMode()
   const searchMode = useSearchMode()
   const toggleDescriptions = useToggleDescriptions()
+  const toggleJumpLinks = useToggleJumpLinks()
   const isCurrentAppMode = useIsCurrentAppMode()
 
   useTheme()
@@ -45,7 +47,7 @@ export const WebdevHome: FC = () => {
   return (
     <AppLayout
       sidebar={
-        isCurrentAppMode(AppMode.default, AppMode.customize) ? (
+        isCurrentAppMode(AppMode.default, AppMode.customize) && toggleJumpLinks.showJumpLinks ? (
           <JumpLinks />
         ) : null
       }
@@ -80,8 +82,8 @@ export const WebdevHome: FC = () => {
                     <AppMenuItem
                       label="Show group list"
                       icon={<MdiIcon path={mdiDockLeft} />}
-                      selected={true}
-                      action={() => {}}
+                      selected={toggleJumpLinks.showJumpLinks}
+                      action={toggleJumpLinks.toggle}
                     />
 
                     <AppThemeSwitcher />
diff --git a/src/components/App/useCustomizeMode.ts b/src/components/App/useCustomizeMode.ts
@@ -4,7 +4,7 @@ import { setAppMode, toggleAppMode } from '../../stores/appMode/appModeActions'
 import { useIsCurrentAppMode } from '../../stores/appMode/appModeHooks'
 import { AppMode } from '../../stores/appMode/appModeReducer'
 
-export interface UseCustomizeModeResult {
+export type UseCustomizeModeResult = {
   handleCustomizeAction: () => void
 }
 
diff --git a/src/components/App/useSearchMode.ts b/src/components/App/useSearchMode.ts
@@ -5,7 +5,7 @@ import { useIsCurrentAppMode } from '../../stores/appMode/appModeHooks'
 import { AppMode } from '../../stores/appMode/appModeReducer'
 import { setSearchTerm } from '../../stores/search/searchActions'
 
-export interface UseSearchModeResult {
+export type UseSearchModeResult = {
   handleSearchAction: () => void
 }
 
diff --git a/src/components/App/useThemeSwitcher.ts b/src/components/App/useThemeSwitcher.ts
@@ -3,7 +3,7 @@ import { useAppDispatch, useAppSelector } from '../../stores'
 import { setTheme } from '../../stores/appSettings/appSettingsActions'
 import { AppTheme } from '../../stores/appSettings/appSettingsReducer'
 
-export interface UseThemeSwitcherResult {
+export type UseThemeSwitcherResult = {
   currentTheme: AppTheme
   setLightTheme: () => void
   setDarkTheme: () => void
diff --git a/src/components/App/useToggleDescriptions.ts b/src/components/App/useToggleDescriptions.ts
@@ -2,7 +2,7 @@ import { useCallback } from 'react'
 import { useAppDispatch, useAppSelector } from '../../stores'
 import { setDisplayDescription } from '../../stores/appSettings/appSettingsActions'
 
-interface UseToggleDescriptionsResult {
+type UseToggleDescriptionsResult = {
   showDescriptions: boolean
   toggle: () => void
 }
diff --git a/src/components/App/useToggleJumpLinks.ts b/src/components/App/useToggleJumpLinks.ts
@@ -0,0 +1,22 @@
+import { useCallback } from 'react'
+import { useAppDispatch, useAppSelector } from '../../stores'
+import { setDisplayJumpLinks } from '../../stores/appSettings/appSettingsActions'
+
+type UseToggleJumpLinksResult = {
+  showJumpLinks: boolean
+  toggle: () => void
+}
+
+export function useToggleJumpLinks(): UseToggleJumpLinksResult {
+  const dispatch = useAppDispatch()
+
+  const showJumpLinks = useAppSelector(
+    (state) => state.appSettings.showJumpLinks,
+  )
+
+  const toggle = useCallback(() => {
+    dispatch(setDisplayJumpLinks(!showJumpLinks))
+  }, [dispatch, showJumpLinks])
+
+  return { showJumpLinks, toggle }
+}
diff --git a/src/components/Links/Links.tsx b/src/components/Links/Links.tsx
@@ -1,9 +1,9 @@
 import classNames from 'classnames'
-import { FC, PropsWithChildren } from 'react'
+import { FC } from 'react'
 import { links } from '../../links'
 import { LinkGroup } from './LinkGroup'
 
-export const Links: FC<PropsWithChildren> = ({ children }) => {
+export const Links: FC = () => {
   return (
     <div
       className={classNames(
@@ -12,7 +12,7 @@ export const Links: FC<PropsWithChildren> = ({ children }) => {
         'px-page py-4',
       )}
     >
-      {links.items.map((group, index) => (
+      {links.items.map((group) => (
         <LinkGroup group={group} key={group.name} />
       ))}
     </div>
diff --git a/src/components/Search/useSearch.ts b/src/components/Search/useSearch.ts
@@ -24,16 +24,16 @@ const fuzzyOptions = { key: 'title', allowTypo: false }
 const maxResultsCount = 6
 const maxHiddenResultsCount = 2
 
-interface GroupedLinks {
+type GroupedLinks = {
   visible: LinkItem[]
   hidden: LinkItem[]
 }
 
-interface UseSearchParams {
+type UseSearchParams = {
   searchInputRef: RefObject<HTMLInputElement>
 }
 
-interface UseSearchReturn {
+type UseSearchReturn = {
   results: Fuzzysort.KeyResults<LinkItem> | null
   hiddenResults: Fuzzysort.KeyResults<LinkItem> | null
   focusedResult: Fuzzysort.KeyResult<LinkItem> | null
diff --git a/src/services/localStorage/localStorageService.ts b/src/services/localStorage/localStorageService.ts
@@ -5,6 +5,7 @@ export enum StorageKey {
   hiddenItems = 'wdh:hidden-items',
   themeSetting = 'wdh:theme-setting',
   showDescriptionsSetting = 'wdh:show-descriptions-setting',
+  showJumpLinksSetting = 'wdh:show-jump-links-setting',
 }
 
 export function getStorageValue(key: StorageKey): string | null
diff --git a/src/services/localStorage/values/showDescriptionsSetting.ts b/src/services/localStorage/values/showDescriptionsSetting.ts
@@ -6,8 +6,7 @@ import {
 
 export function loadShowDescriptionsSetting(): boolean {
   const value = getStorageValue(StorageKey.showDescriptionsSetting)
-
-  return value === 'true' ? true : false
+  return value === 'true'
 }
 
 export function saveShowDescriptionsSetting(value: boolean): void {
diff --git a/src/services/localStorage/values/showJumpLinksSetting.ts b/src/services/localStorage/values/showJumpLinksSetting.ts
@@ -0,0 +1,14 @@
+import {
+  getStorageValue,
+  setStorageValue,
+  StorageKey,
+} from '../localStorageService'
+
+export function loadShowJumpLinksSetting(): boolean {
+  const value = getStorageValue(StorageKey.showJumpLinksSetting)
+  return value === 'true'
+}
+
+export function saveShowJumpLinksSetting(value: boolean): void {
+  setStorageValue(StorageKey.showJumpLinksSetting, String(value))
+}
diff --git a/src/stores/appMode/appModeActions.ts b/src/stores/appMode/appModeActions.ts
@@ -2,7 +2,7 @@ import { AppMode } from './appModeReducer'
 
 export const SET_MODE = 'SET_MODE'
 
-interface SetModeAction {
+type SetModeAction = {
   type: typeof SET_MODE
   payload: AppMode
 }
diff --git a/src/stores/appMode/appModeReducer.ts b/src/stores/appMode/appModeReducer.ts
@@ -7,7 +7,7 @@ export enum AppMode {
   customize = 'CUSTOMIZE',
 }
 
-export interface AppModeState {
+export type AppModeState = {
   currentMode: AppMode
 }
 
diff --git a/src/stores/appSettings/appSettingsActions.ts b/src/stores/appSettings/appSettingsActions.ts
@@ -3,19 +3,28 @@ import { AppTheme } from './appSettingsReducer'
 export const enum SettingsActions {
   setTheme,
   setDisplayDescription,
+  setDisplayJumpLinks,
 }
 
-interface SetThemeAction {
+type SetThemeAction = {
   type: SettingsActions.setTheme
   payload: AppTheme
 }
 
-interface SetDisplayDescriptionAction {
+type SetDisplayDescriptionAction = {
   type: SettingsActions.setDisplayDescription
   payload: boolean
 }
 
-export type AppSettingsActions = SetThemeAction | SetDisplayDescriptionAction
+type SetDisplayJumpLinksAction = {
+  type: SettingsActions.setDisplayJumpLinks
+  payload: boolean
+}
+
+export type AppSettingsActions =
+  | SetThemeAction
+  | SetDisplayDescriptionAction
+  | SetDisplayJumpLinksAction
 
 export function setTheme(payload: AppTheme): SetThemeAction {
   return { type: SettingsActions.setTheme, payload }
@@ -27,18 +36,8 @@ export function setDisplayDescription(
   return { type: SettingsActions.setDisplayDescription, payload }
 }
 
-export function cycleTheme(currentTheme: AppTheme): AppTheme {
-  switch (currentTheme) {
-    case AppTheme.auto: {
-      return AppTheme.light
-    }
-
-    case AppTheme.light: {
-      return AppTheme.dark
-    }
-
-    case AppTheme.dark: {
-      return AppTheme.auto
-    }
-  }
+export function setDisplayJumpLinks(
+  payload: boolean,
+): SetDisplayJumpLinksAction {
+  return { type: SettingsActions.setDisplayJumpLinks, payload }
 }
diff --git a/src/stores/appSettings/appSettingsReducer.ts b/src/stores/appSettings/appSettingsReducer.ts
@@ -6,14 +6,16 @@ export enum AppTheme {
   dark = 'dark',
 }
 
-interface AppSettingsState {
+type AppSettingsState = {
   theme: AppTheme
   showDescriptions: boolean
+  showJumpLinks: boolean
 }
 
 const initialState: AppSettingsState = {
   theme: AppTheme.auto,
   showDescriptions: false,
+  showJumpLinks: true,
 }
 
 export function appSettings(
@@ -29,6 +31,10 @@ export function appSettings(
       return { ...state, showDescriptions: action.payload }
     }
 
+    case SettingsActions.setDisplayJumpLinks: {
+      return { ...state, showJumpLinks: action.payload }
+    }
+
     default: {
       return state
     }
diff --git a/src/stores/hiddenLinks/hiddenLinksActions.ts b/src/stores/hiddenLinks/hiddenLinksActions.ts
@@ -4,17 +4,17 @@ export const SET_HIDDEN_LINKS = 'SET_HIDDEN_LINKS'
 export const TOGGLE_HIDDEN_LINK = 'TOGGLE_HIDDEN_LINK'
 export const TOGGLE_HIDDEN_LINKS_GROUP = 'TOGGLE_HIDDEN_LINKS_GROUP'
 
-interface SetHiddenLinksAction {
+type SetHiddenLinksAction = {
   type: typeof SET_HIDDEN_LINKS
   payload: Array<LinkItem['url']>
 }
 
-interface ToggleHiddenLinkAction {
+type ToggleHiddenLinkAction = {
   type: typeof TOGGLE_HIDDEN_LINK
   payload: LinkItem['url']
 }
 
-interface ToggleHiddenLinksGroup {
+type ToggleHiddenLinksGroup = {
   type: typeof TOGGLE_HIDDEN_LINKS_GROUP
   payload: Array<LinkItem['url']>
 }
diff --git a/src/stores/hiddenLinks/hiddenLinksReducer.ts b/src/stores/hiddenLinks/hiddenLinksReducer.ts
@@ -6,7 +6,7 @@ import {
   TOGGLE_HIDDEN_LINKS_GROUP,
 } from './hiddenLinksActions'
 
-export interface HiddenLinksState {
+export type HiddenLinksState = {
   links: Array<LinkItem['url']>
 }
 
diff --git a/src/stores/index.ts b/src/stores/index.ts
@@ -8,6 +8,7 @@ import { appSettings } from './appSettings/appSettingsReducer'
 import { hiddenLinks } from './hiddenLinks/hiddenLinksReducer'
 import { persistToLocalStorage } from './persistToLocalStorage'
 import { search } from './search/searchReducer'
+import { loadShowJumpLinksSetting } from '../services/localStorage/values/showJumpLinksSetting'
 
 const rootReducer = combineReducers({
   appMode,
@@ -21,6 +22,7 @@ export const store = createStore(rootReducer, {
   appSettings: {
     theme: loadThemeSetting(),
     showDescriptions: loadShowDescriptionsSetting(),
+    showJumpLinks: loadShowJumpLinksSetting(),
   },
 })
 
diff --git a/src/stores/persistToLocalStorage.ts b/src/stores/persistToLocalStorage.ts
diff --git a/src/stores/search/searchActions.ts b/src/stores/search/searchActions.ts
diff --git a/src/stores/search/searchReducer.ts b/src/stores/search/searchReducer.ts
diff --git a/src/typings/simple-icons.d.ts b/src/typings/simple-icons.d.ts

Original file line number	Diff line number	Diff line change
`@@ -4,7 +4,7 @@ import { setAppMode, toggleAppMode } from '../../stores/appMode/appModeActions'`
`4`	`4`	`import { useIsCurrentAppMode } from '../../stores/appMode/appModeHooks'`
`5`	`5`	`import { AppMode } from '../../stores/appMode/appModeReducer'`
`6`	`6`
`7`		`-export interface UseCustomizeModeResult {`
	`7`	`+export type UseCustomizeModeResult = {`
`8`	`8`	`handleCustomizeAction: () => void`
`9`	`9`	`}`
`10`	`10`
Original file line number	Diff line number	Diff line change
`@@ -5,7 +5,7 @@ import { useIsCurrentAppMode } from '../../stores/appMode/appModeHooks'`
`5`	`5`	`import { AppMode } from '../../stores/appMode/appModeReducer'`
`6`	`6`	`import { setSearchTerm } from '../../stores/search/searchActions'`
`7`	`7`
`8`		`-export interface UseSearchModeResult {`
	`8`	`+export type UseSearchModeResult = {`
`9`	`9`	`handleSearchAction: () => void`
`10`	`10`	`}`
`11`	`11`
Original file line number	Diff line number	Diff line change
`@@ -2,7 +2,7 @@ import { useCallback } from 'react'`
`2`	`2`	`import { useAppDispatch, useAppSelector } from '../../stores'`
`3`	`3`	`import { setDisplayDescription } from '../../stores/appSettings/appSettingsActions'`
`4`	`4`
`5`		`-interface UseToggleDescriptionsResult {`
	`5`	`+type UseToggleDescriptionsResult = {`
`6`	`6`	`showDescriptions: boolean`
`7`	`7`	`toggle: () => void`
`8`	`8`	`}`