Merge pull request ALCOpenSource#202 from tamsay/develop

Backend integrations and refactoring
tamsay · Jun 22, 2023 · 64494f0 · 64494f0
2 parents 4fceb3d + fc97600
commit 64494f0
Show file tree

Hide file tree

Showing 71 changed files with 2,581 additions and 2,111 deletions.
diff --git a/frontend/mms-Admin/package.json b/frontend/mms-Admin/package.json
@@ -15,6 +15,7 @@
     "-": "^0.0.1",
     "@hookform/resolvers": "^3.0.1",
     "@iconify/react": "^4.1.0",
+    "@microsoft/signalr": "^7.0.7",
     "@react-oauth/google": "^0.10.0",
     "@reduxjs/toolkit": "^1.9.3",
     "@types/react-redux": "^7.1.25",
@@ -24,6 +25,7 @@
     "classnames": "^2.3.2",
     "date-fns": "^2.30.0",
     "dompurify": "^3.0.3",
+    "html2pdf.js": "^0.10.1",
     "jest": "^29.5.0",
     "jwt-decode": "^3.1.2",
     "nanoid": "^4.0.2",

diff --git a/frontend/mms-Admin/src/assets/images/mentor-certificate.svg b/frontend/mms-Admin/src/assets/images/mentor-certificate.svg
diff --git a/frontend/mms-Admin/src/assets/images/mentor-manager-certificate.svg b/frontend/mms-Admin/src/assets/images/mentor-manager-certificate.svg
diff --git a/frontend/mms-Admin/src/components/AuthenticatedRoutes/AuthenticatedRoutes.jsx b/frontend/mms-Admin/src/components/AuthenticatedRoutes/AuthenticatedRoutes.jsx
@@ -13,6 +13,7 @@ function AuthenticatedRoutes({ children, roles }) {
 
   const navigate = useNavigate();
   const authError = useSelector((state) => state?.auth?.error?.failed) || false;
+  console.log(authError, "auth error");
 
   useEffect(() => {
     const refreshInterval = setInterval(() => {
@@ -22,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
@@ -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 (
     <div className={cx(styles.miniProfileContainer, type === "grid" ? styles.gridView : styles.listView)}>
       <div className={cx(styles.imageDiv, "flexRow")}>
-        <img onClick={onClick} className={cx(styles.avatar)} src={data?.image} alt='user-image' />
+        <img
+          onClick={onClick}
+          className={cx(styles.avatar)}
+          src={data?.profileImage ? data?.profileImage : profileImage}
+          alt='user-image'
+        />
         <div className={cx(styles.btnGroup, "flexCol")}>
           <MessageIcon onClick={() => navigate(`/dashboard/messages/chats/${data?.id}`)} className={cx(styles.icon)} />
           <DeleteIcon onClick={() => handleDelete(data?.id)} className={cx(styles.icon)} />
@@ -37,13 +44,13 @@ const MiniProfile = ({ data, type, onClick }) => {
       <div className={cx(styles.userInfo, "flexRow")}>
         <div onClick={onClick} className={cx(styles.leftSection)}>
           <div className={cx(styles.groupOne, "flexCol")}>
-            <h5 className={cx(styles.name)}>{data?.name}</h5>
-            <p className={cx(styles.designation)}>{data?.designation}</p>
+            <h5 className={cx(styles.name)}>{`${data?.firstName} ${data?.lastName}`}</h5>
+            <p className={cx(styles.designation)}>{data?.headline || "Program Assistant, Andela"}</p>
           </div>
 
           <div className={cx(styles.positionTags, "flexRow")}>
-            {data?.positionTags &&
-              data?.positionTags.map((tag, index) => (
+            {data?.roles &&
+              data?.roles.map((tag, index) => (
                 <span key={index} className={cx(styles.tag)}>
                   {tag}
                 </span>

diff --git a/frontend/mms-Admin/src/components/DashboardHeader/DashboardHeader.jsx b/frontend/mms-Admin/src/components/DashboardHeader/DashboardHeader.jsx
@@ -19,7 +19,7 @@ function Header() {
   const { toggleSidebar } = useProSidebar();
   const navigate = useNavigate();
 
-  const userProfile = useSelector((state) => state.settings.getProfileData);
+  const userProfile = useSelector((state) => state.profile.getProfileData);
 
   const handleMenuClick = (e, path) => {
     e.preventDefault();
@@ -64,7 +64,12 @@ function Header() {
         <Navbar.Collapse className={cx(styles.navbarCollapse, "flexRow")} id='responsive-navbar-nav'>
           <Nav className={cx(styles.primaryNavigation, "flexRow-space-between")}>
             <div className={cx(styles.inputDiv, "flexRow-align-center")}>
-              <img onClick={(e) => handleMenuClick(e, "/dashboard/search-results")} className={cx(styles.searchIcon)} src={searchIcon} alt='search-icon' />
+              <img
+                onClick={(e) => handleMenuClick(e, "/dashboard/search-results")}
+                className={cx(styles.searchIcon)}
+                src={searchIcon}
+                alt='search-icon'
+              />
               <input type='text' placeholder='Search for anything' />
             </div>
             <div className={cx(styles.iconsDiv, "flexRow-fully-centered")}>
@@ -74,7 +79,11 @@ function Header() {
               </div>
               <div className={cx(styles.container, "flexRow-align-center")}>
                 <span className={cx(styles.count)}>11</span>
-                <img onClick={(e) => handleMenuClick(e, "/dashboard/notifications")} src={notificationIcon} alt='notification-icon' />
+                <img
+                  onClick={(e) => handleMenuClick(e, "/dashboard/notifications")}
+                  src={notificationIcon}
+                  alt='notification-icon'
+                />
               </div>
             </div>
             <div

diff --git a/frontend/mms-Admin/src/components/DashboardSideBar/DashboardSideBar.jsx b/frontend/mms-Admin/src/components/DashboardSideBar/DashboardSideBar.jsx
@@ -24,7 +24,7 @@ import arrayToString from "@/helpers/arrayToString";
 import { logout } from "@/utils/auth";
 import { titleCase } from "@/helpers/textTransform";
 import { useSelector, useDispatch } from "react-redux";
-import { getProfile } from "@/redux/Settings/SettingsSlice";
+import { getProfile } from "@/redux/Profile/ProfileSlice";
 import useIsMobile from "@/hooks/useIsMobile";
 
 function DashboardSideBar() {
@@ -35,7 +35,7 @@ function DashboardSideBar() {
   const { toggleSidebar } = useProSidebar();
   const userData = userInfo();
   const currentPage = location.pathname.split("/")[2] || "";
-  const userProfile = useSelector((state) => state.settings.getProfileData);
+  const userProfile = useSelector((state) => state.profile.getProfileData);
 
   const menuItemsArray = useMemo(
     () => [

diff --git 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) => (
-              <option key={index} value={item.name}>
-                {item.name}
+              <option key={index} value={item.value}>
+                {item.label}
               </option>
             ))}
         </select>
@@ -72,9 +72,9 @@ const Filter = ({ selectedFilterItem, dropdownItems, closeSearchInput, closeSele
                   <div
                     key={index}
                     className={cx(styles.dropdownItem, "flexRow-align-center")}
-                    onClick={() => handleCustomDropdownClick(item.name)}
+                    onClick={() => handleCustomDropdownClick(item.value)}
                   >
-                    <span className={cx(styles.item)}>{item.name}</span>
+                    <span className={cx(styles.item)}>{item.label}</span>
                   </div>
                 ))}
             </div>

diff --git 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 (
     <ModalContainer show={show} size={size} modalName={modalName}>
       <div className={cx(styles.modalWrapper, "flexCol")}>
@@ -29,8 +47,8 @@ function ShareReport({ show, size, modalName }) {
 
         <div className={cx(styles.modalFooter)}>
           <div className={cx(styles.btnDiv, "flexRow-fully-centered")}>
-            <Button onClick={handleClick} title='Cancel' type='secondary' />
-            <Button onClick={handleClick} title='Open Email App' />
+            <Button onClick={handleClose} title='Cancel' type='secondary' />
+            <Button onClick={handleShare} title='Open Email App' />
           </div>
         </div>
       </div>

diff --git a/frontend/mms-Admin/src/components/SelectionSideBar/SelectionSideBar.jsx b/frontend/mms-Admin/src/components/SelectionSideBar/SelectionSideBar.jsx
@@ -10,7 +10,6 @@ function SelectionSideBar({ data, selectedMenuItem, activeClassName }) {
   const sidebarRef = useRef(null);
   const params = useParams();
   const currentId = params?.id;
-  console.log(currentId);
 
   const sidebarWidth = isMobile ? "100%" : "300px";
 
@@ -31,15 +30,19 @@ function SelectionSideBar({ data, selectedMenuItem, activeClassName }) {
       <div className={cx(styles.selectionSideBarHeader, "flexCol")}>{data?.headerComponent}</div>
 
       <ul>
-        {data.listItems.map((item, index) => (
-          <li
-            key={index}
-            onClick={() => handleMenuClick(item?.id)}
-            className={currentId === item.id.toString() ? activeClassName : ""}
-          >
-            {item?.component}
-          </li>
-        ))}
+        {Array.isArray(data?.listItems) && data?.listItems.length > 0 ? (
+          data.listItems.map((item, index) => (
+            <li
+              key={index}
+              onClick={() => handleMenuClick(item?.id)}
+              className={currentId === item.id.toString() ? activeClassName : ""}
+            >
+              {item?.component}
+            </li>
+          ))
+        ) : (
+          <span>Data is not available</span>
+        )}
       </ul>
     </div>
   );