From d1820d347820ea00301a79d8f4eef10817d843bc Mon Sep 17 00:00:00 2001
From: Job <job.santos924@gmail.com>
Date: Thu, 5 Sep 2024 15:36:02 +1200
Subject: [PATCH] feat: sponsor profile modal structure

---
 .../components/Modal/EditSponsorProfile.tsx   | 77 +++++++++++++++++++
 .../app/components/Tabs/SponsorAboutTab.tsx   | 16 ++++
 .../app/components/Tabs/SponsorProfileTab.tsx | 21 +++++
 .../app/pages/Sponsor/SponsorProfile.page.tsx | 32 ++++++--
 4 files changed, 141 insertions(+), 5 deletions(-)
 create mode 100644 web/src/app/components/Modal/EditSponsorProfile.tsx
 create mode 100644 web/src/app/components/Tabs/SponsorAboutTab.tsx
 create mode 100644 web/src/app/components/Tabs/SponsorProfileTab.tsx

diff --git a/web/src/app/components/Modal/EditSponsorProfile.tsx b/web/src/app/components/Modal/EditSponsorProfile.tsx
new file mode 100644
index 0000000..1cb626e
--- /dev/null
+++ b/web/src/app/components/Modal/EditSponsorProfile.tsx
@@ -0,0 +1,77 @@
+import { Tabs, Box, Button, Select, Divider, Modal } from '@mantine/core';
+import { AboutTab } from '../Tabs/AboutTab';
+import { EducationTab } from '../Tabs/EducationTab';
+import { SkillsTab } from '../Tabs/SkillsTab';
+import { CVTab } from '../Tabs/CVTab';
+import styles from './Modal.module.css';
+import { useMediaQuery } from '@mantine/hooks';
+import { useState } from 'react';
+import { SponsorAboutTab } from '../Tabs/SponsorAboutTab';
+import { SponsorProfileTab } from '../Tabs/SponsorProfileTab';
+
+export const EditSponsorProfile = () => {
+  const [activeTab, setActiveTab] = useState('about');
+  const [isModalOpen, setIsModalOpen] = useState(true);
+  const tabOptions = [
+    { value: 'profile', label: 'Profile' },
+    { value: 'about', label: 'About Me' },
+  ];
+
+  const isMobile = useMediaQuery('(max-width: 430px)'); //mobile screen
+
+  const renderContent = () => {
+    switch (activeTab) {
+      case 'profile':
+        return <SponsorProfileTab />;
+      case 'about':
+        return <SponsorAboutTab />;
+    }
+  };
+
+  return (
+    <Box>
+      {isMobile ? ( //conditionally render mobile tab dropdown
+        <>
+          <Select
+            data={tabOptions}
+            value={activeTab}
+            onChange={(value) => setActiveTab(value as string)}
+            classNames={{
+              wrapper: styles.selectWrapper,
+              input: styles.selectInput,
+              dropdown: styles.selectDropdown,
+            }}
+          />
+          <Divider size="md" mt={20} />
+          <Box mt={20}>{renderContent()}</Box>
+        </>
+      ) : (
+        <Tabs
+          color="#ff8400"
+          defaultValue="profile"
+          classNames={{
+            root: styles.tabRoot,
+            list: styles.list,
+            panel: styles.panel,
+            tabLabel: styles.tabLabel,
+          }}
+        >
+          <Tabs.List>
+            {tabOptions.map((tab) => (
+              <Tabs.Tab key={tab.value} value={tab.value}>
+                {tab.label}
+              </Tabs.Tab>
+            ))}
+          </Tabs.List>
+
+          <Tabs.Panel value="profile" mt={30}>
+            <SponsorProfileTab />
+          </Tabs.Panel>
+          <Tabs.Panel value="about" mt={30}>
+            <SponsorAboutTab />
+          </Tabs.Panel>
+        </Tabs>
+      )}
+    </Box>
+  );
+};
diff --git a/web/src/app/components/Tabs/SponsorAboutTab.tsx b/web/src/app/components/Tabs/SponsorAboutTab.tsx
new file mode 100644
index 0000000..a57940b
--- /dev/null
+++ b/web/src/app/components/Tabs/SponsorAboutTab.tsx
@@ -0,0 +1,16 @@
+import { Box, TextInput, Textarea } from '@mantine/core';
+import styles from '../Modal/Modal.module.css';
+
+export const SponsorAboutTab = () => {
+  return (
+    <Box>
+      <Textarea
+        label="About Me"
+        size="md"
+        classNames={{
+          input: styles.area,
+        }}
+      />
+    </Box>
+  );
+};
diff --git a/web/src/app/components/Tabs/SponsorProfileTab.tsx b/web/src/app/components/Tabs/SponsorProfileTab.tsx
new file mode 100644
index 0000000..8d2d95a
--- /dev/null
+++ b/web/src/app/components/Tabs/SponsorProfileTab.tsx
@@ -0,0 +1,21 @@
+import { Box, TextInput } from '@mantine/core';
+import styles from '../Modal/Modal.module.css';
+
+export const SponsorProfileTab = () => {
+  return (
+    <Box>
+      <Box className={styles.box}>
+        <Box style={{ flex: 1 }} className={styles.input}>
+          <TextInput label="Company" size="md" />
+          <TextInput label="Specialisation" size="md" />
+          <TextInput label="Website" size="md" />
+        </Box>
+        <Box style={{ flex: 1 }} className={styles.input}>
+          <TextInput label="Recruiter" size="md" />
+          <TextInput label="Phone" size="md" />
+          <TextInput label="Email" size="md" />
+        </Box>
+      </Box>
+    </Box>
+  );
+};
diff --git a/web/src/app/pages/Sponsor/SponsorProfile.page.tsx b/web/src/app/pages/Sponsor/SponsorProfile.page.tsx
index 958796f..6180125 100644
--- a/web/src/app/pages/Sponsor/SponsorProfile.page.tsx
+++ b/web/src/app/pages/Sponsor/SponsorProfile.page.tsx
@@ -5,12 +5,19 @@ import { IconPlus } from '@tabler/icons-react';
 import { JobCarousel } from '../../components/JobCardCarousel/JobCarousel';
 import { JobCardProps } from '../../components/JobCardCarousel/JobCard';
 import { UserType } from '../../features/user/userSlice';
+import { EditAvatar } from '@/app/components/Modal/EditAvatar';
+import { EditBannerModal } from '@/app/components/Modal/EditBannerModal';
+import { EditSponsorProfile } from '@/app/components/Modal/EditSponsorProfile';
+import EditModal from '@/app/components/Modal/EditModal';
 
 export function SponsorProfile() {
   // UseState for future modal implementation
   const [openModal, setOpenModal] = useState(false);
   const [modalType, setModalType] = useState('');
+  const [modalContent, setModalContent] = useState<React.ReactNode>(null);
+  const [modalTitle, setModalTitle] = useState('');
   const [openProfileModal, setOpenProfileModal] = useState(false);
+
   const [showMoreDescription, setShowMoreDescription] = useState(false);
   // const userType = useSelector((state: RootState) => state.user.userType);
   const [userType, setUserType] = useState<UserType>('sponsor');
@@ -21,16 +28,22 @@ export function SponsorProfile() {
 
   const handleAvatarChange = () => {
     setModalType('avatar');
+    setModalContent(<EditAvatar avatar={userData?.avatar} />);
+    setModalTitle('Profile Photo');
     setOpenModal(true);
   };
 
   const handleBannerChange = () => {
     setModalType('banner');
+    setModalContent(<EditBannerModal banner={userData?.banner} />);
+    setModalTitle('Banner Photo');
     setOpenModal(true);
   };
 
   const handleProfileChange = () => {
     setModalType('profile');
+    setModalContent(<EditSponsorProfile />);
+    setModalTitle('Edit Profile');
     setOpenProfileModal(true);
   };
 
@@ -46,14 +59,17 @@ export function SponsorProfile() {
 
   // Dummy data for company userData
   const [userData, setUserData] = useState({
-    companyName: 'Company Name',
-    companyField: 'Field of Specialization',
+    sponsorName: 'Sponsor Name',
+    sponsorField: 'Field of Specialization',
     subgroup: 'Subgroup',
     dateJoined: '2024',
     email: 'johndoe@example.com',
     phone: '+1234567890',
     description:
       ' Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque ut tristique lacus, eget euismod enim. Fusce suscipit at tortor sed pretium. Integer et pretium orci. Integer velit purus, gravida quis tincidunt ac, pretium sed lorem. Sed sagittis neque tincidunt, auctor ante vitae, ultricies risus. Aenean quis sem sed dolor feugiat tincidunt. Etiam purus justo, ullamcorper in cursus volutpat, luctus in dolor. Donec sed purus tristique, rhoncus erat ut, ullamcorper dolor. Pellentesque tincidunt eros id neque egestas, sed luctus sapien elementum. Etiam bibendum ex est, ac consequat turpis facilisis id. Mauris scelerisque purus quis leo fermentum, at semper nisl mattis. Vivamus vel ornare lectus. Nullam dictum felis et commodo lacinia. Etiam tempor placerat sapien quis maximus. Ut pellentesque libero ac sollicitudin accumsan. Sed vel dolor bibendum, egestas metus nec, eleifend mauris. Integer imperdiet eros vitae nibh interdum volutpat. Etiam et ultrices massa. Cras gravida facilisis sapien. Ut eleifend varius risus, eget bibendum dui blandit ac. Vivamus tempor varius massa, sed suscipit mauris interdum eu. Proin sed commodo ex, ac cursus nisl. Integer ut tincidunt augue. Cras molestie libero erat. Nunc justo felis, sodales auctor dapibus sit amet, dapibus ut turpis. Sed nec sagittis nisl. Cras eget condimentum est. Cras nulla lorem, venenatis euismod gravida quis, fermentum vel mauris. Fusce et ipsum et lorem egestas volutpat. Duis nec imperdiet ante. Quisque et ligula accumsan, eleifend urna sit amet, cursus dolor. Nullam ut erat diam. Ut non lacinia erat, eu pretium nisl. Vestibulum mattis sapien in tristique commodo. Integer faucibus leo at turpis rhoncus, eu hendrerit ex dignissim. Nulla facilisi. Donec eget turpis ac odio pretium iaculis. Sed imperdiet sollicitudin viverra. In consequat justo velit, aliquet ultricies leo efficitur laoreet. Nullam quis elementum diam. Sed in sodales est. Integer malesuada semper tortor eu feugiat. Morbi tincidunt turpis bibendum consequat cursus. Aenean faucibus felis sit amet porta interdum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris dui magna, lobortis quis quam non, dictum bibendum libero. ',
+    avatar:
+      'https://raw.githubusercontent.com/mantinedev/mantine/master/.demo/avatars/avatar-9.png',
+    banner: 'https://raw.githubusercontent.com/mantinedev/mantine/master/.demo/images/bg-7.png',
   });
   // Add code to fetch data from our database when it will be connected
 
@@ -180,9 +196,9 @@ export function SponsorProfile() {
       {/* PICTURE AND COMPANY DETAILS */}
       <Card h={280} className={styles.card}>
         <Card.Section h={250} className={styles.banner} onClick={handleBannerChange} />
-        {userData?.companyName && (
+        {userData?.sponsorName && (
           <Text className={styles.name} pl={170} pt={140}>
-            {userData.companyName}
+            {userData.sponsorName}
           </Text>
         )}
 
@@ -195,7 +211,7 @@ export function SponsorProfile() {
           onClick={handleAvatarChange}
         />
         <Text size="lg" mt={-30} ml={170} className={styles.text}>
-          {userData.companyField}
+          {userData.sponsorField}
         </Text>
       </Card>
 
@@ -274,6 +290,12 @@ export function SponsorProfile() {
           </Box>
         </Grid.Col>
       </Grid>
+      <EditModal
+        opened={openProfileModal}
+        close={() => setOpenProfileModal(false)}
+        content={modalContent}
+        title={modalTitle}
+      ></EditModal>
     </Box>
   );
 }