migrate configuration context to zustand

Author: medyo

src/App.js

@@ -1,6 +1,5 @@
 import React, { useState, useEffect, useContext } from 'react'
 import './App.css'
-import ConfigurationContext from './configuration/ConfigurationContext'
 import Footer from './components/Footer'
 import Header from './components/Header'
 import BookmarksSidebar from './bookmark/BookmarksSidebar'
@@ -10,12 +9,15 @@ 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 { marketingBannerConfig = {} } = useContext(ConfigurationContext)
   const [showSideBar, setShowSideBar] = useState(false)
   const [showSettings, setShowSettings] = useState(false)
   const { dispatcher, ...state } = useContext(PreferencesContext)
+  const {
+    remoteConfig: { marketingBannerConfig },
+  } = useRemoteConfigStore()
 
   useEffect(() => {
     setupAnalytics()

src/configuration/AppWrapper.js

@@ -1,18 +1,20 @@
-import React, { useReducer, useContext } from 'react'
+import React, { useReducer } from 'react'
 import { LS_PREFERENCES_KEY } from 'src/Constants'
 import AppStorage from '../services/localStorage'
 import { PreferencesProvider } from '../preferences/PreferencesContext'
 import { getOSMode } from '../services/os'
 import AppReducer from '../preferences/AppReducer'
-import ConfigurationContext from './ConfigurationContext'
+import { useRemoteConfigStore } from 'src/features/remoteConfig'
 
 export default function AppWrapper({ children }) {
-  const configuration = useContext(ConfigurationContext)
+  const {
+    remoteConfig: { supportedTags },
+  } = useRemoteConfigStore()
 
   const [state, dispatcher] = useReducer(
     AppReducer,
     {
-      userSelectedTags: configuration.supportedTags.filter((t) => t.value === 'javascript'),
+      userSelectedTags: supportedTags.filter((t) => t.value === 'javascript'),
       userBookmarks: [],
       theme: getOSMode(),
       openLinksNewTab: true,
@@ -31,10 +33,10 @@ export default function AppWrapper({ children }) {
         preferences = JSON.parse(preferences)
         preferences = {
           ...preferences,
-          userSelectedTags: configuration.supportedTags.filter((tag) =>
+          userSelectedTags: supportedTags.filter((tag) =>
             preferences.userSelectedTags.includes(tag.value)
           ),
-          cards: preferences.cards.filter((card) => card.name != 'stackoverflow'),
+          cards: preferences.cards.filter((card) => card.name !== 'stackoverflow'),
         }
         return {
           ...initialState,

src/configuration/ConfigurationContext.js

@@ -2,6 +2,7 @@ import { useQuery } from '@tanstack/react-query';
 import { ExtractFnReturnType, QueryConfig } from 'src/lib/react-query';
 import { RemoteConfig } from "../types";
 import { axios } from 'src/lib/axios';
+import { useRemoteConfigStore } from "../stores/remoteConfig";
 
 const getAd = async (): Promise<RemoteConfig> => {
   return axios.get('/data/remoteConfiguration.json');
@@ -14,6 +15,9 @@ type UseGetAdOptions = {
 };
 export const useGetRemoteConfig = ({ config }: UseGetAdOptions = {}) => {
   return useQuery<ExtractFnReturnType<QueryFnType>>({
+    onSuccess(remoteConfig) {
+      useRemoteConfigStore.getState().setRemoteConfig(remoteConfig);
+    },
     ...config,
     queryKey: ['remote-config'],
     queryFn: () => getAd(),

src/features/remoteConfig/api/getRemoteConfig.ts

@@ -1,2 +1,3 @@
 export * from './providers/ConfigurationWrapper';
-export * from './types';
+export * from './types';
+export * from './stores/remoteConfig';

src/features/remoteConfig/index.ts

@@ -0,0 +1,33 @@
+import create from 'zustand';
+import { persist } from 'zustand/middleware'
+import { RemoteConfig } from "../types";
+
+type ChangelogVersionStore = {
+  remoteConfig: RemoteConfig;
+  setRemoteConfig: (remoteConfig: RemoteConfig) => void;
+};
+
+export const useRemoteConfigStore = create(persist<ChangelogVersionStore>((set) => ({
+  remoteConfig: {
+    marketingBannerConfig: undefined,
+    supportedTags: [
+      {
+        value: 'javascript',
+        label: 'Javascript',
+        githubValues: ['javascript'],
+        confsValues: ['javascript'],
+        devtoValues: ['javascript'],
+        hashnodeValues: ['javascript'],
+        mediumValues: ['javascript'],
+        redditValues: ['javascript'],
+        freecodecampValues: ['javascript']
+      },
+    ],
+  },
+  setRemoteConfig: (remoteConfig: RemoteConfig) =>
+    set(() => ({
+      remoteConfig: remoteConfig,
+    }))
+}), {
+  name: 'remote_config_storage',
+}));

src/features/remoteConfig/stores/remoteConfig.ts

@@ -3,6 +3,7 @@ export type Tag = {
   devtoValues: string[],
   hashnodeValues: string[],
   redditValues: string[],
+  githubValues: string[],
   freecodecampValues: string[],
   mediumValues: string[],
   label: string,
@@ -17,5 +18,5 @@ export type MarketingBannerConfig = {
 
 export type RemoteConfig = {
   supportedTags: Tag[],
-  marketingBannerConfig: MarketingBannerConfig
+  marketingBannerConfig?: MarketingBannerConfig
 }

src/features/remoteConfig/types/index.ts

@@ -7,7 +7,6 @@ import { SearchEngineType } from 'src/types'
 import Toggle from 'react-toggle'
 import './settings.css'
 import PreferencesContext from 'src/preferences/PreferencesContext'
-import ConfigurationContext from 'src/configuration/ConfigurationContext'
 import { SUPPORTED_CARDS, SUPPORTED_SEARCH_ENGINES, APP } from 'src/Constants'
 import {
   trackLanguageAdd,
@@ -18,6 +17,7 @@ import {
   trackListingModeSelect,
   trackTabTarget,
 } from 'src/lib/analytics'
+import { useRemoteConfigStore } from 'src/features/remoteConfig'
 
 type SettingsModalProps = {
   showSettings: boolean
@@ -30,7 +30,10 @@ type OptionType = {
 }
 
 export const SettingsModal = ({ showSettings, setShowSettings }: SettingsModalProps) => {
-  const { supportedTags } = useContext(ConfigurationContext)
+  const {
+    remoteConfig: { supportedTags },
+  } = useRemoteConfigStore()
+
   const preferences = useContext(PreferencesContext)
   const { dispatcher, cards, userSelectedTags, openLinksNewTab, listingMode, theme, searchEngine } =
     preferences