pulled UI-Timeline and implemented it

BacPacNet · May 31, 2024 · af36eaa · af36eaa
1 parent d73a9a7
commit af36eaa
Show file tree

Hide file tree

Showing 13 changed files with 232 additions and 298 deletions.
diff --git a/src/app/community/[id]/profile/page.tsx b/src/app/community/[id]/profile/page.tsx
@@ -0,0 +1,56 @@
+'use client'
+import Footer from '@/components/Footer/Footer'
+import Navbar from '@/components/Timeline/Navbar'
+import Modal from '@/components/Timeline/Modal'
+import EditProfileModal from '@/components/Timeline/Modals/EditProfileModal'
+import ProfileCard from '@/components/Timeline/ProfileCard'
+import CommunityProfileContainer from '@/components/communityProfile/CommunityProfileContainer'
+import { ModalContentType } from '@/types/global'
+import React, { useState } from 'react'
+
+const sampleUser = {
+  name: 'Kathryn Murphy',
+  bio: 'Junior student major at Law, Nagoya University',
+  university: '3rd Year, Undergraduate, Law',
+  department: 'Junior student major at Law',
+  location: 'London, United Kingdom',
+  email: '[email protected]',
+  phone: '+44-3028-3239',
+  dateOfBirth: 'April 3rd, 2002',
+  followers: 21,
+  following: 63,
+}
+
+const Profile = () => {
+  const [isModalOpen, setIsModalOpen] = useState(false)
+  const [modalContentType, setModalContentType] = useState<ModalContentType>()
+  const [activeTab, setActiveTab] = useState<string>('Profile')
+
+  const handleTabClick = (tab: string) => {
+    setActiveTab(tab)
+  }
+
+  const modalContent = (modalContentType: string) => {
+    switch (modalContentType) {
+      case 'EditProfileModal':
+        return <EditProfileModal />
+      default:
+        return null
+    }
+  }
+  return (
+    <>
+      <Modal isOpen={isModalOpen} onClose={() => setIsModalOpen(false)}>
+        {modalContentType && modalContent(modalContentType)}
+      </Modal>
+      <Navbar activeTab={activeTab} onTabClick={handleTabClick} />
+      <div className="flex justify-center w-full gap-6 mt-20 max-md:flex-col max-md:items-center pb-10  ">
+        <ProfileCard {...sampleUser} setModalContentType={setModalContentType} setIsModalOpen={setIsModalOpen} isUserProfile={true} />
+        <CommunityProfileContainer />
+      </div>
+      <Footer />
+    </>
+  )
+}
+
+export default Profile
diff --git a/src/app/communityprofile/page.tsx b/src/app/communityprofile/page.tsx
diff --git a/src/app/globals.css b/src/app/globals.css
@@ -27,11 +27,8 @@ body {
   display: none;
 }
 
-.noscroll{
-
-    overflow-y: hidden
-
-
+.noscroll {
+  overflow-y: hidden;
 }
 
 @layer components {

diff --git a/src/components/Timeline/Post.tsx b/src/components/Timeline/Post.tsx
@@ -5,7 +5,7 @@ import { FaComment } from 'react-icons/fa'
 import { IoPaperPlaneSharp } from 'react-icons/io5'
 // import Image from 'next/image'
 import { SlOptions } from 'react-icons/sl'
-import { FaArrowUp, FaArrowDown } from 'react-icons/fa6'
+import { FaArrowUp, FaArrowDown, FaBookmark } from 'react-icons/fa6'
 import { MdOutlineImage } from 'react-icons/md'
 import { MdGifBox, MdOutlineBookmarkBorder } from 'react-icons/md'
 import { HiReply, HiOutlineBell, HiOutlineFlag } from 'react-icons/hi'
@@ -37,7 +37,7 @@ interface PostProps {
   university: string
   year: string
   text: string
-  link: string
+  link?: string
   date: string
   avatar: string
   likes: number
@@ -47,6 +47,9 @@ interface PostProps {
   userComments: Comment[]
   setModalContentType: React.Dispatch<React.SetStateAction<ModalContentType>>
   setIsModalOpen: React.Dispatch<React.SetStateAction<boolean>>
+  isUserProfile?: boolean
+  media?: string
+  saved?: boolean
 }
 
 const PostOptions = () => {
@@ -134,9 +137,12 @@ const Post: React.FC<PostProps> = ({
   userComments,
   setIsModalOpen,
   setModalContentType,
+  isUserProfile,
+  media,
+  saved,
 }) => {
   return (
-    <div className="border-2 border-gray-dark rounded-lg mb-4 shadow-sm max-w-[696px]">
+    <div className={`${isUserProfile ? '' : 'border-2 border-gray-dark rounded-lg'} mb-4 shadow-sm max-w-[696px]`}>
       <div className="flex items-start">
         {/* User Post */}
         <div className="pt-10">
@@ -151,8 +157,18 @@ const Post: React.FC<PostProps> = ({
               </div>
             </div>
             {/* POST OPTIONS */}
-            <PostOptions />
+            <div className="flex items-center gap-2">
+              {saved && <FaBookmark />}
+
+              <PostOptions />
+            </div>
           </div>
+          {/* media div  */}
+          {media && (
+            <div className="flex justify-center w-full px-10 mt-2">
+              <img className="rounded-lg h-96 object-fill max-sm:object-cover w-full " src={media} alt="media" />
+            </div>
+          )}
           {/* Post Content */}
           <div className="mt-6 px-10 ">
             {/* TODO: A MARKDOWN PARSER MAY BE NEEDED FOR POST CONTENT */}

diff --git a/src/components/Timeline/ProfileCard.tsx b/src/components/Timeline/ProfileCard.tsx
@@ -21,6 +21,7 @@ interface ProfileProps {
   followers: number
   setModalContentType: React.Dispatch<React.SetStateAction<ModalContentType>>
   setIsModalOpen: React.Dispatch<React.SetStateAction<boolean>>
+  isUserProfile?: boolean
 }
 
 const ProfileItem = ({ iconName, text }: { iconName: React.ComponentType<{ size: number; color: string }>; text: string }) => {
@@ -45,6 +46,7 @@ const ProfileCard: React.FC<ProfileProps> = ({
   followers,
   setIsModalOpen,
   setModalContentType,
+  isUserProfile,
 }) => {
   return (
     <div className="max-w-[280px] bg-white rounded-lg shadow-md overflow-hidden border-2 border-gray-dark">
@@ -71,7 +73,7 @@ const ProfileCard: React.FC<ProfileProps> = ({
       <div className="px-8 mt-8 py-5">
         <h2 className="text-lg font-semibold">{name}</h2>
         <p className="text-gray-dark text-xs py-1">{bio}</p>
-        <button className="w-full bg-primary text-white py-2 mt-2 rounded-lg text-xs font-medium">Create Avatar</button>
+        {!isUserProfile && <button className="w-full bg-primary text-white py-2 mt-2 rounded-lg text-xs font-medium">Create Avatar</button>}
         <div className="mt-5 flex flex-col gap-4">
           <ProfileItem iconName={RiGraduationCapFill} text={university} />
           <ProfileItem iconName={HiLibrary} text={department} />

diff --git a/src/components/communityProfile/CommunityProfileCommentBox.tsx b/src/components/communityProfile/CommunityProfileCommentBox.tsx
diff --git a/src/components/communityProfile/CommunityProfileContainer.tsx b/src/components/communityProfile/CommunityProfileContainer.tsx
@@ -1,53 +1,135 @@
 'use client'
 import React, { useState } from 'react'
 import CommunityProfileOption from './CommunityProfileOption'
-import CommunityProfilePost from './CommunityProfilePost'
 import CommunityProfileSettings from './CommunityProfileSettings/CommunityProfileSettings'
 import { valueType } from './communityProfileOptionEnum'
+import Post from '../Timeline/Post'
+import { ModalContentType } from '@/types/global'
+import Modal from '../Timeline/Modal'
+import ConnectionsModal from '../Timeline/Modals/ConnectionsModal'
+import PollModal from '../Timeline/Modals/PollModal'
+import ReplyModal from '../Timeline/Modals/ReplyModal'
 
-const dummyData = [
+const comments = [
   {
-    dp: 'https://cdn.pixabay.com/photo/2023/02/19/08/39/man-7799486_1280.jpg',
-    content: 'Law Debate Club will have its first debate starting next week Feb 19, 2024! Any participants interested send me a DM.',
-    name: 'Kathryn Murphy',
+    id: 1,
+    user: 'Johnny Nitro',
+    text: "Yeah give me a second I'll try to solve it and send the solution over your DMs.",
+    date: '5d',
+    avatar: '/timeline/avatar.png',
+    likes: 4,
   },
 ]
 
-const dummyMediaData = [
-  {
-    dp: 'https://cdn.pixabay.com/photo/2023/02/19/08/39/man-7799486_1280.jpg',
-    content: 'Beautiful building landscapes in the japanese skyline.',
-    name: 'Kathryn Murphy',
-    media: 'https://cdn.pixabay.com/photo/2016/04/07/18/36/architecture-1314416_1280.jpg',
-  },
-]
-
-const dummySavedData = [
-  {
-    dp: 'https://cdn.pixabay.com/photo/2023/02/19/08/39/man-7799486_1280.jpg',
-    content: 'Beautiful building landscapes in the japanese skyline.',
-    name: 'Kathryn Murphy',
-    saved: true,
-  },
-]
+const roberta = {
+  avatarUrl: '/timeline/avatar2.png',
+  userAvatarUrl: '/timeline/avatar.png',
+  name: 'Roberta Green',
+  comment: 'Sorry that was a strange thing to ask.',
+  replyingTo: 'Johnny Nitro and Kathryn Murphy',
+}
 
 const CommunityProfileContainer = () => {
   const [selectedOption, setSelectedOption] = useState('Posts')
+  const [isModalOpen, setIsModalOpen] = useState(false)
+  const [modalContentType, setModalContentType] = useState<ModalContentType>()
+
+  const modalContent = (modalContentType: string) => {
+    switch (modalContentType) {
+      case 'ConnectionsModal':
+        return <ConnectionsModal />
+      case 'PollModal':
+        return <PollModal />
+      case 'ReplyModal':
+        return <ReplyModal {...roberta} setModalContentType={setModalContentType} setIsModalOpen={setIsModalOpen} />
+      default:
+        return null
+    }
+  }
+
   return (
-    <div className="w-1/2 max-md:w-9/12 max-sm:w-11/12 border-2 rounded-lg border-[#737373] max-h-max ">
-      <CommunityProfileOption selectedOption={selectedOption} setSelectedOption={setSelectedOption} />
-      {selectedOption == valueType.Posts ? (
-        <CommunityProfilePost data={dummyData} />
-      ) : selectedOption == valueType.Media ? (
-        <CommunityProfilePost data={dummyMediaData} />
-      ) : selectedOption == valueType.Saved ? (
-        <CommunityProfilePost data={dummySavedData} />
-      ) : selectedOption == valueType.Settings ? (
-        <CommunityProfileSettings />
-      ) : (
-        <CommunityProfilePost data={dummyData} />
-      )}
-    </div>
+    <>
+      <Modal isOpen={isModalOpen} onClose={() => setIsModalOpen(false)}>
+        {modalContentType && modalContent(modalContentType)}
+      </Modal>
+
+      <div className="w-1/2 max-md:w-9/12 max-sm:w-11/12 border-2 rounded-lg border-[#737373] max-h-max ">
+        <CommunityProfileOption selectedOption={selectedOption} setSelectedOption={setSelectedOption} />
+        {selectedOption == valueType.Posts ? (
+          <Post
+            user="Kathryn Murphy"
+            university="Nagoya University"
+            year="2nd Yr. Graduate"
+            text="Law Debate Club will have its first debate starting next week Feb 19, 2024! Any participants interested send me a DM."
+            date="9:31 PM · Feb 11, 2024"
+            avatar="/timeline/avatar.png"
+            likes={50}
+            comments={3}
+            reposts={2}
+            shares={1}
+            userComments={comments}
+            setModalContentType={setModalContentType}
+            setIsModalOpen={setIsModalOpen}
+            isUserProfile={true}
+          />
+        ) : selectedOption == valueType.Media ? (
+          <Post
+            user="Kathryn Murphy"
+            university="Nagoya University"
+            year="2nd Yr. Graduate"
+            text="Beautiful building landscapes in the japanese skyline."
+            date="9:31 PM · Feb 11, 2024"
+            avatar="/timeline/avatar.png"
+            likes={50}
+            comments={3}
+            reposts={2}
+            shares={1}
+            userComments={comments}
+            setModalContentType={setModalContentType}
+            setIsModalOpen={setIsModalOpen}
+            isUserProfile={true}
+            media="https://cdn.pixabay.com/photo/2016/04/07/18/36/architecture-1314416_1280.jpg"
+          />
+        ) : selectedOption == valueType.Saved ? (
+          <Post
+            user="Kathryn Murphy"
+            university="Nagoya University"
+            year="2nd Yr. Graduate"
+            text="Law Debate Club will have its first debate starting next week Feb 19, 2024! Any participants interested send me a DM."
+            date="9:31 PM · Feb 11, 2024"
+            avatar="/timeline/avatar.png"
+            likes={50}
+            comments={3}
+            reposts={2}
+            shares={1}
+            userComments={comments}
+            setModalContentType={setModalContentType}
+            setIsModalOpen={setIsModalOpen}
+            isUserProfile={true}
+            saved={true}
+          />
+        ) : selectedOption == valueType.Settings ? (
+          <CommunityProfileSettings />
+        ) : (
+          <Post
+            user="Kathryn Murphy"
+            university="Nagoya University"
+            year="2nd Yr. Graduate"
+            text="Beautiful building landscapes in the japanese skyline."
+            date="9:31 PM · Feb 11, 2024"
+            avatar="/timeline/avatar.png"
+            likes={50}
+            comments={3}
+            reposts={2}
+            shares={1}
+            userComments={comments}
+            setModalContentType={setModalContentType}
+            setIsModalOpen={setIsModalOpen}
+            isUserProfile={true}
+          />
+        )}
+      </div>
+    </>
   )
 }