Cleanup modals and login

Author: quinncheong

app/src/components/course/index.jsx

@@ -17,14 +17,14 @@ function Course() {
     case "MANAGER":
       return <p>You are logged in as MANAGER so you see no courses</p>;
     case "STAFF":
-    default:
-      // temporary addition for development, should not render anything without permission
       return (
         <>
           <SearchBar title='Search Courses' searchBarPlaceholder='Search by name, ID...' />
           <StaffCourse />
         </>
       );
+    default:
+      return <p>Please log in to view courses</p>;
   }
 }
 

app/src/components/createLearningJourney/CourseModal.jsx

@@ -26,13 +26,13 @@ export default function CourseModal({ skillId, coursesAndSkillsMapping, isModalO
       className='fixed top-0 left-0 h-screen w-screen scale-100 backdrop-grayscale backdrop-blur-xl z-50'
       aria-hidden='true'
       onClick={handleCloseModal}
+      id='modal-outer'
     >
       <div
         className='absolute flex flex-col justify-center space-y-5 mx-auto my-auto w-3/4 h-3/4 bg-gray-100 z-99 inset-0 shadow-lg rounded-lg items-center text-center'
         aria-labelledby='modal-title'
         role='dialog'
         aria-modal='true'
-        id='modal-base'
       >
         <ModalHeader closeModal={closeModal} />
         <p className='font-bold text-2xl'>Choose a course to add it to your Learning Journey!</p>

app/src/components/createLearningJourney/DeleteSkillModal.jsx

@@ -16,7 +16,7 @@ function DeleteSkillModal({ isDeleteSkillModalOpen, onDeleteSkillModalClose }) {
 
   return (
     <div
-      className='fixed top-0 left-0 h-screen w-screen scale-100 backdrop-grayscale backdrop-blur-xl z-8'
+      className='fixed top-0 left-0 h-screen w-screen scale-100 backdrop-grayscale backdrop-blur-xl z-50'
       aria-hidden='true'
       onClick={handleDeleteSkillModalClose}
     >

app/src/components/job/JobTile.jsx

@@ -10,7 +10,6 @@ import { useHistory } from "react-router-dom";
 import { useLJContext } from "src/contexts/LJContext";
 import { useUpdateJobContext } from "src/contexts/UpdateJobContext";
 import { useUserContext } from "src/contexts/UserContext";
-import { updateJob } from "src/api/jobs";
 import SkillBadge from "./SkillBadge";
 import JobDeletionPopUp from "./hr/JobDeletionPopUp";
 
@@ -19,13 +18,14 @@ export default function JobTile({ jobId, jobName, jobDesc, skills, isActive, set
   const [isButtonPopUpOpen, setIsButtonPopUpOpen] = useState(false);
 
   const { currentUserType } = useUserContext();
-  const { setSelectedJobRole } = useLJContext();
+  const { setSelectedJobRole, clearSelectedCourseDetails } = useLJContext();
   const { setUpdateJobRole } = useUpdateJobContext();
   const history = useHistory();
 
   const handleCreateLJButtonClick = (e) => {
     e.stopPropagation();
     setSelectedJobRole({ jobId, jobName, jobDesc, skills, isActive });
+    clearSelectedCourseDetails()
     history.push("create-learning-journey");
   };
 

app/src/components/job/index.jsx

@@ -17,14 +17,14 @@ function Job() {
     case "MANAGER":
       return <p>You are logged in as MANAGER so you see no Jobs</p>;
     case "STAFF":
-    default:
-      // temporary addition for development, should not render anything without permission
       return (
       <>
         <SearchBar title="Search Job Roles" searchBarPlaceholder="Search by title, skills..." />
         <StaffJob />
       </>
       );
+    default:
+      return <p>Please log in to view Jobs</p>;
   }
 }
 

app/src/components/job/staff/StaffJob.jsx

@@ -6,20 +6,6 @@ import JobTile from "../JobTile";
 function StaffJob() {
   const [jobs, setJobs] = useState([]);
 
-  const renderJobs = jobs.map(({ jobId, jobName, jobDesc, skills, isActive }, index) => {
-    if (isActive === 1) {
-      return <JobTile
-      key={index}
-      jobId={jobId}
-      jobName={jobName}
-      jobDesc={jobDesc}
-      skills={skills}
-      isActive={isActive}
-      /> ;
-    }
-    return null;
-  });
-
   useEffect(() => {
     getAllJobs();
 
@@ -32,6 +18,22 @@ function StaffJob() {
     }
   }, []);
 
+  const renderJobs = jobs.map(({ jobId, jobName, jobDesc, skills, isActive }, index) => {
+    if (isActive === 1) {
+      return (
+        <JobTile
+          key={index}
+          jobId={jobId}
+          jobName={jobName}
+          jobDesc={jobDesc}
+          skills={skills}
+          isActive={isActive}
+        />
+      );
+    }
+    return null;
+  });
+
   return (
     <div className='flex flex-col container mt-10 bg-white p-10 mx-auto rounded-lg shadow-lg'>
       <h1 className='text-3xl text-left font-bold'>View All Job Roles</h1>

app/src/components/learningJourney/details/LJDeletionPopUp.jsx

@@ -39,7 +39,7 @@ function LJDeletionPopUp({
   return (
     <div
       id='deletePopUp'
-      className='flex justify-center fixed inset-0 h-screen items-center z-10 p-5 backdrop-grayscale backdrop-blur-xl z-8'
+      className='flex justify-center fixed inset-0 h-screen items-center z-10 p-5 backdrop-grayscale backdrop-blur-xl z-50'
       aria-hidden='true'
       onClick={handleDeleteLJModalClose}
     >

app/src/components/learningJourney/index.jsx

@@ -13,7 +13,8 @@ function LearningJourney() {
       return <p>You are logged in as MANAGER so you see no Learning Journeys</p>;
     default:
       // temporary addition for development, should not render anything without permission
-      return <StaffLearningJourney staffId={currentUserId} />;
+      return <p>Please log in to view any Learning Journeys</p>;
+
   }
 }
 

app/src/components/learningJourney/staff/StaffLearningJourney.jsx

@@ -65,7 +65,7 @@ function StaffLearningJourney({ staffId }) {
 
   return (
     <div className='flex flex-col container mt-10 p-10 mx-auto w-full w-full bg-white rounded-lg shadow-lg'>
-      <h1 className='text-3xl text-left font-bold'>My Learning Journeys</h1>
+      <h1 className='mb-5 text-3xl text-left font-bold'>My Learning Journeys</h1>
       <div className='flex grid lg:grid-cols-2 2xl:grid-cols-3 gap-4'>
         {learningJourneys.length === 0 ? "No Learning Journeys Found" : renderLearningJourneys}
       </div>

app/src/components/skill/hr/DeactivateSkillModal.jsx

@@ -39,7 +39,7 @@ function DeactivateSkillModal({
 
   return (
     <div
-      className='fixed top-0 left-0 h-screen w-screen scale-100 backdrop-grayscale backdrop-blur-xl z-8'
+      className='fixed top-0 left-0 h-screen w-screen scale-100 backdrop-grayscale backdrop-blur-xl z-50'
       aria-hidden='true'
       onClick={handleDeactivateSkillModalClose}
     >

app/src/components/skill/hr/HRSkill.jsx

@@ -6,6 +6,8 @@ import { StarIcon } from "@heroicons/react/20/solid";
 import SkillTile from "../SkillTile";
 
 function HRSkill() {
+  const history = useHistory();
+
   const [skills, setSkills] = useState([]);
   const [isDeactivateSkillButtonClick, setDeactivateSkillButtonClick] = useState(false);
   const [isDeactivateSkillModalOpen, setDeactivateSkillModalOpen] = useState(false);
@@ -46,7 +48,6 @@ function HRSkill() {
     getAllSkills();
   }, [isDeactivateSkillButtonClick === true]);
 
-  const history = useHistory();
 
   const redirectToCreateSkillPage = () => {
     history.push("/create-skill");

app/src/components/skill/hr/StopDeactivateSkillModal.jsx

@@ -16,7 +16,7 @@ function StopDeactivateSkillModal({ isStopDeactivateSkillModalOpen, onStopDeacti
 
   return (
     <div
-      className='fixed top-0 left-0 h-screen w-screen scale-100 backdrop-grayscale backdrop-blur-xl z-8'
+      className='fixed top-0 left-0 h-screen w-screen scale-100 backdrop-grayscale backdrop-blur-xl z-50'
       aria-hidden='true'
       onClick={handleStopDeactivateSkillModalClose}
     >

app/src/components/skill/index.jsx

@@ -10,20 +10,21 @@ function Skill() {
     case "HR":
       return (
         <>
-          <SearchBar title="Search Skills" searchBarPlaceholder="Search by name..." />
+          <SearchBar title='Search Skills' searchBarPlaceholder='Search by name...' />
           <HRSkill />
         </>
       );
     case "MANAGER":
       return <p>You are logged in as MANAGER so you see no skills</p>;
     case "STAFF":
-    default:
       return (
         <>
-          <SearchBar title="Search Skills" searchBarPlaceholder="Search by name..." />
+          <SearchBar title='Search Skills' searchBarPlaceholder='Search by name...' />
           <StaffSkill />
         </>
       );
+    default:
+      return <p>Please log in to view Skills</p>;
   }
 }