made UI of my notes and summaries page

client/package.json

@@ -28,6 +28,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-icons": "^5.0.1",
+    "react-modal": "^3.16.1",
     "react-redux": "^9.1.0",
     "react-router-dom": "^6.22.3",
     "react-scripts": "^5.0.1",

client/src/App.js

@@ -1,4 +1,3 @@
-
 import React from "react";
 import { Routes, Route } from "react-router-dom";
 import Landing from "./pages/LandingPage";
@@ -13,7 +12,8 @@ import Dashboard from "./pages/Dashboard";
 import Feedback from "./pages/feedback";
 
 import MyNotes from './pages/MyNotes';
-
+import MyNotesAndSummaries from "./pages/MyNotesAndSummaries";
+import SummaryAndNotes from "./pages/SummaryAndNotes";
 
 import Profile from "./pages/Profile";
 import Auth from "./utils/Auth";
@@ -41,6 +41,8 @@ function App() {
               <Route exact path="/summary" element={<SummaryPage />} />
               <Route exact path="/profile" element={<Profile />} />
               <Route exact path="/mynotes" element={<MyNotes/>} />
+              <Route exact path="/mynotesandsummaries" element={<MyNotesAndSummaries/>} />
+              <Route exact path="/summaryAndNote" element={<SummaryAndNotes/>} />
             </Route>
             <Route path="*" element={<NotFound />} />
           </Routes>

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

@@ -0,0 +1,61 @@
+import React, {useState} from 'react';
+import { useNavigate } from "react-router";
+import Modal from 'react-modal';
+import { MdDeleteOutline } from 'react-icons/md'; // Import the MdDeleteOutline icon if you haven't already
+
+const Card = ({ title, youtubeUrl, note, summary }) => {
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const navigate = useNavigate();
+
+  const openModal = () => {
+    // navigate("/summaryAndNote")
+    // return <Navigate to="/summaryAndNote" />;
+  };
+
+  const closeModal = () => {
+    setIsModalOpen(false);
+  };
+
+  const navigateToSummary = () => {
+    console.log(youtubeUrl)
+    navigate("/summaryAndNote", { state: { title, note, summary, youtubeUrl } });
+  };
+
+  const deleteCard = () => {
+    // TODO: Add your delete card logic here
+  };
+
+  // Function to extract video ID from YouTube URL
+  const getVideoId = (url) => {
+    const videoIdRegex = /(?:https?:\/\/)?(?:www\.)?(?:youtube\.com\/(?:[^/]+\/.+\/|(?:v|e(?:mbed)?)\/|.*[?&]v=)|youtu\.be\/)([a-zA-Z0-9_-]{11})/;
+    const match = url.match(videoIdRegex);
+    return match ? match[1] : null;
+  };
+
+  // Function to get YouTube thumbnail URL from video ID
+  const getThumbnailUrl = (videoId) => {
+    return `https://img.youtube.com/vi/${videoId}/maxresdefault.jpg`;
+  };
+
+  const videoId = getVideoId(youtubeUrl);
+  const thumbnailUrl = videoId ? getThumbnailUrl(videoId) : '';
+
+  return (
+    <div>
+      <div className="bg-gray-200 rounded-md w-[400px] h-[390px] ml-[70px] mt-10" >
+        <div className="flex flex-col ml-[25px]">
+          {thumbnailUrl && <img src={thumbnailUrl} className="w-[350px] h-[250px] rounded-md mt-4" alt="YouTube Video Thumbnail" />}
+          <p className="text-black font-medium text-[16px] w-[350px] mt-3">{title}</p>
+          <div className="flex flex-row items-center justify-between">
+            <button className="bg-red-900 p-2 rounded-lg w-[80px] text-white hover:text-red-200 text-[18px] font font-medium mt-3 hover:font-bold cursor-pointer" onClick={navigateToSummary}>Open</button>
+            <MdDeleteOutline className="mr-5 text-[35px] hover:text-red-900 cursor-pointer" onClick={deleteCard} />
+          </div>
+
+        </div>
+      </div>
+
+  </div>
+  );
+};
+
+export default Card;

client/src/pages/MyNotesAndSummaries.jsx

@@ -0,0 +1,89 @@
+import React, { useEffect, useState } from 'react'
+import NoteAndSummary from '../components/shared/Card/NoteAndSummaryCard'
+import { useDispatch, useSelector } from "react-redux";
+import { setUserSlice } from "../redux/userSlice";
+import { CgProfile } from "react-icons/cg";
+import { FiPhoneCall } from "react-icons/fi";
+import { IoMdSettings } from "react-icons/io";
+import { IoIosNotifications } from "react-icons/io";
+import { Link, useNavigate } from "react-router-dom";
+
+const MyNotesAndSummaries = () => {
+    const dispatch = useDispatch();
+    const navigate = useNavigate();
+
+    const user = useSelector((state) => state.user);
+
+    const handleRedirect = () => {
+        navigate('/contact');
+      };
+
+      const handleProfileRedirect = () => {
+        navigate('/profile');
+      };
+
+    useEffect(() => {
+        const fetchData = async () => {
+            try {
+                const response = await yourApiCall(); // Your API call here
+                const { user, accessToken, refreshToken } = response.data;
+                dispatch(setUserSlice({ user, accessToken, refreshToken }));
+            } catch (error) {
+                console.error('Error fetching data:', error);
+            }
+        };
+
+        fetchData(); // Call fetchData function when component mounts
+    }, []); // Empty dependency array ensures effect runs only once when component mounts
+
+  return (
+    <div className="h-screen">
+
+        <section className="flex flex-col gap-6 bg-gradient-to-b from-gray-900 via-gray-800 to-red-900 h-full w-full overflow-auto pb-4">
+            <div className="flex flex-row items-center justify-between mt-7">
+                {/* Heading on the left */}
+                <h1 className="text-3xl font-bold text-white ml-[80px]">My Notes And Summaries</h1>
+
+                {/* Icons on the right */}
+                <div className="flex flex-row items-center gap-4 mr-14">
+                    <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>
+
+                    <div className="bg-white w-10 h-[40px] flex items-center text-[30px] justify-center rounded-full">
+                        <IoMdSettings />
+                    </div>
+
+                    <div className="bg-white w-10 h-[40px] flex items-center text-[30px] justify-center rounded-full">
+                        <IoIosNotifications />
+                    </div>
+
+                    <div className="bg-white w-10 h-[40px] flex items-center text-[30px] justify-center rounded-full cursor-pointer" onClick={handleProfileRedirect}>
+                        <CgProfile />
+                    </div>
+                </div>
+            </div>
+
+
+            <div className="flex flex-wrap gap-6 h-full pb-8">
+                <NoteAndSummary 
+                    title="Your Note Title 1"  
+                    youtubeUrl="https://www.youtube.com/watch?v=yj3lm00cZSg&ab_channel=SonyLIV" 
+                    note="Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum."
+                    summary="Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum."
+                />
+                <NoteAndSummary title="Your Note Title 2"  youtubeUrl="https://www.youtube.com/watch?v=yj3lm00cZSg&ab_channel=SonyLIV"/>
+                <NoteAndSummary title="Your Note Title 2"  youtubeUrl="https://www.youtube.com/watch?v=yj3lm00cZSg&ab_channel=SonyLIV"/>
+                <NoteAndSummary title="Your Note Title 2"  youtubeUrl="https://www.youtube.com/watch?v=yj3lm00cZSg&ab_channel=SonyLIV"/>
+                <NoteAndSummary title="Your Note Title 2"  youtubeUrl="https://www.youtube.com/watch?v=yj3lm00cZSg&ab_channel=SonyLIV"/>
+                {/* Add more NoteAndSummary components for each note or summary */}
+            </div>
+        </section>
+    </div>
+  )
+}
+
+export default MyNotesAndSummaries

client/src/pages/SummaryAndNotes.jsx

@@ -0,0 +1,120 @@
+import React from 'react'
+import { motion } from "framer-motion";
+import { useLocation } from 'react-router-dom';
+import { CgProfile } from "react-icons/cg";
+import { FiPhoneCall } from "react-icons/fi";
+import { IoMdSettings } from "react-icons/io";
+import { IoIosNotifications } from "react-icons/io";
+import { Link, useNavigate } from "react-router-dom";
+
+const SummaryAndNotes = () => {
+  // Use useLocation hook to access location state
+  const location = useLocation();
+  const navigate = useNavigate();
+  const { title, note, summary, youtubeUrl } = location.state;
+
+  const handleRedirect = () => {
+    navigate('/contact');
+  };
+
+  const handleProfileRedirect = () => {
+    navigate('/profile');
+  };
+
+  console.log(youtubeUrl);
+  const getVideoId = (url) => {
+    const videoIdRegex = /(?:https?:\/\/)?(?:www\.)?(?:youtube\.com\/(?:[^/]+\/.+\/|(?:v|e(?:mbed)?)\/|.*[?&]v=)|youtu\.be\/)([a-zA-Z0-9_-]{11})/;
+    const match = url.match(videoIdRegex);
+    return match ? match[1] : null;
+  };
+
+    const handleVideoUrl = (url) => {
+        const videoId = getVideoId(url);
+        const videoUrl = "https://www.youtube.com/embed/" + videoId;
+        return videoUrl;
+    };
+
+  return (
+    <div className="">
+      <motion.div
+        className=" flex flex-col h-[1000px] justify-center items-center bg-gradient-to-b from-gray-900 via-gray-800 to-red-900"
+        initial={{ opacity: 0 }}
+        animate={{ opacity: 1 }}
+        transition={{ duration: 1 }}
+      >
+        <div className="w-full h-[1000px] bg-gradient-to-b from-gray-900 via-gray-800 to-red-900">
+          <div className="flex flex-col w-full h-[1200px] bg-none p-12">
+            <div className="flex flex-row items-center justify-between mb-8">
+              {/* Heading on the left */}
+              <h1 className="text-3xl font-bold text-white">{title}</h1>
+
+              {/* Icons on the right */}
+              <div className="flex flex-row items-center gap-4 mr-14">
+                <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>
+
+                <div className="bg-white w-10 h-[40px] flex items-center text-[30px] justify-center rounded-full">
+                  <IoMdSettings />
+                </div>
+
+                <div className="bg-white w-10 h-[40px] flex items-center text-[30px] justify-center rounded-full">
+                  <IoIosNotifications />
+                </div>
+
+                <div className="bg-white w-10 h-[40px] flex items-center text-[30px] justify-center rounded-full cursor-pointer" onClick={handleProfileRedirect}>
+                  <CgProfile />
+                </div>
+              </div>
+            </div>
+            <div className="flex flex-row w-full bg-none max-h-[600px]">
+              <div className="w-1/2 bg-white rounded-lg mr-4">
+                <div className="p-4 items-center justify-center bg-none">
+                  <div className="relative" style={{ paddingTop: "56.25%" }}>
+                    <iframe
+                      className="absolute top-0 left-0 w-full h-full"
+                      src={handleVideoUrl(youtubeUrl)}
+                      title="YouTube video player"
+                      frameBorder="0"
+                      autoPlay
+                      allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+                      allowFullScreen
+                    ></iframe>
+                  </div>
+                </div>
+              </div>
+              <div className="w-1/2 bg-white rounded-lg ml-4 pl-4 pr-4 pt-4 overflow-y-scroll whitespace-normal">
+                <div className="flex justify-between items-center mb-4">
+                  <h2 className="text-left text-4xl font-bold sticky top-0 bg-white text-brown-800 flex items-center justify-between font-league-gothic">
+                    NOTES
+                  </h2>
+                </div>
+                <div data-testid="note-test" className="max-w-[400px] whitespace-normal">
+                  {note}
+                </div>
+              </div>
+            </div>
+            <div className="flex flex-row w-full bg-none max-h-[600px] mt-12">
+                <div
+                    className="w-full bg-white rounded-lg pl-4 pr-4 pt-4 overflow-y-scroll"
+                    style={{ height: "400px" }}
+                >
+                    <div className="flex justify-between items-center mb-4 ">
+                        <h2 className="text-left text-4xl font-bold sticky top-0 bg-white text-brown-800 flex items-center justify-between font-league-gothic">
+                          SUMMARY
+                        </h2>
+                    </div>
+                    <div data-testid="summary-test" className="text-wrap">{summary}</div>
+                </div>
+            </div>
+          </div>
+        </div>
+      </motion.div>
+    </div>
+  )
+}
+
+export default SummaryAndNotes

server/controllers/auth.js

@@ -183,7 +183,9 @@ const loginUser = async (req, res) => {
             const cred = jwtDecode(credential);
             console.log(cred);
             const email = cred?.email;
-            // const name = cred?.name;
+
+            // eslint-disable-next-line no-unused-vars
+            const name = cred?.name;
             if (email) {
                 const user = await User.findOne({ email });
                 if (user) {