Did refactoring and added onScroll feature on restaurants page

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
 

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,23 +24,26 @@ const Home = () => {
     const dispatch = useAppDispatch();
     const location = useAppSelector(state => state.appLevel.location);
     const locations = useAppSelector(state => state.appLevel.locations);
-
     useEffect(() => {
-        axios.get<Array<{ id: string, name: string }>>(`${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<Array<{ id: string, name: string }>>(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 }));
             navigate('order-food-online');
         },
         TIMEOUT_IN_MILLISECS
     );
-
     return (
         <>
             <div className={`${style.home}`}>

src/features/Login/index.tsx

@@ -16,7 +16,7 @@ const Login = () => {
     const navigate = useNavigate();
     const [appUser, setAppUser] = useState<User>({ email: '', password: '', rememberMe: false });
     const authenticateUser = () => {
-        axios.post<User>(`${process.env.REACT_APP_BASE_URL}/user/authenticate`, appUser)
+        axios.post<User>(`${process.env.REACT_APP_API_URL}/user/authenticate`, appUser)
             .then(response => {
                 console.log(response.data);
                 navigate(-1);

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<Restaurant[]>([]);
     const searchString = useAppSelector(state => state.restaurant.searchParam);
+    const startPage = useRef(0);
 
     useEffect(() => {
-        axios.get<Restaurant[]>(`${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: <Dropdown
@@ -64,15 +80,13 @@ const OrderOnline = () => {
         element: <Link className={`nav-link ${style.navLinkStyle}`} to={'/login'}>Log in</Link>,
         parentClassNames: 'ms-auto'
     }];
-
     const onRestaurantClick = (restaurantId: string) => {
         const selectedRestaurant = restaurants.find(rest => rest.id === restaurantId);
         if (selectedRestaurant) {
             dispatch(setRestaurant({ restaurant: selectedRestaurant }));
         }
         navigate('food-menus');
     }
-
     return (
         <div className={`container`}>
             <div className='mt-1'>

src/utils/constants.ts

@@ -6,4 +6,6 @@ export const CURRENCY: { [key: string]: string } = {
     'UK': '£',
     'Default': '$'
 }
-export const TIMEOUT_IN_MILLISECS = 500;
+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`;

src/utils/models.ts

@@ -24,5 +24,5 @@ export interface Restaurant {
     category: string[];
     rating: number;
     address: Address;
-    isOpen: boolean
+    isOpen: boolean;
 }