flatten remote config store

Author: medyo

src/App.js

@@ -13,9 +13,7 @@ function App() {
   const [showSideBar, setShowSideBar] = useState(false)
   const [showSettings, setShowSettings] = useState(false)
 
-  const {
-    remoteConfig: { marketingBannerConfig },
-  } = useRemoteConfigStore()
+  const { marketingBannerConfig } = useRemoteConfigStore()
 
   useEffect(() => {
     setupAnalytics()

src/features/carbonAds/components/CarbonAd.tsx

@@ -1,8 +1,14 @@
 import './CarbonAd.css'
 import { addHttpsProtocol } from 'src/utils/UrlUtils'
 import { useGetAd } from '../api/getAd'
+import { useRemoteConfigStore } from 'src/features/remoteConfig'
 export const CarbonAd = () => {
-  const { data: ad } = useGetAd()
+  const { refresh_rate } = useRemoteConfigStore()
+  const { data: ad } = useGetAd({
+    config: {
+      refetchInterval: refresh_rate,
+    },
+  })
 
   if (!ad) {
     return null

src/features/remoteConfig/stores/remoteConfig.ts

@@ -1,33 +1,34 @@
 import create from 'zustand';
 import { persist } from 'zustand/middleware'
-import { RemoteConfig } from "../types";
+import { RemoteConfig, Tag, MarketingBannerConfig } from "../types";
 
 type ChangelogVersionStore = {
-  remoteConfig: RemoteConfig;
+  supportedTags: Tag[];
+  refresh_rate: number | false;
+  marketingBannerConfig?: MarketingBannerConfig;
   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']
-      },
-    ],
-  },
+  marketingBannerConfig: undefined,
+  refresh_rate: false,
+  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,
-    }))
+    set(() => {
+      return { ...remoteConfig }
+    }),
 }), {
   name: 'remote_config_storage',
 }));

src/features/remoteConfig/types/index.ts

@@ -27,5 +27,6 @@ export type MarketingBannerConfig = {
 
 export type RemoteConfig = {
   supportedTags: Tag[]
+  refresh_rate: number | false,
   marketingBannerConfig?: MarketingBannerConfig
 }

src/features/settings/components/SettingsModal.tsx

@@ -38,9 +38,7 @@ type OptionType = {
 }
 
 export const SettingsModal = ({ showSettings, setShowSettings }: SettingsModalProps) => {
-  const {
-    remoteConfig: { supportedTags },
-  } = useRemoteConfigStore()
+  const { supportedTags } = useRemoteConfigStore()
 
   const {
     cards,

src/utils/DataEnhancement.ts

@@ -1,7 +1,7 @@
 import { Tag, useRemoteConfigStore, TagValuesFieldType } from 'src/features/remoteConfig'
 
 export const enhanceTags = (tags: string[]): Tag[] => {
-  const savedTags = useRemoteConfigStore.getState().remoteConfig.supportedTags
+  const savedTags = useRemoteConfigStore.getState().supportedTags
 
   return tags
     .map((tag) => savedTags.find((st) => st.value.toLowerCase() === tag.toLocaleString()))