updated backend for posts,like and comments with redux and clodinary

frontend/package.json

@@ -8,10 +8,13 @@
     "@mui/icons-material": "^5.15.15",
     "@mui/lab": "^5.0.0-alpha.170",
     "@mui/material": "^5.15.15",
+    "@reduxjs/toolkit": "^2.2.3",
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
     "axios": "^1.6.8",
+    "cloudinary": "^2.2.0",
+    "cloudinary-react": "^1.8.1",
     "formik": "^2.4.5",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

frontend/src/Components/HomeSection/HomeSection.jsx

@@ -2,6 +2,7 @@ import React from "react";
 import { connect } from "react-redux";
 import MealPost from "./MealPost";
 import { addPost } from "../Store/Action";
+import NewPost from "./NewPost";  
 
 const HomeSection = ({ meals, dispatch }) => {
   const handlePost = (newMeal) => {
@@ -17,10 +18,12 @@ const HomeSection = ({ meals, dispatch }) => {
       <section className="pb-10">
         {/* Render existing posts */}
         {meals.map((meal, index) => (
-          <MealPost key={index} meal={meal} />
+          <MealPost key={index} meal={meal} imageUrl={meal.imageUrl} />
         ))}
+        {/* Assuming meal object contains the imageUrl property */}
+
         {/* Render new post */}
-        <MealPost handlePost={handlePost} />
+        <NewPost handlePost={handlePost} />
       </section>
     </div>
   );

frontend/src/Components/HomeSection/MealPost.jsx

@@ -1,94 +1,47 @@
-import React, { useState } from "react";
-import { IconButton, Button } from "@mui/material";
-import PhotoCameraIcon from "@mui/icons-material/PhotoCamera";
-import ThumbUpIcon from "@mui/icons-material/ThumbUp";
-import ChatIcon from "@mui/icons-material/Chat";
+import React from "react";
+import { IconButton } from "@mui/material";
 import EditIcon from "@mui/icons-material/Edit";
 import DeleteIcon from "@mui/icons-material/Delete";
 import ReplyModel from "./ReplyModel";
 import { useDispatch } from "react-redux";
-import { addPost } from "../Store/Actions"; // Assuming your action is in this file
 
-const MealPost = () => {
+const MealPost = ({ meal }) => {
   const dispatch = useDispatch();
-  const [caption, setCaption] = useState("");
-  const [image, setImage] = useState(null);
-  const [openReplyModel, setOpenReplyModel] = useState(false);
+  const { caption, imageUrl } = meal;
 
-  const handleImageChange = (e) => {
-    setImage(e.target.files[0]);
+  const handleEditPost = () => {
+    // Placeholder logic for editing post
+    console.log("Edit Post");
   };
 
-  const handlePostClick = () => {
-    if (image && caption) {
-      const formData = new FormData();
-      formData.append("caption", caption);
-      formData.append("image", image);
-      dispatch(addPost(formData));
-      setCaption("");
-      setImage(null);
-    }
+  const handleDeletePost = () => {
+    // Placeholder logic for deleting post
+    console.log("Delete Post");
   };
 
   return (
-    <div className="p-4 border rounded-md shadow-md bg-white">
-      <textarea
-        rows={4}
-        placeholder="Write a caption..."
-        className="w-full border border-gray-300 rounded-md p-2 mb-2"
-        value={caption}
-        onChange={(e) => setCaption(e.target.value)}
-      ></textarea>
-      <div className="flex items-center mb-2">
-        <input
-          type="file"
-          accept="image/*"
-          id="image-upload"
-          className="hidden"
-          onChange={handleImageChange}
-        />
-        <label htmlFor="image-upload">
-          <IconButton component="span">
-            <PhotoCameraIcon />
-          </IconButton>
-        </label>
-        {image && (
+    <div className="p-4 border rounded-md shadow-md bg-white margin">
+      <div className="flex items-center mb-2">{caption}</div>
+      {imageUrl && (
+        <div className="flex items-center mb-2">
           <img
-            src={URL.createObjectURL(image)}
+            src={imageUrl}
             alt="Uploaded"
             className="w-20 h-20 object-cover rounded-md ml-2"
           />
-        )}
-      </div>
-      <div className="flex items-center justify-between">
-        <div>
-          <IconButton onClick={handlePostClick} disabled={!image || !caption}>
-            <ThumbUpIcon />
-          </IconButton>
-          <IconButton onClick={() => setOpenReplyModel(true)}>
-            <ChatIcon />
-          </IconButton>
         </div>
+      )}
+      <div className="flex items-center justify-between">
         <div>
           <IconButton onClick={() => handleEditPost()}>
             <EditIcon />
           </IconButton>
           <IconButton onClick={() => handleDeletePost()}>
             <DeleteIcon />
           </IconButton>
-          <Button
-            variant="contained"
-            onClick={handlePostClick}
-            disabled={!image || !caption}
-          >
-            Post
-          </Button>
         </div>
       </div>
-      <ReplyModel
-        open={openReplyModel}
-        handleClose={() => setOpenReplyModel(false)}
-      />
+      <ReplyModel />
     </div>
   );
 };

frontend/src/Components/HomeSection/NewPost.jsx

@@ -0,0 +1,127 @@
+import React, { useState } from "react";
+import { IconButton, Button } from "@mui/material";
+import PhotoCameraIcon from "@mui/icons-material/PhotoCamera";
+import ThumbUpIcon from "@mui/icons-material/ThumbUp";
+import ChatIcon from "@mui/icons-material/Chat";
+import EditIcon from "@mui/icons-material/Edit";
+import DeleteIcon from "@mui/icons-material/Delete";
+import ReplyModel from "./ReplyModel";
+import { useDispatch } from "react-redux";
+import { addPost } from "../Store/Action";
+
+const NewPost = () => {
+  const dispatch = useDispatch();
+  const [caption, setCaption] = useState("");
+  const [image, setImage] = useState(null);
+  const [openReplyModel, setOpenReplyModel] = useState(false);
+
+  const handleImageChange = (e) => {
+    setImage(e.target.files[0]);
+  };
+
+  const handlePostClick = async () => {
+    if (image && caption) {
+      try {
+        // Upload image to Cloudinary
+        const formData = new FormData();
+        formData.append("file", image);
+        formData.append("upload_preset", "paf123");
+        const response = await fetch(
+          "https://api.cloudinary.com/v1_1/ddvmuwi3e/image/upload",
+          {
+            method: "POST",
+            body: formData,
+          }
+        );
+        if (!response.ok) {
+          throw new Error("Failed to upload image to Cloudinary");
+        }
+        const data = await response.json();
+        const imageUrl = data.secure_url;
+
+        // Dispatch action to add post
+        dispatch(addPost({ caption, imageUrl }));
+
+        // Reset form
+        setCaption("");
+        setImage(null);
+      } catch (error) {
+        console.error("Error uploading image:", error);
+      }
+    }
+  };
+
+  const handleEditPost = () => {
+    // Placeholder logic for editing post
+    console.log("Edit Post");
+  };
+
+  const handleDeletePost = () => {
+    // Placeholder logic for deleting post
+    console.log("Delete Post");
+  };
+
+  return (
+    <div className="p-4 border rounded-md shadow-md bg-white">
+      <textarea
+        rows={4}
+        placeholder="Write a caption..."
+        className="w-full border border-gray-300 rounded-md p-2 mb-2"
+        value={caption}
+        onChange={(e) => setCaption(e.target.value)}
+      ></textarea>
+      <div className="flex items-center mb-2">
+        <input
+          type="file"
+          accept="image/*"
+          id="image-upload"
+          className="hidden"
+          onChange={handleImageChange}
+        />
+        <label htmlFor="image-upload">
+          <IconButton component="span">
+            <PhotoCameraIcon />
+          </IconButton>
+        </label>
+        {image && (
+          <img
+            src={URL.createObjectURL(image)}
+            alt="Uploaded"
+            className="w-20 h-20 object-cover rounded-md ml-2"
+          />
+        )}
+      </div>
+      <div className="flex items-center justify-between">
+        <div>
+          <IconButton onClick={handlePostClick} disabled={!image || !caption}>
+            <ThumbUpIcon />
+          </IconButton>
+          <IconButton onClick={() => setOpenReplyModel(true)}>
+            <ChatIcon />
+          </IconButton>
+        </div>
+        <div>
+          <IconButton onClick={() => handleEditPost()}>
+            <EditIcon />
+          </IconButton>
+          <IconButton onClick={() => handleDeletePost()}>
+            <DeleteIcon />
+          </IconButton>
+          <Button
+            variant="contained"
+            onClick={handlePostClick}
+            disabled={!image || !caption}
+          >
+            Post
+          </Button>
+        </div>
+      </div>
+      <ReplyModel
+        open={openReplyModel}
+        handleClose={() => setOpenReplyModel(false)}
+      />
+    </div>
+  );
+};
+
+export default NewPost;