[SDP-949] State refactor: countries

src/apiQueries/useCountries.ts

@@ -0,0 +1,17 @@
+import { useQuery } from "@tanstack/react-query";
+import { API_URL } from "constants/settings";
+import { fetchApi } from "helpers/fetchApi";
+import { ApiCountry, AppError } from "types";
+
+export const useCountries = () => {
+  const query = useQuery<ApiCountry[], AppError>({
+    queryKey: ["countries"],
+    queryFn: async () => {
+      return await fetchApi(`${API_URL}/countries`);
+    },
+    // Keeping the fetched data for longer since it won't change that often
+    staleTime: 5 * 60 * 1000,
+  });
+
+  return query;
+};

src/components/DisbursementDetails/index.tsx

@@ -1,21 +1,16 @@
-import { useEffect } from "react";
 import {
   Card,
   Input,
   Select,
   Title,
   Notification,
 } from "@stellar/design-system";
-import { useDispatch } from "react-redux";
-
-import { AppDispatch } from "store";
-import { getCountriesAction } from "store/ducks/countries";
 
 import { useWallets } from "apiQueries/useWallets";
 import { useAssetsByWallet } from "apiQueries/useAssetsByWallet";
+import { useCountries } from "apiQueries/useCountries";
 import { InfoTooltip } from "components/InfoTooltip";
 import { formatUploadedFileDisplayName } from "helpers/formatUploadedFileDisplayName";
-import { useRedux } from "hooks/useRedux";
 import {
   ApiAsset,
   ApiCountry,
@@ -61,8 +56,6 @@ export const DisbursementDetails: React.FC<DisbursementDetailsProps> = ({
   onChange,
   onValidate,
 }: DisbursementDetailsProps) => {
-  const { countries } = useRedux("countries");
-
   enum FieldId {
     NAME = "name",
     COUNTRY_CODE = "country_code",
@@ -76,23 +69,20 @@ export const DisbursementDetails: React.FC<DisbursementDetailsProps> = ({
     isLoading: isWalletsLoading,
   } = useWallets();
 
+  const {
+    data: countries,
+    error: countriesError,
+    isLoading: isCountriesLoading,
+  } = useCountries();
+
   const {
     data: walletAssets,
     error: walletError,
     isFetching: isWalletAssetsFetching,
   } = useAssetsByWallet(details.wallet.id);
 
-  const dispatch: AppDispatch = useDispatch();
-
-  // Don't fetch again if we already have them in store
-  useEffect(() => {
-    if (!countries.status) {
-      dispatch(getCountriesAction());
-    }
-  }, [dispatch, countries.status]);
-
   const apiErrors = [
-    countries.errorString,
+    countriesError?.message,
     walletsError?.message,
     walletError?.message,
   ];
@@ -141,9 +131,7 @@ export const DisbursementDetails: React.FC<DisbursementDetailsProps> = ({
     switch (id) {
       case FieldId.COUNTRY_CODE:
         // eslint-disable-next-line no-case-declarations
-        const country = countries.items.find(
-          (c: ApiCountry) => c.code === value,
-        );
+        const country = countries?.find((c: ApiCountry) => c.code === value);
 
         updateState({
           country: {
@@ -244,10 +232,10 @@ export const DisbursementDetails: React.FC<DisbursementDetailsProps> = ({
           fieldSize="sm"
           onChange={updateDraftDetails}
           value={details.country.code}
-          disabled={countries.status === "PENDING"}
+          disabled={isCountriesLoading}
         >
-          {renderDropdownDefault(countries.status === "PENDING")}
-          {countries.items.map((country: ApiCountry) => (
+          {renderDropdownDefault(isCountriesLoading)}
+          {countries?.map((country: ApiCountry) => (
             <option key={country.code} value={country.code}>
               {country.name}
             </option>

src/store/index.ts

@@ -9,7 +9,6 @@ import BigNumber from "bignumber.js";
 
 import { RESET_STORE_ACTION_TYPE } from "constants/settings";
 
-import { reducer as countries } from "store/ducks/countries";
 import { reducer as disbursementDetails } from "store/ducks/disbursementDetails";
 import { reducer as disbursementDrafts } from "store/ducks/disbursementDrafts";
 import { reducer as disbursements } from "store/ducks/disbursements";
@@ -32,7 +31,6 @@ const isSerializable = (value: any) =>
   BigNumber.isBigNumber(value) || isPlain(value);
 
 const reducers = combineReducers({
-  countries,
   disbursementDetails,
   disbursementDrafts,
   disbursements,

src/types/index.ts

@@ -60,12 +60,6 @@ export type UserAccountInitialState = {
   restoredPathname?: string;
 };
 
-export type CountriesInitialState = {
-  items: ApiCountry[];
-  status: ActionStatus | undefined;
-  errorString?: string;
-};
-
 export type DisbursementDraftsInitialState = {
   items: DisbursementDraft[];
   status: ActionStatus | undefined;
@@ -119,7 +113,6 @@ export type ProfileInitialState = {
 };
 
 export interface Store {
-  countries: CountriesInitialState;
   disbursementDetails: DisbursementDetailsInitialState;
   disbursementDrafts: DisbursementDraftsInitialState;
   disbursements: DisbursementsInitialState;