Merge branch 'main' into fixed-fooditemadd

src/components/NewsCard.jsx

@@ -1,9 +1,13 @@
 import React from "react";
+import { Link } from "react-router-dom";
 
 function NewsCard({ article }) {
   const { title, description, source, publishedAt, url, image } = article;
   console.log(image)
-
+ const maxDescriptionLength = 100;
+  const truncatedDescription = description.length > maxDescriptionLength
+  ? description.substring(0, maxDescriptionLength) + "..."
+  : description;
   const defaultImage =
     "https://images.7news.com.au/publication/C-14905251/b0baa6a78bc17d1185f03003c8f7989917db9b9f-16x9-x0y75w800h450.jpg?imwidth=1200";
 
@@ -25,7 +29,8 @@ function NewsCard({ article }) {
         <h6 className="text-gray-600 text-sm">{`${source.name} • ${new Date(
           publishedAt
         ).toLocaleString()}`}</h6>
-        <p className="text-gray-700 mt-2">{description}</p>
+        <p className="text-gray-700 mt-2">{truncatedDescription}</p>
+        <Link to={url} className=" mt-2 text-blue-500 underline " >Read More</Link>
       </div>
       <a
         href={url}

src/pages/AddFoodItem.jsx

@@ -61,6 +61,7 @@ function AddFoodItem() {
         break;
       case "Dinner":
         apiUrl = `${process.env.REACT_APP_BASE_URL}/${canteenId}/dinner/add`;
+        console.log("This is api url",apiUrl);
         break;
       default:
         toast.error("Please select a meal type.");
@@ -108,6 +109,7 @@ function AddFoodItem() {
       <form
         onSubmit={handleSubmit}
         className={`p-6 rounded shadow-lg w-full sm:w-2/5 rounded-3xl border-2 ${theme === 'dark' ? 'bg-gray-300' : 'bg-white'}`}
+
       >
         <h1 className="text-xl font-bold mb-4 text-black">Add Food Item</h1>
 
@@ -119,7 +121,7 @@ function AddFoodItem() {
             name="dish"
             value={formData.dish}
             onChange={handleChange}
-            className="w-full p-2 border border-gray-300 rounded mt-1"
+            className="w-full p-2 border border-gray-300 rounded mt-1 text-black"
             required
             placeholder="Enter dish name"
           />
@@ -132,7 +134,7 @@ function AddFoodItem() {
             name="dishId"
             value={formData.dishId}
             onChange={handleChange}
-            className="w-full p-2 border border-gray-300 rounded mt-1"
+            className="w-full p-2 border border-gray-300 rounded mt-1 text-black"
             required
             placeholder="Enter dish ID"
           />
@@ -162,7 +164,7 @@ function AddFoodItem() {
             name="description"
             value={formData.description}
             onChange={handleChange}
-            className="w-full p-2 border border-gray-300 rounded mt-1"
+            className="w-full p-2 border border-gray-300 rounded mt-1 text-black"
             rows="3"
             placeholder="Enter dish description"
           ></textarea>

src/pages/EditProfile.jsx

@@ -2,11 +2,16 @@ import React, { useState, useEffect } from 'react';
 import { useParams, useNavigate } from 'react-router-dom';
 import Navbar from '../components/Navbar';
 import Footer from '../components/Footer';
-
+import { MdEdit } from "react-icons/md";
+import { FaArrowAltCircleLeft } from "react-icons/fa";
 const EditProfile = () => {
   const { _id } = useParams(); // Assuming you have canteen ID in the URL
   const navigate = useNavigate(); // useNavigate hook for navigation
   const [edit, setEditable] = useState(false);
+  const [editName, setEditName] = useState(false);
+  const [editEmail, setEditEmail] = useState(false);
+  const [editCollegeName, setEditCollegeName] = useState(false);
+  const [editImage, setEditImage] = useState(false);
   const [formData, setFormData] = useState({
     name: '',
     email: '',
@@ -93,98 +98,113 @@ const EditProfile = () => {
   return (
     <>
     <Navbar/>
-    <div className="relative min-h-screen pt-[120px] flex flex-col items-center justify-center dark:bg-gray-100">
+    <div className="relative min-h-screen pt-[120px] flex flex-col items-center justify-center dark:bg-gray-100 text-black ">
       <h2 className="text-4xl text-white font-bold mb-8 dark:text-black">Edit Profile</h2>
       <button
-        className="absolute top-[120px] right-[80px] mb-4 bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline"
+        className="absolute top-[120px] right-[80px] mb-4 flex gap-3 bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-full focus:outline-none focus:shadow-outline"
         onClick={() => navigate(`/section/${_id}`)}
       >
+        <FaArrowAltCircleLeft/>
         Back
       </button>
       <form className="w-full max-w-lg bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4" onSubmit={handleSubmit}>
         <div className="mb-4">
           <label className="block text-gray-700 text-sm font-bold mb-2" htmlFor="name">
             Canteen Name
           </label>
-          <input
+         <div className='flex flex-row justify-between bg-white text-black border rounded-full px-4 py-2 shadow ' >
+         <input
             type="text"
             name="name"
             value={formData.name}
-            disabled={!edit}
+            disabled={!editName}
             onChange={handleChange}
-            className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
+
+            className=" appearance-none border-none rounded w-full py-2 px-3 text-gray-700 leading-tight outline-none"
+
           />
+          <MdEdit className=' text-2xl self-center cursor-pointer' onClick={() => setEditName(!editName)} />
+         </div>
         </div>
         <div className="mb-4">
           <label className="block text-gray-700 text-sm font-bold mb-2" htmlFor="email">
             Email
           </label>
-          <input
+          <div className='flex flex-row justify-between bg-white text-black border rounded-full px-4 py-2 shadow ' >
+         <input
             type="email"
             name="email"
-            disabled={!edit}
             value={formData.email}
+            disabled={!editEmail}
             onChange={handleChange}
-            className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
+            className=" appearance-none border-none rounded w-full py-2 px-3 text-gray-700 leading-tight outline-none"
           />
+          <MdEdit className=' text-2xl self-center cursor-pointer' onClick={() => setEditEmail(!editEmail)} />
+         </div>
         </div>
         <div className="mb-4">
           <label className="block text-gray-700 text-sm font-bold mb-2" htmlFor="collegeName">
             College Name
           </label>
-          <input
+          <div className='flex flex-row justify-between bg-white text-black border rounded-full px-4 py-2 shadow ' >
+         <input
             type="text"
             name="collegeName"
-            disabled={!edit}
             value={formData.collegeName}
+            disabled={!editCollegeName}
             onChange={handleChange}
-            className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
+            className=" appearance-none border-none rounded w-full py-2 px-3 text-gray-700 leading-tight outline-none"
           />
+          <MdEdit className=' text-2xl self-center cursor-pointer' onClick={() => setEditCollegeName(!editCollegeName)} />
+         </div>
         </div>
         <div className="mb-6">
           <label className="block text-gray-700 text-sm font-bold mb-2" htmlFor="canteenImage">
             Canteen Image
           </label>
-          <input
+            <div className='flex flex-row justify-between bg-white text-black border rounded-full px-4 py-2 shadow ' >
+         <input
             type="file"
-            accept="image/*"
-            disabled={!edit}
-            onChange={handleImageChange}
-            className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
+            accept='image/*'
+            disabled={!editImage}
+            onChange={handleChange}
+            className=" appearance-none border-none rounded w-full py-2 px-3 text-gray-700 leading-tight outline-none"
           />
+          <MdEdit className=' text-2xl self-center cursor-pointer' onClick={() => setEditImage(!editImage)} />
+         </div>
           {formData.canteenImage ? (
             <img src={formData.canteenImage} alt="Canteen" className="mt-4 w-32 h-32 object-cover rounded" />
           ) : (
             <p className="mt-4 text-gray-700">No image available</p>
           )}
         </div>
         <div className="flex items-center justify-between">
-          {!edit && (
+          {/* {!edit && (
             <button
               type="button"
               className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline"
               onClick={() => setEditable(true)}
             >
               Edit
             </button>
-          )}
-          {edit && (
+          )} */}
+
             <>
               <button
+               disabled={!editName && !editEmail && !editCollegeName && !editImage}
                 type="submit"
-                className="bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline"
+                className="bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded-full focus:outline-none focus:shadow-outline"
               >
-                Save
+                Save Change
               </button>
               <button
                 type="button"
-                className="bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline"
+                className="bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded-full focus:outline-none focus:shadow-outline"
                 onClick={() => setEditable(false)}
               >
                 Cancel
               </button>
             </>
-          )}
         </div>
       </form>
 

src/pages/Foodlist.jsx

@@ -24,8 +24,7 @@ const Foodlist = () => {
     try {
       setLoading(true);
       const response = await fetch(
-        `${process.env.REACT_APP_BASE_URL}/${_id}/${mealType}`,
-        {
+        `${process.env.REACT_APP_BASE_URL}/${_id}/${mealType}`,        {
           method: "GET",
           headers: {
             "Content-Type": "application/json",
@@ -40,7 +39,10 @@ const Foodlist = () => {
       setLoading(false);
     }
   };
-
+  function handleClose(){
+    setEditModal(false)
+    console.log(editModal)
+  }
   const handleDelete = async (dishId, mealType) => {
     try {
       const token = localStorage.getItem("token");
@@ -135,7 +137,7 @@ const Foodlist = () => {
   useEffect(() => {
     fetchData("breakfast", setBreakfast);
     fetchData("lunch", setLunch);
-    fetchData("dinner", setDinner);
+    fetchData("dinner", setLunch);
   }, [_id]);
 
   const handleDishClick = async (dishId) => {
@@ -186,7 +188,7 @@ const Foodlist = () => {
   };
 
   return (
-    <div className="text-purple-800 min-h-screen pt-5 bg-transparent">
+    <div className={` text-purple-800 min-h-screen pt-5  ${theme=="dark"?"bg-[#131b33]":""}` }>
       <Navbar />
       <div className="container px-8 mx-auto p-4 mt-20 min-h-screen bg-transparent">
         <div className="flex justify-center space-x-4 mb-8">
@@ -363,7 +365,7 @@ const Foodlist = () => {
       {editModal && (
         <Modalupdate
           dish={currentDish}
-          onClose={() => setEditModal(false)}
+          onCancel={handleClose}
           onUpdate={handleUpdateDish}
         />
       )}

src/pages/Login.jsx

@@ -59,7 +59,7 @@ function Login() {
 
 
        const apiUrl = formData.accountType === "User" 
-      ? 'http://localhost:4000/api/v1/studentLogin' : 'http://localhost:4000/api/v1/canteenLogin'
+      ? 'http://localhost:8000/api/v1/studentLogin' : 'http://localhost:8000/api/v1/canteenLogin'
 
 
 

src/pages/News.jsx

@@ -32,7 +32,7 @@ function News() {
 
   useEffect(() => {
     fetchNews(process.env.REACT_APP_DEFAULT_QUERY);
-  }, []);
+    }, []);
 
   return (
     <>
@@ -46,10 +46,10 @@ function News() {
               <h1 className="text-3xl font-bold text-center mt-20 text-white p-6 dark:text-slate-900">
                 Trending Food and Health News
               </h1>
-              <main className="mt-24 p-4">
+              <main className="mt-10 p-4">
                 <div style={{display:"flex",justifyContent:"center"}}>
                   <div className="container grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-5 ">
-                    {articles.map((article, index) => (
+                    {articles?.map((article, index) => (
                       <NewsCard key={index} article={article} />
                     ))}
                   </div>

src/pages/Rateus.jsx

@@ -1,12 +1,14 @@
-import React, { useState } from 'react';
+import React, { useState,useContext } from 'react';
 import { ToastContainer, toast } from 'react-toastify';
 import 'react-toastify/dist/ReactToastify.css';
 import Footer from "../components/Footer";
 import Navbar from "../components/Navbar";
+import { ThemeContext } from "../themeContext";
 
 const RateUs = () => {
   const [rating, setRating] = useState('');
   const [feedback, setFeedback] = useState('');
+  const { theme } = useContext(ThemeContext);
 
   const handleRatingClick = (emoji) => {
     setRating(emoji);
@@ -32,12 +34,12 @@ const RateUs = () => {
       }}
     >
       <Navbar />
-      <div className="flex items-center justify-center flex-grow">
+      <div className={` flex items-center justify-center flex-grow`}>
         <div
-          className="w-full max-w-xl mx-4 p-8 bg-white bg-opacity-90 rounded-lg shadow-lg transition-transform transform hover:scale-105 hover:shadow-2xl"
+          className={`w-full ${theme=='dark'?"bg-[#172554]":""} max-w-xl mx-4 p-8 bg-white bg-opacity-90 rounded-lg shadow-lg transition-transform transform hover:scale-105 hover:shadow-2xl`}
           style={{ marginBottom: '100px', marginTop: '150px', textAlign: 'center' }}
         >
-          <h1 className="text-3xl font-bold mb-6 text-black">Rate Our Website</h1>
+          <h1 className={`text-3xl font-bold mb-6 text-black ${theme=='dark'?"text-white":""}`}>Rate Our Website</h1>
           <div className="mb-6">
             {['😢', '😡', '😐', '😊', '🤩'].map((emoji) => (
               <span

src/pages/SectionPage.jsx

@@ -116,7 +116,9 @@ const SectionPage = () => {
                 Product List <CiBoxList />
               </button>
             </div>
+            <div className={ ` py-[10%] ${theme === 'dark' ? 'bg-[#131b33]' : 'bg-white'}` }>
             {view === "add" ? <AddFoodItem /> : <Foodlist />}
+            </div>
           </>
         )}
       </div>

src/pages/Signup.jsx

@@ -66,14 +66,16 @@ function Signup() {
       //   : `${process.env.REACT_APP_BASE_URL}/canteenSignup`;
       const apiUrl = formData.accountType === "User" 
 
-      ? 'http://localhost:4000/api/v1/studentSignup' : 'http://localhost:4000/api/v1/canteenSignup'
+      ? 'http://localhost:8000/api/v1/studentSignup' : 'http://localhost:8000/api/v1/canteenSignup'
 
 
 
       try {
         setLoading(true);
 
         const response = await axios.post(apiUrl, formData);
+
+        console.log("This is response", response.data);
 
         toast.success("Account Created Successfully!");