migrate remote config to TS

Author: medyo

src/configuration/AppLoadingHOC.js

@@ -0,0 +1,21 @@
+import { useQuery } from '@tanstack/react-query';
+import { ExtractFnReturnType, QueryConfig } from 'src/lib/react-query';
+import { RemoteConfig } from "../types";
+import { axios } from 'src/lib/axios';
+
+const getAd = async (): Promise<RemoteConfig> => {
+  return axios.get('/data/remoteConfiguration.json');
+}
+
+type QueryFnType = typeof getAd;
+
+type UseGetAdOptions = {
+  config?: QueryConfig<QueryFnType>;
+};
+export const useGetRemoteConfig = ({ config }: UseGetAdOptions = {}) => {
+  return useQuery<ExtractFnReturnType<QueryFnType>>({
+    ...config,
+    queryKey: ['remote-config'],
+    queryFn: () => getAd(),
+  });
+}

src/configuration/ConfigurationWrapper.js

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

src/features/remoteConfig/api/getRemoteConfig.ts

@@ -0,0 +1,23 @@
+import React from 'react'
+import useAsyncError from 'src/hooks/useAsyncError'
+import { useGetRemoteConfig } from '../api/getRemoteConfig'
+import BeatLoader from 'react-spinners/BeatLoader'
+
+export const ConfigurationWrapper = (props) => {
+  const { isLoading, isError, data: remoteConfig } = useGetRemoteConfig()
+  const throwError = useAsyncError()
+
+  if (isLoading) {
+    return (
+      <div className="appLoading">
+        <BeatLoader color={'#A9B2BD'} loading={true} size={15} />
+      </div>
+    )
+  }
+
+  if (isError || !remoteConfig) {
+    throwError('Could not fetch configuration data, Make sure you are connected to the internet')
+  }
+
+  return <>{props.children}</>
+}

src/features/remoteConfig/index.ts

@@ -0,0 +1,21 @@
+export type Tag = {
+  confsValues: string[],
+  devtoValues: string[],
+  hashnodeValues: string[],
+  redditValues: string[],
+  freecodecampValues: string[],
+  mediumValues: string[],
+  label: string,
+  value: string
+}
+
+export type MarketingBannerConfig = {
+  show: boolean,
+  campaign_name: string,
+  htmlContent: string
+}
+
+export type RemoteConfig = {
+  supportedTags: Tag[],
+  marketingBannerConfig: MarketingBannerConfig
+}

src/features/remoteConfig/providers/ConfigurationWrapper.js

@@ -5,7 +5,7 @@ import './index.css';
 import App from './App';
 import AppWrapper from './configuration/AppWrapper'
 import AppErrorBoundary from './configuration/AppErrorBoundary'
-import ConfigurationWrapper from './configuration/ConfigurationWrapper'
+import { ConfigurationWrapper } from 'src/features/remoteConfig/'
 import { QueryClientProvider } from '@tanstack/react-query'
 import { queryClient } from 'src/lib/react-query'