Fixed a minor bug in the navigation bar. If you were on page 2 for ex…

…ample, and clicked the main header, you would go back to page 1 but would still see page '2' on the navigation
AmirKakavand · Aug 23, 2024 · 84b5526 · 84b5526
1 parent 81dd0f9
commit 84b5526
Show file tree

Hide file tree

Showing 4 changed files with 42 additions and 26 deletions.
diff --git a/app/components/CharactersPage.tsx b/app/components/CharactersPage.tsx
@@ -1,12 +1,14 @@
 "use client";
-import { useState } from "react";
+import { useState, Dispatch, SetStateAction } from "react";
 import { CharacterCard } from "../components/CharacterCard";
 import { useMultipleCharacters } from "../utils/useMultipleCharacters";
 import PageNavigation from "./PageNavigation";
 
 interface IProps {
   pageNo: number;
-  setPageNo: React.Dispatch<React.SetStateAction<number>>;
+  setPageNo: Dispatch<SetStateAction<number>>;
+  tempPageNo: number | string;
+  setTempPageNo: Dispatch<SetStateAction<number | string>>;
   searchQuery?: string
 }
 
@@ -41,6 +43,8 @@ export const CharactersPage = (props: IProps) => {
         pageNo={props.pageNo}
         setPageNo={props.setPageNo}
         lastPageNo={lastPageNo}
+        tempPageNo={props.tempPageNo}
+        setTempPageNo={props.setTempPageNo}
       />
     </>
   );

diff --git a/app/components/Header.tsx b/app/components/Header.tsx
@@ -5,18 +5,20 @@ import { IoIosSearch } from "react-icons/io";
 interface IHeaderProps {
   name: string;
   setPageNo: Dispatch<SetStateAction<number>>; 
+  setTempPageNo: Dispatch<SetStateAction<number | string>>; 
   setName: Dispatch<SetStateAction<string>>;
   setSearchQuery: Dispatch<SetStateAction<string>>;
 }
 
-const Header = ({ name, setPageNo, setName, setSearchQuery }: IHeaderProps) => {
+const Header = ({ name, setPageNo, setName, setSearchQuery, setTempPageNo }: IHeaderProps) => {
   const [mouseHover, setMouseHover] = useState<boolean>(false);
   return (
     <header className="flex flex-col md:flex-row justify-around">
       <button onClick={() => {
         setSearchQuery("")
         setName("")
         setPageNo(1)
+        setTempPageNo(1)
       }}>
         <h1 className={h1Class}>
           Rick and Morty Wiki

diff --git a/app/components/PageNavigation.tsx b/app/components/PageNavigation.tsx
@@ -1,22 +1,23 @@
-import { useState } from "react";
+import { useState, Dispatch, SetStateAction } from "react";
 import { containsOnlyDigits } from "../utils/containsOnlyDigits";
 
 type IProps = {
   pageNo: number;
-  setPageNo: React.Dispatch<React.SetStateAction<number>>;
+  setPageNo: Dispatch<SetStateAction<number>>;
+  tempPageNo: number | string;
+  setTempPageNo: Dispatch<SetStateAction<number | string>>;
   lastPageNo: number;
 };
 
 const PageNavigation = (props: IProps) => {
-  const [tempPageNo, setTempPageNo] = useState<number | string>(1);
-  const [originalPage, setOriginalPage] = useState<number | string>(tempPageNo);
+  const [originalPage, setOriginalPage] = useState<number | string>(props.tempPageNo);
   return (
     <nav className="flex flex-row justify-between py-2 px-2 md:px-8 mt-10 mb-5 max-w-xl mx-auto rounded-xl bg-[#F9F4DA] text-[#231F20] shadow-[10px_10px_#231F20,11px_11px_#F9F4DA] border-2 border-[#F9F4DA]">
       <button
         className="text-sm md:text-2xl px-2 md:px-4 py-1 rounded-md text-cardBgColor font-semibold"
         onClick={() => {
-          if (Number(tempPageNo) > 1) {
-            setTempPageNo(Number(tempPageNo) - 1);
+          if (Number(props.tempPageNo) > 1) {
+            props.setTempPageNo(Number(props.tempPageNo) - 1);
             props.setPageNo(props.pageNo - 1);
           }
         }}
@@ -30,47 +31,47 @@ const PageNavigation = (props: IProps) => {
             type="text"
             accept="number"
             maxLength={2}
-            value={tempPageNo}
+            value={props.tempPageNo}
             onClick={(event) => {
-              setOriginalPage(tempPageNo);
-              setTempPageNo("");
+              setOriginalPage(props.tempPageNo);
+              props.setTempPageNo("");
             }}
             onChange={(event) => {
               let userInput: string | number = event.target.value;
 
               if (containsOnlyDigits(userInput)) {
                 userInput = Number(userInput);
-                setTempPageNo(userInput);
+                props.setTempPageNo(userInput);
               }
             }}
             onKeyDown={(event) => {
               // setOriginalPage(tempPageNo)
               if (event.key == "Backspace") {
-                if (String(tempPageNo).length <= 1) {
+                if (String(props.tempPageNo).length <= 1) {
                   console.log("now");
-                  setTempPageNo("");
+                  props.setTempPageNo("");
                   // setOriginalPage(1)
-                } else setTempPageNo(Number(String(tempPageNo).slice(0, -1)));
+                } else props.setTempPageNo(Number(String(props.tempPageNo).slice(0, -1)));
               }
               if (event.key === "Enter") {
-                if (Number(tempPageNo) <= props.lastPageNo) {
-                  if (Number(tempPageNo) === 0) {
+                if (Number(props.tempPageNo) <= props.lastPageNo) {
+                  if (Number(props.tempPageNo) === 0) {
                     console.log("it's here");
                     props.setPageNo(1);
                     setOriginalPage(1);
-                    setTempPageNo(1);
+                    props.setTempPageNo(1);
                   } else {
-                    props.setPageNo(Number(tempPageNo));
-                    setOriginalPage(tempPageNo);
+                    props.setPageNo(Number(props.tempPageNo));
+                    setOriginalPage(props.tempPageNo);
                   }
                 } else {
                   props.setPageNo(props.lastPageNo);
-                  setTempPageNo(props.lastPageNo);
+                  props.setTempPageNo(props.lastPageNo);
                   setOriginalPage(props.lastPageNo);
                 }
               }
             }}
-            onBlur={() => setTempPageNo(originalPage)}
+            onBlur={() => props.setTempPageNo(originalPage)}
             className="w-12 text-center border-2 border-solid border-neutral-600 text-2xl md:text-3xl bg-mainTextColor font-extrabold rounded-md p-1"
           />{" "}
           of {Number.isNaN(props.lastPageNo) ? ". . ." : props.lastPageNo}
@@ -79,8 +80,8 @@ const PageNavigation = (props: IProps) => {
       <button
         className="text-sm md:text-2xl px-2 md:px-4 py-1 rounded-md text-cardBgColor font-semibold"
         onClick={() => {
-          if (Number(tempPageNo) < props.lastPageNo) {
-            setTempPageNo(Number(tempPageNo) + 1);
+          if (Number(props.tempPageNo) < props.lastPageNo) {
+            props.setTempPageNo(Number(props.tempPageNo) + 1);
             props.setPageNo(props.pageNo + 1);
           }
         }}

diff --git a/app/page.tsx b/app/page.tsx
@@ -9,24 +9,33 @@ export default function Home() {
   const [pageNo, setPageNo] = useState<number>(1);
   const [name, setName] = useState<string>("");
   const [searchQuery, setSearchQuery] = useState<string>("");
+  const [tempPageNo, setTempPageNo] = useState<number | string>(1);
 
   useEffect(() => handleSearch({ name, setSearchQuery, setPageNo }), [name]);
   return (
     <main className={mainClass}>
       <Header
         name={name}
         setPageNo={setPageNo}
+        setTempPageNo={setTempPageNo}
         setName={setName}
         setSearchQuery={setSearchQuery}
       />
       {searchQuery === "" && (
-        <CharactersPage pageNo={pageNo} setPageNo={setPageNo} />
+        <CharactersPage
+          pageNo={pageNo}
+          setPageNo={setPageNo}
+          tempPageNo={tempPageNo}
+          setTempPageNo={setTempPageNo}
+        />
       )}
       {searchQuery !== "" && (
         <CharactersPage
           pageNo={pageNo}
           setPageNo={setPageNo}
           searchQuery={searchQuery}
+          tempPageNo={tempPageNo}
+          setTempPageNo={setTempPageNo}
         />
       )}