Merge pull request #515 from infinitycoders05/feature/interview-update

fix: additional fixes

Author: maxceem

src/components/BaseModal/index.jsx

@@ -22,7 +22,7 @@ const modalStyle = {
   maxWidth: "640px",
   width: "100%",
   margin: 0,
-  "overflow-x": "hidden",
+  overflowX: "hidden",
 };
 
 const containerStyle = {

src/components/TimezoneSelector/index.jsx

@@ -1,18 +1,33 @@
-import React from "react";
+import React, { useEffect, useState } from "react";
 import PT from "prop-types";
 import { TIME_ZONES } from "constants";
 import moment from "moment";
 import "./styles.module.scss";
 
 const TimezoneSelector = ({ value, onChange }) => {
+  const browserTimezone = moment.tz.guess(true);
+  const [timezoneList, setTimezoneList] = useState([]);
+
+  useEffect(() => {
+    const isBrowserTimezoneAvailable = TIME_ZONES.findIndex(item => item === browserTimezone);
+
+    if (isBrowserTimezoneAvailable === -1) {
+      const finalList = [...TIME_ZONES, browserTimezone].sort();
+      setTimezoneList(finalList);
+      onChange(browserTimezone);
+    } else {
+      setTimezoneList(TIME_ZONES);
+    }
+  }, [browserTimezone]);
+
   return (
     <div styleName="timezone-selector">
       <div styleName="label">Interview Timezone</div>
-      <select styleName="select" onChange={onChange}>
-        {TIME_ZONES.map((zone) => (
+      <select styleName="select" onChange={onChange} value={value} defaultValue={value}>
+        {timezoneList.map((zone) => (
           <option
+            key={zone}
             value={zone}
-            selected={zone === value}
           >{`${zone} - UTC${moment().tz(zone).format("Z")}`}</option>
         ))}
       </select>

src/routes/CreateNewTeam/components/BaseCreateModal/index.jsx

@@ -11,7 +11,7 @@ const modalStyle = {
   padding: "72px 0 60px 0",
   width: "100%",
   margin: 0,
-  "overflow-x": "hidden",
+  overflowX: "hidden",
 };
 
 const containerStyle = {

src/routes/PositionDetails/components/InterviewPopup/ManageAvailability/index.jsx

@@ -124,8 +124,10 @@ const ManageAvailability = ({ scheduleDetails, onContinue }) => {
   };
 
   // Set time zone
-  const onChangeTimezone = (value) => {
-    setTimezone(value);
+  const onChangeTimezone = (event) => {
+    if (event && event.target) {
+      setTimezone(event.target.value);
+    }
   };
 
   /**
@@ -182,10 +184,11 @@ const ManageAvailability = ({ scheduleDetails, onContinue }) => {
           ];
 
           return (
-            <div styleName="slot">
+            <div styleName="slot" key={slotIndex}>
               <div styleName="days">
                 {days.map((day, index) => (
                   <div
+                    key={day}
                     onClick={() => onDayChanged(daysMapped[index], slotIndex)}
                     styleName={cn("day", {
                       "selected-day": slot.days.indexOf(daysMapped[index]) > -1,
@@ -264,18 +267,16 @@ const ManageAvailability = ({ scheduleDetails, onContinue }) => {
 };
 
 ManageAvailability.propTypes = {
-  scheduleDetails: PT.arrayOf(
-    PT.shape({
-      timezone: PT.string,
-      slots: PT.arrayOf(
-        PT.shape({
-          days: PT.array,
-          end: PT.string,
-          start: PT.string,
-        })
-      ),
-    })
-  ),
+  scheduleDetails: PT.shape({
+    timezone: PT.string,
+    slots: PT.arrayOf(
+      PT.shape({
+        days: PT.array,
+        end: PT.string,
+        start: PT.string,
+      })
+    ),
+  }),
   onContinue: PT.func,
 };
 

src/routes/PositionDetails/components/InterviewPopup/index.jsx

@@ -2,6 +2,7 @@ import React, { useEffect, useState } from "react";
 import { useSelector } from "react-redux";
 import cn from "classnames";
 import PT from "prop-types";
+import moment from "moment";
 import Spinner from "components/CenteredSpinner";
 import { toastr } from "react-redux-toastr";
 
@@ -273,7 +274,7 @@ const InterviewPopup = ({
               "show-spinner": isLoading,
             })}
           >
-            <Spinner stype="Oval" width="80" height="80" />
+            <Spinner stype="Oval" width={80} height={80} />
           </div>
           <div
             styleName={cn("component-wrapper", {
@@ -289,7 +290,7 @@ const InterviewPopup = ({
 };
 
 InterviewPopup.propTypes = {
-  candidate: PT.object.isRequired,
+  candidate: PT.object,
   open: PT.bool,
   initialStage: PT.string,
   onClose: PT.func.isRequired,

src/routes/PositionDetails/components/StepsIndicator/index.jsx

@@ -35,7 +35,7 @@ const StepsIndicator = ({ steps, currentStep }) => {
           const isCompleted = index <= currentStepIndex;
 
           return (
-            <>
+            <div key={step.id}>
               <div styleName="outer-dot" style={styles} />
               <div
                 styleName={cn("dot", { "dot-completed": isCompleted })}
@@ -47,7 +47,7 @@ const StepsIndicator = ({ steps, currentStep }) => {
               >
                 {step.label}
               </div>
-            </>
+            </div>
           );
         })}
       </div>