2021csb1184/sof 116 profile page

client/src/App.js

@@ -10,6 +10,7 @@ import SummaryPage from "./pages/SummaryPage";
 import { store, persistor } from "./redux/store";
 import Dashboard from "./pages/Dashboard";
 import Feedback from "./pages/feedback";
+import Profile from "./pages/Profile";
 
 /**
  * Renders the main application component.
@@ -28,6 +29,7 @@ function App() {
                             element={<LandingPage2 />}
                         />
                         <Route exact path="/contact" element={<ContactUs />} />
+                        <Route exact path="/profile" element={<Profile />} />
                         <Route exact path="/signup" element={<SignUp />} />
                         <Route exact path="/feedback" element={<Feedback />} />
                         <Route

client/src/components/shared/Card/ProfileCard.jsx

@@ -0,0 +1,16 @@
+import React from 'react'
+
+const ProfileCard = ({ summary }) => {
+  return (
+    <div className="bg-white rounded-lg shadow-md p-4">
+        <h3 className="text-lg font-semibold mb-2">{summary.videoId}</h3>
+        <p className="text-gray-600">{summary.summary.body}</p>
+        <div className="flex justify-between items-center mt-4">
+            <p className="text-gray-500 text-sm">Created at: {summary.createdAt}</p>
+            <p className="text-gray-500 text-sm">Updated at: {summary.updatedAt}</p>
+        </div>
+    </div>
+  )
+}
+
+export default ProfileCard

client/src/pages/Dashboard.jsx

@@ -24,6 +24,14 @@ const Dashboard = () => {
   ];
   const [open, setOpen] = useState(true);
 
+  const handleRedirect = () => {
+    navigate('/contact');
+  };
+
+  const handleProfileRedirect = () => {
+    navigate('/profile');
+  };
+
   return (
     <section className="flex gap-6  bg-gradient-to-b from-red-400 via-red-900 to-gray-950 h-screen">
       <div
@@ -80,9 +88,10 @@ const Dashboard = () => {
 
       <div>
         <div className=" flex flex-row items-center justify-center gap-4 mt-5  ml-[1150px]">
-          <div className="w-30 h-10  rounded-3xl bg-white flex items-center px-4">
-            <div className=" flex flex-row gap-2">
-              <FiPhoneCall className="mt-1" /> <p>Contact us</p>
+          <div className="w-30 h-10  rounded-3xl bg-white flex items-center px-4 hover:bg-gray-200">
+            <div className="flex flex-row gap-2" onClick={handleRedirect}>
+              <FiPhoneCall className="mt-1" />
+              <p className="cursor-pointer">Contact us</p>
             </div>
           </div>
 
@@ -94,7 +103,7 @@ const Dashboard = () => {
             <IoIosNotifications />
           </div>
 
-          <div className="bg-white w-10 h-[40px] flex items-center text-[30px] justify-center rounded-full">
+          <div className="bg-white w-10 h-[40px] flex items-center text-[30px] justify-center rounded-full  cursor-pointer" onClick={handleProfileRedirect}>
             <CgProfile />
           </div>
         </div>

client/src/pages/Profile.jsx

@@ -0,0 +1,175 @@
+import React, { useState, useEffect } from 'react';
+import {
+    fetchOneSummary,
+    fetchFavSummaries,
+    fetchAllSummaries,
+    getAllNotes,
+    getNote
+} from "../https/index"
+import { useSelector } from "react-redux";
+import { toast, ToastContainer } from "react-toastify";
+import "react-toastify/dist/ReactToastify.css";
+import ProfileCard from '../components/shared/Card/ProfileCard';
+import axios from "axios";
+
+const Profile = () => {
+    const [activeTab, setActiveTab] = useState('Saved Summaries');
+    const user = useSelector((state) => state.user);
+    const [summaries, setSummaries] = useState([]);
+    const [favSummaries, setFavSummaries] = useState([]);
+    const [notes, setNotes] = useState([]);
+    const [favNotes, setFavNotes] = useState([]);
+
+    const toastOptions = {
+        position: "bottom-right",
+        autoClose: 8000,
+        pauseOnHover: true,
+        draggable: true,
+        theme: "dark",
+      };
+
+    const handleTabClick = (tab) => {
+        setActiveTab(tab);
+    };
+
+    const handleGetAllSummaries = async () => {
+        console.log("in handlegetallsummaries");
+        console.log(user.id);
+        const data = {
+            "userId": user.id,
+        }
+        try {
+            console.log("data", data);
+            // const response = await fetchAllSummaries(data);
+            const response = await axios.get("http://localhost:5000/summaries/getAll", {
+                data
+            });
+            setSummaries(response); // Assuming response contains an array of summaries
+            console.log(response);
+            toast.success("Successfully retrieved all summaries", toastOptions)
+            alert("Successfully retrieved all summaries");
+            console.log(data);
+        } catch (err) {
+            alert(`Failed to get all summaries: ${err}`);
+            toast.error("Failed to get all summaries", toastOptions)
+        }
+    };
+
+    useEffect(() => {
+        handleGetAllSummaries();
+        // handleGetfavSummaries();
+        // handleGetAllNotes();
+    }, []); // Fetch summaries when the component mounts
+
+    const handleGetfavSummaries = async () => {
+        console.log("in handlegetfavsummaries");
+        const data = {
+            userId: user.id,
+        }
+        try {
+            const response = await fetchFavSummaries(data);
+            setFavSummaries(response); // Assuming response contains an array of summaries
+            console.log(response);
+            toast.success("Successfully retrieved all fav summaries", toastOptions)
+            alert("Successfully retrieved all fav summaries");
+            console.log(data);
+        } catch (err) {
+            alert(`Failed to get all fav summaries: ${err}`);
+            toast.error("Failed to get all fav summaries", toastOptions)
+        }
+    };
+
+    const handleGetAllNotes = async () => {
+        console.log("in handlegetallNotes");
+        const data = {
+            userId: user.id,
+        }
+        try {
+            const response = await getAllNotes(data);
+            setNotes(response);
+            console.log(response);
+            toast.success("Successfully retrieved all notes", toastOptions)
+            alert("Successfully retrieved all notes");
+            console.log(data);
+        } catch (err) {
+            alert(`Failed to get all notes: ${err}`);
+            toast.error("Failed to get all notes", toastOptions)
+        }
+    };
+
+  return (
+    <section className="flex flex-col gap-6 bg-gradient-to-b from-red-400 via-red-900 to-gray-950 h-screen p-8">
+        {/* Profile Info */}
+        <div className="flex flex-col gap-2 text-white border border-white p-4 rounded-md shadow-lg h-1/4">
+            <h2 className="text-4xl font-bold mb-2">Profile</h2>
+            <div className="flex items-center gap-2 mt-1">
+                <span className="text-lg">Email:</span>
+                <span className="text-lg font-semibold">example@example.com</span>
+            </div>
+            <button className="bg-white text-black px-4 py-2 w-[200px] mt-2 rounded-md hover:bg-gray-300 hover:text-gray-800 transition-colors duration-300 ease-in-out">
+                Update Password
+            </button>
+        </div>
+
+        <div className="flex flex-col text-white border border-white p-4 rounded-md h-3/4">
+            {/* Tabs */}
+            <div className="flex flex-row gap-4 text-white border border-white p-1 rounded-md h-[60px]">
+                <div className={`flex-grow cursor-pointer p-2 ${activeTab === 'Saved Summaries' ? 'bg-white rounded-md shadow-lg text-red-800' : ''}`} onClick={() => handleTabClick('Saved Summaries')}>
+                    <h3 className="text-lg font-semibold text-center">Saved Summaries</h3>
+                </div>
+                <div className={`flex-grow cursor-pointer p-2 ${activeTab === 'Saved Notes' ? 'bg-white rounded-md shadow-lg text-red-800' : ''}`} onClick={() => handleTabClick('Saved Notes')}>
+                    <h3 className="text-lg font-semibold text-center">Saved Notes</h3>
+                </div>
+                <div className={`flex-grow cursor-pointer p-2 ${activeTab === 'Favorite Summaries' ? 'bg-white rounded-md shadow-lg text-red-800' : ''}`} onClick={() => handleTabClick('Favorite Summaries')}>
+                    <h3 className="text-lg font-semibold text-center">Favorite Summaries</h3>
+                </div>
+                <div className={`flex-grow cursor-pointer p-2 ${activeTab === 'Favorite Notes' ? 'bg-white rounded-md shadow-lg text-red-800' : ''}`} onClick={() => handleTabClick('Favorite Notes')}>
+                    <h3 className="text-lg font-semibold text-center">Favorite Notes</h3>
+                </div>
+            </div>
+
+            {/* Content */}
+            <div className="flex-grow text-white p-1 mt-1">
+                {activeTab === 'Saved Summaries' && (
+                    <div className='bg bg-slate-100 text-red-900 rounded-md shadow-md p-2 h-full text-1xl'>
+                        {/* Content for Saved Summaries tab */}
+                        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
+                            {summaries.map(summary => (
+                                <ProfileCard key={summary._id} summary={summary} />
+                            ))}
+                        </div>
+                    </div>
+                )}
+                {activeTab === 'Saved Notes' && (
+                    <div className='bg bg-slate-100 text-red-900 rounded-md shadow-md p-2 h-full text-1xl'>
+                        {/* Content for Saved Notes tab */}
+                        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
+                            {notes.map(note => (
+                                <ProfileCard key={note._id} summary={note} />
+                            ))}
+                        </div>
+                    </div>
+                )}
+                {activeTab === 'Favorite Summaries' && (
+                    <div className='bg bg-slate-100 text-red-900 rounded-md shadow-md p-2 h-full text-1xl'>
+                        {/* Content for Favorite Summaries tab */}
+                        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
+                            {summaries.map(summary => (
+                                <ProfileCard key={summary._id} summary={summary} />
+                            ))}
+                        </div>
+                    </div>
+                )}
+                {activeTab === 'Favorite Notes' && (
+                    <div className='bg bg-slate-100 text-red-900 rounded-md shadow-md p-2 h-full text-1xl'>
+                        {/* Content for Favorite Notes tab */}
+                    </div>
+                )}
+            </div>
+        </div>
+        <ToastContainer />
+    </section>
+  );
+};
+
+export default Profile;

server/controllers/auth.js

@@ -99,6 +99,7 @@ const registerUser = async (req, res) => {
             httpOnly: true,
         });
 
+        // eslint-disable-next-line no-unused-vars
         const { _password, ...user } = newUser._doc;
 
         res.status(200).json({

server/controllers/note.js

@@ -79,7 +79,9 @@ const modifyNote = async (req, res) => {
         );
 
         if (noteIndex === -1) {
-            return res.status(400).json({ success: false, message: "Note not found" });
+            return res
+                .status(400)
+                .json({ success: false, message: "Note not found" });
         }
 
         for (const [key, value] of Object.entries(note)) {
@@ -103,31 +105,31 @@ const modifyNote = async (req, res) => {
 
 const createNote = async (req, res) => {
     try {
-        console.log("in create note")
+        console.log("in create note");
         const { userId, videoId, note } = req.body;
         if (!userId || !note || !note.body) {
             return res.status(400).json({
                 success: false,
                 message: "User Id, video Id and note body cannot be empty",
             });
         }
-        console.log("creating new note ob")
+        console.log("creating new note ob");
         const newNote = { ...note, videoId };
 
-        console.log("finding user")
+        console.log("finding user");
         const user = await User.findById(userId);
         if (!user) {
             return res
                 .status(400)
                 .json({ success: false, message: "User not found" });
         }
 
-        console.log("adding into database")
+        console.log("adding into database");
         user.notes.push(newNote);
 
         await user.save();
 
-        console.log("final step")
+        console.log("final step");
         res.status(200).json({
             success: true,
             message: "Note created successfully",

server/controllers/summary.js

@@ -30,26 +30,34 @@ const generateSummary = async (req, res) => {
 
 const fetchAllSummaries = async (req, res) => {
     try {
-        const { userId } = req.body;
+        console.log("in fetcallsumm backend");
+        console.log("req.body: ", req.body)
+        const { userId } = req.body.data;
+        console.log("userid from api: ", userId);
         if (!userId) return res.status(400).send("User ID is required");
 
+        console.log("k1");
+
         // Find user with the given user ID
         const user = await User.findById(userId);
 
         if (!user) {
             return res.status(400).send("User not found");
         }
 
+        console.log("k2");
+
         // Extract summary IDs from the user document
         const summaryIds = user.summaries.map((summary) => summary.summaryId);
 
         // Fetch summaries from the Summary schema based on the summary IDs
         const summaries = await Summary.find({ _id: { $in: summaryIds } });
 
         console.log("Found the following summaries:");
-        console.log(summaries);
+        // console.log(summaries);
         return res.status(200).json(summaries);
     } catch (error) {
+        console.log("in err block");
         console.error("Error occurred while fetching summaries", error);
         return res.status(400).send(error.message);
     }
@@ -147,7 +155,8 @@ const modifyFavSummaries = async (req, res) => {
 
         console.log(`Favorite attribute for summary ID ${summaryId} 
     modified to ${!currentFavVal}`);
-        return res.status(200).send("Modified summary successfully.");
+
+        return res.status(200).json({ message: "Successfully modified" });
     } catch (error) {
         console.error(
             "Error occurred while modifying favorite attribute",
@@ -160,7 +169,7 @@ const modifyFavSummaries = async (req, res) => {
 const saveSummary = async (req, res) => {
     try {
         const { userId, videoId, summaryBody } = req.body;
-        console.log(userId)
+        console.log(userId);
         if (!userId) return res.status(400).send("User ID is required");
         if (!videoId) return res.status(400).send("Video ID is required");