feat: useExchange hook for handling state for the page, also getExchangeAmount util with test

Author: dynamicsingh

src/pages/Exchange/__tests__/useExchange.test.tsx

@@ -0,0 +1,72 @@
+import { useExchange } from '../useExchange';
+import { renderHook, act } from '@testing-library/react-hooks';
+import { exchangeRatesData } from 'shared/utils/mockData';
+import { POCKET } from 'constants/currency';
+
+describe('Exchange Hook', () => {
+  it('get initIal source and destination pockets', () => {
+    const { result } = renderHook(useExchange, {
+      initialProps: { rates: exchangeRatesData.data.rates },
+    });
+    let { source, destination } = result.current;
+    expect(source).toEqual({ currency: 'EUR', amount: 0 });
+    expect(destination).toEqual({ currency: 'GBP', amount: 0 });
+  });
+
+  it('allows to set values of source and destination pockets', () => {
+    const { result } = renderHook(useExchange, {
+      initialProps: { rates: exchangeRatesData.data.rates },
+    });
+    let { setDestination, setSource } = result.current;
+    act(() => setDestination({ currency: 'GBP', amount: 10 }));
+    act(() => setSource({ currency: 'USD', amount: 100 }));
+    expect(result.current.destination).toEqual({ currency: 'GBP', amount: 10 });
+    expect(result.current.source).toEqual({ currency: 'USD', amount: 100 });
+  });
+
+  it('interchange the source and destination transaction', () => {
+    const { result } = renderHook(useExchange, {
+      initialProps: { rates: exchangeRatesData.data.rates },
+    });
+    let { setDestination, setSource } = result.current;
+    act(() => setDestination({ currency: 'GBP', amount: 10 }));
+    act(() => setSource({ currency: 'USD', amount: 100 }));
+    act(() => result.current.onSwitch());
+    expect(result.current.destination).toEqual({
+      currency: 'USD',
+      amount: 100,
+    });
+    expect(result.current.source).toEqual({ currency: 'GBP', amount: 10 });
+  });
+
+  it('onAmount change in source and destination pocket', () => {
+    const { result } = renderHook(useExchange, {
+      initialProps: { rates: exchangeRatesData.data.rates },
+    });
+    const { onAmountChange } = result.current;
+    act(() => onAmountChange(POCKET.SOURCE, 150));
+    expect(result.current.destination).toEqual({
+      currency: 'GBP',
+      amount: -150,
+    });
+    expect(result.current.source).toEqual({ currency: 'EUR', amount: 150 });
+    act(() => onAmountChange(POCKET.DESTINATION, 300));
+    expect(result.current.destination).toEqual({
+      currency: 'GBP',
+      amount: 300,
+    });
+    expect(result.current.source).toEqual({ currency: 'EUR', amount: -300 });
+  });
+
+  it('onCurrencyChange in source pocket', () => {
+    const { result } = renderHook(useExchange, {
+      initialProps: { rates: exchangeRatesData.data.rates },
+    });
+    const { onCurrencyChange, setSource } = result.current;
+    act(() => setSource({ currency: 'USD', amount: 100 }));
+    act(() => onCurrencyChange(POCKET.SOURCE, 'USD'));
+    expect(result.current.source).toEqual({ currency: 'USD', amount: 100 });
+    act(() => onCurrencyChange(POCKET.DESTINATION, 'EUR'));
+    expect(result.current.destination).toEqual({ currency: 'EUR', amount: 0 });
+  });
+});

src/pages/Exchange/useExchange.tsx

@@ -0,0 +1,89 @@
+import { useState } from 'react';
+import { CurrencyCode, PocketContent } from 'models/pockets';
+import { EUR, GBP, POCKET } from 'constants/currency';
+import { getExchangeAmount } from 'shared/utils/exchange';
+import { ExchangeRate } from 'models/exchangeRates';
+
+const useExchange = ({ rates }: { rates: ExchangeRate }) => {
+  const [source, setSource] = useState<PocketContent>({
+    currency: EUR,
+    amount: 0,
+  });
+  const [destination, setDestination] = useState<PocketContent>({
+    currency: GBP,
+    amount: 0,
+  });
+
+  const onCurrencyChange = (
+    typeToUpdate: string,
+    currency: CurrencyCode,
+  ): void => {
+    if (typeToUpdate === POCKET.SOURCE) {
+      setSource((prevState) => ({ ...prevState, currency }));
+      setDestination((prevState) => ({
+        ...prevState,
+        amount: getExchangeAmount(
+          prevState.currency,
+          source.amount,
+          currency,
+          rates,
+        ),
+      }));
+    } else {
+      setDestination({
+        currency,
+        amount: getExchangeAmount(
+          currency,
+          source.amount,
+          source.currency,
+          rates,
+        ),
+      });
+    }
+  };
+
+  const onAmountChange = (typeToUpdate: string, amount: number): void => {
+    if (typeToUpdate === POCKET.SOURCE) {
+      setSource((prevState) => ({ ...prevState, amount }));
+      setDestination((prevState) => ({
+        ...prevState,
+        amount: getExchangeAmount(
+          prevState.currency,
+          amount,
+          source.currency,
+          rates,
+        ),
+      }));
+    } else {
+      setDestination((prevState) => ({ ...prevState, amount }));
+      setSource((prevState) => ({
+        ...prevState,
+        amount: getExchangeAmount(
+          prevState.currency,
+          amount,
+          destination.currency,
+          rates,
+        ),
+      }));
+    }
+  };
+
+  const onSwitch = (): void => {
+    let tempSource = { ...source };
+    let tempDestination = { ...destination };
+    setDestination(tempSource);
+    setSource(tempDestination);
+  };
+
+  return {
+    source,
+    setSource,
+    setDestination,
+    destination,
+    onAmountChange,
+    onCurrencyChange,
+    onSwitch,
+  };
+};
+
+export { useExchange };

src/shared/utils/__tests__/exchange.test.ts

@@ -1,5 +1,5 @@
 import {
-  calculateExchangeRate,
+  calculateExchangeRate, getExchangeAmount,
 } from '../exchange';
 import { exchangeRatesData } from '../mockData';
 
@@ -18,4 +18,14 @@ describe('exchange utils', () => {
       calculateExchangeRate('GBP', 'EUR', { ...exchangeRatesData.data.rates }),
     ).toEqual(-1);
   });
+
+  it('getExchangeAmount', () => {
+    expect(
+      getExchangeAmount('GBP', 3000, 'EUR', {
+        ...exchangeRatesData.data.rates,
+        EUR: 1,
+      }),
+    ).toEqual(2687.1);
+  });
+
 });

src/shared/utils/exchange.ts

@@ -10,3 +10,13 @@ export const calculateExchangeRate = (
   if (!fromRate || !toRate) return -1;
   return toRate / fromRate;
 };
+
+export const getExchangeAmount = (
+  toCurrency: string,
+  amount: number,
+  fromCurrency: string,
+  exchangeRates: ExchangeRate,
+): number => {
+  let rate = calculateExchangeRate(fromCurrency, toCurrency, exchangeRates);
+  return Number((amount * rate).toFixed(2));
+};