From 712ded405cfa48720f9ee329f6eae739707bdba2 Mon Sep 17 00:00:00 2001
From: Saksham2k3s <sakshamshrivastav58@gmail.com>
Date: Thu, 4 Jul 2024 02:50:33 +0800
Subject: [PATCH] Solved issue 393

---
 src/pages/AddFoodItem.jsx |  3 +-
 src/pages/EditProfile.jsx | 66 +++++++++++++++++++++++++--------------
 src/pages/Login.jsx       |  2 +-
 src/pages/SectionPage.jsx |  2 ++
 src/pages/Signup.jsx      |  4 ++-
 5 files changed, 50 insertions(+), 27 deletions(-)

diff --git a/src/pages/AddFoodItem.jsx b/src/pages/AddFoodItem.jsx
index 8264ef8..86b5b16 100644
--- a/src/pages/AddFoodItem.jsx
+++ b/src/pages/AddFoodItem.jsx
@@ -60,6 +60,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.");
@@ -103,7 +104,7 @@ function AddFoodItem() {
   };
 
   return (
-    <div className={`flex justify-center items-center h-[80vh] ${theme === 'dark' ? 'bg-[#131b33]' : 'bg-white'}`}>
+    <div className={`flex py-10 justify-center items-center h-[80vh] ${theme === 'dark' ? 'bg-[#131b33]' : 'bg-white'}`}>
       <form
         onSubmit={handleSubmit}
         className={`p-6 rounded shadow-lg w-full max-w-sm border-2 ${theme === 'dark' ? 'bg-gray-300' : 'bg-white'}`}
diff --git a/src/pages/EditProfile.jsx b/src/pages/EditProfile.jsx
index 00e4b72..58eabaa 100644
--- a/src/pages/EditProfile.jsx
+++ b/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,12 +98,13 @@ 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}>
@@ -106,52 +112,64 @@ const EditProfile = () => {
           <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" />
           ) : (
@@ -159,7 +177,7 @@ const EditProfile = () => {
           )}
         </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"
@@ -167,24 +185,24 @@ const EditProfile = () => {
             >
               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>
 
diff --git a/src/pages/Login.jsx b/src/pages/Login.jsx
index 7d03006..773752c 100644
--- a/src/pages/Login.jsx
+++ b/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'
 
 
 
diff --git a/src/pages/SectionPage.jsx b/src/pages/SectionPage.jsx
index 7589ec2..3076897 100644
--- a/src/pages/SectionPage.jsx
+++ b/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>
diff --git a/src/pages/Signup.jsx b/src/pages/Signup.jsx
index b6f6204..c30b3c1 100644
--- a/src/pages/Signup.jsx
+++ b/src/pages/Signup.jsx
@@ -66,7 +66,7 @@ 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'
 
   
 
@@ -74,6 +74,8 @@ function Signup() {
         setLoading(true);
   
         const response = await axios.post(apiUrl, formData);
+
+        console.log("This is response", response.data);
   
         toast.success("Account Created Successfully!");