Code review - move currencySymbol state to a variable and some cleani…

…ng code.
RodBrowning · Oct 14, 2022 · 7dbe70a · 7dbe70a
1 parent 21754af
commit 7dbe70a
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 24 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -19,15 +19,15 @@ const App: React.FC = () => {
   const [loading, setLoading] = useState<boolean>(false);
   const [error, setError] = useState<boolean>(false);
   const [dolarAmount, setDolarAmount] = useState<string>('1.00');
-  const [bgCurrency, setBgCurrency] = useState<string[]>(['USD', 'BRL']);
+  const [currentCurrencySymbol, setBgCurrency] = useState<string[]>(['USD', 'BRL']);
   const [currenciesInfo, setCurrenciesInfo] = useState<ICurrenciesInfo>({
     symbols: { success: false },
     latest: { success: false },
   });
 
   const bgCurrencyHandler = (index: number, currency: string): void => {
-    bgCurrency[index] = currency;
-    setBgCurrency({ ...bgCurrency });
+    currentCurrencySymbol[index] = currency;
+    setBgCurrency({ ...currentCurrencySymbol });
   };
 
   const fetchCurrenciesAPI = async () => {
@@ -79,21 +79,21 @@ const App: React.FC = () => {
                 setBgCurrencyHandler={bgCurrencyHandler}
                 index={0}
                 currenciesInfo={currenciesInfo}
-                inicialCurrencySymbol="USD"
+                currentCurrencySymbol={currentCurrencySymbol[0]}
               />
               <CurrencyDisplay
                 dolarAmount={dolarAmount}
                 setDolarAmountHandler={setDolarAmount}
                 setBgCurrencyHandler={bgCurrencyHandler}
                 index={1}
                 currenciesInfo={currenciesInfo}
-                inicialCurrencySymbol="BRL"
+                currentCurrencySymbol={currentCurrencySymbol[1]}
               />
             </div>
             <div className="bg-effect" />
             <div className="background-flags">
-              <Flag currency={bgCurrency[0]} />
-              <Flag currency={bgCurrency[1]} />
+              <Flag currencySymbol={currentCurrencySymbol[0]} />
+              <Flag currencySymbol={currentCurrencySymbol[1]} />
             </div>
           </>
         ) : (

diff --git a/src/Components/CurrencyDisplay/index.tsx b/src/Components/CurrencyDisplay/index.tsx
@@ -18,7 +18,7 @@ interface Props {
   setBgCurrencyHandler: Function;
   index: number;
   currenciesInfo: ICurrenciesInfo;
-  inicialCurrencySymbol: string;
+  currentCurrencySymbol: string;
 }
 
 const CurrencyDisplay: React.FC<Props> = ({
@@ -27,16 +27,16 @@ const CurrencyDisplay: React.FC<Props> = ({
   setBgCurrencyHandler,
   index,
   currenciesInfo,
-  inicialCurrencySymbol,
+  currentCurrencySymbol,
 }) => {
   const inputText = useRef<HTMLInputElement>(null);
   const [showInput, setShowInput] = useState<boolean>(false);
   const [value, setValue] = useState<string>('0.00');
   const [displayValue, setDisplayValue] = useState<string>('');
   const [currencyTitle, setCurrencyTitle] = useState<string>();
-  const [currencySymbol, setCurrencySymbol] = useState<string>('USD');
   const [currencyVal, setCurrencyVal] = useState<number>(1);
   const symbolsAndTitles: [string, string][] = Object.entries(currenciesInfo.symbols.symbols!);
+  let currencySymbol = currentCurrencySymbol;
 
   const currencyFormatter = Intl.NumberFormat(userLocale() || 'en-US', {
     style: 'currency',
@@ -54,12 +54,11 @@ const CurrencyDisplay: React.FC<Props> = ({
   };
 
   const onSelectChangeHandler = (e: React.ChangeEvent<HTMLSelectElement>) => {
-    const currencySymbol = e.target.value;
+    currencySymbol = e.target.value;
+    setBgCurrencyHandler(index, currencySymbol);
+    setTitle(currencySymbol);
     const newValue = currenciesInfo.latest.rates![currencySymbol];
-    setCurrencySymbol(currencySymbol);
     setCurrencyVal(newValue);
-    setTitle(currencySymbol);
-    setBgCurrencyHandler(index, currencySymbol);
   };
 
   const convertAmountToDolar = (amount: OriginAmount, currencyVal: DolarValue): DolarAmount => {
@@ -89,11 +88,10 @@ const CurrencyDisplay: React.FC<Props> = ({
   };
 
   useEffect(() => {
-    const inicialCurrencyVal = currenciesInfo.latest.rates![inicialCurrencySymbol];
+    setBgCurrencyHandler(index, currentCurrencySymbol);
+    setTitle(currentCurrencySymbol);
+    const inicialCurrencyVal = currenciesInfo.latest.rates![currentCurrencySymbol];
     setCurrencyVal(inicialCurrencyVal);
-    setCurrencySymbol(inicialCurrencySymbol);
-    setBgCurrencyHandler(index, inicialCurrencySymbol);
-    setTitle(inicialCurrencySymbol);
   }, []);
 
   useEffect(() => {
@@ -111,7 +109,7 @@ const CurrencyDisplay: React.FC<Props> = ({
       </div>
       <div className="select-wrapper">
         <select
-          value={currencySymbol}
+          defaultValue={currencySymbol}
           onChange={(e) => {
             onSelectChangeHandler(e);
           }}

diff --git a/src/Components/Flags/index.tsx b/src/Components/Flags/index.tsx
@@ -5,18 +5,18 @@ import React, { useEffect, useLayoutEffect, useRef, useState } from 'react';
 import currenciesFlags from './flags';
 
 interface Props {
-  currency: string;
+  currencySymbol: string;
 }
 
-const Flag: React.FC<Props> = ({ currency }) => {
+const Flag: React.FC<Props> = ({ currencySymbol }) => {
   const flagContainerRef = useRef<HTMLDivElement>(null);
   const [index, setIndex] = useState<number>(0);
-  const [flags, setFlags] = useState<string[]>(currenciesFlags[currency]);
+  const [flags, setFlags] = useState<string[]>(currenciesFlags[currencySymbol]);
 
   useEffect(() => {
-    setFlags([...currenciesFlags[currency]]);
+    setFlags([...currenciesFlags[currencySymbol]]);
     setIndex(0);
-  }, [currency]);
+  }, [currencySymbol]);
 
   // eslint-disable-next-line consistent-return
   useLayoutEffect(() => {