Feat:Profile page For Canteen #253

server/config/cloudinaryConfig.js

@@ -1,14 +1,26 @@
-const config = require("cloudinary").config;
-const uploader = require("cloudinary").uploader;
-const dotenv = require("dotenv");
+const cloudinary = require('cloudinary').v2;
+const dotenv = require('dotenv');
 dotenv.config();
 
 const cloudinaryConfig = (req, res, next) => {
-  config({
+  cloudinary.config({
     cloud_name: process.env.CLOUDINARY_CLOUD_NAME,
     api_key: process.env.CLOUDINARY_API_KEY,
     api_secret: process.env.CLOUDINARY_API_SECRET,
   });
   next();
 };
-module.exports = { cloudinaryConfig, uploader };
+
+const uploadImage = async (filePath) => {
+  try {
+    const result = await cloudinary.uploader.upload(filePath, {
+      folder: 'canteen_images', // Specify the folder where images should be uploaded
+    });
+    return result;
+  } catch (error) {
+    throw new Error('Error uploading image to Cloudinary');
+  }
+};
+
+module.exports = { cloudinaryConfig, uploadImage };
+

server/controllers/canteenController.js

@@ -3,6 +3,7 @@ const Breakfast = require('../models/breakfast');
 const Lunch = require('../models/lunch');
 const Dinner = require('../models/dinner');
 const Canteen = require("../models/canteenLoginInfo");
+const { uploader } = require('../config/cloudinaryConfig');
 
 
 
@@ -180,6 +181,37 @@ const removeDinnerDish = asyncHandler(async (req, res, next) => {
   res.json({ message: 'Dish removed successfully' });
 
 });
+// Controller function to update canteen details
+
+
+const updateCanteen = async (req, res, next) => {
+  try {
+    const canteenId = req.params.id;
+    const { name, email, collegeName, canteenImage } = req.body;
+
+    // Process the uploaded file if exists
+    if (req.file) {
+      const filePath = `public/uploads/${req.file.originalname}`;
+      const uploadedImage = await uploader.upload(filePath);
+      req.body.canteenImage = uploadedImage.url; // Update the canteenImage with the uploaded file URL
+    }
+
+    // Find the canteen by ID and update
+    const canteen = await Canteen.findByIdAndUpdate(canteenId, req.body, { new: true });
+
+    // If canteen not found, return error
+    if (!canteen) {
+      return res.status(404).json({ success: false, message: "Canteen not found" });
+    }
+
+    // Return success response
+    res.status(200).json({ success: true, message: "Canteen updated successfully", data: canteen });
+  } catch (error) {
+    // Handle errors
+    console.error("Error updating canteen:", error);
+    res.status(500).json({ success: false, error: "Internal Server Error" });
+  }
+};
 
 module.exports = {
   getCanteenDashboard,
@@ -193,4 +225,5 @@ module.exports = {
   getBreakfast,
   getLunch,
   getDinner,
+  updateCanteen,
 };

server/middleware/multer.middleware.js

@@ -1,5 +1,8 @@
-const multer = require("multer");
+const multer = require('multer');
 const storage = multer.memoryStorage();
-const multerUploads = multer({ storage }).single("image");
+const multerUploads = multer({ 
+  storage,
+  limits: { fileSize: 50 * 1024 * 1024 } // Set limit to 50MB
+}).single("image");
 
 module.exports = multerUploads;

server/models/canteenLoginInfo.js

@@ -14,15 +14,18 @@ const canteenSchema = new Schema({
     type: String,
     required: true,
   },
-  accountType : {
-    type : String,
-    enum : ["User" , "Canteen"],
-    required : true,
+  accountType: {
+    type: String,
+    enum: ["User", "Canteen"],
+    required: true,
   },
   password: {
     type: String,
     required: true,
   },
+  canteenImage: {
+    type: String, // Assuming you're storing the URL or base64 string of the image
+  },
 });
 
 const Canteen = mongoose.model('Canteen', canteenSchema);

server/routes/canteen.js

@@ -4,6 +4,7 @@ const router = express.Router();
 // Import canteen controller functions
 const canteenController = require('../controllers/canteenController');
 const { auth, isCanteen } = require('../middlewares/auth');
+const multerUploads = require('../middleware/multer.middleware');
 
 router.get('/getcanteen' , canteenController.getAllCanteen);
 
@@ -37,4 +38,7 @@ router.post('/:id/dinner/add',auth,isCanteen, canteenController.addDinnerDish);
 // Route to remove a dinner dish for a specific canteen
 router.delete('/:id/dinner/remove',auth,isCanteen, canteenController.removeDinnerDish);
 
+//router to update profile
+router.put('/:id/update', auth, isCanteen, multerUploads, canteenController.updateCanteen);
+
 module.exports = router;

server/server.js

@@ -6,7 +6,7 @@ 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,7 +16,8 @@ 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");

src/App.js

@@ -11,6 +11,7 @@ import News from './pages/News';
 import NotFound from './pages/NotFound';
 import Loader from './components/Loader/Loader';
 import { ThemeProvider } from './themeContext';
+import EditProfile from './pages/EditProfile';
 
 const Layout = ({ children }) => {
   return (
@@ -34,6 +35,7 @@ function App() {
           <Route path="/menu/:_id" element={<Layout><MenuPage /></Layout>} />
           <Route path='/news' element={<Layout><News /></Layout>} />
           <Route path='/loader' element={<Layout><Loader /></Layout>} />
+          <Route path="/edit-profile/:_id" element={<Layout><EditProfile /></Layout>} />
           <Route path="*" element={<Layout><NotFound /></Layout>} />
         </Routes>
       </div>

src/components/CanteenCard.jsx

@@ -1,8 +1,8 @@
 import React, { useState } from "react";
 import { Link } from "react-router-dom";
-import myHotel from "../assets/myHotel.jpg"
+import myHotel from "../assets/myHotel.jpg";
 
-const CanteenCard = ({ canteen  }) => {
+const CanteenCard = ({ canteen }) => {
   const [selectedRecipes, setSelectedRecipes] = useState({});
 
   const handleAddToMenu = (recipeId) => {
@@ -13,46 +13,45 @@ const CanteenCard = ({ canteen  }) => {
   };
 
   return (
-    <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 ...">
-    <div className="flex justify-center">
-      <a href="#">
-        <img
-          className="rounded-t-lg h-48 w-full object-cover"
-          src={myHotel}
-          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={`/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
-        <svg
-          className="w-3.5 h-3.5 ml-2"
-          aria-hidden="true"
-          xmlns="http://www.w3.org/2000/svg"
-          fill="none"
-          viewBox="0 0 14 10"
-        >
-          <path
-            stroke="currentColor"
-            strokeLinecap="round"
-            strokeLinejoin="round"
-            strokeWidth="2"
-            d="M1 5h12m0 0L9 1m4 4L9 9"
+    <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">
+      <div className="flex justify-center">
+        <a href="#">
+          <img
+            className="rounded-t-lg h-48 w-full object-cover"
+            src={canteen.canteenImage ? canteen.canteenImage : myHotel}
+            alt={canteen.name}
           />
-        </svg>
-      </Link>
+        </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={`/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
+          <svg
+            className="w-3.5 h-3.5 ml-2"
+            aria-hidden="true"
+            xmlns="http://www.w3.org/2000/svg"
+            fill="none"
+            viewBox="0 0 14 10"
+          >
+            <path
+              stroke="currentColor"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth="2"
+              d="M1 5h12m0 0L9 1m4 4L9 9"
+            />
+          </svg>
+        </Link>
+      </div>
     </div>
-  </div>
   );
 };
 

src/pages/AddFoodItem.jsx

@@ -83,10 +83,10 @@ function AddFoodItem() {
   };
 
   return (
-    <div className="flex justify-center items-center h-screen bg-gray-100">
+    <div className="flex justify-center items-center h-screen bg-white">
       <form
         onSubmit={handleSubmit}
-        className="bg-white p-6 rounded shadow-lg w-full max-w-sm"
+        className="bg-white p-6 rounded shadow-lg w-full max-w-sm border-2"
       >
         <h1 className="text-xl font-bold mb-4">Add Food Item</h1>
         <div className="mb-4">