Merge pull request #406 from Saksham2k3s/enhancement/canteen-profile-…

…page-393 Solved issue 393
VanshKing30 · Jul 7, 2024 · b3a0fe7 · b3a0fe7
2 parents 1800408 + df4be49
commit b3a0fe7
Show file tree

Hide file tree

Showing 4 changed files with 52 additions and 26 deletions.
diff --git 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,8 @@ function AddFoodItem() {
   };
 
   return (
-    <div className={`flex justify-center items-center h-[auto] ${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 mt-[40px] mb-[20px] border-2 ${theme === 'dark' ? 'bg-gray-300' : 'bg-white'}`}

diff --git 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,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>
 

diff --git 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
@@ -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!");