user prefercenes serialization

Author: Chouikane

src/components/UserTags.js

@@ -1,14 +1,13 @@
 import React from 'react'
 import { TiPlus } from 'react-icons/ti';
 import { useUserPreferences } from 'src/stores/preferences'
-import { enhanceTags } from 'src/utils/DataEnhancement'
 
 function UserTags({ onAddClicked }) {
   const { userSelectedTags } = useUserPreferences()
 
   return (
     <nav className="tags">
-      {enhanceTags(userSelectedTags).map((tag, index) => (
+      {userSelectedTags.map((tag, index) => (
         <span key={index} className="tag">
           {tag.value}
         </span>

src/features/settings/components/SettingsModal.tsx

@@ -18,7 +18,8 @@ import {
   trackTabTarget,
 } from 'src/lib/analytics'
 import { useRemoteConfigStore } from 'src/features/remoteConfig'
-import { enhanceTags } from 'src/utils/DataEnhancement'
+import { Tag } from 'src/features/remoteConfig'
+
 
 type SettingsModalProps = {
   showSettings: boolean
@@ -55,7 +56,7 @@ export const SettingsModal = ({ showSettings, setShowSettings }: SettingsModalPr
     setShowSettings(false)
   }
 
-  const onTagsSelectChange = (tags: MultiValue<OptionType>, metas: ActionMeta<OptionType>) => {
+  const onTagsSelectChange = (tags: MultiValue<Tag>, metas: ActionMeta<OptionType>) => {
     switch (metas.action) {
       case 'select-option':
         if (metas.option?.label) {
@@ -71,14 +72,7 @@ export const SettingsModal = ({ showSettings, setShowSettings }: SettingsModalPr
     }
 
     console.log(tags)
-    setTags(
-      tags.map((tag) => {
-        return {
-          label: tag.label,
-          value: tag.value,
-        }
-      })
-    )
+    setTags(tags as Tag[])
   }
 
   const onlistingModeChange = (e: React.ChangeEvent<HTMLInputElement>) => {
@@ -155,7 +149,7 @@ export const SettingsModal = ({ showSettings, setShowSettings }: SettingsModalPr
           <div className="settingContent">
             <Select
               options={supportedTags}
-              defaultValue={enhanceTags(userSelectedTags)}
+              defaultValue={userSelectedTags}
               isMulti={true}
               isClearable={false}
               isSearchable={false}

src/stores/preferences.ts

@@ -1,49 +1,85 @@
-import create from 'zustand';
+import { enhanceTags } from 'src/utils/DataEnhancement'
+import create from 'zustand'
 import { persist } from 'zustand/middleware'
-import { SelectedCard, SelectedTag, Theme, ListingMode } from "../types";
+import { SelectedCard, SelectedTag, Theme, ListingMode, CardSettingsType } from '../types'
+import { Tag } from 'src/features/remoteConfig'
+
 
 export type UserPreferencesState = {
-  userSelectedTags: string[]
-  theme: Theme,
-  openLinksNewTab: boolean,
-  listingMode: ListingMode,
-  searchEngine: string,
-  cards: SelectedCard[],
-};
+  userSelectedTags: Tag[]
+  theme: Theme
+  openLinksNewTab: boolean
+  listingMode: ListingMode
+  searchEngine: string
+  cards: SelectedCard[]
+  cardsSettings: Record<string, CardSettingsType>
+}
 
 type UserPreferencesStoreActions = {
-  initState: (newState: UserPreferencesState) => void;
-  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<UserPreferencesState & UserPreferencesStoreActions>((set) => ({
-  userSelectedTags: [],
-  theme: "dark",
-  searchEngine: "google",
-  listingMode: "normal",
-  openLinksNewTab: true,
-  cards: [
-    { id: 0, name: 'github' },
-    { id: 1, name: 'hackernews' },
-    { id: 2, name: 'devto' },
-    { id: 3, name: 'producthunt' },
-  ],
-  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.map(tag => tag.value) }),
-  initState: (newState: UserPreferencesState) => set(() => ({ ...newState }))
+  initState: (newState: UserPreferencesState) => void
+  setTheme: (theme: Theme) => void
+  setSearchEngine: (theme: string) => void
+  setOpenLinksNewTab: (openLinksNewTab: boolean) => void
+  setListingMode: (listingMode: ListingMode) => void
+  setCards: (selectedCards: SelectedCard[]) => void
+  setTags: (selectedTags: Tag[]) => void
+  setCardSettings: (card: string, settings: CardSettingsType) => void
+}
 
-}), {
-  name: 'preferences_storage',
-  onRehydrateStorage(state) {
-    console.log("state", state)
-  },
-}));
+export const useUserPreferences = create(
+  persist<UserPreferencesState & UserPreferencesStoreActions>(
+    (set) => ({
+      userSelectedTags: [],
+      cardsSettings: {},
+      theme: 'dark',
+      searchEngine: 'google',
+      listingMode: 'normal',
+      openLinksNewTab: true,
+      cards: [
+        { id: 0, name: 'github' },
+        { id: 1, name: 'hackernews' },
+        { id: 2, name: 'devto' },
+        { id: 3, name: 'producthunt' },
+      ],
+      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: Tag[]) => set({ userSelectedTags: selectedTags }),
+      initState: (newState: UserPreferencesState) => set(() => {
+        return { ...newState }
+      }),
+      setCardSettings: (card: string, settings: CardSettingsType) =>
+        set((state) => ({
+          cardsSettings: {
+            ...state.cardsSettings,
+            [card]: { ...state.cardsSettings[card], ...settings },
+          },
+        })),
+    }),
+    {
+      name: 'preferences_storage',
+      onRehydrateStorage(state) {
+        console.log('state', state)
+      },
+      serialize: ({ state }) => {
+        let stateStr = JSON.stringify({
+          ...state,
+          userSelectedTags: state.userSelectedTags.map((tag) => tag.value),
+        })
+        console.log(666, stateStr, 'serialize')
+        return stateStr
+      },
+      deserialize: (stateStr) => {
+        let state = JSON.parse(stateStr)
+        state = {
+          ...state,
+          userSelectedTags: enhanceTags(state.userSelectedTags),
+        }
+        console.log(666, state, 'deserialize')
+        return state
+      },
+    }
+  )
+)

src/types/index.ts

@@ -1,3 +1,5 @@
+import { Tag } from "src/features/remoteConfig"
+
 export type SearchEngineType = {
   url: string
   label: string
@@ -14,7 +16,7 @@ export type SelectedTag = {
 }
 
 export type UserPreferences = {
-  userSelectedTags: string[]
+  userSelectedTags: Tag[]
   theme: "light" | "dark",
   openLinksNewTab: boolean,
   listingMode: "normal" | "compact",
@@ -59,5 +61,11 @@ export type CardPropsType = {
 export type ArticleItemPropsType = {
   index: number
   item: ArticleType
-  listingMode?: ListingMode
+  listingMode?: ListingMode,
+  selectedTag?: SelectedTag
+}
+
+export type CardSettingsType = {
+  language: string
+  dateRange?: string
 }

src/utils/DataEnhancement.ts

@@ -9,8 +9,8 @@ export const enhanceTags = (tags: string[]): Tag[] => {
 }
 
 
-export const getCardTagsValue = (tags: string[], valuesField: TagValuesFieldType): string[] => {
-  return enhanceTags(tags).reduce((acc: string[], curr) => {
+export const getCardTagsValue = (tags: Tag[], valuesField: TagValuesFieldType): string[] => {
+  return tags.reduce((acc: string[], curr) => {
     if (!curr[valuesField] || curr[valuesField].length === 0) return acc
     acc = [...acc, ...curr[valuesField]]
     return acc

src/utils/StorageMigration.ts

@@ -1,18 +1,19 @@
 import AppStorage from 'src/services/localStorage'
-import { useUserPreferences } from "src/stores/preferences";
-import { useBookmarks } from "src/stores/bookmarks";
+import { useUserPreferences } from 'src/stores/preferences'
+import { useBookmarks } from 'src/stores/bookmarks'
+import { enhanceTags } from './DataEnhancement'
 
 export const migrateToNewStorage = () => {
-  let preferences = AppStorage.getItem("hackerTabPrefs")
-  console.error("Here");
+  let preferences = AppStorage.getItem('hackerTabPrefs')
+  console.error('Here')
   //userSelectedTags: supportedTags.filter((t) => t.value === 'javascript'),
 
-  console.log("preferences", preferences)
+  console.log('preferences', preferences)
   if (!preferences) {
-    return;
+    return
   }
 
-  const { userBookmarks, changelogMeta, ...parsedPreferences } = JSON.parse(preferences)
+  let { userBookmarks, changelogMeta, ...parsedPreferences } = JSON.parse(preferences)
 
   // Migrate Bookmarkds
   if (userBookmarks && !!userBookmarks.length) {
@@ -21,9 +22,13 @@ export const migrateToNewStorage = () => {
 
   // Migrate preferences
   if (parsedPreferences) {
+    parsedPreferences = {
+      ...parsedPreferences,
+      userSelectedTags: enhanceTags(parsedPreferences.userSelectedTags),
+    }
     useUserPreferences.getState().initState(parsedPreferences)
   }
 
   // Remove old LocalStorage item
-  AppStorage.removeItem("hackerTabPrefs");
-}
+  AppStorage.removeItem('hackerTabPrefs')
+}