add the new user preferences store

Author: medyo

src/components/CardComponent.js

@@ -1,10 +1,10 @@
-import React, { useContext } from 'react'
+import React from 'react'
 import { BsBoxArrowInUpRight } from 'react-icons/bs'
 import { APP } from '../Constants'
-import PreferencesContext from '../preferences/PreferencesContext'
+import { useUserPreferences } from 'src/stores/preferences'
 
 function CardComponent({ icon, title, children, fullBlock, link }) {
-  const { openLinksNewTab } = useContext(PreferencesContext)
+  const { openLinksNewTab } = useUserPreferences()
 
   const handleHeaderLinkClick = (e) => {
     e.preventDefault()

src/components/ClickableItem.js

@@ -1,10 +1,11 @@
 import { trackLinkOpen } from 'src/lib/analytics'
-import React, { useContext } from 'react'
+import React from 'react'
 import { APP } from '../Constants'
-import PreferencesContext from '../preferences/PreferencesContext'
+
+import { useUserPreferences } from 'src/stores/preferences'
 
 const ClickableItem = ({ link, className, children, analyticsAttributes, appendRef = true }) => {
-  const { openLinksNewTab } = useContext(PreferencesContext)
+  const { openLinksNewTab } = useUserPreferences()
 
   const handleClick = (e) => {
     e.preventDefault()

src/features/settings/components/SettingsModal.tsx

@@ -1,12 +1,12 @@
-import React, { useContext, useState } from 'react'
+import React, { useState } from 'react'
 import ReactModal from 'react-modal'
 import 'react-toggle/style.css'
 import { VscClose } from 'react-icons/vsc'
 import Select, { ActionMeta, MultiValue, SingleValue } from 'react-select'
 import { SearchEngineType } from 'src/types'
 import Toggle from 'react-toggle'
 import './settings.css'
-import PreferencesContext from 'src/preferences/PreferencesContext'
+import { useUserPreferences } from 'src/stores/preferences'
 import { SUPPORTED_CARDS, SUPPORTED_SEARCH_ENGINES, APP } from 'src/Constants'
 import {
   trackLanguageAdd,
@@ -34,9 +34,20 @@ export const SettingsModal = ({ showSettings, setShowSettings }: SettingsModalPr
     remoteConfig: { supportedTags },
   } = useRemoteConfigStore()
 
-  const preferences = useContext(PreferencesContext)
-  const { dispatcher, cards, userSelectedTags, openLinksNewTab, listingMode, theme, searchEngine } =
-    preferences
+  const {
+    cards,
+    userSelectedTags,
+    openLinksNewTab,
+    listingMode,
+    theme,
+    searchEngine,
+    setTheme,
+    setListingMode,
+    setSearchEngine,
+    setOpenLinksNewTab,
+    setCards,
+    setTags,
+  } = useUserPreferences()
   const [selectedCards, setSelectedCards] = useState(cards)
 
   const handleCloseModal = () => {
@@ -58,13 +69,21 @@ export const SettingsModal = ({ showSettings, setShowSettings }: SettingsModalPr
         break
     }
 
-    dispatcher({ type: 'setUserSelectedTags', value: tags })
+    console.log(tags)
+    setTags(
+      tags.map((tag) => {
+        return {
+          label: tag.label,
+          value: tag.value,
+        }
+      })
+    )
   }
 
   const onlistingModeChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     const value = e.target.checked ? 'compact' : 'normal'
     trackListingModeSelect(value)
-    dispatcher({ type: 'changelistingMode', value })
+    setListingMode(value)
   }
 
   const onCardSelectChange = (cards: MultiValue<OptionType>, metas: ActionMeta<OptionType>) => {
@@ -85,7 +104,7 @@ export const SettingsModal = ({ showSettings, setShowSettings }: SettingsModalPr
       return { id: index, name: c.value }
     })
     setSelectedCards(newCards)
-    dispatcher({ type: 'setCards', value: newCards })
+    setCards(newCards)
   }
 
   const onSearchEngineSelectChange = (value: SingleValue<SearchEngineType>) => {
@@ -94,17 +113,21 @@ export const SettingsModal = ({ showSettings, setShowSettings }: SettingsModalPr
     }
 
     trackSearchEngineSelect(value.label)
-    dispatcher({ type: 'setSearchEngine', value })
+    setSearchEngine(value.label)
   }
 
   const onOpenLinksNewTabChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     const checked = e.target.checked
     trackTabTarget(checked)
-    dispatcher({ type: 'setOpenLinksNewTab', value: checked })
+    setOpenLinksNewTab(checked)
   }
 
   const onDarkModeChange = () => {
-    dispatcher({ type: 'toggleTheme' })
+    if (theme === 'dark') {
+      setTheme('light')
+    } else {
+      setTheme('dark')
+    }
   }
 
   return (

src/stores/preferences.ts

@@ -0,0 +1,37 @@
+import create from 'zustand';
+import { persist } from 'zustand/middleware'
+import { SelectedCard, SelectedTag, Theme, ListingMode } from "../types";
+
+type UserPreferencesStore = {
+  userSelectedTags: SelectedTag[]
+  userBookmarks: any[]
+  theme: Theme,
+  openLinksNewTab: boolean,
+  listingMode: ListingMode,
+  searchEngine: string,
+  cards: SelectedCard[],
+  setTheme: (theme: Theme) => void;
+  setSearchEngine: (theme: string) => void;
+  setOpenLinksNewTab: (openLinksNewTab: boolean) => void;
+  setListingMode: (listingMode: ListingMode) => void;
+  setCards: (selectedCards: SelectedCard[]) => void;
+  setTags: (selectedTags: SelectedTag[]) => void;
+};
+
+export const useUserPreferences = create(persist<UserPreferencesStore>((set) => ({
+  userSelectedTags: [],
+  userBookmarks: [],
+  theme: "dark",
+  searchEngine: "google",
+  listingMode: "normal",
+  openLinksNewTab: true,
+  cards: [],
+  setSearchEngine: (searchEngine: string) => set({ searchEngine: searchEngine }),
+  setListingMode: (listingMode: ListingMode) => set({ listingMode: listingMode }),
+  setTheme: (theme: Theme) => set({ theme: theme }),
+  setOpenLinksNewTab: (openLinksNewTab: boolean) => set({ openLinksNewTab: openLinksNewTab }),
+  setCards: (selectedCards: SelectedCard[]) => set({ cards: selectedCards }),
+  setTags: (selectedTags: SelectedTag[]) => set({ userSelectedTags: selectedTags }),
+}), {
+  name: 'preferences_storage',
+}));

src/types/index.ts

@@ -1,4 +1,27 @@
 export type SearchEngineType = {
   url: string
   label: string
-}
+}
+
+export type SelectedCard = {
+  id: number,
+  name: string
+}
+
+export type SelectedTag = {
+  label: string,
+  value: string
+}
+
+export type UserPreferences = {
+  userSelectedTags: string[]
+  userBookmarks: any[]
+  theme: "light" | "dark",
+  openLinksNewTab: boolean,
+  listingMode: "normal" | "compact",
+  searchEngine: string,
+  cards: SelectedCard[]
+}
+
+export type Theme = "dark" | "light";
+export type ListingMode = "normal" | "compact";