From 4647ff6eb06f5b3c29d7861bd32172b7774f2b9c Mon Sep 17 00:00:00 2001 From: tush2890 Date: Sat, 14 Oct 2023 01:14:05 +0100 Subject: [PATCH] did refactoring; added onScroll feature on restaurants page --- README.md | 2 +- src/features/Home/index.tsx | 23 +++++++++------- src/features/Login/index.tsx | 2 +- src/features/OrderOnline/index.tsx | 44 ++++++++++++++++++++---------- src/utils/constants.ts | 4 ++- src/utils/models.ts | 2 +- 6 files changed, 48 insertions(+), 29 deletions(-) diff --git a/README.md b/README.md index 0149d84..8858d97 100644 --- a/README.md +++ b/README.md @@ -10,7 +10,7 @@ To use this project completely, you need to clone the [online-grocery-app-server You also need to add an `.env` file at the root of your project that should have following contents:- - HTTPS=true -- REACT_APP_BASE_URL = http://localhost:4000 +- REACT_APP_API_URL = http://localhost:4000 - REACT_APP_GOOGLE_API = https://www.googleapis.com/ - REACT_APP_GG_APP_ID=YOUR_PROJECT_CLIENT_ID diff --git a/src/features/Home/index.tsx b/src/features/Home/index.tsx index 8051010..572c180 100644 --- a/src/features/Home/index.tsx +++ b/src/features/Home/index.tsx @@ -9,7 +9,7 @@ import { useAppDispatch, useAppSelector } from '../../redux/store'; import { setLocation, setLocations } from '../../redux/app.slice'; import axios from 'axios'; import { setSearchParam } from '../../redux/restaurant.slice'; -import { TIMEOUT_IN_MILLISECS } from '../../utils/constants'; +import { LOCATION_API_URL, TIMEOUT_IN_MILLISECS } from '../../utils/constants'; import { useDebouncedCallback } from 'use-debounce'; const assetsPath = process.env.PUBLIC_URL; @@ -24,15 +24,19 @@ const Home = () => { const dispatch = useAppDispatch(); const location = useAppSelector(state => state.appLevel.location); const locations = useAppSelector(state => state.appLevel.locations); - useEffect(() => { - axios.get>(`${process.env.REACT_APP_BASE_URL}/locations`) - .then((response) => dispatch(setLocations({ locations: response.data }))) - .catch(error => { - console.error(`Error fetching the locations - ${error}`) - });; - }, [dispatch]); - + fetchLocation(); + }, []); + const fetchLocation = async () => { + try { + const response = await axios.get>(LOCATION_API_URL); + dispatch(setLocations({ locations: response.data })); + } + catch (err) { + dispatch(setLocations({ locations: [] })); + console.error(`Error fecthing the locations - ${err}`); + } + } const debounced = useDebouncedCallback( (value) => { dispatch(setSearchParam({ searchParam: value })); @@ -40,7 +44,6 @@ const Home = () => { }, TIMEOUT_IN_MILLISECS ); - return ( <>
diff --git a/src/features/Login/index.tsx b/src/features/Login/index.tsx index d24f331..3ee35be 100644 --- a/src/features/Login/index.tsx +++ b/src/features/Login/index.tsx @@ -16,7 +16,7 @@ const Login = () => { const navigate = useNavigate(); const [appUser, setAppUser] = useState({ email: '', password: '', rememberMe: false }); const authenticateUser = () => { - axios.post(`${process.env.REACT_APP_BASE_URL}/user/authenticate`, appUser) + axios.post(`${process.env.REACT_APP_API_URL}/user/authenticate`, appUser) .then(response => { console.log(response.data); navigate(-1); diff --git a/src/features/OrderOnline/index.tsx b/src/features/OrderOnline/index.tsx index de364cb..ac3c93f 100644 --- a/src/features/OrderOnline/index.tsx +++ b/src/features/OrderOnline/index.tsx @@ -1,4 +1,4 @@ -import React, { useEffect, useState } from 'react'; +import React, { useEffect, useRef, useState } from 'react'; import { Header } from '../Header'; import style from './orderOnline.module.css'; import { Dropdown } from '../../components/Dropdown'; @@ -11,7 +11,7 @@ import { setRestaurant, setSearchParam } from '../../redux/restaurant.slice'; import axios from 'axios'; import { Restaurant } from '../../utils/models'; import { setRestaurantList } from '../../utils/service'; -import { TIMEOUT_IN_MILLISECS } from '../../utils/constants'; +import { RESTAURANT_API_URL, TIMEOUT_IN_MILLISECS } from '../../utils/constants'; import { useDebouncedCallback } from 'use-debounce'; const OrderOnline = () => { @@ -21,26 +21,42 @@ const OrderOnline = () => { const locations = useAppSelector(state => state.appLevel.locations); const [restaurants, setRestaurants] = useState([]); const searchString = useAppSelector(state => state.restaurant.searchParam); + const startPage = useRef(0); useEffect(() => { - axios.get(`${process.env.REACT_APP_BASE_URL}/restaurants/${location}?searchString=${searchString}`) - .then(response => { - setRestaurants(response.data) - setRestaurantList(response.data); - }).catch(error => { - setRestaurants([]) - setRestaurantList([]); - console.error(`Error fetching the data - ${error}`) - }); - }, [location, searchString]); + fetchRestaurants(); + }, [location, searchString, startPage.current]); + useEffect(() => { + window.addEventListener('scroll', onUserScroll); + return () => window.removeEventListener('scroll', onUserScroll); + }, []); + + const fetchRestaurants = async () => { + try { + const response = await axios + .get<{ data: Restaurant[] }>(`${RESTAURANT_API_URL}/${location}?searchString=${searchString}&startPage=${startPage.current}`); + setRestaurants([...restaurants, ...response.data.data]); + setRestaurantList([...restaurants, ...response.data.data]); + } + catch (err) { + setRestaurants([]) + setRestaurantList([]); + console.error(`Error fetching the restaurants - ${err}`); + } + } + const onUserScroll = () => { + if (window.scrollY + window.innerHeight > document.documentElement.scrollHeight - 700) { + console.log(`curr page ${startPage.current}`); + startPage.current++; + } + } const debounced = useDebouncedCallback( (value) => { dispatch(setSearchParam({ searchParam: value })); }, TIMEOUT_IN_MILLISECS ); - const headerMenus = [{ id: 'menu1', element: { element: Log in, parentClassNames: 'ms-auto' }]; - const onRestaurantClick = (restaurantId: string) => { const selectedRestaurant = restaurants.find(rest => rest.id === restaurantId); if (selectedRestaurant) { @@ -72,7 +87,6 @@ const OrderOnline = () => { } navigate('food-menus'); } - return (
diff --git a/src/utils/constants.ts b/src/utils/constants.ts index cf0f6f0..c82caf4 100644 --- a/src/utils/constants.ts +++ b/src/utils/constants.ts @@ -6,4 +6,6 @@ export const CURRENCY: { [key: string]: string } = { 'UK': '£', 'Default': '$' } -export const TIMEOUT_IN_MILLISECS = 500; \ No newline at end of file +export const TIMEOUT_IN_MILLISECS = 500; +export const LOCATION_API_URL = `${process.env.REACT_APP_API_URL}/locations`; +export const RESTAURANT_API_URL = `${process.env.REACT_APP_API_URL}/restaurants`; \ No newline at end of file diff --git a/src/utils/models.ts b/src/utils/models.ts index 4281e94..65641e4 100644 --- a/src/utils/models.ts +++ b/src/utils/models.ts @@ -24,5 +24,5 @@ export interface Restaurant { category: string[]; rating: number; address: Address; - isOpen: boolean + isOpen: boolean; } \ No newline at end of file