Save locale and data in Context (no api re-trigger)

A.Save locale and data in Context (no api re-trigger).md

Save locale and data in Context (no api re-trigger)

App.tsx

// Libs
import React, { useState, useContext } from 'react';

// Utils
import { NobelPrizesContext } from '../Context/NobelPrizesContext';
import appConfig from '../utils/appConfig';
import content from '../utils/content';

// Components
import withLayout from '../components/Wrapper/index';
import YearToggle from '../components/YearToggle';
import NobelPrizes from '../components/NobelPrize';

// Styles
import {
  NobelContentWrapper,
  NobelPrizesWrapper,
  RefreshDataButton,
  LoadingWrapper,
  LoaderWrapper,
  LoaderDot,
} from './app-styles';

const App: React.FC = () => {
  const { fromDate } = appConfig;
  const [selectedYear, setSelectedYear] = useState<number>(fromDate);
  const { currentPrizes, loading, error, setRefreshData, locale } = useContext(NobelPrizesContext);

  const renderNobelPrizesInfo = () => {
    return (
      <NobelContentWrapper>
        <NobelPrizesWrapper>
          <NobelPrizes selectedYear={selectedYear} />
        </NobelPrizesWrapper>
      </NobelContentWrapper>
    );
  };

  if (loading) {
    return (
      <div>
        return (
        <LoadingWrapper>
          <LoaderWrapper data-testid="custom-loader">
            <LoaderDot />
            <LoaderDot />
            <LoaderDot />
            <LoaderDot />
            <LoaderDot />
            <LoaderDot />
          </LoaderWrapper>
        </LoadingWrapper>
        );
      </div>
    );
  }

  if (error) {
    if (currentPrizes) {
      return renderNobelPrizesInfo();
    }
    return <div>{content[locale].error}</div>;
  }

  return (
    <>
      <YearToggle setSelectedYear={setSelectedYear} selectedYear={selectedYear} />
      {renderNobelPrizesInfo()}
      <RefreshDataButton
        onClick={() => {
          localStorage.removeItem('nobelPrizesData');
          setRefreshData(true);
        }}
        data-testid="refresh-button"
      >
        {content[locale].refreshData}
      </RefreshDataButton>
    </>
  );
};

export default withLayout(App);

Context.tsx

// Libs
import React, { useEffect, useState, createContext, Context, useCallback } from 'react';
import axios from 'axios';

// Utils
import { FormattedResults } from '../../types';
import appConfig from '../utils/appConfig';
import { formatResults } from '../utils/formaters';

interface NobelPrizesProps {
  children: Array<React.ReactElement> | React.ReactElement;
}

interface NobelPrizeStateContext {
  currentPrizes: Record<string, unknown>;
  loading: boolean;
  error: Error | null;
  setRefreshData: (arg: boolean) => void;
  locale: string;
  setLocale: (arg: string) => void;
}

export const defaultState: NobelPrizeStateContext = {
  currentPrizes: {},
  loading: true,
  error: null,
  setRefreshData: (arg: boolean) => console.log(arg),
  locale: 'en',
  setLocale: (arg: string) => console.log(arg),
};

export const NobelPrizesContext: Context<NobelPrizeStateContext> = createContext(defaultState);

export const NobelPrizesProvider: React.FC<NobelPrizesProps> = ({ children }) => {
  const {
    availableLocales: { english, swedish },
    apiUrl,
    fromDate,
    toDate,
  } = appConfig;
  const [currentPrizes, setCurrentPrizes] = useState<FormattedResults>({});
  const [loading, setLoading] = useState<boolean>(true);
  const [error, setError] = useState<Error | null>(null);
  const [freshData, setRefreshData] = useState<boolean>(false);
  const [locale, setLocale] = useState<string>(english.code);

  const localState = localStorage.getItem('nobelPrizesData');
  const preferedLocale = localStorage.getItem('preferedLocale');
  const getNobelPrizes = useCallback(async () => {
    try {
      const {
        data: { nobelPrizes },
      } = await axios.get(`${apiUrl}/nobelPrizes`, {
        params: { nobelPrizeYear: fromDate, yearTo: toDate },
      });

      return nobelPrizes;
    } catch (error) {
      console.log(error);
    }
  }, []);

  useEffect(() => {
    if (localState && !freshData) {
      setCurrentPrizes(JSON.parse(localState));
      preferedLocale ? setLocale(JSON.parse(preferedLocale)) : setLocale(english.code);
      setLoading(false);
    } else {
      getNobelPrizes()
        .then((data) => {
          localStorage.setItem('nobelPrizesData', JSON.stringify(formatResults(data)));
          setCurrentPrizes(formatResults(data));
          setRefreshData(false);
        })
        .catch((error) => {
          setError(error);
        })
        .finally(() => {
          localStorage.setItem('preferedLocale', JSON.stringify(locale));
          setLoading(false);
        });
    }
  }, [freshData]);

  useEffect(() => {
    if ([english.code, swedish.code].includes(locale)) {
      localStorage.setItem('preferedLocale', JSON.stringify(locale));
    } else {
      localStorage.setItem('preferedLocale', JSON.stringify(english));
    }
  }, [locale]);

  return (
    <NobelPrizesContext.Provider
      value={{
        currentPrizes,
        loading,
        error,
        setRefreshData,
        locale,
        setLocale,
      }}
    >
      {children}
    </NobelPrizesContext.Provider>
  );
};