[Feat] Adds a watchlist to the redux-toolkit

components/FormDialog.tsx

@@ -8,6 +8,7 @@ import DialogContentText from '@material-ui/core/DialogContentText';
 import DialogTitle from '@material-ui/core/DialogTitle';
 
 import useUser from 'store/modules/user/useUser';
+import useWatchlist from 'store/modules/watchlist/useWatchlist';
 import { LOGIN_API, REGISTER_API } from 'utils/config';
 
 export default function FormDialog({
@@ -24,6 +25,7 @@ export default function FormDialog({
   const [user, setUser] = useState('');
 
   const { login } = useUser();
+  const { fetchWatchlist } = useWatchlist();
 
   const handleSubmit = () => {
     if (!signIn)
@@ -45,6 +47,7 @@ export default function FormDialog({
             alert(res.error.message);
           } else {
             login(res.user);
+            fetchWatchlist();
           }
         })
         .finally(() => setOpen(false));
@@ -66,6 +69,7 @@ export default function FormDialog({
             alert(res.error.message);
           } else {
             login(res.user);
+            fetchWatchlist();
           }
         })
         .finally(() => {

components/StockList/StockListItem.tsx

@@ -0,0 +1,47 @@
+import clsx from 'clsx';
+import { faTimes } from '@fortawesome/free-solid-svg-icons';
+
+import styles from 'components/StockList/StockList.module.scss';
+
+import IconButton from 'components/IconButton';
+import { IWatchlistItem } from 'components/StockList';
+
+interface Props {
+  item: IWatchlistItem;
+  deleteItem: (id: number) => void;
+}
+
+const StockListItem = ({ item, deleteItem }: Props): JSX.Element => {
+  return (
+    <li key={item.id} className={styles.bl_vertStocks_item}>
+      <div className={styles.bl_vertStocks_inner}>
+        <span
+          className={clsx(
+            styles.bl_vertStocks_stock,
+            styles.bl_vertStocks_stock__sort
+          )}
+        >
+          <div className={styles.bl_vertStocks_ttlWrapper}>
+            <p
+              className={styles.bl_vertStocks_ttl}
+              data-testid="stock-list-item-symbol"
+            >
+              {item.symbol}
+            </p>
+            <p className={styles.bl_vertStocks_standard}>UC</p>
+          </div>
+        </span>
+        <span className={styles.bl_vertStocks_marketPrice}>
+          <IconButton
+            onClick={() => deleteItem(item.id)}
+            icon={faTimes}
+            color="red"
+            bgc="rgb(249,249,250)"
+          />
+        </span>
+      </div>
+    </li>
+  );
+};
+
+export default StockListItem;

components/StockList/index.tsx

@@ -1,19 +1,14 @@
-import { useCallback, useEffect, useState } from 'react';
-
-import clsx from 'clsx';
-import { faTimes } from '@fortawesome/free-solid-svg-icons';
+import { useEffect } from 'react';
 
 import styles from 'components/StockList/StockList.module.scss';
 
-import IconButton from 'components/IconButton';
+import StockListItem from 'components/StockList/StockListItem';
 import MarketInfoListItem from 'components/MarketInfoList/MarketInfoListItem';
 import Spinner from 'components/Spinner';
 
-import { WATCHLISTS_API } from 'utils/config';
-
-type WatchListData = WatchlistItem[];
+import useWatchlist from 'store/modules/watchlist/useWatchlist';
 
-export interface WatchlistItem {
+export interface IWatchlistItem {
   c: number;
   d: number;
   dp: number;
@@ -22,81 +17,21 @@ export interface WatchlistItem {
 }
 
 const StockList = ({ editMode }: { editMode?: boolean }): JSX.Element => {
-  const [wData, setWData] = useState<WatchListData>([]);
-  const [wLoading, setWLoading] = useState<boolean>(false);
-
-  const fetchWatchlist = useCallback(async () => {
-    try {
-      setWLoading(true);
-      const res = await fetch(WATCHLISTS_API, {
-        headers: {
-          Authorization: `Bearer ${localStorage.getItem('token')}`,
-        },
-      });
-      const resData = await res.json();
-      console.log(resData);
-      setWData(resData);
-      setWLoading(false);
-    } catch (e) {
-      setWLoading(false);
-      console.log('fetch watchlist error');
-    }
-  }, []);
-
-  const deleteWatchlist = useCallback(async (id) => {
-    try {
-      await fetch(`${WATCHLISTS_API}/${id}`, {
-        method: 'DELETE',
-        headers: {
-          Authorization: `Bearer ${localStorage.getItem('token')}`,
-        },
-      });
-      window.location.reload();
-    } catch (e) {
-      console.log('delete watchlist error');
-    }
-  }, []);
+  const { watchlistData, watchlistStatus, fetchWatchlist, deleteWatchlist } =
+    useWatchlist();
 
   useEffect(() => {
     fetchWatchlist();
-    return () => setWLoading(false);
   }, [fetchWatchlist]);
 
   return (
     <>
-      {wLoading && <Spinner />}
-      {wData.length ? (
+      {watchlistStatus === 'loading' && <Spinner />}
+      {watchlistData.length ? (
         <ul className={styles.bl_vertStocks}>
-          {wData.map((d) =>
+          {watchlistData.map((d: IWatchlistItem) =>
             editMode ? (
-              <li key={d.id} className={styles.bl_vertStocks_item}>
-                <div className={styles.bl_vertStocks_inner}>
-                  <span
-                    className={clsx(
-                      styles.bl_vertStocks_stock,
-                      styles.bl_vertStocks_stock__sort
-                    )}
-                  >
-                    <div className={styles.bl_vertStocks_ttlWrapper}>
-                      <p
-                        className={styles.bl_vertStocks_ttl}
-                        data-testid="stock-list-item-symbol"
-                      >
-                        {d.symbol}
-                      </p>
-                      <p className={styles.bl_vertStocks_standard}>UC</p>
-                    </div>
-                  </span>
-                  <span className={styles.bl_vertStocks_marketPrice}>
-                    <IconButton
-                      onClick={() => deleteWatchlist(d.id)}
-                      icon={faTimes}
-                      color="red"
-                      bgc="rgb(249,249,250)"
-                    />
-                  </span>
-                </div>
-              </li>
+              <StockListItem key={d.id} item={d} deleteItem={deleteWatchlist} />
             ) : (
               <MarketInfoListItem
                 key={d.id}

jest.config.ts

@@ -17,6 +17,7 @@ const customJestConfig = {
     '\\.(css|less|scss|sass)$': 'identity-obj-proxy',
   },
   testEnvironment: 'jest-environment-jsdom',
+  modulePaths: ['<rootDir>'],
 };
 
 export default createJestConfig(customJestConfig);