Merge pull request #48 from BacPacNet/user-Profile-ui

user-profile

package.json

@@ -26,7 +26,9 @@
     "prepare": "husky install"
   },
   "dependencies": {
+    "@apollo/client": "^3.10.4",
     "@as-integrations/next": "^2.0.2",
+    "@radix-ui/react-popover": "^1.0.7",
     "@tanstack/react-query": "^5.32.0",
     "@tsparticles/engine": "^3.3.0",
     "@tsparticles/react": "^3.0.0",
@@ -37,9 +39,11 @@
     "apollo-datasource-mongodb": "^0.6.0",
     "autoprefixer": "10.4.16",
     "axios": "^1.6.8",
+    "clsx": "^2.1.1",
     "cors": "^2.8.5",
     "cross-fetch": "^4.0.0",
     "dotenv": "^16.3.1",
+    "emoji-picker-react": "^4.9.3",
     "esbuild": "^0.20.2",
     "framer-motion": "^11.0.25",
     "graphql": "^16.8.1",
@@ -57,9 +61,12 @@
     "react-hook-form": "^7.51.2",
     "react-icons": "^4.11.0",
     "react-parallax": "^3.5.1",
+    "react-share": "^5.1.0",
     "react-type-animation": "^3.2.0",
+    "sharp": "^0.33.4",
     "storybook-addon-apollo-client": "^5.0.0",
     "swiper": "^11.0.7",
+    "tailwind-merge": "^2.3.0",
     "tailwindcss": "3.3.3",
     "ts-node": "^10.9.2",
     "zustand": "^4.5.2"

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

src/app/community/[id]/timeline/page.tsx

@@ -0,0 +1,185 @@
+'use client'
+import React, { useState } from 'react'
+import Navbar from '@/components/Timeline/Navbar'
+import ProfileCard from '@/components/Timeline/ProfileCard'
+import PostInput from '@/components/Timeline/PostInput'
+import Dropdown from '@/components/Timeline/DropDown'
+import Post from '@/components/Timeline/Post'
+import Footer from '@/components/Footer/Footer'
+import Modal from '@/components/Timeline/Modal'
+import ConnectionsModal from '@/components/Timeline/Modals/ConnectionsModal'
+import PollModal from '@/components/Timeline/Modals/PollModal'
+import EditProfileModal from '@/components/Timeline/Modals/EditProfileModal'
+import ReplyModal from '@/components/Timeline/Modals/ReplyModal'
+import { ModalContentType } from '@/types/global'
+import Recommendations from '@/components/Timeline/Recommendations'
+interface User {
+  name: string
+  bio: string
+  university: string
+  department: string
+  location: string
+  email: string
+  phone: string
+  dateOfBirth: string
+  followers: number
+  following: number
+}
+interface Post {
+  user: User
+  content: string
+  dateTime: string
+  likes: number
+  comments: Comment[]
+  reposts: number
+}
+interface Comment {
+  user: User
+  content: string
+  likes: number
+}
+
+// SAMPLE DATA FOR TESTING
+
+// const samplePost = {
+//   user: {
+//     name: 'Joshua Welman',
+//     university: 'Nagoya University',
+//     department: '2nd Yr. Graduate',
+//     location: '',
+//     email: '',
+//     phone: '',
+//     dateOfBirth: '',
+//     followers: 0,
+//     following: 0,
+//   },
+//   content: 'Can someone help me with this chemistry equation? Here\'s the link to the google drive: //https:www.bukochem.com/homework/A1-35',
+//   dateTime: 'Feb 11, 2024 - Post from Bukio\'s Chemistry Lab at Nagoya University',
+//   likes: 50,
+//   comments: [
+//     {
+//       user: {
+//         name: 'Johnny Nitro',
+//         university: '',
+//         department: '',
+//         location: '',
+//         email: '',
+//         phone: '',
+//         dateOfBirth: '',
+//         followers: 0,
+//         following: 0,
+//       },
+//       content: 'Yeah give me a second I\'ll try to solve it and send the solution over your DMs.',
+//       likes: 4,
+//     },
+//   ],
+//   reposts: 2,
+// };
+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 options = ['Recent', 'Popular', 'Most Liked']
+const comments = [
+  {
+    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 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 recommendations = [
+  {
+    name: 'Roberta Green',
+    university: 'Nagoya University',
+    affilation: '2nd Yr. Undergraduate, Psychology',
+    avatar: '/timeline/avatar.png',
+  },
+  {
+    name: 'Roberta Green',
+    university: 'Nagoya University',
+    affilation: '2nd Yr. Undergraduate, Psychology',
+    avatar: '/timeline/avatar2.png',
+  },
+]
+
+const Timeline = () => {
+  const [activeTab, setActiveTab] = useState<string>('Timeline')
+  const [isModalOpen, setIsModalOpen] = useState(false)
+  const [modalContentType, setModalContentType] = useState<ModalContentType>()
+  const handleTabClick = (tab: string) => {
+    setActiveTab(tab)
+  }
+
+  const modalContent = (modalContentType: string) => {
+    switch (modalContentType) {
+      case 'ConnectionsModal':
+        return <ConnectionsModal />
+      case 'PollModal':
+        return <PollModal />
+      case 'EditProfileModal':
+        return <EditProfileModal />
+      case 'ReplyModal':
+        return <ReplyModal {...roberta} setModalContentType={setModalContentType} setIsModalOpen={setIsModalOpen} />
+      default:
+        return null
+    }
+  }
+  // useEffect(() => {
+  // }, [modalContentType])
+
+  return (
+    <main>
+      <Modal isOpen={isModalOpen} onClose={() => setIsModalOpen(false)}>
+        {modalContentType && modalContent(modalContentType)}
+      </Modal>
+      <Navbar activeTab={activeTab} onTabClick={handleTabClick} />
+      <div className="flex justify-center items-start gap-7 mt-16">
+        <div className="flex flex-col gap-6">
+          <ProfileCard {...sampleUser} setModalContentType={setModalContentType} setIsModalOpen={setIsModalOpen} />
+          <Recommendations people={recommendations} />
+        </div>
+        <div className="flex flex-col gap-5">
+          <PostInput setModalContentType={setModalContentType} setIsModalOpen={setIsModalOpen} />
+          <Dropdown options={options} defaultOption="Recent" />
+          <Post
+            user="Joshua Welman"
+            university="Nagoya University"
+            year="2nd Yr. Graduate"
+            text="Can someone help me with this chemistry equation? Here’s the link to the google drive:"
+            link="https://www.butkochem.com/homework/A1-35"
+            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}
+          />
+        </div>
+      </div>
+      <Footer />
+    </main>
+  )
+}
+
+export default Timeline

src/app/globals.css

@@ -26,6 +26,11 @@ body {
 .searchBox::-webkit-scrollbar {
   display: none;
 }
+
+.noscroll {
+  overflow-y: hidden;
+}
+
 @layer components {
   .btn {
     @apply p-3 rounded-md flex text-[#ffffff] items-center justify-center text-base;

src/components/Footer/Footer.tsx

@@ -1,3 +1,4 @@
+'use client'
 import './Footer.css'
 
 import Image from 'next/image'

src/components/Timeline/DropDown.tsx

@@ -0,0 +1,60 @@
+// components/Dropdown.tsx
+import React, { useState } from 'react'
+import { FaChevronDown } from 'react-icons/fa'
+
+interface DropdownProps {
+  options: string[]
+  defaultOption: string
+}
+
+const Dropdown: React.FC<DropdownProps> = ({ options, defaultOption }) => {
+  const [isOpen, setIsOpen] = useState(false)
+  const [selectedOption, setSelectedOption] = useState(defaultOption)
+
+  const toggleDropdown = () => setIsOpen(!isOpen)
+
+  const handleOptionClick = (option: string) => {
+    setSelectedOption(option)
+    setIsOpen(false)
+  }
+
+  return (
+    <div className="relative inline-block text-left">
+      <div>
+        <button
+          type="button"
+          className="inline-flex items-center rounded-md bg-white text-sm font-medium text-gray-dark hover:text-gray focus:outline-none"
+          onClick={toggleDropdown}
+        >
+          Sort By: {selectedOption}
+          <FaChevronDown className="ml-2 h-3 w-3 text-gray-500" />
+        </button>
+      </div>
+      {isOpen && (
+        <div
+          className="origin-top-left absolute left-0 mt-2 w-56 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5"
+          role="menu"
+          aria-orientation="vertical"
+          aria-labelledby="menu-button"
+          tabIndex={-1}
+        >
+          <div className="py-1" role="none">
+            {options.map((option) => (
+              <button
+                key={option}
+                className="text-gray-700 block w-full text-left px-4 py-2 text-sm hover:bg-gray-100"
+                role="menuitem"
+                tabIndex={-1}
+                onClick={() => handleOptionClick(option)}
+              >
+                {option}
+              </button>
+            ))}
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}
+
+export default Dropdown