frontend: implemented useNavigate hook at necessary places

I have used useNavigate hook in place of window. location.href for better web performance, wherever required fixes: #89
shivansh-bhatnagar18 · Jun 11, 2024 · d1a5d76 · d1a5d76
1 parent 3fda6cc
commit d1a5d76
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 2 deletions.
diff --git a/frontend/src/Navbar.tsx b/frontend/src/Navbar.tsx
@@ -1,6 +1,7 @@
 import React, { useState } from 'react';
 import Button from './library/button';
 import './index.css';
+import { useNavigate } from 'react-router-dom';
 
 type NavbarProps = {
     isLoggedIn?: boolean;
@@ -17,6 +18,8 @@ const Navbar: React.FC<NavbarProps> = ({
 }) => {
     const [isOpen, setIsOpen] = useState(false);
 
+    const navigate = useNavigate();
+
     const toggleMenu = () => {
         setIsOpen(!isOpen);
     };
@@ -92,7 +95,7 @@ const Navbar: React.FC<NavbarProps> = ({
                                 buttonSize="w-[170px] h-12"
                                 px="px-0"
                                 onClick={() => {
-                                    window.location.href = '/error';
+                                    navigate('/error');
                                 }}
                             />
                         </div>

diff --git a/frontend/src/pages/Error.tsx b/frontend/src/pages/Error.tsx
@@ -1,7 +1,9 @@
 import ErrorImage from '../assets/tornCard.svg';
 import Button from '../library/button';
+import { useNavigate } from 'react-router-dom';
 
 function Error() {
+    const navigate = useNavigate();
     return (
         <div className="min-h-screen w-full flex items-center justify-center bg-white">
             <div className="grid grid-rows-3 justify-items-center text-center gap-4 max-w-[400px] p-8 text-[#333333] md:grid-cols-2 md:gap-2 md:gap-x-14 md:max-w-screen-xl lg:gap-x-20">
@@ -26,7 +28,7 @@ function Error() {
                         buttonSize="w-80 h-12"
                         className="border-4"
                         rounded="rounded-full"
-                        onClick={() => (window.location.href = '/')}
+                        onClick={() => navigate('/')}
                     />
                 </div>
             </div>