migrate to the new store

medyo · medyo · commit bac31f5252b4 · 2022-10-30T19:22:56.000+01:00
diff --git a/src/App.js b/src/App.js
@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useContext } from 'react'
+import React, { useState, useEffect } from 'react'
 import './App.css'
 import { Footer } from 'src/components/Layout'
 import Header from 'src/components/Header'
@@ -7,30 +7,27 @@ import { MarketingBanner } from 'src/components/Elements/MarketingBanner'
 import ScrollCardsNavigator from './components/ScrollCardsNavigator'
 import AppContentLayout from './components/AppContentLayout'
 import 'react-contexify/dist/ReactContexify.css'
-import PreferencesContext from './preferences/PreferencesContext'
 import { setupAnalytics, trackPageView, setupIdentification } from 'src/lib/analytics'
 import { useRemoteConfigStore } from 'src/features/remoteConfig'
 
 function App() {
   const [showSideBar, setShowSideBar] = useState(false)
   const [showSettings, setShowSettings] = useState(false)
-  const { dispatcher, ...state } = useContext(PreferencesContext)
+
   const {
     remoteConfig: { marketingBannerConfig },
   } = useRemoteConfigStore()
 
   useEffect(() => {
     setupAnalytics()
-    setupIdentification(state)
+    setupIdentification()
     trackPageView('home')
   }, [])
 
   return (
     <div className="App">
       <Header
         setShowSideBar={setShowSideBar}
-        state={state}
-        dispatcher={dispatcher}
         showSideBar={showSideBar}
         showSettings={showSettings}
         setShowSettings={setShowSettings}
diff --git a/src/components/AppContentLayout.js b/src/components/AppContentLayout.js
@@ -1,8 +1,8 @@
-import React, { useContext, useState } from 'react'
+import React, { useState } from 'react'
 import { SUPPORTED_CARDS } from '../Constants'
-import PreferencesContext from '../preferences/PreferencesContext'
 import BottomNavigation from './BottomNavigation'
 import { isDesktop } from 'react-device-detect'
+import { useUserPreferences } from 'src/stores/preferences'
 
 function MobileCards({ selectedCard }) {
   const currentCard = SUPPORTED_CARDS.find((c) => c.value === selectedCard.name)
@@ -31,7 +31,7 @@ function DesktopCards({ cards }) {
 }
 
 function AppContentLayout({ setShowSettings }) {
-  const { cards } = useContext(PreferencesContext)
+  const { cards } = useUserPreferences()
   const [selectedCard, setSelectedCard] = useState(cards[0])
 
   return (
diff --git a/src/components/BottomNavigation.js b/src/components/BottomNavigation.js
@@ -1,10 +1,10 @@
-import React, { useContext } from 'react'
+import React from 'react'
 import { SUPPORTED_CARDS } from '../Constants'
-import PreferencesContext from '../preferences/PreferencesContext'
+import { useUserPreferences } from 'src/stores/preferences'
 import { AiOutlineMenu } from 'react-icons/ai'
 
 function BottomNavigation({ selectedCard, setSelectedCard, setShowSettings }) {
-  const { cards } = useContext(PreferencesContext)
+  const { cards } = useUserPreferences()
 
   return (
     <div className="bottomNavigation">
diff --git a/src/components/CardItemWithActions.js b/src/components/CardItemWithActions.js
@@ -1,23 +1,25 @@
-import React, { useState, useContext, useEffect } from 'react'
-import PreferencesContext from '../preferences/PreferencesContext'
+import React, { useState, useEffect } from 'react'
+import { useBookmarks } from 'src/stores/bookmarks'
 import { BiBookmarkPlus } from 'react-icons/bi'
 import { BiBookmarkMinus } from 'react-icons/bi'
 import { trackLinkBookmark, trackLinkUnBookmark, Attributes } from 'src/lib/analytics'
 
 export default function CardItemWithActions({ cardItem, item, index, source }) {
-  const { dispatcher, userBookmarks } = useContext(PreferencesContext)
+  const { bookmarkPost, unbookmarkPost, userBookmarks } = useBookmarks()
   const [isBookmarked, setIsBookmarked] = useState(
-    userBookmarks.some((bm) => bm.source == source && bm.url == item.url)
+    userBookmarks.some((bm) => bm.source === source && bm.url === item.url)
   )
   const onBookmarkClick = () => {
-    dispatcher({
-      type: isBookmarked ? 'unBookmarkItem' : 'bookmarkItem',
-      value: {
-        title: item.title,
-        url: item.url,
-        source,
-      },
-    })
+    const itemToBookmark = {
+      title: item.title,
+      url: item.url,
+      source,
+    }
+    if (isBookmarked) {
+      unbookmarkPost(itemToBookmark)
+    } else {
+      bookmarkPost(itemToBookmark)
+    }
     setIsBookmarked(!isBookmarked)
     const analyticsAttrs = {
       [Attributes.TRIGERED_FROM]: 'card',
@@ -32,7 +34,7 @@ export default function CardItemWithActions({ cardItem, item, index, source }) {
     }
   }
   useEffect(() => {
-    setIsBookmarked(userBookmarks.some((bm) => bm.source == source && bm.url == item.url))
+    setIsBookmarked(userBookmarks.some((bm) => bm.source === source && bm.url === item.url))
   }, [userBookmarks])
 
   return (
diff --git a/src/components/Elements/SearchBar/SearchBar.tsx b/src/components/Elements/SearchBar/SearchBar.tsx
@@ -0,0 +1,41 @@
+import React, { useEffect, useRef } from 'react'
+import { trackSearchEngineUse } from 'src/lib/analytics'
+import { GoSearch } from 'react-icons/go'
+import { SUPPORTED_SEARCH_ENGINES } from 'src/Constants'
+import { useUserPreferences } from 'src/stores/preferences'
+import { SearchEngine } from 'src/types'
+
+export const SearchBar = () => {
+  const { searchEngine } = useUserPreferences()
+
+  const keywordsInputRef = useRef<HTMLInputElement | null>(null)
+  const usedSearchEngine: SearchEngine =
+    SUPPORTED_SEARCH_ENGINES.find((engine) => engine.label === searchEngine) ||
+    SUPPORTED_SEARCH_ENGINES[0]
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault()
+    const target = e.target as typeof e.target & {
+      keyword: { value: string }
+    }
+
+    trackSearchEngineUse(usedSearchEngine.label)
+    window.open(`${usedSearchEngine.url}${target.keyword}`, '_self')
+  }
+
+  useEffect(() => {
+    keywordsInputRef.current?.focus()
+  }, [])
+
+  return (
+    <form className="searchBar" onSubmit={handleSubmit}>
+      <GoSearch className="searchBarIcon" size={20} />
+      <input
+        ref={keywordsInputRef}
+        type="text"
+        className="searchBarInput"
+        placeholder={`Search on ${usedSearchEngine.label}`}
+      />
+    </form>
+  )
+}
diff --git a/src/components/Elements/SearchBar/index.ts b/src/components/Elements/SearchBar/index.ts
@@ -0,0 +1 @@
+export * from "./SearchBar"
diff --git a/src/components/Header.js b/src/components/Header.js
@@ -4,49 +4,23 @@ import { CgTab } from 'react-icons/cg'
 import { BsFillBookmarksFill } from 'react-icons/bs'
 import { ReactComponent as HackertabLogo } from 'src/assets/logo.svg'
 import UserTags from './UserTags'
-import { SUPPORTED_SEARCH_ENGINES } from '../Constants'
 import { SettingsModal } from 'src/features/settings'
 import { BsMoon } from 'react-icons/bs'
 import { IoMdSunny } from 'react-icons/io'
-import { trackSearchEngineUse } from 'src/lib/analytics'
-import {Changelog} from 'src/features/changelog'
-import { GoSearch } from 'react-icons/go'
+import { Changelog } from 'src/features/changelog'
+import { SearchBar } from 'src/components/Elements/SearchBar'
+import { useUserPreferences } from 'src/stores/preferences'
+import { useBookmarks } from 'src/stores/bookmarks'
 
-function SearchBar({ state }) {
-  const keywordsInputRef = React.useRef(null)
-  const userSearchEngine = SUPPORTED_SEARCH_ENGINES.find(
-    (engine) => engine.label === state.searchEngine
-  )
-
-  const handleSubmit = (e) => {
-    e.preventDefault()
-    const keywords = e.target.children[1].value
-    trackSearchEngineUse(userSearchEngine.label)
-    window.open(`${userSearchEngine.url}${keywords}`, '_self')
-  }
-
-  useEffect(() => {
-    keywordsInputRef.current.focus()
-  }, [])
-
-  return (
-    <form className="searchBar" onSubmit={handleSubmit}>
-      <GoSearch className="searchBarIcon" size={20} />
-      <input
-        ref={keywordsInputRef}
-        type="text"
-        className="searchBarInput"
-        placeholder={`Search on ${userSearchEngine.label}`}
-      />
-    </form>
-  )
-}
-function Header({ state, dispatcher, showSideBar, setShowSideBar, showSettings, setShowSettings }) {
+function Header({ showSideBar, setShowSideBar, showSettings, setShowSettings }) {
   const [themeIcon, setThemeIcon] = useState(<BsMoon />)
   const isFirstRun = useRef(true)
+  const { theme, setTheme } = useUserPreferences()
+  const { userBookmarks } = useBookmarks()
 
   useEffect(() => {
-    document.documentElement.classList.add(state.theme)
+    document.documentElement.classList.add(theme)
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [])
 
   useEffect(() => {
@@ -58,27 +32,31 @@ function Header({ state, dispatcher, showSideBar, setShowSideBar, showSettings,
       }
     }
 
-    if (state.theme === 'light') {
-      document.documentElement.classList.replace('dark', state.theme)
+    if (theme === 'light') {
+      document.documentElement.classList.replace('dark', theme)
       setThemeIcon(<BsMoon />)
-    } else if (state.theme === 'dark') {
-      document.documentElement.classList.replace('light', state.theme)
+    } else if (theme === 'dark') {
+      document.documentElement.classList.replace('light', theme)
       setThemeIcon(<IoMdSunny />)
     }
-  }, [state?.theme])
+  }, [theme])
 
   const onThemeChange = () => {
-    dispatcher({ type: 'toggleTheme' })
+    if (theme === 'dark') {
+      setTheme('light')
+    } else {
+      setTheme('dark')
+    }
   }
 
   const onSettingsClick = () => {
     setShowSettings(true)
   }
 
   const BookmarksBadgeCount = () => {
-    return state.userBookmarks.length > 0 ? (
-      state.userBookmarks.length < 10 ? (
-        <span className="badgeCount">{state.userBookmarks.length}</span>
+    return userBookmarks.length > 0 ? (
+      userBookmarks.length < 10 ? (
+        <span className="badgeCount">{userBookmarks.length}</span>
       ) : (
         <span className="badgeCount">+9</span>
       )
@@ -97,7 +75,7 @@ function Header({ state, dispatcher, showSideBar, setShowSideBar, showSettings,
           <HackertabLogo className="logoText" />
           <Changelog />
         </span>
-        <SearchBar state={state} />
+        <SearchBar />
         <div className="extras">
           <button className="extraBtn" onClick={onSettingsClick}>
             <BsFillGearFill />
@@ -111,7 +89,7 @@ function Header({ state, dispatcher, showSideBar, setShowSideBar, showSettings,
           </button>
         </div>
         <div className="break"></div>
-        <UserTags userSelectedTags={state.userSelectedTags} onAddClicked={onSettingsClick} />
+        <UserTags onAddClicked={onSettingsClick} />
       </header>
     </>
   )
diff --git a/src/components/ScrollCardsNavigator.js b/src/components/ScrollCardsNavigator.js
@@ -1,11 +1,11 @@
-import React, { useState, useEffect, useContext, useLayoutEffect, useRef } from 'react'
+import React, { useState, useEffect, useLayoutEffect, useRef } from 'react'
 import { FiChevronLeft, FiChevronRight } from 'react-icons/fi'
 import { APP } from '../Constants'
-import PreferencesContext from '../preferences/PreferencesContext'
+import { useUserPreferences } from 'src/stores/preferences'
 import { trackPageScroll } from 'src/lib/analytics'
 
 function ScrollCardsNavigator() {
-  const { cards } = useContext(PreferencesContext)
+  const { cards } = useUserPreferences()
   const [leftButtonVisible, setLeftButtonVisible] = useState(true)
   const [rightButtonVisible, setRightButtonVisible] = useState(true)
   const scrollBarContainer = useRef(null)
diff --git a/src/components/SelectableCard.js b/src/components/SelectableCard.js
@@ -1,7 +1,7 @@
-import React, { useContext, useLayoutEffect } from 'react'
+import React, { useLayoutEffect } from 'react'
 import DropDownMenu from './DropDownMenu'
 import { GLOBAL_TAG, MY_LANGUAGES_TAG } from '../Constants'
-import PreferencesContext from '../preferences/PreferencesContext'
+import { useUserPreferences } from 'src/stores/preferences'
 
 function SelectableCard({
   tagId,
@@ -13,8 +13,7 @@ function SelectableCard({
   trackEvent,
   isLanguage = false,
 }) {
-  const preferences = useContext(PreferencesContext)
-  const { userSelectedTags } = preferences
+  const { userSelectedTags } = useUserPreferences()
 
   let mergedTags = data
   if (isLanguage) {
diff --git a/src/components/UserTags.js b/src/components/UserTags.js
@@ -1,12 +1,21 @@
 import React from 'react'
 import { TiPlus } from 'react-icons/ti';
+import { useUserPreferences } from 'src/stores/preferences'
+import { enhanceTags } from 'src/utils/DataEnhancement'
 
-function UserTags({ userSelectedTags, onAddClicked }) {
+function UserTags({ onAddClicked }) {
+  const { userSelectedTags } = useUserPreferences()
 
   return (
     <nav className="tags">
-      {userSelectedTags.map((tag, index) => <span key={index} className="tag">{tag.value}</span>)}
-      <span className="tag tagHoverable" onClick={onAddClicked}><TiPlus className="tagIcon" /></span>
+      {enhanceTags(userSelectedTags).map((tag, index) => (
+        <span key={index} className="tag">
+          {tag.value}
+        </span>
+      ))}
+      <span className="tag tagHoverable" onClick={onAddClicked}>
+        <TiPlus className="tagIcon" />
+      </span>
     </nav>
   )
 }
diff --git a/src/features/bookmarks/components/BookmarksSidebar.tsx b/src/features/bookmarks/components/BookmarksSidebar.tsx
@@ -15,7 +15,7 @@ import {
 import 'react-pro-sidebar/dist/css/styles.css'
 import CardLink from '../../../components/CardLink'
 import { trackLinkUnBookmark, Attributes } from 'src/lib/analytics'
-import { useUserPreferences } from 'src/stores/preferences'
+import { useBookmarks } from 'src/stores/bookmarks'
 
 type BookmarkItemProps = {
   item: {
@@ -26,7 +26,7 @@ type BookmarkItemProps = {
   appendRef?: boolean
 }
 const BookmarkItem = ({ item, appendRef = true }: BookmarkItemProps) => {
-  const { unbookmarkPost } = useUserPreferences()
+  const { unbookmarkPost } = useBookmarks()
   const analyticsAttrs = {
     [Attributes.TRIGERED_FROM]: 'bookmarks',
     [Attributes.TITLE]: item.title,
@@ -60,7 +60,7 @@ type BookmarksSidebarTtypes = {
   onClose: () => void
 }
 export const BookmarksSidebar = ({ showSidebar, onClose }: BookmarksSidebarTtypes) => {
-  const { userBookmarks } = useUserPreferences()
+  const { userBookmarks } = useBookmarks()
   const githubBookmarks = userBookmarks.filter((bm) => bm.source === 'github')
   const newsBookmarks = userBookmarks.filter(
     (bm) =>
diff --git a/src/features/bookmarks/index.ts b/src/features/bookmarks/index.ts
@@ -1 +1,2 @@
-export * from "./components/BookmarksSidebar"
+export * from "./components/BookmarksSidebar"
+export * from "./types"
diff --git a/src/features/bookmarks/types/index.ts b/src/features/bookmarks/types/index.ts
@@ -0,0 +1,5 @@
+export type BookmarkedPost = {
+  title: string,
+  source: string,
+  url: string;
+}
diff --git a/src/features/settings/components/SettingsModal.tsx b/src/features/settings/components/SettingsModal.tsx
@@ -18,6 +18,7 @@ import {
   trackTabTarget,
 } from 'src/lib/analytics'
 import { useRemoteConfigStore } from 'src/features/remoteConfig'
+import { enhanceTags } from 'src/utils/DataEnhancement'
 
 type SettingsModalProps = {
   showSettings: boolean
@@ -154,7 +155,7 @@ export const SettingsModal = ({ showSettings, setShowSettings }: SettingsModalPr
           <div className="settingContent">
             <Select
               options={supportedTags}
-              defaultValue={userSelectedTags}
+              defaultValue={enhanceTags(userSelectedTags)}
               isMulti={true}
               isClearable={false}
               isSearchable={false}
diff --git a/src/lib/analytics.ts b/src/lib/analytics.ts
diff --git a/src/providers/AppWrapper.js b/src/providers/AppWrapper.js
diff --git a/src/stores/bookmarks.ts b/src/stores/bookmarks.ts
diff --git a/src/stores/preferences.ts b/src/stores/preferences.ts
diff --git a/src/types/index.ts b/src/types/index.ts
diff --git a/src/utils/DataEnhancement.ts b/src/utils/DataEnhancement.ts
diff --git a/src/utils/StorageMigration.ts b/src/utils/StorageMigration.ts
