Skip to content

Commit

Permalink
fix: refactor
Browse files Browse the repository at this point in the history
  • Loading branch information
ttiimmothy committed Dec 1, 2023
1 parent 49326fc commit ad52677
Show file tree
Hide file tree
Showing 7 changed files with 771 additions and 11 deletions.
96 changes: 96 additions & 0 deletions src/pages/HomePage.tsx
Original file line number Diff line number Diff line change
@@ -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>
);
}
97 changes: 97 additions & 0 deletions src/pages/LoginPage.tsx
Original file line number Diff line number Diff line change
@@ -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;
6 changes: 3 additions & 3 deletions src/pages/map/MapPage.tsx → src/pages/MapPage.tsx
Original file line number Diff line number Diff line change
@@ -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>();
Expand Down
5 changes: 2 additions & 3 deletions src/pages/menu/MenuPage.tsx → src/pages/MenuPage.tsx
Original file line number Diff line number Diff line change
@@ -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);
Expand Down
Loading

0 comments on commit ad52677

Please sign in to comment.