From 568d2fdf052234051a0cea5d5e4ecdc943ff4613 Mon Sep 17 00:00:00 2001 From: tamsay Date: Thu, 22 Jun 2023 19:58:55 +0100 Subject: [PATCH] backend integrations and refactoring --- .../src/assets/images/mentor-certificate.svg | 1 + .../images/mentor-manager-certificate.svg | 1 + .../AuthenticatedRoutes.jsx | 2 +- .../Cards/MiniProfile/MiniProfile.jsx | 17 +- .../src/components/Filter/Filter.jsx | 8 +- .../Modals/ShareReport/ShareReport.jsx | 24 +- frontend/mms-Admin/src/constants/testData.js | 353 +++++++++++------ frontend/mms-Admin/src/helpers/validation.js | 8 +- .../Certificates/Certificates.jsx | 4 +- .../MentorManagerDetails.jsx | 137 ++----- .../MentorManagerDetails/Mentors/Mentors.jsx | 305 ++++++--------- .../MentorManagerDetails/Tasks/Tasks.jsx | 196 +++------- .../MentorManagers/MentorManagers.jsx | 115 ++---- .../UserComponent/UserComponent.jsx | 12 +- .../Certificates/Certificates.jsx | 4 +- .../Mentors/MentorDetails/MentorDetails.jsx | 136 ++----- .../Mentors/MentorDetails/Tasks/Tasks.jsx | 196 +++------- .../src/pages/Dashboard/Mentors/Mentors.jsx | 106 ++--- .../Mentors/UserComponent/UserComponent.jsx | 12 +- .../pages/Dashboard/Messages/Chats/Chats.jsx | 2 + .../NotificationsListItem.jsx | 4 +- .../Programs/CreateProgram/CreateProgram.jsx | 339 ++++++++-------- .../CreateProgram/CreateProgram.module.scss | 21 + .../PersonelComponent/PersonelComponent.jsx | 57 +++ .../PersonelComponent.module.scss | 110 ++++++ .../Programs/EditProgram/EditProgram.jsx | 364 +++++++++--------- .../ProgramDetails/ProgramDetails.jsx | 64 ++- .../ProgramDetails/ProgramDetails.module.scss | 14 +- .../ProgramListItem/ProgramListItem.jsx | 22 +- .../ProgramListItem.module.scss | 4 + .../src/pages/Dashboard/Programs/Programs.jsx | 222 +++-------- .../Reports/ReportDetails/ReportDetails.jsx | 26 +- .../Reports/ReportListItem/ReportListItem.jsx | 19 +- .../src/pages/Dashboard/Reports/Reports.jsx | 216 +++++------ .../Dashboard/Tasks/CreateTask/CreateTask.jsx | 6 +- .../Dashboard/Tasks/EditTask/EditTask.jsx | 4 +- .../src/pages/Dashboard/Tasks/Tasks.jsx | 18 +- .../src/redux/Loading/LoadingSlice.jsx | 5 + .../src/redux/Programs/ProgramsSlice.jsx | 37 +- .../mms-Admin/src/redux/Tasks/TasksSlice.jsx | 4 +- frontend/mms-Admin/src/redux/api/programs.js | 6 +- .../mms-Admin/src/utils/signalrService.js | 4 +- 42 files changed, 1548 insertions(+), 1657 deletions(-) create mode 100644 frontend/mms-Admin/src/assets/images/mentor-certificate.svg create mode 100644 frontend/mms-Admin/src/assets/images/mentor-manager-certificate.svg create mode 100644 frontend/mms-Admin/src/pages/Dashboard/Programs/CreateProgram/PersonelComponent/PersonelComponent.jsx create mode 100644 frontend/mms-Admin/src/pages/Dashboard/Programs/CreateProgram/PersonelComponent/PersonelComponent.module.scss diff --git a/frontend/mms-Admin/src/assets/images/mentor-certificate.svg b/frontend/mms-Admin/src/assets/images/mentor-certificate.svg new file mode 100644 index 00000000..a054d212 --- /dev/null +++ b/frontend/mms-Admin/src/assets/images/mentor-certificate.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/frontend/mms-Admin/src/assets/images/mentor-manager-certificate.svg b/frontend/mms-Admin/src/assets/images/mentor-manager-certificate.svg new file mode 100644 index 00000000..531e8628 --- /dev/null +++ b/frontend/mms-Admin/src/assets/images/mentor-manager-certificate.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/frontend/mms-Admin/src/components/AuthenticatedRoutes/AuthenticatedRoutes.jsx b/frontend/mms-Admin/src/components/AuthenticatedRoutes/AuthenticatedRoutes.jsx index 109798fe..befdda33 100644 --- a/frontend/mms-Admin/src/components/AuthenticatedRoutes/AuthenticatedRoutes.jsx +++ b/frontend/mms-Admin/src/components/AuthenticatedRoutes/AuthenticatedRoutes.jsx @@ -23,7 +23,7 @@ function AuthenticatedRoutes({ children, roles }) { if (authError) { clearInterval(refreshInterval); logout(); - navigate("/login"); + navigate("/"); } return () => { clearInterval(refreshInterval); diff --git a/frontend/mms-Admin/src/components/Cards/MiniProfile/MiniProfile.jsx b/frontend/mms-Admin/src/components/Cards/MiniProfile/MiniProfile.jsx index 401c8a8e..0c22e182 100644 --- a/frontend/mms-Admin/src/components/Cards/MiniProfile/MiniProfile.jsx +++ b/frontend/mms-Admin/src/components/Cards/MiniProfile/MiniProfile.jsx @@ -7,6 +7,8 @@ import { ReactComponent as DeleteIcon } from "@/assets/icons/delete-icon-green.s import { ReactComponent as MessageIcon } from "@/assets/icons/comment-icon.svg"; import { showModal } from "@/redux/Modal/ModalSlice"; import { useNavigate } from "react-router-dom"; +import profileImage from "@/assets/images/sample-profile-image.svg"; + const MiniProfile = ({ data, type, onClick }) => { const dispatch = useDispatch(); const navigate = useNavigate(); @@ -28,7 +30,12 @@ const MiniProfile = ({ data, type, onClick }) => { return (
- user-image + user-image
navigate(`/dashboard/messages/chats/${data?.id}`)} className={cx(styles.icon)} /> handleDelete(data?.id)} className={cx(styles.icon)} /> @@ -37,13 +44,13 @@ const MiniProfile = ({ data, type, onClick }) => {
-
{data?.name}
-

{data?.designation}

+
{`${data?.firstName} ${data?.lastName}`}
+

{data?.headline || "Program Assistant, Andela"}

- {data?.positionTags && - data?.positionTags.map((tag, index) => ( + {data?.roles && + data?.roles.map((tag, index) => ( {tag} diff --git a/frontend/mms-Admin/src/components/Filter/Filter.jsx b/frontend/mms-Admin/src/components/Filter/Filter.jsx index 07b9b5a2..0f663e29 100644 --- a/frontend/mms-Admin/src/components/Filter/Filter.jsx +++ b/frontend/mms-Admin/src/components/Filter/Filter.jsx @@ -49,8 +49,8 @@ const Filter = ({ selectedFilterItem, dropdownItems, closeSearchInput, closeSele > {dropdownItems && dropdownItems.map((item, index) => ( - ))} @@ -72,9 +72,9 @@ const Filter = ({ selectedFilterItem, dropdownItems, closeSearchInput, closeSele
handleCustomDropdownClick(item.name)} + onClick={() => handleCustomDropdownClick(item.value)} > - {item.name} + {item.label}
))}
diff --git a/frontend/mms-Admin/src/components/Modals/ShareReport/ShareReport.jsx b/frontend/mms-Admin/src/components/Modals/ShareReport/ShareReport.jsx index e0ac8031..e3ffdf3f 100644 --- a/frontend/mms-Admin/src/components/Modals/ShareReport/ShareReport.jsx +++ b/frontend/mms-Admin/src/components/Modals/ShareReport/ShareReport.jsx @@ -7,15 +7,33 @@ import styles from "./ShareReport.module.scss"; import modalImage from "@/assets/images/share-report-modal-image.svg"; import Button from "@/components/Button/Button"; import { hideModal } from "@/redux/Modal/ModalSlice"; +import { toast } from "react-toastify"; function ShareReport({ show, size, modalName }) { const dispatch = useDispatch(); const modalData = useSelector((state) => state.modal.modalData); - const handleClick = () => { + const handleClose = () => { dispatch(hideModal({ name: "taskDeleteNotification" })); }; + const handleShare = () => { + if (navigator.share) { + navigator + .share({ + title: "Report", + text: "Report Details", + url: window.location.href + }) + .then(() => { + handleClose(); + }) + .catch(() => toast.warn("An Error occured. Please try again")); + } else { + toast.warn("Web Share API not supported."); + } + }; + return (
@@ -29,8 +47,8 @@ function ShareReport({ show, size, modalName }) {
-
diff --git a/frontend/mms-Admin/src/constants/testData.js b/frontend/mms-Admin/src/constants/testData.js index 15cd45cc..4e2dc1ac 100644 --- a/frontend/mms-Admin/src/constants/testData.js +++ b/frontend/mms-Admin/src/constants/testData.js @@ -1,113 +1,246 @@ - import mentorManagerImage from "@/assets/images/mentor-manager-thumbnail.svg"; +import mentorManagerImage from "@/assets/images/mentor-manager-thumbnail.svg"; import mentorImage from "@/assets/images/sample-profile-image.svg"; +import cardIcon from "@/assets/icons/reports-overview-card-icon.svg"; - export const mentorsArray = [ - { - id: "1", - name: "Kabiru Omo Isaka", - designation: "Program Assistant, Andela, He/Him", - image: mentorImage, - positionTags: ["PROGRAM ASST.", "MENTOR-GADS"] - }, - { - id: "2", - name: "Kabiru Omo Isaka", - designation: "Program Assistant, Andela, He/Him", - image: mentorImage, - positionTags: ["PROGRAM ASST.", "MENTOR-GADS"] - }, - { - id: "3", - name: "Kabiru Omo Isaka", - designation: "Program Assistant, Andela, He/Him", - image: mentorImage, - positionTags: ["PROGRAM ASST.", "MENTOR-GADS"] - }, - { - id: "4", - name: "Kabiru Omo Isaka", - designation: "Program Assistant, Andela, He/Him", - image: mentorImage, - positionTags: ["PROGRAM ASST.", "MENTOR-GADS"] - }, - { - id: "5", - name: "Kabiru Omo Isaka", - designation: "Program Assistant, Andela, He/Him", - image: mentorImage, - positionTags: ["PROGRAM ASST.", "MENTOR-GADS"] - }, - { - id: "6", - name: "Kabiru Omo Isaka", - designation: "Program Assistant, Andela, He/Him", - image: mentorImage, - positionTags: ["PROGRAM ASST.", "MENTOR-GADS"] - }, - { - id: "7", - name: "Kabiru Omo Isaka", - designation: "Program Assistant, Andela, He/Him", - image: mentorImage, - positionTags: ["PROGRAM ASST.", "MENTOR-GADS"] - }, - { - id: "8", - name: "Kabiru Omo Isaka", - designation: "Program Assistant, Andela, He/Him", - image: mentorImage, - positionTags: ["PROGRAM ASST.", "MENTOR-GADS"] - }, - { - id: "9", - name: "Kabiru Omo Isaka", - designation: "Program Assistant, Andela, He/Him", - image: mentorImage, - positionTags: ["PROGRAM ASST.", "MENTOR-GADS"] - }, - { - id: "10", - name: "Kabiru Omo Isaka", - designation: "Program Assistant, Andela, He/Him", - image: mentorImage, - positionTags: ["PROGRAM ASST.", "MENTOR-GADS"] - } - ]; +export const mentorsArray = [ + { + id: "1", + name: "Kabiru Omo Isaka", + designation: "Program Assistant, Andela, He/Him", + image: mentorImage, + positionTags: ["PROGRAM ASST.", "MENTOR-GADS"] + }, + { + id: "2", + name: "Kabiru Omo Isaka", + designation: "Program Assistant, Andela, He/Him", + image: mentorImage, + positionTags: ["PROGRAM ASST.", "MENTOR-GADS"] + }, + { + id: "3", + name: "Kabiru Omo Isaka", + designation: "Program Assistant, Andela, He/Him", + image: mentorImage, + positionTags: ["PROGRAM ASST.", "MENTOR-GADS"] + }, + { + id: "4", + name: "Kabiru Omo Isaka", + designation: "Program Assistant, Andela, He/Him", + image: mentorImage, + positionTags: ["PROGRAM ASST.", "MENTOR-GADS"] + }, + { + id: "5", + name: "Kabiru Omo Isaka", + designation: "Program Assistant, Andela, He/Him", + image: mentorImage, + positionTags: ["PROGRAM ASST.", "MENTOR-GADS"] + }, + { + id: "6", + name: "Kabiru Omo Isaka", + designation: "Program Assistant, Andela, He/Him", + image: mentorImage, + positionTags: ["PROGRAM ASST.", "MENTOR-GADS"] + }, + { + id: "7", + name: "Kabiru Omo Isaka", + designation: "Program Assistant, Andela, He/Him", + image: mentorImage, + positionTags: ["PROGRAM ASST.", "MENTOR-GADS"] + }, + { + id: "8", + name: "Kabiru Omo Isaka", + designation: "Program Assistant, Andela, He/Him", + image: mentorImage, + positionTags: ["PROGRAM ASST.", "MENTOR-GADS"] + }, + { + id: "9", + name: "Kabiru Omo Isaka", + designation: "Program Assistant, Andela, He/Him", + image: mentorImage, + positionTags: ["PROGRAM ASST.", "MENTOR-GADS"] + }, + { + id: "10", + name: "Kabiru Omo Isaka", + designation: "Program Assistant, Andela, He/Him", + image: mentorImage, + positionTags: ["PROGRAM ASST.", "MENTOR-GADS"] + } +]; - export const mentorManagersArray = [ - { - id: "91", - name: "Alice Davies", - designation: "Program Assistant, Andela, Her/She", - image: mentorManagerImage, - positionTags: ["PROGRAM ASST.", "MENTOR-GADS"] - }, - { - id: "92", - name: "Alice Davies", - designation: "Program Assistant, Andela, Her/She", - image: mentorManagerImage, - positionTags: ["PROGRAM ASST.", "MENTOR-GADS"] - }, - { - id: "93", - name: "Alice Davies", - designation: "Program Assistant, Andela, Her/She", - image: mentorManagerImage, - positionTags: ["PROGRAM ASST.", "MENTOR-GADS"] - }, - { - id: "94", - name: "Alice Davies", - designation: "Program Assistant, Andela, Her/She", - image: mentorManagerImage, - positionTags: ["PROGRAM ASST.", "MENTOR-GADS"] - }, - { - id: "95", - name: "Alice Davies", - designation: "Program Assistant, Andela, Her/She", - image: mentorManagerImage, - positionTags: ["PROGRAM ASST.", "MENTOR-GADS"] - } - ]; \ No newline at end of file +export const mentorManagersArray = [ + { + id: "91", + name: "Alice Davies", + designation: "Program Assistant, Andela, Her/She", + image: mentorManagerImage, + positionTags: ["PROGRAM ASST.", "MENTOR-GADS"] + }, + { + id: "92", + name: "Alice Davies", + designation: "Program Assistant, Andela, Her/She", + image: mentorManagerImage, + positionTags: ["PROGRAM ASST.", "MENTOR-GADS"] + }, + { + id: "93", + name: "Alice Davies", + designation: "Program Assistant, Andela, Her/She", + image: mentorManagerImage, + positionTags: ["PROGRAM ASST.", "MENTOR-GADS"] + }, + { + id: "94", + name: "Alice Davies", + designation: "Program Assistant, Andela, Her/She", + image: mentorManagerImage, + positionTags: ["PROGRAM ASST.", "MENTOR-GADS"] + }, + { + id: "95", + name: "Alice Davies", + designation: "Program Assistant, Andela, Her/She", + image: mentorManagerImage, + positionTags: ["PROGRAM ASST.", "MENTOR-GADS"] + } +]; + +export const programReportArrayOld = [ + { + id: 1, + title: "Google Africa Scholarship", + author: "Ibrahim Kabir", + date: "19th - 25th Oct 23", + icon: cardIcon + }, + { + id: 2, + title: "Google Africa Scholarship", + author: "Ibrahim Kabir", + date: "19th - 25th Oct 23", + icon: cardIcon + }, + { + id: 3, + title: "Google Africa Scholarship", + author: "Ibrahim Kabir", + date: "19th - 25th Oct 23", + icon: cardIcon + } +]; + +export const taskReportArrayOld = [ + { + id: 1, + title: "Google Africa Scholarship", + author: "Ibrahim Kabir", + date: "19th - 25th Oct 23", + icon: cardIcon + }, + { + id: 2, + title: "Google Africa Scholarship", + author: "Ibrahim Kabir", + date: "19th - 25th Oct 23", + icon: cardIcon + }, + { + id: 3, + title: "Google Africa Scholarship", + author: "Ibrahim Kabir", + date: "19th - 25th Oct 23", + icon: cardIcon + }, + { + id: 4, + title: "Google Africa Scholarship", + author: "Ibrahim Kabir", + date: "19th - 25th Oct 23", + icon: cardIcon + }, + { + id: 5, + title: "Google Africa Scholarship", + author: "Ibrahim Kabir", + date: "19th - 25th Oct 23", + icon: cardIcon + }, + { + id: 6, + title: "Google Africa Scholarship", + author: "Ibrahim Kabir", + date: "19th - 25th Oct 23", + icon: cardIcon + } +]; + +export const programsListArray = [ + { + id: 1, + title: "Google Africa Scholarship Program", + date: "Dec 12, 2022", + time: "6:00pm" + }, + { + id: 2, + title: "Google Africa Scholarship Program", + date: "Dec 12, 2022", + time: "6:00pm" + }, + { + id: 3, + title: "Google Africa Scholarship Program", + date: "Dec 12, 2022", + time: "6:00pm" + }, + { + id: 4, + title: "Google Africa Scholarship Program", + date: "Dec 12, 2022", + time: "6:00pm" + }, + { + id: 5, + title: "Google Africa Scholarship Program", + date: "Dec 12, 2022", + time: "6:00pm" + }, + { + id: 6, + title: "Google Africa Scholarship Program", + date: "Dec 12, 2022", + time: "6:00pm" + }, + { + id: 7, + title: "Google Africa Scholarship Program", + date: "Dec 12, 2022", + time: "6:00pm" + }, + { + id: 8, + title: "Google Africa Scholarship Program", + date: "Dec 12, 2022", + time: "6:00pm" + }, + { + id: 9, + title: "Google Africa Scholarship Program", + date: "Dec 12, 2022", + time: "6:00pm" + }, + { + id: 10, + title: "Google Africa Scholarship Program", + date: "Dec 12, 2022", + time: "6:00pm" + } +]; diff --git a/frontend/mms-Admin/src/helpers/validation.js b/frontend/mms-Admin/src/helpers/validation.js index ead58ab4..2b9777bc 100644 --- a/frontend/mms-Admin/src/helpers/validation.js +++ b/frontend/mms-Admin/src/helpers/validation.js @@ -59,8 +59,8 @@ export const createTaskSchema = Yup.object().shape({ }); export const createProgramSchema = Yup.object().shape({ - programName: Yup.string().required("Program name is required"), - programDescription: Yup.string().required("Program description is required") + name: Yup.string().required("Program name is required"), + description: Yup.string().required("Program description is required") }); export const createProgramCriteriaSchema = Yup.object().shape({ @@ -69,8 +69,8 @@ export const createProgramCriteriaSchema = Yup.object().shape({ }); export const editProgramSchema = Yup.object().shape({ - programName: Yup.string().required("Program name is required"), - programDescription: Yup.string().required("Program description is required") + name: Yup.string().required("Program name is required"), + description: Yup.string().required("Program description is required") }); export const editProgramCriteriaSchema = Yup.object().shape({ diff --git a/frontend/mms-Admin/src/pages/Dashboard/MentorManagers/MentorManagerDetails/Certificates/Certificates.jsx b/frontend/mms-Admin/src/pages/Dashboard/MentorManagers/MentorManagerDetails/Certificates/Certificates.jsx index f0e1b9ba..320aaf94 100644 --- a/frontend/mms-Admin/src/pages/Dashboard/MentorManagers/MentorManagerDetails/Certificates/Certificates.jsx +++ b/frontend/mms-Admin/src/pages/Dashboard/MentorManagers/MentorManagerDetails/Certificates/Certificates.jsx @@ -4,8 +4,8 @@ import styles from "./Certificates.module.scss"; import { useSelector, useDispatch } from "react-redux"; import { showModal } from "@/redux/Modal/ModalSlice"; import SuccessNotificationModal from "@/components/Modals/SuccessNotification/SuccessNotification"; -import certificate from "@/assets/images/certificate-full.png"; -import { ReactComponent as CertificateIcon } from "@/assets/icons/certificate-thumbnail.svg"; +import certificate from "@/assets/images/mentor-manager-certificate.svg"; +import { ReactComponent as CertificateIcon } from "@/assets/images/mentor-manager-certificate.svg"; import { ReactComponent as TogglerIconUp } from "@/assets/icons/arrow-circle-up.svg"; import { ReactComponent as TogglerIconDown } from "@/assets/icons/arrow-circle-down.svg"; import Button from "@/components/Button/Button"; diff --git a/frontend/mms-Admin/src/pages/Dashboard/MentorManagers/MentorManagerDetails/MentorManagerDetails.jsx b/frontend/mms-Admin/src/pages/Dashboard/MentorManagers/MentorManagerDetails/MentorManagerDetails.jsx index c04d0054..751f200a 100644 --- a/frontend/mms-Admin/src/pages/Dashboard/MentorManagers/MentorManagerDetails/MentorManagerDetails.jsx +++ b/frontend/mms-Admin/src/pages/Dashboard/MentorManagers/MentorManagerDetails/MentorManagerDetails.jsx @@ -1,101 +1,48 @@ -import React, { useState, useEffect, useMemo } from "react"; +import React, { useState, useEffect } from "react"; import cx from "classnames"; import styles from "./MentorManagerDetails.module.scss"; -import mentorImage from "@/assets/images/sample-profile-image.svg"; +import profileImage from "@/assets/images/sample-profile-image.svg"; import GenericSideBar from "@/components/GenericSideBar/GenericSideBar"; import UserComponent from "../UserComponent/UserComponent"; import Button from "@/components/Button/Button"; import backIcon from "@/assets/icons/back-icon.svg"; import Search from "@/components/Search/Search"; -import Filter from "@/components/Filter/Filter"; import useIsMobile from "@/hooks/useIsMobile"; import Tabs from "@/components/Tabs/Tabs"; -import { Outlet, useNavigate } from "react-router-dom"; +import { Outlet, useNavigate, useParams } from "react-router-dom"; import { useDispatch, useSelector } from "react-redux"; import { showModal } from "@/redux/Modal/ModalSlice"; import flagIcon from "@/assets/icons/flag-icon.svg"; import subMenuIcon from "@/assets/icons/sub-menu-icon.svg"; import editIcon from "@/assets/icons/edit-icon.svg"; import EditUserRoleModal from "@/components/Modals/EditUserRole/EditUserRole"; +import { getAllUserProfiles } from "@/redux/Profile/ProfileSlice"; const MentorManagerDetails = () => { const isMobile = useIsMobile(); const navigate = useNavigate(); const dispatch = useDispatch(); + const userId = useParams()?.id; const [openSideBar, setOpenSideBar] = useState(true); const [selectedUser, setSelectedUser] = useState(null); const [collapseInput, setCollapseInput] = useState(true); - const [closeSelectElement, setCloseSelectElement] = useState(false); + const [mentorManagersArray, setMentorManagersArray] = useState([]); const displayModal = useSelector((state) => state.modal.show); const modalName = useSelector((state) => state.modal.modalName); + const allUserProfilesData = useSelector((state) => state.profile.getAllUserProfilesData); - const mentorsArray = useMemo( - () => [ - { - id: 1, - name: "Alison Davis", - image: mentorImage, - dateAdded: "May 05, 2023" - }, - { - id: 2, - name: "Alison Davis", - image: mentorImage, - dateAdded: "May 05, 2023" - }, - { - id: 3, - name: "Alison Davis", - image: mentorImage, - dateAdded: "May 05, 2023" - }, - { - id: 4, - name: "Alison Davis", - image: mentorImage, - dateAdded: "May 05, 2023" - }, - { - id: 5, - name: "Alison Davis", - image: mentorImage, - dateAdded: "May 05, 2023" - }, - { - id: 6, - name: "Alison Davis", - image: mentorImage, - dateAdded: "May 05, 2023" - }, - { - id: 7, - name: "Alison Davis", - image: mentorImage, - dateAdded: "May 05, 2023" - }, - { - id: 8, - name: "Alison Davis", - image: mentorImage, - dateAdded: "May 05, 2023" - }, - { - id: 9, - name: "Alison Davis", - image: mentorImage, - dateAdded: "May 05, 2023" - }, - { - id: 10, - name: "Alison Davis", - image: mentorImage, - dateAdded: "May 05, 2023" - } - ], - [] - ); + useEffect(() => { + dispatch(getAllUserProfiles()); + }, [dispatch]); + + useEffect(() => { + setMentorManagersArray( + Array.isArray(allUserProfilesData) && + allUserProfilesData.filter((item) => item.roles.find((role) => role.toLowerCase() === "manager")) + ); + }, [allUserProfilesData]); useEffect(() => { if (isMobile) { @@ -103,8 +50,11 @@ const MentorManagerDetails = () => { } else { setOpenSideBar(true); } - setSelectedUser(mentorsArray[0]); - }, [isMobile, mentorsArray]); + }, [isMobile]); + + useEffect(() => { + setSelectedUser(Array.isArray(mentorManagersArray) && mentorManagersArray.find((item) => item.id === userId)); + }, [mentorManagersArray, userId]); const handleSelectedItem = (item) => { console.log(item); @@ -119,18 +69,8 @@ const MentorManagerDetails = () => { console.log(e); }; - const handleSelectedFilterItem = (item) => { - console.log(item); - }; - - const handleCloseSearchInput = (e) => { - console.log(e, "handle close input"); - setCollapseInput(true); - }; - - const handleCloseSelectElement = (e) => { - console.log(e, "handle close select"); - setCloseSelectElement(true); + const handleCloseSelectElement = () => { + // Added to clear console errors }; const handleViewUser = (user) => { @@ -183,24 +123,24 @@ const MentorManagerDetails = () => {
- + /> */}
); @@ -235,7 +175,7 @@ const MentorManagerDetails = () => {
{openSideBar ? (
- +
) : null} @@ -243,14 +183,21 @@ const MentorManagerDetails = () => {
- profile-image + profile-image
-

{selectedUser?.name}

+

+ {" "} + {selectedUser?.firstName && selectedUser?.firstName}{" "} + {selectedUser?.lastName && selectedUser?.lastName} +

- {selectedUser?.role || "Mentor Manager"}{" "} - editUserRole()} src={editIcon} alt='edit-icon' />{" "} + {"Mentor Manager"} editUserRole()} src={editIcon} alt='edit-icon' />{" "}

diff --git a/frontend/mms-Admin/src/pages/Dashboard/MentorManagers/MentorManagerDetails/Mentors/Mentors.jsx b/frontend/mms-Admin/src/pages/Dashboard/MentorManagers/MentorManagerDetails/Mentors/Mentors.jsx index 6b1a7328..746b78a9 100644 --- a/frontend/mms-Admin/src/pages/Dashboard/MentorManagers/MentorManagerDetails/Mentors/Mentors.jsx +++ b/frontend/mms-Admin/src/pages/Dashboard/MentorManagers/MentorManagerDetails/Mentors/Mentors.jsx @@ -1,21 +1,23 @@ -import React, { useState } from "react"; +import React, { useState, useEffect } from "react"; import cx from "classnames"; import styles from "./Mentors.module.scss"; import { useSelector, useDispatch } from "react-redux"; import { showModal } from "@/redux/Modal/ModalSlice"; import SuccessNotificationModal from "@/components/Modals/SuccessNotification/SuccessNotification"; import searchIcon from "@/assets/icons/search-icon.svg"; -import { ReactComponent as mentorImage } from "@/assets/images/sample-profile-image.svg"; +import { ReactComponent as MentorImage } from "@/assets/images/sample-profile-image.svg"; import { ReactComponent as TogglerIconUp } from "@/assets/icons/arrow-circle-up.svg"; import { ReactComponent as TogglerIconDown } from "@/assets/icons/arrow-circle-down.svg"; import Button from "@/components/Button/Button"; import assignSuccessImage from "@/assets/images/activate-user.svg"; import unAssignSuccessImage from "@/assets/images/deactivate-user.svg"; import paperIcon from "@/assets/icons/paper-icon.svg"; +import { getAllUserProfiles } from "@/redux/Profile/ProfileSlice"; function Mentors() { const dispatch = useDispatch(); + const [mentorsArray, setMentorsArray] = useState([]); const [programStatus, setProgramStatus] = useState({ status: "unassigned", index: null @@ -23,6 +25,7 @@ function Mentors() { const displayModal = useSelector((state) => state.modal.show); const modalName = useSelector((state) => state.modal.modalName); + const allUserProfilesData = useSelector((state) => state.profile.getAllUserProfilesData); const handleSetProgramStatus = (status, index) => { setProgramStatus({ status, index }); @@ -55,75 +58,6 @@ function Mentors() { toggle: false }); - const mentorsArray = [ - { - name: "Alison Davis", - designation: "Program Assistant, Andela, She/Her", - image: mentorImage, - positionTags: ["PROGRAM ASST.", "MENTOR-GADS"] - }, - { - name: "Alison Davis", - designation: "Program Assistant, Andela, She/Her", - image: mentorImage, - positionTags: ["PROGRAM ASST.", "MENTOR-GADS"] - }, - { - name: "Alison Davis", - designation: "Program Assistant, Andela, She/Her", - image: mentorImage, - positionTags: ["PROGRAM ASST.", "MENTOR-GADS"] - }, - { - name: "Alison Davis", - designation: "Program Assistant, Andela, She/Her", - image: mentorImage, - positionTags: ["PROGRAM ASST.", "MENTOR-GADS"] - }, - { - name: "Alison Davis", - designation: "Program Assistant, Andela, She/Her", - image: mentorImage, - positionTags: ["PROGRAM ASST.", "MENTOR-GADS"] - }, - { - name: "Alison Davis", - designation: "Program Assistant, Andela, She/Her", - image: mentorImage, - positionTags: ["PROGRAM ASST.", "MENTOR-GADS"] - }, - { - name: "Alison Davis", - designation: "Program Assistant, Andela, She/Her", - image: mentorImage, - positionTags: ["PROGRAM ASST.", "MENTOR-GADS"] - }, - { - name: "Alison Davis", - designation: "Program Assistant, Andela, She/Her", - image: mentorImage, - positionTags: ["PROGRAM ASST.", "MENTOR-GADS"] - }, - { - name: "Alison Davis", - designation: "Program Assistant, Andela, She/Her", - image: mentorImage, - positionTags: ["PROGRAM ASST.", "MENTOR-GADS"] - }, - { - name: "Alison Davis", - designation: "Program Assistant, Andela, She/Her", - image: mentorImage, - positionTags: ["PROGRAM ASST.", "MENTOR-GADS"] - } - // { - // title: "Alison Davis", - // icon: mentorImage, - // date: "April 15, 2023", - // time: "12:00 PM" - // } - ]; - const handleToggle = (index) => { if (toggle.index === index) { setToggle({ @@ -138,6 +72,17 @@ function Mentors() { } }; + useEffect(() => { + dispatch(getAllUserProfiles()); + }, [dispatch]); + + useEffect(() => { + setMentorsArray( + Array.isArray(allUserProfilesData) && + allUserProfilesData.filter((item) => item.roles.find((role) => role.toLowerCase() === "mentor")) + ); + }, [allUserProfilesData]); + return (
@@ -155,123 +100,127 @@ function Mentors() {
- {mentorsArray.map((item, index) => { - return ( -
-
-
- -
-
-
-
{item.name}
-
-
- {item?.designation} + {Array.isArray(mentorsArray) && mentorsArray.length > 0 ? ( + mentorsArray.map((item, index) => { + return ( +
+
+
+ {item?.profileImage ? : } +
+
+
+
{`${item?.firstName} ${item?.lastName}`}
+
+
+ {item?.headline || "Program Assistant, Andela"} +
+
+ {item.roles.map((tag, index) => { + return ( +
+ {tag} +
+ ); + })} +
-
- {item.positionTags.map((tag, index) => { - return ( -
- {tag} -
- ); - })} -
-
-
- {toggle?.toggle && toggle.index === index ? ( - handleToggle(index)} /> - ) : ( - handleToggle(index)} /> - )} +
+ {toggle?.toggle && toggle.index === index ? ( + handleToggle(index)} /> + ) : ( + handleToggle(index)} /> + )} +
-
- {toggle.index === index && toggle.toggle && ( - <> -
-
Bio
-

- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et massa mi. Aliquam in hendrerit - urna. Pellentesque sit amet sapien fringilla, mattis ligula consectetur, ultrices mauris. - Maecenas vitae mattis tellus. Nullam quis imperdiet augue. Vestibulum auctor ornare leo, non - suscipit magna interdum eu. Curabitur pellentesque nibh nibh, at maximus ante fermentum sit - amet. Pellentesque -

+ {toggle.index === index && toggle.toggle && ( + <> +
+
Bio
+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et massa mi. Aliquam in hendrerit + urna. Pellentesque sit amet sapien fringilla, mattis ligula consectetur, ultrices mauris. + Maecenas vitae mattis tellus. Nullam quis imperdiet augue. Vestibulum auctor ornare leo, non + suscipit magna interdum eu. Curabitur pellentesque nibh nibh, at maximus ante fermentum sit + amet. Pellentesque +

-
-
-
Technical Proficiency:
-
Java Script, Django, Mysql, Android
-
-
-
Previous Programs:
-
GADS 2022, Google I/O Extended 2021
-
-
-
Previous Roles Held:
-
- Learner, Mentor, Program Assistant, Program Assistant Lead -
-
-
-
Availability to join a new program:
-
Unavailable
-
-
-
Program of interest:
-
Google Africa Scholarship Program
-
-
-
Been a Mentor Before?
-
Yes
-
-
-
Years of Technical Experience:
-
3years
-
-
-
Documents
-
- - paper-icon - My resume.doc - - - paper-icon - Birth Cerificate.doc - - - paper-icon - Java Lead.doc - +
+
+
Technical Proficiency:
+
Java Script, Django, Mysql, Android
+
+
+
Previous Programs:
+
GADS 2022, Google I/O Extended 2021
+
+
+
Previous Roles Held:
+
+ Learner, Mentor, Program Assistant, Program Assistant Lead +
+
+
+
Availability to join a new program:
+
Unavailable
+
+
+
Program of interest:
+
Google Africa Scholarship Program
+
+
+
Been a Mentor Before?
+
Yes
+
+
+
Years of Technical Experience:
+
3years
+
+
+
Documents
+
+ + paper-icon + My resume.doc + + + paper-icon + Birth Cerificate.doc + + + paper-icon + Java Lead.doc + +
-
-
- {programStatus.status === "assigned" && programStatus.index === index ? ( -
- - )} -
- ); - })} +
+ {programStatus.status === "assigned" && programStatus.index === index ? ( +
+ + )} +
+ ); + }) + ) : ( +

No Mentors Found

+ )}
{displayModal && modalName === "successNotification" ? : null} diff --git a/frontend/mms-Admin/src/pages/Dashboard/MentorManagers/MentorManagerDetails/Tasks/Tasks.jsx b/frontend/mms-Admin/src/pages/Dashboard/MentorManagers/MentorManagerDetails/Tasks/Tasks.jsx index 1fecbc05..3597bb90 100644 --- a/frontend/mms-Admin/src/pages/Dashboard/MentorManagers/MentorManagerDetails/Tasks/Tasks.jsx +++ b/frontend/mms-Admin/src/pages/Dashboard/MentorManagers/MentorManagerDetails/Tasks/Tasks.jsx @@ -1,12 +1,10 @@ -import React, { useState } from "react"; +import React, { useState, useEffect } from "react"; import cx from "classnames"; import styles from "./Tasks.module.scss"; -import { useParams } from "react-router-dom"; import { useSelector, useDispatch } from "react-redux"; import { showModal } from "@/redux/Modal/ModalSlice"; import SuccessNotificationModal from "@/components/Modals/SuccessNotification/SuccessNotification"; import searchIcon from "@/assets/icons/search-icon.svg"; -import { ReactComponent as ArchiveCardIcon } from "@/assets/icons/archive-card-icon.svg"; import { ReactComponent as TogglerIconUp } from "@/assets/icons/arrow-circle-up.svg"; import { ReactComponent as TogglerIconDown } from "@/assets/icons/arrow-circle-down.svg"; import Button from "@/components/Button/Button"; @@ -16,10 +14,10 @@ import calendarIcon from "@/assets/icons/tasks-overview-calendar-icon.svg"; import reportIcon from "@/assets/icons/task-report-icon-green.png"; import assignSuccessImage from "@/assets/images/create-task-success-image.svg"; import unAssignSuccessImage from "@/assets/images/deactivate-user.svg"; +import { getAllTasks } from "@/redux/Tasks/TasksSlice"; +import formatDate from "@/helpers/formatDate"; const Tasks = () => { - const params = useParams(); - const taskId = params.id; const dispatch = useDispatch(); const [taskStatus, setTaskStatus] = useState({ @@ -29,6 +27,11 @@ const Tasks = () => { const displayModal = useSelector((state) => state.modal.show); const modalName = useSelector((state) => state.modal.modalName); + const allTasksData = useSelector((state) => state.tasks.getAllTasksData); + + useEffect(() => { + dispatch(getAllTasks()); + }, [dispatch]); const handleSetTaskStatus = (status, index) => { setTaskStatus({ status, index }); @@ -61,66 +64,6 @@ const Tasks = () => { toggle: false }); - const summaryDivData = [ - { - icon: reportIcon, - value: 40, - caption: "Task / Reports", - count: 50 - } - ]; - - const cardData = [ - { - title: "Google Africa Scholarship Program", - icon: ArchiveCardIcon, - date: "April 15, 2023", - time: "12:00 PM" - }, - { - title: "Google Africa Scholarship Program", - icon: ArchiveCardIcon, - date: "April 15, 2023", - time: "12:00 PM" - }, - { - title: "Google Africa Scholarship Program", - icon: ArchiveCardIcon, - date: "April 15, 2023", - time: "12:00 PM" - }, - { - title: "Google Africa Scholarship Program", - icon: ArchiveCardIcon, - date: "April 15, 2023", - time: "12:00 PM" - }, - { - title: "Google Africa Scholarship Program", - icon: ArchiveCardIcon, - date: "April 15, 2023", - time: "12:00 PM" - }, - { - title: "Google Africa Scholarship Program", - icon: ArchiveCardIcon, - date: "April 15, 2023", - time: "12:00 PM" - }, - { - title: "Google Africa Scholarship Program", - icon: ArchiveCardIcon, - date: "April 15, 2023", - time: "12:00 PM" - }, - { - title: "Google Africa Scholarship Program", - icon: ArchiveCardIcon, - date: "April 15, 2023", - time: "12:00 PM" - } - ]; - const handleToggle = (index) => { if (toggle.index === index) { setToggle({ @@ -141,9 +84,6 @@ const Tasks = () => {
@@ -153,77 +93,69 @@ const Tasks = () => {
- {cardData.map((item, index) => { - return ( -
-
-
- task-icon -
-
{`Room Library Article Written in Java ${taskId}`}
-
- calendar-icon - 3 days from now + {Array.isArray(allTasksData) && allTasksData.length > 0 ? ( + allTasksData.map((item, index) => { + return ( +
+
+
+ task-icon +
+
{item.title}
+
+ calendar-icon + {formatDate(item.createdAt)} +
+
+ {toggle?.toggle && toggle.index === index ? ( + handleToggle(index)} /> + ) : ( + handleToggle(index)} /> + )} +
-
- {toggle?.toggle && toggle.index === index ? ( - handleToggle(index)} /> - ) : ( - handleToggle(index)} /> - )} -
-
- {toggle.index === index && toggle.toggle && ( - <> -
-

- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et massa mi. Aliquam in hendrerit - urna. Pellentesque sit amet sapien fringilla, mattis ligula consectetur, ultrices mauris. - Maecenas vitae mattis tellus. Nullam quis imperdiet augue. Vestibulum auctor ornare leo, non - suscipit magna interdum eu. Curabitur pellentesque nibh nibh, at maximus ante fermentum sit - amet. Pellentesque -

+ {toggle.index === index && toggle.toggle && ( + <> +
+

{item.description}

- {summaryDivData.map((item, index) => { - return ( -
-
- icon -
-
- {item.value} - {item.caption} - {item?.caption.toLowerCase().includes("report") && ( -
- {item.count} -
- )} +
+
+ icon +
+
+ {item?.reports?.length} + Tasks / Report +
+ {item.count}
- -
- ); - })} -
-
- {taskStatus.status === "assigned" && taskStatus.index === index ? ( -
- - )} -
- ); - })} + +
+
+
+ {taskStatus.status === "assigned" && taskStatus.index === index ? ( +
+ + )} +
+ ); + }) + ) : ( + No Tasks Found + )}
{displayModal && modalName === "successNotification" ? : null} diff --git a/frontend/mms-Admin/src/pages/Dashboard/MentorManagers/MentorManagers.jsx b/frontend/mms-Admin/src/pages/Dashboard/MentorManagers/MentorManagers.jsx index cc8640c4..2c7f43a7 100644 --- a/frontend/mms-Admin/src/pages/Dashboard/MentorManagers/MentorManagers.jsx +++ b/frontend/mms-Admin/src/pages/Dashboard/MentorManagers/MentorManagers.jsx @@ -1,10 +1,9 @@ -import React, { useState } from "react"; +import React, { useState, useEffect } from "react"; import { useSelector, useDispatch } from "react-redux"; import cx from "classnames"; import styles from "./MentorManagers.module.scss"; import Button from "@/components/Button/Button"; import Pagination from "@/components/Pagination/Pagination"; -import mentorImage from "@/assets/images/sample-profile-image.svg"; import MiniProfile from "@/components/Cards/MiniProfile/MiniProfile"; import { ReactComponent as GridViewIcon } from "@/assets/icons/grid-view-icon.svg"; import { ReactComponent as ListViewIcon } from "@/assets/icons/list-view-icon.svg"; @@ -14,20 +13,35 @@ import SuccessNotificationModal from "@/components/Modals/SuccessNotification/Su import DeleteNotificationModal from "@/components/Modals/DeleteNotification/DeleteNotification"; import AddUserModal from "@/components/Modals/AddUser/AddUser"; import Search from "@/components/Search/Search"; +import { getAllUserProfiles } from "@/redux/Profile/ProfileSlice"; function MentorManagers() { const navigate = useNavigate(); const dispatch = useDispatch(); const [view, setView] = useState("grid"); const [collapseInput, setCollapseInput] = useState(true); + const [mentorManagersArray, setMentorManagersArray] = useState([]); const displayModal = useSelector((state) => state.modal.show); const modalName = useSelector((state) => state.modal.modalName); + const allUserProfilesData = useSelector((state) => state.profile.getAllUserProfilesData); + // const [currentPage, setCurrentPage] = useState(1); // const [mentorsPerPage] = useState(6); // const [mentors, setMentors] = useState(mentorsArray); // const [searchTerm, setSearchTerm] = useState(""); + useEffect(() => { + dispatch(getAllUserProfiles()); + }, [dispatch]); + + useEffect(() => { + setMentorManagersArray( + Array.isArray(allUserProfilesData) && + allUserProfilesData.filter((item) => item.roles.find((role) => role.toLowerCase() === "manager")) + ); + }, [allUserProfilesData]); + const handleAddMentorManager = () => { dispatch( showModal({ @@ -40,79 +54,6 @@ function MentorManagers() { ); }; - const mentorManagersArray = [ - { - id: 1, - name: "Kabiru Omo Isaka", - designation: "Program Assistant, Andela, He/Him", - image: mentorImage, - positionTags: ["PROGRAM ASST.", "MENTOR-GADS"] - }, - { - id: 2, - name: "Kabiru Omo Isaka", - designation: "Program Assistant, Andela, He/Him", - image: mentorImage, - positionTags: ["PROGRAM ASST.", "MENTOR-GADS"] - }, - { - id: 3, - name: "Kabiru Omo Isaka", - designation: "Program Assistant, Andela, He/Him", - image: mentorImage, - positionTags: ["PROGRAM ASST.", "MENTOR-GADS"] - }, - { - id: 4, - name: "Kabiru Omo Isaka", - designation: "Program Assistant, Andela, He/Him", - image: mentorImage, - positionTags: ["PROGRAM ASST.", "MENTOR-GADS"] - }, - { - id: 5, - name: "Kabiru Omo Isaka", - designation: "Program Assistant, Andela, He/Him", - image: mentorImage, - positionTags: ["PROGRAM ASST.", "MENTOR-GADS"] - }, - { - id: 6, - name: "Kabiru Omo Isaka", - designation: "Program Assistant, Andela, He/Him", - image: mentorImage, - positionTags: ["PROGRAM ASST.", "MENTOR-GADS"] - }, - { - id: 7, - name: "Kabiru Omo Isaka", - designation: "Program Assistant, Andela, He/Him", - image: mentorImage, - positionTags: ["PROGRAM ASST.", "MENTOR-GADS"] - }, - { - id: 8, - name: "Kabiru Omo Isaka", - designation: "Program Assistant, Andela, He/Him", - image: mentorImage, - positionTags: ["PROGRAM ASST.", "MENTOR-GADS"] - }, - { - id: 9, - name: "Kabiru Omo Isaka", - designation: "Program Assistant, Andela, He/Him", - image: mentorImage, - positionTags: ["PROGRAM ASST.", "MENTOR-GADS"] - }, - { - id: 10, - name: "Kabiru Omo Isaka", - designation: "Program Assistant, Andela, He/Him", - image: mentorImage, - positionTags: ["PROGRAM ASST.", "MENTOR-GADS"] - } - ]; - const handleSearchInput = (data) => { console.log(data); }; @@ -144,7 +85,7 @@ function MentorManagers() { type='secondary' size='small' /> -
{collapseInput && ( @@ -157,7 +98,7 @@ function MentorManagers() { onSearchClick={handleSearchClick} onChange={handleSearchInput} expanded={false} - inputPlaceholder={"Search for Mentor Manaagers..."} + inputPlaceholder={"Search for Mentor Managers..."} collapseInput={collapseInput} setCollapseInput={setCollapseInput} /> @@ -166,14 +107,18 @@ function MentorManagers() {
- {mentorManagersArray.map((mentor, index) => ( - navigate(`mentor-manager-details/${mentor?.id}`)} - key={index} - data={mentor} - type={view} - /> - ))} + {mentorManagersArray.length > 0 ? ( + mentorManagersArray.map((mentor, index) => ( + navigate(`mentor-manager-details/${mentor?.id}`)} + key={index} + data={mentor} + type={view} + /> + )) + ) : ( + No Mentor Managers found + )}
{displayModal && modalName === "deleteNotification" ? : null} diff --git a/frontend/mms-Admin/src/pages/Dashboard/MentorManagers/UserComponent/UserComponent.jsx b/frontend/mms-Admin/src/pages/Dashboard/MentorManagers/UserComponent/UserComponent.jsx index 408d4c31..7f578de4 100644 --- a/frontend/mms-Admin/src/pages/Dashboard/MentorManagers/UserComponent/UserComponent.jsx +++ b/frontend/mms-Admin/src/pages/Dashboard/MentorManagers/UserComponent/UserComponent.jsx @@ -4,6 +4,8 @@ import PropTypes from "prop-types"; import styles from "./UserComponent.module.scss"; import Button from "@/components/Button/Button"; import { useParams } from "react-router-dom"; +import profileImage from "@/assets/images/sample-profile-image.svg"; +import formatDate from "@/helpers/formatDate"; function UserComponent({ data, onClick }) { const { id } = useParams(); @@ -13,10 +15,14 @@ function UserComponent({ data, onClick }) { onClick={() => onClick(data)} className={cx(styles.userComponent, "flexRow-align-center", id === data?.id.toString() && styles.active)} > - user-image + user-image
-
{data?.name}
-

Added {data?.dateAdded}

+
{`${data?.firstName} ${data?.lastName}`}
+

Added {formatDate(data?.dateCreated)}

diff --git a/frontend/mms-Admin/src/pages/Dashboard/Mentors/MentorDetails/Certificates/Certificates.jsx b/frontend/mms-Admin/src/pages/Dashboard/Mentors/MentorDetails/Certificates/Certificates.jsx index c480cbbf..cf06e60b 100644 --- a/frontend/mms-Admin/src/pages/Dashboard/Mentors/MentorDetails/Certificates/Certificates.jsx +++ b/frontend/mms-Admin/src/pages/Dashboard/Mentors/MentorDetails/Certificates/Certificates.jsx @@ -4,8 +4,8 @@ import styles from "./Certificates.module.scss"; import { useSelector, useDispatch } from "react-redux"; import { showModal } from "@/redux/Modal/ModalSlice"; import SuccessNotificationModal from "@/components/Modals/SuccessNotification/SuccessNotification"; -import certificate from "@/assets/images/certificate-full.png"; -import { ReactComponent as CertificateIcon } from "@/assets/icons/certificate-thumbnail.svg"; +import certificate from "@/assets/images/mentor-certificate.svg"; +import { ReactComponent as CertificateIcon } from "@/assets/images/mentor-certificate.svg"; import { ReactComponent as TogglerIconUp } from "@/assets/icons/arrow-circle-up.svg"; import { ReactComponent as TogglerIconDown } from "@/assets/icons/arrow-circle-down.svg"; import Button from "@/components/Button/Button"; diff --git a/frontend/mms-Admin/src/pages/Dashboard/Mentors/MentorDetails/MentorDetails.jsx b/frontend/mms-Admin/src/pages/Dashboard/Mentors/MentorDetails/MentorDetails.jsx index daf63f60..05365a12 100644 --- a/frontend/mms-Admin/src/pages/Dashboard/Mentors/MentorDetails/MentorDetails.jsx +++ b/frontend/mms-Admin/src/pages/Dashboard/Mentors/MentorDetails/MentorDetails.jsx @@ -1,101 +1,48 @@ -import React, { useState, useEffect, useMemo } from "react"; +import React, { useState, useEffect } from "react"; import cx from "classnames"; import styles from "./MentorDetails.module.scss"; -import mentorImage from "@/assets/images/sample-profile-image.svg"; +import profileImage from "@/assets/images/sample-profile-image.svg"; import GenericSideBar from "@/components/GenericSideBar/GenericSideBar"; import UserComponent from "../UserComponent/UserComponent"; import Button from "@/components/Button/Button"; import backIcon from "@/assets/icons/back-icon.svg"; import Search from "@/components/Search/Search"; -import Filter from "@/components/Filter/Filter"; import useIsMobile from "@/hooks/useIsMobile"; import Tabs from "@/components/Tabs/Tabs"; -import { Outlet, useNavigate } from "react-router-dom"; +import { Outlet, useNavigate, useParams } from "react-router-dom"; import { useDispatch, useSelector } from "react-redux"; import { showModal } from "@/redux/Modal/ModalSlice"; import flagIcon from "@/assets/icons/flag-icon.svg"; import subMenuIcon from "@/assets/icons/sub-menu-icon.svg"; import editIcon from "@/assets/icons/edit-icon.svg"; import EditUserRoleModal from "@/components/Modals/EditUserRole/EditUserRole"; +import { getAllUserProfiles } from "@/redux/Profile/ProfileSlice"; const MentorDetails = () => { const isMobile = useIsMobile(); const navigate = useNavigate(); const dispatch = useDispatch(); + const userId = useParams()?.id; const [openSideBar, setOpenSideBar] = useState(true); const [selectedUser, setSelectedUser] = useState(null); const [collapseInput, setCollapseInput] = useState(true); - const [closeSelectElement, setCloseSelectElement] = useState(false); + const [mentorsArray, setMentorsArray] = useState([]); const displayModal = useSelector((state) => state.modal.show); const modalName = useSelector((state) => state.modal.modalName); + const allUserProfilesData = useSelector((state) => state.profile.getAllUserProfilesData); - const mentorsArray = useMemo( - () => [ - { - id: 1, - name: "Alison Davis", - image: mentorImage, - dateAdded: "May 05, 2023" - }, - { - id: 2, - name: "Alison Davis", - image: mentorImage, - dateAdded: "May 05, 2023" - }, - { - id: 3, - name: "Alison Davis", - image: mentorImage, - dateAdded: "May 05, 2023" - }, - { - id: 4, - name: "Alison Davis", - image: mentorImage, - dateAdded: "May 05, 2023" - }, - { - id: 5, - name: "Alison Davis", - image: mentorImage, - dateAdded: "May 05, 2023" - }, - { - id: 6, - name: "Alison Davis", - image: mentorImage, - dateAdded: "May 05, 2023" - }, - { - id: 7, - name: "Alison Davis", - image: mentorImage, - dateAdded: "May 05, 2023" - }, - { - id: 8, - name: "Alison Davis", - image: mentorImage, - dateAdded: "May 05, 2023" - }, - { - id: 9, - name: "Alison Davis", - image: mentorImage, - dateAdded: "May 05, 2023" - }, - { - id: 10, - name: "Alison Davis", - image: mentorImage, - dateAdded: "May 05, 2023" - } - ], - [] - ); + useEffect(() => { + dispatch(getAllUserProfiles()); + }, [dispatch]); + + useEffect(() => { + setMentorsArray( + Array.isArray(allUserProfilesData) && + allUserProfilesData.filter((item) => item.roles.find((role) => role.toLowerCase() === "mentor")) + ); + }, [allUserProfilesData]); useEffect(() => { if (isMobile) { @@ -103,8 +50,11 @@ const MentorDetails = () => { } else { setOpenSideBar(true); } - setSelectedUser(mentorsArray[0]); - }, [isMobile, mentorsArray]); + }, [isMobile]); + + useEffect(() => { + setSelectedUser(Array.isArray(mentorsArray) && mentorsArray.find((item) => item.id === userId)); + }, [mentorsArray, userId]); const handleSelectedItem = (item) => { console.log(item); @@ -119,18 +69,8 @@ const MentorDetails = () => { console.log(e); }; - const handleSelectedFilterItem = (item) => { - console.log(item); - }; - - const handleCloseSearchInput = (e) => { - console.log(e, "handle close input"); - setCollapseInput(true); - }; - - const handleCloseSelectElement = (e) => { - console.log(e, "handle close select"); - setCloseSelectElement(true); + const handleCloseSelectElement = () => { + // Added to prevent console errors }; const handleViewUser = (user) => { @@ -183,24 +123,24 @@ const MentorDetails = () => {
- + /> */}
); @@ -230,6 +170,8 @@ const MentorDetails = () => { navigate(tab.path); }; + console.log(selectedUser, "selected user"); + return (
{openSideBar ? ( @@ -242,14 +184,20 @@ const MentorDetails = () => {
- profile-image + profile-image
-

{selectedUser?.name}

+

+ {selectedUser?.firstName && selectedUser?.firstName}{" "} + {selectedUser?.lastName && selectedUser?.lastName} +

- {selectedUser?.role || "Mentor"}{" "} - editUserRole()} src={editIcon} alt='edit-icon' />{" "} + {"Mentor"} editUserRole()} src={editIcon} alt='edit-icon' />{" "}

diff --git a/frontend/mms-Admin/src/pages/Dashboard/Mentors/MentorDetails/Tasks/Tasks.jsx b/frontend/mms-Admin/src/pages/Dashboard/Mentors/MentorDetails/Tasks/Tasks.jsx index 8ef8e960..adf929c3 100644 --- a/frontend/mms-Admin/src/pages/Dashboard/Mentors/MentorDetails/Tasks/Tasks.jsx +++ b/frontend/mms-Admin/src/pages/Dashboard/Mentors/MentorDetails/Tasks/Tasks.jsx @@ -1,12 +1,10 @@ -import React, { useState } from "react"; +import React, { useState, useEffect } from "react"; import cx from "classnames"; import styles from "./Tasks.module.scss"; -import { useParams } from "react-router-dom"; import { useSelector, useDispatch } from "react-redux"; import { showModal } from "@/redux/Modal/ModalSlice"; import SuccessNotificationModal from "@/components/Modals/SuccessNotification/SuccessNotification"; import searchIcon from "@/assets/icons/search-icon.svg"; -import { ReactComponent as ArchiveCardIcon } from "@/assets/icons/archive-card-icon.svg"; import { ReactComponent as TogglerIconUp } from "@/assets/icons/arrow-circle-up.svg"; import { ReactComponent as TogglerIconDown } from "@/assets/icons/arrow-circle-down.svg"; import Button from "@/components/Button/Button"; @@ -16,10 +14,10 @@ import calendarIcon from "@/assets/icons/tasks-overview-calendar-icon.svg"; import reportIcon from "@/assets/icons/task-report-icon-green.png"; import assignSuccessImage from "@/assets/images/create-task-success-image.svg"; import unAssignSuccessImage from "@/assets/images/deactivate-user.svg"; +import { getAllTasks } from "@/redux/Tasks/TasksSlice"; +import formatDate from "@/helpers/formatDate"; const Tasks = () => { - const params = useParams(); - const taskId = params.id; const dispatch = useDispatch(); const [taskStatus, setTaskStatus] = useState({ @@ -29,6 +27,11 @@ const Tasks = () => { const displayModal = useSelector((state) => state.modal.show); const modalName = useSelector((state) => state.modal.modalName); + const allTasksData = useSelector((state) => state.tasks.getAllTasksData); + + useEffect(() => { + dispatch(getAllTasks()); + }, [dispatch]); const handleSetTaskStatus = (status, index) => { setTaskStatus({ status, index }); @@ -61,66 +64,6 @@ const Tasks = () => { toggle: false }); - const summaryDivData = [ - { - icon: reportIcon, - value: 40, - caption: "Task / Reports", - count: 50 - } - ]; - - const cardData = [ - { - title: "Google Africa Scholarship Program", - icon: ArchiveCardIcon, - date: "April 15, 2023", - time: "12:00 PM" - }, - { - title: "Google Africa Scholarship Program", - icon: ArchiveCardIcon, - date: "April 15, 2023", - time: "12:00 PM" - }, - { - title: "Google Africa Scholarship Program", - icon: ArchiveCardIcon, - date: "April 15, 2023", - time: "12:00 PM" - }, - { - title: "Google Africa Scholarship Program", - icon: ArchiveCardIcon, - date: "April 15, 2023", - time: "12:00 PM" - }, - { - title: "Google Africa Scholarship Program", - icon: ArchiveCardIcon, - date: "April 15, 2023", - time: "12:00 PM" - }, - { - title: "Google Africa Scholarship Program", - icon: ArchiveCardIcon, - date: "April 15, 2023", - time: "12:00 PM" - }, - { - title: "Google Africa Scholarship Program", - icon: ArchiveCardIcon, - date: "April 15, 2023", - time: "12:00 PM" - }, - { - title: "Google Africa Scholarship Program", - icon: ArchiveCardIcon, - date: "April 15, 2023", - time: "12:00 PM" - } - ]; - const handleToggle = (index) => { if (toggle.index === index) { setToggle({ @@ -141,9 +84,6 @@ const Tasks = () => {
@@ -153,77 +93,69 @@ const Tasks = () => {
- {cardData.map((item, index) => { - return ( -
-
-
- task-icon -
-
{`Room Library Article Written in Java ${taskId}`}
-
- calendar-icon - 3 days from now + {Array.isArray(allTasksData) && allTasksData.length > 0 ? ( + allTasksData.map((item, index) => { + return ( +
+
+
+ task-icon +
+
{item.title}
+
+ calendar-icon + {formatDate(item.createdAt)} +
+
+ {toggle?.toggle && toggle.index === index ? ( + handleToggle(index)} /> + ) : ( + handleToggle(index)} /> + )} +
-
- {toggle?.toggle && toggle.index === index ? ( - handleToggle(index)} /> - ) : ( - handleToggle(index)} /> - )} -
-
- {toggle.index === index && toggle.toggle && ( - <> -
-

- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et massa mi. Aliquam in hendrerit - urna. Pellentesque sit amet sapien fringilla, mattis ligula consectetur, ultrices mauris. - Maecenas vitae mattis tellus. Nullam quis imperdiet augue. Vestibulum auctor ornare leo, non - suscipit magna interdum eu. Curabitur pellentesque nibh nibh, at maximus ante fermentum sit - amet. Pellentesque -

+ {toggle.index === index && toggle.toggle && ( + <> +
+

{item.description}

- {summaryDivData.map((item, index) => { - return ( -
-
- icon -
-
- {item.value} - {item.caption} - {item?.caption.toLowerCase().includes("report") && ( -
- {item.count} -
- )} +
+
+ icon +
+
+ {item?.reports?.length} + Tasks / Report +
+ {item.count}
- -
- ); - })} -
-
- {taskStatus.status === "assigned" && taskStatus.index === index ? ( -
- - )} -
- ); - })} + +
+
+
+ {taskStatus.status === "assigned" && taskStatus.index === index ? ( +
+ + )} +
+ ); + }) + ) : ( + No Tasks Found + )}
{displayModal && modalName === "successNotification" ? : null} diff --git a/frontend/mms-Admin/src/pages/Dashboard/Mentors/Mentors.jsx b/frontend/mms-Admin/src/pages/Dashboard/Mentors/Mentors.jsx index 80610bdf..381e1e62 100644 --- a/frontend/mms-Admin/src/pages/Dashboard/Mentors/Mentors.jsx +++ b/frontend/mms-Admin/src/pages/Dashboard/Mentors/Mentors.jsx @@ -1,10 +1,9 @@ -import React, { useState } from "react"; +import React, { useState, useEffect } from "react"; import { useSelector, useDispatch } from "react-redux"; import cx from "classnames"; import styles from "./Mentors.module.scss"; import Button from "@/components/Button/Button"; import Pagination from "@/components/Pagination/Pagination"; -import mentorImage from "@/assets/images/sample-profile-image.svg"; import MiniProfile from "@/components/Cards/MiniProfile/MiniProfile"; import { ReactComponent as GridViewIcon } from "@/assets/icons/grid-view-icon.svg"; import { ReactComponent as ListViewIcon } from "@/assets/icons/list-view-icon.svg"; @@ -14,20 +13,35 @@ import SuccessNotificationModal from "@/components/Modals/SuccessNotification/Su import DeleteNotificationModal from "@/components/Modals/DeleteNotification/DeleteNotification"; import AddUserModal from "@/components/Modals/AddUser/AddUser"; import Search from "@/components/Search/Search"; +import { getAllUserProfiles } from "@/redux/Profile/ProfileSlice"; function Mentors() { const navigate = useNavigate(); const dispatch = useDispatch(); const [view, setView] = useState("grid"); const [collapseInput, setCollapseInput] = useState(true); + const [mentorsArray, setMentorsArray] = useState([]); const displayModal = useSelector((state) => state.modal.show); const modalName = useSelector((state) => state.modal.modalName); + const allUserProfilesData = useSelector((state) => state.profile.getAllUserProfilesData); + // const [currentPage, setCurrentPage] = useState(1); // const [mentorsPerPage] = useState(6); // const [mentors, setMentors] = useState(mentorsArray); // const [searchTerm, setSearchTerm] = useState(""); + useEffect(() => { + dispatch(getAllUserProfiles()); + }, [dispatch]); + + useEffect(() => { + setMentorsArray( + Array.isArray(allUserProfilesData) && + allUserProfilesData.filter((item) => item.roles.find((role) => role.toLowerCase() === "mentor")) + ); + }, [allUserProfilesData]); + const handleAddMentor = () => { dispatch( showModal({ @@ -40,79 +54,6 @@ function Mentors() { ); }; - const mentorsArray = [ - { - id: 1, - name: "Kabiru Omo Isaka", - designation: "Program Assistant, Andela, He/Him", - image: mentorImage, - positionTags: ["PROGRAM ASST.", "MENTOR-GADS"] - }, - { - id: 2, - name: "Kabiru Omo Isaka", - designation: "Program Assistant, Andela, He/Him", - image: mentorImage, - positionTags: ["PROGRAM ASST.", "MENTOR-GADS"] - }, - { - id: 3, - name: "Kabiru Omo Isaka", - designation: "Program Assistant, Andela, He/Him", - image: mentorImage, - positionTags: ["PROGRAM ASST.", "MENTOR-GADS"] - }, - { - id: 4, - name: "Kabiru Omo Isaka", - designation: "Program Assistant, Andela, He/Him", - image: mentorImage, - positionTags: ["PROGRAM ASST.", "MENTOR-GADS"] - }, - { - id: 5, - name: "Kabiru Omo Isaka", - designation: "Program Assistant, Andela, He/Him", - image: mentorImage, - positionTags: ["PROGRAM ASST.", "MENTOR-GADS"] - }, - { - id: 6, - name: "Kabiru Omo Isaka", - designation: "Program Assistant, Andela, He/Him", - image: mentorImage, - positionTags: ["PROGRAM ASST.", "MENTOR-GADS"] - }, - { - id: 7, - name: "Kabiru Omo Isaka", - designation: "Program Assistant, Andela, He/Him", - image: mentorImage, - positionTags: ["PROGRAM ASST.", "MENTOR-GADS"] - }, - { - id: 8, - name: "Kabiru Omo Isaka", - designation: "Program Assistant, Andela, He/Him", - image: mentorImage, - positionTags: ["PROGRAM ASST.", "MENTOR-GADS"] - }, - { - id: 9, - name: "Kabiru Omo Isaka", - designation: "Program Assistant, Andela, He/Him", - image: mentorImage, - positionTags: ["PROGRAM ASST.", "MENTOR-GADS"] - }, - { - id: 10, - name: "Kabiru Omo Isaka", - designation: "Program Assistant, Andela, He/Him", - image: mentorImage, - positionTags: ["PROGRAM ASST.", "MENTOR-GADS"] - } - ]; - const handleSearchInput = (data) => { console.log(data); }; @@ -166,9 +107,18 @@ function Mentors() {
- {mentorsArray.map((mentor, index) => ( - navigate(`mentor-details/${mentor?.id}`)} key={index} data={mentor} type={view} /> - ))} + {mentorsArray.length > 0 ? ( + mentorsArray.map((mentor, index) => ( + navigate(`mentor-details/${mentor?.id}`)} + key={index} + data={mentor} + type={view} + /> + )) + ) : ( + No Mentors Found + )}
{displayModal && modalName === "deleteNotification" ? : null} diff --git a/frontend/mms-Admin/src/pages/Dashboard/Mentors/UserComponent/UserComponent.jsx b/frontend/mms-Admin/src/pages/Dashboard/Mentors/UserComponent/UserComponent.jsx index 408d4c31..7f578de4 100644 --- a/frontend/mms-Admin/src/pages/Dashboard/Mentors/UserComponent/UserComponent.jsx +++ b/frontend/mms-Admin/src/pages/Dashboard/Mentors/UserComponent/UserComponent.jsx @@ -4,6 +4,8 @@ import PropTypes from "prop-types"; import styles from "./UserComponent.module.scss"; import Button from "@/components/Button/Button"; import { useParams } from "react-router-dom"; +import profileImage from "@/assets/images/sample-profile-image.svg"; +import formatDate from "@/helpers/formatDate"; function UserComponent({ data, onClick }) { const { id } = useParams(); @@ -13,10 +15,14 @@ function UserComponent({ data, onClick }) { onClick={() => onClick(data)} className={cx(styles.userComponent, "flexRow-align-center", id === data?.id.toString() && styles.active)} > - user-image + user-image
-
{data?.name}
-

Added {data?.dateAdded}

+
{`${data?.firstName} ${data?.lastName}`}
+

Added {formatDate(data?.dateCreated)}

diff --git a/frontend/mms-Admin/src/pages/Dashboard/Messages/Chats/Chats.jsx b/frontend/mms-Admin/src/pages/Dashboard/Messages/Chats/Chats.jsx index 63ee46a4..8cf527c0 100644 --- a/frontend/mms-Admin/src/pages/Dashboard/Messages/Chats/Chats.jsx +++ b/frontend/mms-Admin/src/pages/Dashboard/Messages/Chats/Chats.jsx @@ -21,6 +21,8 @@ const Chats = () => { const [collapseInput, setCollapseInput] = useState(true); const [messages, setMessages] = useState([]); + console.log(messages, "messages"); + // Temp fix for handling empty message history // const [messageHistory, setMessageHistory] = useState([]); const messageHistory = []; diff --git a/frontend/mms-Admin/src/pages/Dashboard/Notifications/NotificationsListItem/NotificationsListItem.jsx b/frontend/mms-Admin/src/pages/Dashboard/Notifications/NotificationsListItem/NotificationsListItem.jsx index 9fa77551..a8fe2641 100644 --- a/frontend/mms-Admin/src/pages/Dashboard/Notifications/NotificationsListItem/NotificationsListItem.jsx +++ b/frontend/mms-Admin/src/pages/Dashboard/Notifications/NotificationsListItem/NotificationsListItem.jsx @@ -43,7 +43,7 @@ function NotificationsListItem({ data, setItemStatus }) { toggleDataStatus(data); } - if(type === "delete"){ + if (type === "delete") { // Do something } }; @@ -82,7 +82,7 @@ function NotificationsListItem({ data, setItemStatus }) { key={listItem.key} className={cx(styles.dropdownListItem)} > - {(listItem.key === "read" && data.status === true) ? "Unread" : listItem.name} + {listItem.key === "read" && data.status === true ? "Unread" : listItem.name} ); })} diff --git a/frontend/mms-Admin/src/pages/Dashboard/Programs/CreateProgram/CreateProgram.jsx b/frontend/mms-Admin/src/pages/Dashboard/Programs/CreateProgram/CreateProgram.jsx index 1d7cb62d..2df1b990 100644 --- a/frontend/mms-Admin/src/pages/Dashboard/Programs/CreateProgram/CreateProgram.jsx +++ b/frontend/mms-Admin/src/pages/Dashboard/Programs/CreateProgram/CreateProgram.jsx @@ -1,4 +1,4 @@ -import React, { useState, useCallback } from "react"; +import React, { useState, useCallback, useEffect } from "react"; import { useSelector, useDispatch } from "react-redux"; import cx from "classnames"; import { useForm, Controller } from "react-hook-form"; @@ -12,149 +12,55 @@ import closeIconAlt from "@/assets/icons/close-icon.svg"; import InputField from "@/components/Input/Input"; import TextArea from "@/components/TextArea/TextArea"; import Search from "@/components/Search/Search"; -import Filter from "@/components/Filter/Filter"; +// import Filter from "@/components/Filter/Filter"; import SuccessNotificationModal from "@/components/Modals/SuccessNotification/SuccessNotification"; import { showModal } from "@/redux/Modal/ModalSlice"; import successImage from "@/assets/images/create-task-success-image.svg"; import { createProgramSchema } from "@/helpers/validation"; -import PersonelComponent from "@/pages/Dashboard/Tasks/PersonelComponent/PersonelComponent"; -import mentorManagerImage from "@/assets/images/mentor-manager-thumbnail.svg"; -import mentorImage from "@/assets/images/sample-profile-image.svg"; -import programAvatar from "@/assets/images/program-avatar.svg"; +import PersonelComponent from "./PersonelComponent/PersonelComponent"; +// import { getAllMentors } from "@/redux/Mentors/MentorsSlice"; +// import { getAllMentorManagers } from "@/redux/MentorManagers/MentorManagersSlice"; +// import programAvatar from "@/assets/images/program-avatar.svg"; import { useDropzone } from "react-dropzone"; import { useNavigate } from "react-router-dom"; +import { createProgram } from "@/redux/Programs/ProgramsSlice"; +import { getAllUserProfiles } from "@/redux/Profile/ProfileSlice"; function CreateProgram() { const navigate = useNavigate(); + const dispatch = useDispatch(); const [openSideBar, setOpenSideBar] = useState({ open: false, category: "" }); const [collapseInput, setCollapseInput] = useState(true); - const [closeSelectElement, setCloseSelectElement] = useState(false); - const dispatch = useDispatch(); + const [selectedMentorManagers, setSelectedMentorManagers] = useState([]); + const [selectedMentors, setSelectedMentors] = useState([]); + const criteriaData = JSON.parse(localStorage.getItem("criteria")) || {}; + console.log(criteriaData, "criteria data here"); + + // const [closeSelectElement, setCloseSelectElement] = useState(false); const displayModal = useSelector((state) => state.modal.show); const modalName = useSelector((state) => state.modal.modalName); + const createProgramLoading = useSelector((state) => state.loading.createProgramLoading); + const allUserProfilesData = useSelector((state) => state.profile.getAllUserProfilesData); + // const allMentorsData = useSelector((state) => state.mentors.getAllMentorsData); + // const allMentorManagersData = useSelector((state) => state.mentorManagers.getAllMentorManagersData); - const mentorsArray = [ - { - id: 1, - name: "Kabiru Omo Isaka", - designation: "Program Assistant, Andela, He/Him", - image: mentorImage, - positionTags: ["PROGRAM ASST.", "MENTOR-GADS"] - }, - { - id: 2, - name: "Kabiru Omo Isaka", - designation: "Program Assistant, Andela, He/Him", - image: mentorImage, - positionTags: ["PROGRAM ASST.", "MENTOR-GADS"] - }, - { - id: 3, - name: "Kabiru Omo Isaka", - designation: "Program Assistant, Andela, He/Him", - image: mentorImage, - positionTags: ["PROGRAM ASST.", "MENTOR-GADS"] - }, - { - id: 4, - name: "Kabiru Omo Isaka", - designation: "Program Assistant, Andela, He/Him", - image: mentorImage, - positionTags: ["PROGRAM ASST.", "MENTOR-GADS"] - }, - { - id: 5, - name: "Kabiru Omo Isaka", - designation: "Program Assistant, Andela, He/Him", - image: mentorImage, - positionTags: ["PROGRAM ASST.", "MENTOR-GADS"] - }, - { - id: 6, - name: "Kabiru Omo Isaka", - designation: "Program Assistant, Andela, He/Him", - image: mentorImage, - positionTags: ["PROGRAM ASST.", "MENTOR-GADS"] - }, - { - id: 7, - name: "Kabiru Omo Isaka", - designation: "Program Assistant, Andela, He/Him", - image: mentorImage, - positionTags: ["PROGRAM ASST.", "MENTOR-GADS"] - }, - { - id: 8, - name: "Kabiru Omo Isaka", - designation: "Program Assistant, Andela, He/Him", - image: mentorImage, - positionTags: ["PROGRAM ASST.", "MENTOR-GADS"] - }, - { - id: 9, - name: "Kabiru Omo Isaka", - designation: "Program Assistant, Andela, He/Him", - image: mentorImage, - positionTags: ["PROGRAM ASST.", "MENTOR-GADS"] - }, - { - id: 10, - name: "Kabiru Omo Isaka", - designation: "Program Assistant, Andela, He/Him", - image: mentorImage, - positionTags: ["PROGRAM ASST.", "MENTOR-GADS"] - } - ]; - - const mentorManagersArray = [ - { - id: 1, - name: "Alice Davies", - designation: "Program Assistant, Andela, Her/She", - image: mentorManagerImage, - positionTags: ["PROGRAM ASST.", "MENTOR-GADS"] - }, - { - id: 2, - name: "Alice Davies", - designation: "Program Assistant, Andela, Her/She", - image: mentorManagerImage, - positionTags: ["PROGRAM ASST.", "MENTOR-GADS"] - }, - { - id: 3, - name: "Alice Davies", - designation: "Program Assistant, Andela, Her/She", - image: mentorManagerImage, - positionTags: ["PROGRAM ASST.", "MENTOR-GADS"] - }, - { - id: 4, - name: "Alice Davies", - designation: "Program Assistant, Andela, Her/She", - image: mentorManagerImage, - positionTags: ["PROGRAM ASST.", "MENTOR-GADS"] - }, - { - id: 5, - name: "Alice Davies", - designation: "Program Assistant, Andela, Her/She", - image: mentorManagerImage, - positionTags: ["PROGRAM ASST.", "MENTOR-GADS"] - } - ]; + useEffect(() => { + // dispatch(getAllMentors()); + // dispatch(getAllMentorManagers()); + dispatch(getAllUserProfiles()); + }, [dispatch]); const resolver = yupResolver(createProgramSchema); const defaultValues = { - title: "", - details: "" + name: "", + description: "" }; const { @@ -163,19 +69,36 @@ function CreateProgram() { control } = useForm({ defaultValues, resolver, mode: "all" }); - const sendMessage = (data) => { + const handleCreateProgram = async (data) => { console.log(data); - dispatch( - showModal({ - name: "successNotification", - modalData: { - title: "Program Created Successfully!", - image: successImage, - redirectUrl: "/dashboard/programs" - } - }) - ); - localStorage.removeItem("criteria"); + let formattedMentorManagerIds = selectedMentorManagers.map((id) => { + return { mentorManagerId: id }; + }); + let formattedMentorIds = selectedMentors.map((id) => { + return { programsMentorId: id }; + }); + let payload = { + ...data, + programmePicture: uploadedFile?.imagePreviewUrl || "", + status: 1, // this will be replaced later - it ought to be done at the backend + criteria: JSON.stringify(localStorage.getItem("criteria")) || "", + managers: formattedMentorManagerIds, + mentors: formattedMentorIds + }; + const response = await dispatch(createProgram(payload)); + if (response.success) { + dispatch( + showModal({ + name: "successNotification", + modalData: { + title: "Program Created Successfully!", + image: successImage, + redirectUrl: "/dashboard/programs" + } + }) + ); + localStorage.removeItem("criteria"); + } }; const handleOpenSideBar = (e, open, category) => { @@ -187,40 +110,48 @@ function CreateProgram() { console.log(e.target.value); }; - const handleSelectedFilterItem = (item) => { - console.log(item); - }; + // const handleSelectedFilterItem = (item) => { + // console.log(item); + // }; - const handleCloseSearchInput = (e) => { - console.log(e, "handle close input"); - setCollapseInput(true); - }; + // const handleCloseSearchInput = (e) => { + // console.log(e, "handle close input"); + // setCollapseInput(true); + // }; - const handleCloseSelectElement = (e) => { - console.log(e, "handle close select"); - setCloseSelectElement(true); + const handleCloseSelectElement = () => { + // Added to prevent console errors }; - const getListComponents = (data) => { - const listItems = data.map((item, index) => { - return { - component: , - id: item.id - }; - }); + const getListComponents = (data, selectedUsers) => { + const listItems = + Array.isArray(data) && + data.map((item, index) => { + return { + component: ( + userId === item?.id)} + handleChecked={handleSelectedItem} + /> + ), + id: item.id + }; + }); const headerComponent = (
- + /> */} { - console.log(item); + const handleSelectedItem = (itemId) => { + if (openSideBar.category === "mentor-manager") { + if (selectedMentorManagers.find((userId) => userId === itemId)) { + let filteredMentorManagers = selectedMentorManagers.filter((id) => id !== itemId); + setSelectedMentorManagers(filteredMentorManagers); + } else { + setSelectedMentorManagers([...selectedMentorManagers, `${itemId}`]); + } + } + if (openSideBar.category === "mentor") { + if (selectedMentors.find((userId) => userId === itemId)) { + let filteredMentors = selectedMentors.filter((id) => id !== itemId); + setSelectedMentors(filteredMentors); + } else { + setSelectedMentors([...selectedMentors, `${itemId}`]); + } + } }; const [uploadedFile, setUploadedFile] = useState({ @@ -276,6 +222,33 @@ function CreateProgram() { navigate("create-criteria"); }; + const handleClearList = (category) => { + if (category === "mentorManager") { + setSelectedMentorManagers([]); + } else if (category === "mentor") { + setSelectedMentors([]); + } + }; + + const handleSideBarMenuClick = () => { + // This is added to remove the warning of unused function in the selection sidebar component + }; + + const getUsers = (category) => { + if (category === "mentorManager") { + return ( + Array.isArray(allUserProfilesData) && + allUserProfilesData.filter((item) => item.roles.find((role) => role.toLowerCase() === "manager")) + ); + } + if (category === "mentor") { + return ( + Array.isArray(allUserProfilesData) && + allUserProfilesData.filter((item) => item.roles.find((role) => role.toLowerCase() === "mentor")) + ); + } + }; + return (
@@ -285,14 +258,20 @@ function CreateProgram() {
-
sendMessage(data))}> + handleCreateProgram(data))}>
- profile-image + {uploadedFile?.imagePreviewUrl ? ( + profile-image + ) : ( + + Select Image + + )}
Set Program Avatar
@@ -305,30 +284,30 @@ function CreateProgram() {
- + ( )} /> - + (