fix: refactor

src/pages/HomePage.tsx

@@ -0,0 +1,96 @@
+import { useForm, Controller } from "react-hook-form";
+import { useEffect, useState } from "react";
+import { Link, useNavigate } from "react-router-dom";
+import { useDispatch, useSelector } from "react-redux";
+
+import { AppDispatch, IRootState } from "../store";
+import { getRestaurantsByQueryThunk } from "../redux/restaurant/restaurantSlice";
+import RestaurantCardSkeletonLoader from "../components/skeletonLoader/RestaurantCardSkeletonLoader";
+import RestaurantCard from "../components/utils/cards/RestaurantCard";
+import SearchInput from "../components/utils/inputs/SearchInput";
+
+export default function HomePage(): JSX.Element {
+  const [loading, setLoading] = useState(true);
+  const navigate = useNavigate();
+  const { control, handleSubmit } = useForm();
+
+  const dispatch = useDispatch<AppDispatch>();
+  const restaurants = useSelector(
+    (state: IRootState) => state.restaurant.restaurants
+  );
+
+  useEffect(() => {
+    const fetchRestaurants = async () => {
+      dispatch(getRestaurantsByQueryThunk({ limit: 6 }));
+    };
+
+    fetchRestaurants();
+  }, [dispatch]);
+
+  useEffect(() => {
+    if (restaurants.length > 0) {
+      setLoading(false);
+    }
+  }, [restaurants]);
+
+  return (
+    <div>
+      <form
+        className="relative h-96 flex justify-center items-center"
+        onSubmit={handleSubmit((data) =>
+          navigate(`/restaurants?search=${data.name}`)
+        )}
+      >
+        <img
+          src={process.env.PUBLIC_URL + "/hero.jpg"}
+          alt="hero"
+          className="absolute top-0 left-0 w-full h-full z-[-10] brightness-75 object-cover"
+        />
+        <div className="flex flex-col justify-center items-center">
+          <h1 className="md:text-6xl text-4xl font-bold text-[#FFFFFF] text-center drop-shadow-xl mb-12">
+            Discovered Restaurant <br />& Delicious Food
+          </h1>
+          <Controller
+            name="name"
+            control={control}
+            defaultValue={""}
+            render={({ field: { onChange, value } }) => (
+              <SearchInput
+                type="text"
+                placeholder="tacos, pizza, chinese"
+                onChange={onChange}
+                value={value}
+              />
+            )}
+          />
+        </div>
+      </form>
+      <div className="max-w-6xl mx-auto px-4 my-4">
+        <div className="flex justify-between items-center mb-4">
+          <h1 className="text-center font-bold text-2xl">Latest Restaurants</h1>
+          <Link
+            className="text-slate-600 hover:text-slate-700 font-semibold hover:bg-slate-200 rounded-lg p-2"
+            to="/restaurants"
+          >
+            View More
+          </Link>
+        </div>
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+          {loading &&
+            Array.from({
+              length: 6,
+            }).map((_, index) => (
+              <RestaurantCardSkeletonLoader
+                key={`loader ${index}`}
+                width="363"
+              />
+            ))}
+          {!loading &&
+            restaurants.map((restaurant) => (
+              <RestaurantCard {...restaurant} key={restaurant.restaurant_id} />
+            ))}
+        </div>
+      </div>
+    </div>
+  );
+}

src/pages/LoginPage.tsx

@@ -0,0 +1,97 @@
+import { useEffect } from "react";
+import { useForm, Controller } from "react-hook-form";
+import { Link, useNavigate } from "react-router-dom";
+import { closeSnackbar, enqueueSnackbar } from "notistack";
+import { useDispatch, useSelector } from "react-redux";
+
+import { AppDispatch, IRootState } from "../store";
+import { loginThunk, updateMessage } from "../redux/auth/authSlice";
+import TextInput from "../components/utils/inputs/TextInput";
+
+function LoginPage() {
+  const navigate = useNavigate();
+  const { handleSubmit, control } = useForm();
+  const dispatch = useDispatch<AppDispatch>();
+  const loginSuccess = useSelector(
+    (state: IRootState) => state.auth.loginSuccess
+  );
+  const message = useSelector((state: IRootState) => state.auth.message);
+
+  const userLogin = async (user: { username: string; password: string }) => {
+    dispatch(loginThunk(user));
+  };
+
+  useEffect(() => {
+    if (loginSuccess) {
+      enqueueSnackbar("Login successfully", { variant: "success" });
+      setTimeout(() => {
+        navigate("/");
+      }, 1000);
+    } else if (loginSuccess === false && message) {
+      enqueueSnackbar(`${message} You may try again`, {
+        variant: "error",
+      });
+    }
+    setTimeout(() => {
+      closeSnackbar();
+    }, 2000);
+  }, [loginSuccess, navigate, message, dispatch]);
+
+  useEffect(() => {
+    setTimeout(() => {
+      if (message) {
+        dispatch(updateMessage(""));
+      }
+    }, 2000);
+  }, [dispatch, message]);
+
+  return (
+    <form
+      className="h-screen flex flex-col gap-6 justify-center max-w-sm mx-auto px-4"
+      onSubmit={handleSubmit((user) =>
+        userLogin(user as { username: string; password: string })
+      )}
+    >
+      <p className="text-3xl font-bold">Log in to Openrice</p>
+      <p>
+        New to Openrice? <Link to="/sign-up">Sign-up</Link>
+      </p>
+      <Controller
+        name="username"
+        control={control}
+        defaultValue={""}
+        render={({ field }) => (
+          <TextInput
+            label="Username"
+            type="text"
+            placeholder="Enter your username"
+            value={field.value}
+            onChange={field.onChange}
+          />
+        )}
+      />
+      <Controller
+        name="password"
+        control={control}
+        defaultValue={""}
+        render={({ field }) => (
+          <TextInput
+            label="Password"
+            type="password"
+            placeholder="Enter your password"
+            value={field.value}
+            onChange={field.onChange}
+          />
+        )}
+      />
+      <button
+        type="submit"
+        className="bg-black px-4 py-2 rounded-md text-white font-bold hover:scale-105 duration-500"
+      >
+        Log In
+      </button>
+    </form>
+  );
+}
+
+export default LoginPage;

src/pages/map/MapPage.tsx → src/pages/MapPage.tsx

@@ -1,8 +1,8 @@
 import { useEffect } from "react";
-import { getRestaurantsByQueryThunk } from "../../redux/restaurant/restaurantSlice";
 import { useDispatch, useSelector } from "react-redux";
-import { AppDispatch, IRootState } from "../../store";
-import MapComponent from "../../components/map/MapComponent";
+import { AppDispatch, IRootState } from "../store";
+import { getRestaurantsByQueryThunk } from "../redux/restaurant/restaurantSlice";
+import MapComponent from "../components/map/MapComponent";
 
 const MapPage = () => {
   const dispatch = useDispatch<AppDispatch>();

src/pages/menu/MenuPage.tsx → src/pages/MenuPage.tsx

@@ -1,7 +1,6 @@
 import { useEffect, useRef, useState } from "react";
-import { User } from "../../api/user/UserType";
-
-import useOnClickOutside from "../../components/hooks/useOnClickOutside";
+import { User } from "../api/user/UserType";
+import useOnClickOutside from "../components/hooks/useOnClickOutside";
 
 const MenuPage = () => {
   const [popUpOpen, setPopUpOpen] = useState(false);