partialy completed techinical interview

package-lock.json

@@ -24,6 +24,7 @@
         "@types/react-dom": "^16.9.10",
         "@types/react-router": "^5.1.11",
         "@types/react-router-dom": "^5.1.7",
+        "date-fns": "^2.28.0",
         "ionicons": "^5.4.0",
         "node": "^17.7.2",
         "node-sass": "^7.0.1",
@@ -6225,6 +6226,18 @@
         "node": ">=10"
       }
     },
+    "node_modules/date-fns": {
+      "version": "2.28.0",
+      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.28.0.tgz",
+      "integrity": "sha512-8d35hViGYx/QH0icHYCeLmsLmMUheMmTyV9Fcm6gvNwdw31yXXH+O85sOBJ+OLnLQMKZowvpKb6FgMIQjcpvQw==",
+      "engines": {
+        "node": ">=0.11"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/date-fns"
+      }
+    },
     "node_modules/debug": {
       "version": "4.3.4",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
@@ -21168,6 +21181,11 @@
         "whatwg-url": "^8.0.0"
       }
     },
+    "date-fns": {
+      "version": "2.28.0",
+      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.28.0.tgz",
+      "integrity": "sha512-8d35hViGYx/QH0icHYCeLmsLmMUheMmTyV9Fcm6gvNwdw31yXXH+O85sOBJ+OLnLQMKZowvpKb6FgMIQjcpvQw=="
+    },
     "debug": {
       "version": "4.3.4",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",

package.json

@@ -19,6 +19,7 @@
     "@types/react-dom": "^16.9.10",
     "@types/react-router": "^5.1.11",
     "@types/react-router-dom": "^5.1.7",
+    "date-fns": "^2.28.0",
     "ionicons": "^5.4.0",
     "node": "^17.7.2",
     "node-sass": "^7.0.1",

src/components/timeSlot/TimeSlot.module.scss

@@ -78,7 +78,7 @@
     text-decoration: none;
 
     ion-button {
-         width: 90%;
+        width: 90%;
         margin: 0 auto;
         margin-top: 18vh;
         margin-bottom: 0;

src/components/timeSlot/TimeSlot.tsx

@@ -3,16 +3,20 @@ import styles from "./TimeSlot.module.scss";
 import { chevronBack, key } from 'ionicons/icons'
 import { Link } from "react-router-dom";
 import { useState } from "react";
+import { addDays } from "date-fns";
+
 
 interface dates {
     date: string;
     day: string;
 }
 
+
 interface OwnProps {
     month: string;
     dates: dates[];
     timeSlots: string[];
+    getDate: (date: string) => void;
 }
 
 const TimeSlot: React.FC<OwnProps> = (props) => {
@@ -20,7 +24,16 @@ const TimeSlot: React.FC<OwnProps> = (props) => {
     const [highlightedDate, setHighlightedDate] = useState<dates>();
     const [highlightedTime, setHighlightedTime] = useState<string>("");
 
+    const daysMap = new Map([[0, "Sun"], [1, "Mon"], [2, "Tue"], [3, "Wed"], [4, "Thu"], [5, "Fri"], [6, "Sat"]]);
+
     const dates = props.dates.map((date, key) => {
+        const currentDate = new Date();
+        let day = addDays(currentDate, key + 1)
+        // if (daysMap.get(day) === "Thu") {  // sat
+        //     day = addDays(currentDate, key + 3).getDay();
+        // } else if (daysMap.get(day) === "Fri") {
+        //     day = addDays(currentDate, key + 3).getDay();
+        // }
         return (
             <div
                 className={styles.date + " " + (date === highlightedDate ? styles.active : "")}
@@ -28,10 +41,10 @@ const TimeSlot: React.FC<OwnProps> = (props) => {
                 onClick={() => setHighlightedDate(date)}>
 
                 <div className={styles.day}>
-                    {date.day}
+                    {daysMap.get(day.getDay())}
                 </div>
                 <div>
-                    {date.date}
+                    {day.getDate()}
                 </div>
 
             </div>
@@ -49,10 +62,6 @@ const TimeSlot: React.FC<OwnProps> = (props) => {
         );
     });
 
-    if (highlightedDate && highlightedTime !== "") {
-
-    }
-
     return (
         <IonPage>
             <header className={styles.header}>
@@ -73,10 +82,10 @@ const TimeSlot: React.FC<OwnProps> = (props) => {
                     {timeSlots}
                 </div>
 
-                <Link to="/"
+                <div onClick={(highlightedDate && highlightedTime !== "") ? () => props.getDate("test") : undefined}
                     className={styles.timeSlotButton + " " + (highlightedDate && highlightedTime !== "" ? styles.buttonActive : "")}>
-                    <IonButton shape="round" expand='block'>Confirm slot</IonButton>
-                </Link>
+                    <IonButton shape="round" expand='block' >Confirm slot</IonButton>
+                </div>
             </IonContent>
 
         </IonPage>

src/pages/technicalInterview/TechnicalInterview.tsx

@@ -37,7 +37,13 @@ const TechnicalInterview: React.FC = () => {
             date: "03",
             day: "Wed"
         },
-    ]
+    ];
+
+    const getDate = (date: string) => {
+        console.log(date);
+        setTimeSlot(false);
+        setDate(true);
+    }
 
     return (
         <IonPage>
@@ -94,7 +100,8 @@ const TechnicalInterview: React.FC = () => {
                     <TimeSlot
                         month="April -May"
                         dates={dates}
-                        timeSlots={timeSlots} />
+                        timeSlots={timeSlots}
+                        getDate={getDate} />
                 }
 
             </IonContent>