Merge branch 'main' into backend

WomenPlusPlus · Oct 30, 2023 · 9d5ff1d · 9d5ff1d
2 parents fd8e732 + 5a738d2
commit 9d5ff1d
Show file tree

Hide file tree

Showing 5 changed files with 69 additions and 54 deletions.
diff --git a/README.md b/README.md
@@ -278,29 +278,40 @@ In case a candidate attempts to access a part of the app that is not permitted f
 
 This flow ensures that candidates can manage their profiles, explore job opportunities, and adhere to role-based restrictions for a secure and efficient user experience.
 
-## UI/UX
+# UI/UX
+
 
 ### Overview
 
 This Figma Prototype is designed to showcase the flows that have been designed. You will see the high fidelity mockups, the primary functions of the flow, and future flows for implementation.
 
+
 ### How to Use
 
 1. **Access the Prototype**:
+
 You can interact with the prototype at the following link: [Figma](https://www.figma.com/proto/qzRo0T1FIRIp2FkBZtXKey/SHIFT-UI?page-id=0%3A1&type=design&node-id=65-514&viewport=817%2C-4082%2C0.16&t=vVdNABqel4mhStHB-1&scaling=min-zoom&starting-point-node-id=65%3A514&show-proto-sidebar=1&mode=design)
-
-2. **Navigate Through the Prototype**:
-You have a left bar and a top bar.
-1. The left bar will help you to move through each designed flow. They are organized by:
+
+3. **Navigate Through the Prototype**:
+
+You have a left bar and a top bar. 
+The left bar will help you to move through each designed flow. They are organized by:
 
 - A. Login
 - B. Company
 - C. Candidate
 - D. Association
 
-2. The top bar gives you the option of how to preview the screen. Please go to Options > Fit width.
-3. To go to the next flow, select the next title in the left bar.
-4. If you want to go back again and restart the whole flow, press “R”.
+2.1 The top bar gives you the option of how to preview the screen. Please go to Options > Fit width.
+
+2.2 To go to the next flow, select the next title in the left bar.
+
+2.3 If you want to go back again and restart the whole flow, press “R”.
+
+3. **Feedback and Comments**:
+- You must be logged in to Figma to comment. 
+- By typing or pressing “C” you can comment on anything you want to highlight or give us feedback. 
+- The comments will remain in the file unless you click "Resolve" in the right bar that appears after you add a comment.
 
 3. **Feedback and Comments**:
 

diff --git a/frontend/src/app/(site)/company/candidates/[candidateId]/page.tsx b/frontend/src/app/(site)/company/candidates/[candidateId]/page.tsx
@@ -1,14 +1,13 @@
 "use client";
-import Link from "@mui/material/Link";
 import Button from "@mui/material/Button";
 import Grid from "@mui/material/Grid";
 import ArrowBackIcon from "@mui/icons-material/ArrowBack";
-import Typography from "@mui/material/Typography";
-import { useContext } from "react";
+import { FormEvent, useContext } from "react";
 import { SignInProviderContext } from "@/components/providers/SignInProvider";
 
 import ProfilePreview from "@/components/site/candidateProfile/profileView";
 import Notes from "@/components/site/companyNotes/Notes";
+import { useRouter } from "next/navigation";
 
 type Params = {
   params: {
@@ -21,22 +20,26 @@ type Params = {
 export default function UserProfilePage({ params: { candidateId } }: Params) {
   const signInContext = useContext(SignInProviderContext);
   const companyId = signInContext.auth?.user?.id || 1;
-
+  const router = useRouter();
+
+  const handleGoBackClick = (event: FormEvent<HTMLButtonElement>) => {
+    event.preventDefault();
+    router.replace(`/company/candidates`);
+  };
 
   return (
     <>
-      <Grid container sx={{ mb: 4, mt:0 }}>
+      <Grid container sx={{ mb: 4, mt: 0 }}>
         <Grid item md={6}>
           {" "}
-          <Link href="/company/candidates/">
-            <Button
-              startIcon={<ArrowBackIcon />}
-              variant="outlined"
-              sx={{ textTransform: "none" }}
-            >
-              Go back
-            </Button>
-          </Link>
+          <Button
+            onClick={(event) => handleGoBackClick(event)}
+            startIcon={<ArrowBackIcon />}
+            variant="outlined"
+            sx={{ textTransform: "none" }}
+          >
+            Go back
+          </Button>
         </Grid>
         <Grid item md={6} sx={{ textAlign: "right" }}></Grid>
       </Grid>

diff --git a/frontend/src/app/(site)/company/candidates/candidateCard.tsx b/frontend/src/app/(site)/company/candidates/candidateCard.tsx
@@ -7,25 +7,33 @@ import ChatBubbleOutlineIcon from "@mui/icons-material/ChatBubbleOutline";
 import FavoriteBorderIcon from "@mui/icons-material/FavoriteBorder";
 import Button from "@mui/material/Button";
 import Card from "@mui/material/Card";
-import React from "react";
+import React, { FormEvent } from "react";
 import Grid from "@mui/material/Grid";
-import Link from "@mui/material/Link";
 import { CandidateForJobList } from "@/app/(site)/company/candidates/types";
 import { getMatchingColor } from "@/components/site/getMatchingColor";
+import { useRouter } from "next/navigation";
 
 interface CandidateProps {
   candidate: CandidateForJobList;
 }
 
-const capitalizeWords = (str: string) => {
-  return str
-    .split(" ")
-    .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
-    .join(" ");
-};
 export const CandidateCard: React.FC<CandidateProps> = ({
   candidate,
 }: CandidateProps) => {
+  const router = useRouter();
+  const handleViewCandidateProfile = (
+    event: FormEvent<HTMLButtonElement>,
+    candidateId: string,
+  ) => {
+    event.preventDefault();
+    router.replace(`/company/candidates/${candidateId}/`);
+  };
+  const capitalizeWords = (str: string) => {
+    return str
+      .split(" ")
+      .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
+      .join(" ");
+  };
   return (
     <Grid item xs={12} sm={6} md={4} lg={4}>
       <Card
@@ -106,7 +114,7 @@ export const CandidateCard: React.FC<CandidateProps> = ({
               lineHeight: "20px",
             }}
           >
-            Current position
+            Desired position
           </Typography>
         </CardContent>
         <CardContent
@@ -236,16 +244,15 @@ export const CandidateCard: React.FC<CandidateProps> = ({
               <FavoriteBorderIcon />
             </IconButton>
           </div>
-          <Link href={`/company/candidates/${candidate.id}/`}>
-            <Button
-              type="submit"
-              variant="contained"
-              size="large"
-              sx={{ textTransform: "none", borderRadius: "100px" }}
-            >
-              View profile
-            </Button>
-          </Link>
+          <Button
+            type="submit"
+            onClick={(event) => handleViewCandidateProfile(event, candidate.id)}
+            variant="contained"
+            size="large"
+            sx={{ textTransform: "none", borderRadius: "100px" }}
+          >
+            View profile
+          </Button>
         </CardContent>
       </Card>
     </Grid>

diff --git a/frontend/src/app/(site)/company/jobs/jobPreview.tsx b/frontend/src/app/(site)/company/jobs/jobPreview.tsx
@@ -260,7 +260,8 @@ export const JobPreview: React.FC<JobPreviewInterface> = ({
                     marginLeft: 1,
                   }}
                 >
-                  Start date: 08/01/2024
+                  Start date:{" "}
+                  {new Date(jobPost.last_day_to_apply).toLocaleDateString()}
                 </Typography>
               </Box>
             </CardContent>

diff --git a/frontend/src/components/site/candidateProfile/profileView.tsx b/frontend/src/components/site/candidateProfile/profileView.tsx
@@ -195,17 +195,8 @@ export default function ProfilePreview({ candidateId = 0, matchPercent = 90 }) {
 
   if (queryCandidate.isLoading) {
     return (
-      <Container sx={{ my: 2 }}>
-        <Typography variant="h5" component="h1">
-          Profile Loading <CircularProgress />
-        </Typography>
-
-        {/* <Skeleton
-          animation="wave"
-          variant="rounded"
-          sx={{ bgcolor: "white", width: "100%", marginTop: "20px" }}
-          height={20}
-        /> */}
+      <Container sx={{ my: 2, textAlign: "center" }}>
+        <CircularProgress />
       </Container>
     );
   }
@@ -424,7 +415,9 @@ export default function ProfilePreview({ candidateId = 0, matchPercent = 90 }) {
             <Typography variant="h6" sx={{ pb: 1 }}>
               SKILLS
             </Typography>
-            <Box sx={{ mb: 1 }}><SkillsChips skills={missingDetails.skills} /></Box>
+            <Box sx={{ mb: 1 }}>
+              <SkillsChips skills={missingDetails.skills} />
+            </Box>
           </Box>
           <Box sx={{ py: 0, px: 1 }}>
             <Typography variant="h6" sx={{ pb: 1 }}>