Merge pull request VanshKing30#298 from Taranpreet10451/populateresta…

…urentimages Populate Restaurant Images
nishant0708 · Jun 15, 2024 · dba1004 · dba1004
2 parents a75003e + 3ba61e3
commit dba1004
Show file tree

Hide file tree

Showing 13 changed files with 400 additions and 551 deletions.
diff --git a/server/config/database.js b/server/config/database.js
@@ -5,7 +5,6 @@ require("dotenv").config();
 
 const dbConnect = () =>{
     mongoose.connect(process.env.DATABASE_URL,{
-
         useNewUrlParser : true,
         useUnifiedTopology : true,
     })

diff --git a/server/server.js b/server/server.js
@@ -1,12 +1,9 @@
 const express = require("express");
 const app = express();
-const dotenv = require('dotenv')
-dotenv.config({path : ".env"});
 const cors = require("cors");
 var cookieParser = require("cookie-parser");
 const PORT = process.env.PORT || 4000;
 const cloudinaryConfig = require("./config/cloudinaryConfig");
-const bodyParser = require('body-parser');
 
 app.use(
   cors({
@@ -16,8 +13,7 @@ app.use(
 app.use(cookieParser());
 app.use(express.json());
 app.use("*", cloudinaryConfig.cloudinaryConfig);
-app.use(bodyParser.json({ limit: '50mb' }));
-app.use(bodyParser.urlencoded({ limit: '50mb', extended: true }));
+
 //mounting routes
 const studentRoutes = require("./routes/student");
 const canteenRoutes = require("./routes/canteen");

diff --git a/src/components/CanteenCard.jsx b/src/components/CanteenCard.jsx
@@ -1,9 +1,27 @@
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
 import { Link } from "react-router-dom";
-import myHotel from "../assets/myHotel.jpg";
+import fetchRandomRestaurantImage from "../utils/unsplash";
+import { ClipLoader } from "react-spinners"; // Import ClipLoader from react-spinners
 
 const CanteenCard = ({ canteen }) => {
   const [selectedRecipes, setSelectedRecipes] = useState({});
+  const [imageSrc, setImageSrc] = useState('');
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    const getImage = async () => {
+      try {
+        const imageUrl = await fetchRandomRestaurantImage();
+        setImageSrc(imageUrl);
+      } catch (error) {
+        console.error('Error fetching image:', error);
+        setImageSrc('default-image-url');
+      } finally {
+        setLoading(false);
+      }
+    };
+    getImage();
+  }, []);
 
   const handleAddToMenu = (recipeId) => {
     setSelectedRecipes((prevSelectedRecipes) => ({
@@ -13,24 +31,31 @@ const CanteenCard = ({ canteen }) => {
   };
 
   return (
-    <div className="max-w-(18rem) bg-white border border-white rounded-lg shadow dark:bg-white dark:border-white my-6 mx-4 transition duration-300 ease-in-out transform hover:scale-105 hover:shadow-lg hover:shadow-green-500/50">
-      <div className="card-image-container">
-        <a href="#">
-          <img
-            className="card-image"
-            src={canteen.canteenImage ? canteen.canteenImage : myHotel}
-            alt={canteen.name}
-          />
-        </a>
-      </div>
-      <div className="card-content">
+    <div className="max-w-(18rem) bg-white border border-white rounded-lg shadow dark:bg-white dark:border-white my-4 mx-2 transition duration-300 ease-in-out transform hover:scale-105 hover:shadow-lg hover:shadow-green-500/50 ...">
+      {loading ? (
+        <div className="flex justify-center items-center h-48 w-full">
+          <ClipLoader size={50} color={"#123abc"} loading={loading} />
+        </div>
+      ) : (
+        <div className="flex justify-center">
+          <a href="#">
+            <img
+              className="rounded-t-lg h-48 w-full object-cover"
+              src={imageSrc || 'default-image-url'}
+              alt={canteen.name}
+            />
+          </a>
+        </div>
+      )}
+      <div className="p-5">
         <a href="#">
           <h5 className="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-gray-900 hover:text-green-500 transition duration-300 ease-in-out overflow-x-hidden">
             {canteen.name}
           </h5>
         </a>
+
         <Link
-           to={`/canteen/${canteen._id}`}
+          to={`/menu/${canteen._id}`}
           className="inline-flex items-center px-3 py-2 text-sm font-medium text-center text-white bg-blue-700 rounded-lg hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800 transition duration-300 ease-in-out"
         >
           View Menu

diff --git a/src/components/Footer.jsx b/src/components/Footer.jsx
@@ -1,52 +1,23 @@
+import { Link } from "react-router-dom"
 
-import React from 'react';
-import { useNavigate } from 'react-router-dom';
-
-const Footer = () => {
-    const navigate = useNavigate();
-
-    const handleNavigation = (path) => {
-    navigate(path);
-    window.scrollTo(0, 0);
-  };
-  return (
-    <div className="text-white p-3 font-semibold shadow-lg bg-gradient-to-t from-blue-950 via-blue-950 to-gray-900 w-full z-40 dark:bg-cadetblue dark:bg-none">
-        <div className='md:flex'>
-            <div className='md:w-1/2 flex mb-8 md:mb-0 items-top'>
-                <img src="https://foodies-web-app.vercel.app/static/media/logo2.db6bd5028bb56c6572c7.png" alt="" className='h-16 w-48'/>
-            </div>
-            <div className='md:w-1/2 md:flex'>
-                <div className='md:w-1/2'>
-                    <p className='text-gray-200 underline'>Contact</p>
-                    <ul className='text-gray-300 py-4'>
-                        <a href="https://www.linkedin.com/in/vansh-waldeo-81ab31285/"><li className='py-1 cursor-pointer'>Project Admin</li></a>
-                        <a href="https://www.linkedin.com/in/princepal0/"><li className='py-1 cursor-pointer'>Project Mentor</li></a>
-                    </ul>
-                </div>
-                <div className='md:w-1/2'>
-                    <p className='text-gray-200 underline'>Company</p>
-                    <ul className='text-gray-300 py-4'>
-                        <li className='py-1 cursor-pointer' onClick={() => handleNavigation('/about')}>About Us</li>
-                        <a href="/news"><li className='py-1 cursor-pointer'>News</li></a>
-                        <li className='py-1 cursor-pointer'>Contact Us</li>
-                    </ul>
-                </div>
-                <div className='md:w-1/2'>
-                <p className='text-gray-200 underline'>Legal Pages</p>
-                    <ul className='text-gray-300 py-4 cursor-pointer'>
-                        <a href="/privacypolicy"><li className='py-1 cursor-pointer'>Privacy Policy</li></a>
-                        <a href="/termsandconditions"><li className='py-1 cursor-pointer'>Terms and Conditions</li></a>
-                        <a href="/licensing"><li className='py-1 cursor-pointer'>Licensing</li></a>
-                    </ul>
-                </div>
-            </div>
-        </div>
-        <div className='mt-20 text-gray-400 xl:flex justify-center text-xs lg:text-sm xl:text-md'>
-        <span className="text-sm text-white sm:text-center ">© 2024-2025 <a href="#" className="hover:underline">Foodies™</a>. All Rights Reserved.</span>
-        </div>
-    </div>
-  )
-}
-
-export default Footer
-
+export default function Footer(){
+    return (
+        <footer className="p-4 bg-blue-950 md:p-8 lg:p-10 dark:bg-teal-700">
+  <div className="mx-auto max-w-screen-xl text-center">
+      <a href="#" className="flex justify-center items-center text-2xl font-semibold text-pink-800 ">
+          <img src="https://foodies-web-app.vercel.app/static/media/logo2.db6bd5028bb56c6572c7.png" alt="title" width={"200px"}/> 
+      </a>
+      <p className="my-6 text-white ">Discover culinary bliss with our diverse array of recipes and foodie resources – your ultimate destination for gastronomic inspiration.</p>
+      <ul className="flex flex-wrap justify-center items-center mb-6 text-gray-400 ">
+          <li className="mr-4 hover:underline md:mr-6 hover:text-orange-600">
+          <Link to="/about">About</Link>
+          </li>
+          <li className="mr-4 hover:underline md:mr-6 hover:text-orange-600">
+              <Link to="/news">News</Link>
+          </li>
+      </ul>
+      <span className="text-sm text-white sm:text-center ">© 2024-2025 <a href="#" className="hover:underline">Foodies™</a>. All Rights Reserved.</span>
+  </div>
+</footer>
+    )
+}
diff --git a/src/index.js b/src/index.js
@@ -4,6 +4,7 @@ import './index.css';
 import App from './App';
 import { BrowserRouter } from 'react-router-dom';
 import { Toaster } from 'react-hot-toast';
+
 const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(
   <BrowserRouter>

diff --git a/src/pages/About.jsx b/src/pages/About.jsx
@@ -43,7 +43,7 @@ const About = () => {
                 data-aos="fade-right"
                 className="md:w-1/2 order-2 md:order-1 md:px-20 px-10 text-center md:text-start"
               >
-                <h2 className="text-2xl sm:text-2xl md:text-3xl font-bold text-green-500 mb-2">
+                <h2 className="text-2xl sm:text-2xl md:text-3xl font-bold text-green-500 mb-4">
                   Welcome to Foodies
                 </h2>
                 <p className="text-lg leading-relaxed sm:mb-0 md:mb-4 p-4 sm:p-0 dark:text-slate-900">
@@ -79,7 +79,7 @@ const About = () => {
                 data-aos="fade-left"
                 className="md:w-1/2 order-2 md:order-2 md:px-8 text-center md:text-start px-4"
               >
-                <h2 className="text-2xl md:text-3xl font-bold text-green-500 mb-2">
+                <h2 className="text-2xl md:text-3xl font-bold text-green-500 mb-4">
                   Our Journey
                 </h2>
                 <p className="text-lg leading-relaxed mb-4 p-4 sm:p-0 dark:text-slate-900">

diff --git a/src/pages/Home.jsx b/src/pages/Home.jsx
@@ -8,9 +8,11 @@ import Navbar from "../components/Navbar";
 import CanteenList from "../components/CanteenList";
 import Loader from "../components/Loader/Loader";
 import Footer from "../components/Footer";
+
 import FloatBtn from "../components/FloatBtn/FloatBtn";
 import { useAuth } from "../authContext";
 import { useNavigate } from "react-router-dom";
+
 function Home() {
   const navigate = useNavigate();
   const { isAuthenticated } = useAuth();
@@ -27,7 +29,7 @@ function Home() {
     try{
       setLoading(true);
       const getCanteen = await fetch(
-        `http://localhost:8000/api/v1/getcanteen`,
+        `${process.env.REACT_APP_BASE_URL}/api/v1/getcanteen`,
         {
           method : "GET",
           headers :{
@@ -65,9 +67,7 @@ function Home() {
           <CanteenList canteenData = {canteenData}/>
         </div>
         <Footer />
-        <FloatBtn />
       </div>
-
       )
     }
     </>

diff --git a/src/pages/Licensing.jsx b/src/pages/Licensing.jsx