Merge pull request #30 from Tamir198/dev

Dev

client/src/components/AllCharacters/useHandleCharacters.js

@@ -2,12 +2,12 @@ import { useEffect } from "react";
 import { useDispatch, useSelector } from "react-redux";
 import { fetchCharacters } from "redux/actions";
 /** 
-    * Returns the current characters page data 
+    * Returns the current characters page data
     * 
     * This hook will check redux store for already existing data, if not 
     * found - send GET request to the server and update the store.
     * 
-    @pageNum is the wanted page number (can be found inside AllCharacters component)
+    @pageNum is the wanted page number 
 */
 export const useHandleCharacters = ({ pageNum }) => {
   const { characters } = useSelector((state) => state.characters);

client/src/pages/CharacterGallery/index.js

@@ -1,25 +1,19 @@
-import { useState, useCallback } from "react";
 import ReactPaginate from "https://cdn.skypack.dev/[email protected]";
 import { AllCharacters } from "components";
 import { config } from "constants/config";
+import { useCurrPage } from "./useCurrPage";
 
 import styles from "./CharacterGallery.module.css";
 
 const CharacterGallery = () => {
-  //TODO: use separated hook for this
   const {
     pageCount,
     startingPageNum,
     pageRangeDisplayed,
     marginPagesDisplayed,
   } = config;
 
-  const [currPage, setCurrPage] = useState(startingPageNum);
-
-  //todo change all handlers to use callback
-  const handlePageClick = useCallback(({ selected }) => {
-    setCurrPage(selected + 1);
-  }, []);
+  const { currPage, handlePageClick } = useCurrPage({ startingPageNum });
 
   return (
     <div>

client/src/pages/CharacterGallery/useCurrPage.js

@@ -0,0 +1,11 @@
+import { useState, useCallback } from "react";
+
+export const useCurrPage = ({ startingPageNum }) => {
+  const [currPage, setCurrPage] = useState(startingPageNum);
+
+  const handlePageClick = useCallback(({ selected }) => {
+    setCurrPage(selected + 1);
+  }, []);
+
+  return { currPage, handlePageClick };
+};

client/src/pages/CharacterSearch/useCurrentCharacter.js

@@ -0,0 +1,10 @@
+import { useDispatch, useSelector } from "react-redux";
+
+export const useCurrentCharacter = () => {
+  const dispatch = useDispatch();
+  const { id: characterId, data } = useSelector(
+    (state) => state.characters.currentCharacter
+  );
+
+  return { dispatch, id: characterId, data };
+};

client/src/pages/Home/homeStyle.module.css

@@ -2,7 +2,7 @@
     display: flex;
     flex-direction: row;
     justify-content: space-around;
-    align-items: end;
+    align-items: flex-end;
     flex: 1fr 1fr
 }
 

client/src/pages/Home/index.js

@@ -1,20 +1,11 @@
-import { useEffect } from "react";
-import { useDispatch, useSelector } from "react-redux";
 import homePageGif from "assets/homeGif.gif";
-import { fetchGeneralInfo } from "redux/actions";
 import { TopDescription } from "./TopDescription";
 
 import styles from "./homeStyle.module.css";
+import { useGeneralInfo } from "./useGeneralInfo";
 
 const Home = () => {
-  //TODO: use separated hook for this
-  const { generalInfo } = useSelector((state) => state.generalInfo);
-  const dispatch = useDispatch();
-
-  useEffect(() => {
-    dispatch(fetchGeneralInfo());
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+  const generalInfo = useGeneralInfo();
 
   return (
     <>

client/src/pages/Home/useGeneralInfo.js

@@ -0,0 +1,15 @@
+import { useEffect } from "react";
+import { useDispatch, useSelector } from "react-redux";
+import { fetchGeneralInfo } from "redux/actions";
+
+export const useGeneralInfo = () => {
+  const { generalInfo } = useSelector((state) => state.generalInfo);
+  const dispatch = useDispatch();
+
+  useEffect(() => {
+    dispatch(fetchGeneralInfo());
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  return generalInfo;
+};

client/src/pages/characterSearch/index.js

@@ -1,17 +1,14 @@
 import { Character } from "components";
 import { Character as CharacterModel } from "models";
-import { useDispatch, useSelector } from "react-redux";
 import { fetchCharacterById } from "redux/actions";
 
-import styles from "./characterSearch.module.css";
 import { searchCharacterById } from "redux/reducers/character";
+import { useCurrentCharacter } from "./useCurrentCharacter";
+
+import styles from "./characterSearch.module.css";
 
 const CharacterSearch = () => {
-  //TODO: use separated hook for this
-  const dispatch = useDispatch();
-  const { id: characterId, data } = useSelector(
-    (state) => state.characters.currentCharacter
-  );
+  const { dispatch, id: characterId, data } = useCurrentCharacter();
 
   return (
     <>