Merge pull request #322 from nishant0708/menu-error

Feat:Error In Seeing Menu From User End #314
VanshKing30 · Jun 17, 2024 · c025c37 · c025c37
2 parents 6b3b3f8 + 0a701bb
commit c025c37
Show file tree

Hide file tree

Showing 14 changed files with 140 additions and 110 deletions.
diff --git a/envexample b/envexample
@@ -0,0 +1 @@
+REACT_APP_BASE_URL="localhost:8000/api/v1" 8000 can be replaced by the server you are running backend on
diff --git a/server/controllers/Auth.js b/server/controllers/Auth.js
@@ -11,6 +11,7 @@ const {
   findUserById,
 } = require("../utils/PasswordTokenAndUser");
 const nodemailer = require("nodemailer");
+
 require("dotenv").config();
 
 exports.studentSignup = async (req, res) => {
@@ -441,6 +442,7 @@ exports.changeCanteenPassword = async (req, res) => {
   });
 };
 
+
 //contactUs
 
 exports.saveContactMessage = async (req, res) => {
@@ -457,6 +459,7 @@ exports.saveContactMessage = async (req, res) => {
     res.status(500).send('Error saving message');
   }
 };
+
 // verify user for reset password
 exports.forgotPassword = async (req, res) => {
   try {
@@ -594,4 +597,3 @@ exports.resetPassword = async (req, res) => {
     res.status(500).json("Some error occurred!");
   }
 };
-
diff --git a/server/envexample b/server/envexample
@@ -0,0 +1,6 @@
+PORT=8000  
+DATABASE_URL=
+JWT_SECRET=
+CLOUDINARY_CLOUD_NAME=
+CLOUDINARY_API_KEY=
+CLOUDINARY_API_SECRET=
diff --git a/src/components/CanteenCard.jsx b/src/components/CanteenCard.jsx
@@ -41,7 +41,7 @@ const CanteenCard = ({ canteen }) => {
           <a href="#">
             <img
               className="rounded-t-lg h-48 w-full object-cover"
-              src={imageSrc || 'default-image-url'}
+              src={canteen.canteenImage ? canteen.canteenImage : imageSrc}
               alt={canteen.name}
             />
           </a>

diff --git a/src/components/ModalForm.jsx b/src/components/ModalForm.jsx
@@ -60,7 +60,7 @@ const ModalForm = ({ onSubmit  , sectionName , canteenData , id}) => {
 
     if(sectionName === "Breakfast"){
 
-      const apiUrl = `http://localhost:8000/api/v1/${id}/breakfast/add`;
+      const apiUrl = `${process.env.REACT_APP_BASE_URL}/${id}/breakfast/add`;
 
       axios.post(apiUrl , foodDetails)
       .then((response)=>{
@@ -75,7 +75,7 @@ const ModalForm = ({ onSubmit  , sectionName , canteenData , id}) => {
     }
     else if(sectionName === "Lunch"){
 
-      const apiUrl = `http://localhost:8000/api/v1/${id}/lunch/add`;
+      const apiUrl = `${process.env.REACT_APP_BASE_URL}/${id}/lunch/add`;
 
       axios.post(apiUrl , foodDetails)
       .then((response)=>{
@@ -92,7 +92,7 @@ const ModalForm = ({ onSubmit  , sectionName , canteenData , id}) => {
     }
     else{
 
-      const apiUrl = `http://localhost:8000/api/v1/${id}/dinner/add`;
+      const apiUrl = `${process.env.REACT_APP_BASE_URL}/${id}/dinner/add`;
 
       axios.post(apiUrl , foodDetails)
       .then((response)=>{

diff --git a/src/components/Navbar.jsx b/src/components/Navbar.jsx
@@ -37,70 +37,83 @@ const Navbar = () => {
                 <NavItem to="/about" icon={<IconAbout />}>About</NavItem>
                 <NavItem to="/news" icon={<IconNews />}>News</NavItem>
                 <NavItem to="/rateus" icon={<IconRateUs />}>RateUs</NavItem>
-              </div>
-            </div>
 
-            <div className="hidden md:flex items-center gap-5">
-              <button onClick={toggleTheme} className="p-2 rounded focus:outline-none text-4xl border-none outline-none">
-                {theme === 'dark' ? '🌞' : '🌙'}
-              </button>
-              <div>
-                <Link to="/">
-                  <button
-                    className={`py-1 px-2 rounded w-full h-auto text-l relative z-0 rounded-lg transition-all duration-200 hover:scale-110 ${theme === 'dark' ? 'bg-white text-black' : 'bg-green-400 hover:bg-green-600 hover:shadow-green text-white'}`}
-                  >
-                    Log out
-                  </button>
-                </Link>
+              <div className="ml-16 flex gap-6 items-baseline space-x-4   ">
+                <NavItem to="/home" className="nav-item" icon={<IconHome />}>Home</NavItem>
+                <NavItem to="/about" className="nav-item"  icon={<IconAbout />}>About</NavItem>
+                <NavItem to="/news" className="nav-item" icon={<IconNews />}>News</NavItem>
+                <NavItem to="/rateus" className="nav-item" icon={<IconRateUs />}>RateUs</NavItem>
               </div>
-            </div>
+
+          </div>
+          <div className="hidden md:flex items-center gap-5">
+            <button onClick={toggleTheme} className="p-2 rounded focus:outline-none text-4xl border-none outline-none ">
+              {theme === 'dark' ? '🌞' : '🌙'}
+            </button>
+            <div>
+              <Link to="/">
+                <button
+
+                  className={`py-1 px-2 rounded w-full h-auto text-l relative z-0 rounded-lg transition-all duration-200 hover:scale-110 ${theme === 'dark' ? 'bg-white text-black' : 'bg-green-400 hover:bg-green-600 hover:shadow-green text-white'}`}
 
-            <div className="-mr-2 flex md:hidden">
-              <button onClick={toggleTheme} className="p-2 rounded focus:outline-none text-2xl border-none outline-none">
-                {theme === 'dark' ? '🌞' : '🌙'}
-              </button>
-              <button
-                onClick={toggleMenu}
-                className="inline-flex items-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none focus:bg-gray-700 focus:text-white"
-                aria-expanded="false"
-              >
-                {isOpen ? (
-                  <IoClose className="text-white" />
-                ) : (
-                  <GiHamburgerMenu className="text-white" />
-                )}
-              </button>
+                >
+                  Log out
+                </button>
+              </Link>
             </div>
           </div>
+          <div className="-mr-2 flex md:hidden">
+          <button onClick={toggleTheme} className="p-2 rounded focus:outline-none text-2xl border-none outline-none ">
+              {theme === 'dark' ? '🌞' : '🌙'}
+            </button>
+            <button
+              onClick={toggleMenu}
+              className="inline-flex items-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none focus:bg-gray-700 focus:text-white"
+              aria-expanded="false"
+            >
+              {isOpen ? (
+                <IoClose className="text-white" />
+              ) : (
+                <GiHamburgerMenu className="text-white" />
+              )}
+            </button>
+          </div>
         </div>
+      </div>
+      <AnimatePresence>
+        {isOpen && (
+          <motion.div
+            initial={{ opacity: 0, y: -50 }}
+            animate={{ opacity: 1, y: 0 }}
+            exit={{ opacity: 0, y: -50 }}
+            className="md:hidden absolute left-0 w-full flex flex-col items-center justify-center"
+          >
+            <div className="w-[100%] bg-[#152146] px-[20%] pt-2 pb-3 space-y-1 mt-1 dark:bg-teal-900">
+              <MobileNavItem to="/home">Home</MobileNavItem>
+              <MobileNavItem to="/about">About us</MobileNavItem>
+              <MobileNavItem to="/news">News</MobileNavItem>
+              <MobileNavItem to="/contact">Contact</MobileNavItem>
 
-        <AnimatePresence>
-          {isOpen && (
-            <motion.div
-              initial={{ opacity: 0, y: -50 }}
-              animate={{ opacity: 1, y: 0 }}
-              exit={{ opacity: 0, y: -50 }}
-              className="md:hidden absolute left-0 w-full flex flex-col items-center justify-center"
-            >
-              <div className="w-[100%] bg-[#152146] px-[20%] pt-2 pb-3 space-y-1 mt-1 dark:bg-teal-900">
-                <MobileNavItem to="/home">Home</MobileNavItem>
-                <MobileNavItem to="/about">About us</MobileNavItem>
-                <MobileNavItem to="/news">News</MobileNavItem>
-                <MobileNavItem to="/contact">Contact</MobileNavItem>
-                <MobileNavItem to="/rateus">RateUs</MobileNavItem>
-                <MobileNavItem to="/">
-                  <button
-                    className={`rounded transition duration-300 ease-in-out transform hover:scale-105 ${theme === 'dark' ? 'bg-white text-black' : 'bg-green-500 hover:bg-green-700 text-white py-1 px-2'}`}
-                  >
-                    Log out
-                  </button>
-                </MobileNavItem>
-              </div>
-            </motion.div>
-          )}
-        </AnimatePresence>
-      </nav>
-    </>
+              <MobileNavItem to="/rateus">Rateus</MobileNavItem>
+
+              <MobileNavItem to="/">
+              <Link to="/">
+                <button
+
+                  className={`rounded transition duration-300 ease-in-out transform hover:scale-105 ${theme === 'dark' ? 'bg-white text-black' : 'bg-green-500 hover:bg-green-700 text-white py-1 px-2'}`}
+
+                >
+                  Log out
+                </button>
+                </Link>
+              </MobileNavItem>
+            </div>
+          </motion.div>
+        )}
+      </AnimatePresence>
+      </div>
+    </nav>  
+  </>
   );
 };
 

diff --git a/src/pages/AddFoodItem.jsx b/src/pages/AddFoodItem.jsx
@@ -35,13 +35,13 @@ function AddFoodItem() {
 
     switch (mealType) {
       case "Breakfast":
-        apiUrl = `http://localhost:8000/api/v1/${canteenId}/breakfast/add`;
+        apiUrl = `${process.env.REACT_APP_BASE_URL}/${canteenId}/breakfast/add`;
         break;
       case "Lunch":
-        apiUrl = `http://localhost:8000/api/v1/${canteenId}/lunch/add`;
+        apiUrl = `${process.env.REACT_APP_BASE_URL}/${canteenId}/lunch/add`;
         break;
       case "Dinner":
-        apiUrl = `http://localhost:8000/api/v1/${canteenId}/dinner/add`;
+        apiUrl = `${process.env.REACT_APP_BASE_URL}/${canteenId}/dinner/add`;
         break;
       default:
         toast.error("Please select a meal type.");

diff --git a/src/pages/EditProfile.jsx b/src/pages/EditProfile.jsx
@@ -17,7 +17,7 @@ const EditProfile = () => {
 
   const fetchCanteenData = async () => {
     try {
-      const getCanteen = await fetch(`http://localhost:8000/api/v1/getcanteen`, {
+      const getCanteen = await fetch(`${process.env.REACT_APP_BASE_URL}/getcanteen`, {
         method: 'GET',
         headers: {
           'Content-Type': 'application/json',
@@ -69,7 +69,7 @@ const EditProfile = () => {
   const handleSubmit = async (e) => {
     e.preventDefault();
     try {
-      const response = await fetch(`http://localhost:8000/api/v1/${_id}/update`, {
+      const response = await fetch(`${process.env.REACT_APP_BASE_URL}/${_id}/update`, {
         method: 'PUT',
         headers: {
           'Content-Type': 'application/json',

diff --git a/src/pages/Foodlist.jsx b/src/pages/Foodlist.jsx
@@ -22,7 +22,7 @@ const Foodlist = () => {
     try {
       setLoading(true);
       const response = await fetch(
-        `http://localhost:8000/api/v1/${_id}/${mealType}`,
+        `${process.env.REACT_APP_BASE_URL}/${_id}/${mealType}`,
         {
           method: "GET",
           headers: {
@@ -48,7 +48,7 @@ const Foodlist = () => {
       }
 
       await axios.delete(
-        `http://localhost:8000/api/v1/${_id}/${mealType}/remove`,
+        `${process.env.REACT_APP_BASE_URL}/${_id}/${mealType}/remove`,
         {
           headers: {
             "Content-Type": "application/json",
@@ -84,7 +84,7 @@ const Foodlist = () => {
       }
 
       await axios.put(
-        `http://localhost:8000/api/v1/${_id}/${currentDish.mealType}/updateitem`,
+        `${process.env.REACT_APP_BASE_URL}/${_id}/${currentDish.mealType}/updateitem`,
         {
           dishId: currentDish._id,
           dish: updatedDish,

diff --git a/src/pages/Home.jsx b/src/pages/Home.jsx
@@ -29,7 +29,7 @@ function Home() {
     try{
       setLoading(true);
       const getCanteen = await fetch(
-        `${process.env.REACT_APP_BASE_URL}/api/v1/getcanteen`,
+        `${process.env.REACT_APP_BASE_URL}/getcanteen`,
         {
           method : "GET",
           headers :{

diff --git a/src/pages/Login.jsx b/src/pages/Login.jsx
@@ -48,11 +48,6 @@ function Login() {
 
   async function submitHandler(event) {
     event.preventDefault();
-    setLoading(true);
-
-    if (rememberMe) {
-      localStorage.setItem("rememberedEmail", formData.email);
-    }
 
     const apiUrl =
       formData.accountType === "User"
@@ -62,15 +57,22 @@ function Login() {
     try {
       const response = await axios.post(apiUrl, formData);
       toast.success("User Logged in");
+
+      if (rememberMe) {
+        localStorage.setItem("rememberedEmail", formData.email);
+      } else {
+        localStorage.removeItem("rememberedEmail");
+      }
+
       if (formData.accountType === "User") {
         navigate("/home");
       } else {
+        localStorage.setItem("canteenId",response.data.cantId);
+        localStorage.setItem("token",response.data.token);
         navigate(`/section/${response.data.cantId}`);
       }
     } catch (error) {
       toast.error("Failed to login");
-    } finally {
-      setLoading(false);
     }
   }
 
@@ -83,7 +85,7 @@ function Login() {
           <div className="absolute top-0 right-0 m-3">
             <Link to="/contact">
               <button className="hover:shadow-blue-950 hover:shadow-sm text-white py-1 px-2 w-full h-auto text-l relative z-0 rounded-full transition-all duration-200 hover:scale-110">
-                <img src="/c4.png" className="h-10 w-10" />
+                <img src="/c4.png" className="h-10 w-10" alt="Contact" />
               </button>
             </Link>
           </div>
@@ -143,11 +145,7 @@ function Login() {
                   className="absolute right-3 top-1/2 transform -translate-y-1/2 cursor-pointer"
                   onClick={() => setShowPassword((prev) => !prev)}
                 >
-                  {showPassword ? (
-                    <AiOutlineEyeInvisible size={20} />
-                  ) : (
-                    <AiOutlineEye size={20} />
-                  )}
+                  {showPassword ? <AiOutlineEye size={20} /> : <AiOutlineEyeInvisible size={20} />}
                 </span>
               </div>
               <div className="remember-me mb-4">
@@ -161,7 +159,7 @@ function Login() {
               </div>
               <div className="mb-4 flex justify-center text-red-400">
                 <Link to="/forgotPassword">
-                  <h1 className="font-medium">Forgot Password ?</h1>
+                  <h1 className="font-medium">Forgot Password?</h1>
                 </Link>
               </div>
               <button

diff --git a/src/pages/MenuPage.jsx b/src/pages/MenuPage.jsx
@@ -20,7 +20,7 @@ function MenuPage() {
     try {
       setLoading(true);
       const getBreakfast = await fetch(
-        `http://localhost:8000/api/v1/${_id}/breakfast`,
+        `${process.env.REACT_APP_BASE_URL}/${_id}/breakfast`,
         {
           method: "GET",
           headers: {
@@ -42,7 +42,7 @@ function MenuPage() {
     try {
       setLoading(true);
       const getLunch = await fetch(
-        `http://localhost:8000/api/v1/${_id}/lunch`,
+        `${process.env.REACT_APP_BASE_URL}/${_id}/lunch`,
         {
           method: "GET",
           headers: {
@@ -64,7 +64,7 @@ function MenuPage() {
     try {
       setLoading(true);
       const getDinner = await fetch(
-        `http://localhost:8000/api/v1/${_id}/dinner`,
+        `${process.env.REACT_APP_BASE_URL}/${_id}/dinner`,
         {
           method: "GET",
           headers: {

diff --git a/src/pages/SectionPage.jsx b/src/pages/SectionPage.jsx
@@ -25,7 +25,7 @@ const SectionPage = () => {
     try {
       setLoading(true);
       const getCanteen = await fetch(
-        `http://localhost:8000/api/v1/getcanteen`,
+        `${process.env.REACT_APP_BASE_URL}/getcanteen`,
         {
           method: "GET",
           headers: {
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		REACT_APP_BASE_URL="localhost:8000/api/v1" 8000 can be replaced by the server you are running backend on