Fix colors for FormSelect, add typed props

ReDI-School · Mar 6, 2023 · 3d4ab05 · 3d4ab05
1 parent 5fadd46
commit 3d4ab05
Show file tree

Hide file tree

Showing 20 changed files with 52 additions and 44 deletions.
diff --git a/apps/redi-connect/src/components/organisms/DeclineMentorshipButton.tsx b/apps/redi-connect/src/components/organisms/DeclineMentorshipButton.tsx
@@ -97,7 +97,7 @@ const DeclineMentorshipButton = ({
               name="ifDeclinedByMentor_chosenReasonForDecline"
               label=""
               items={formDeclineOptions}
-              {...formik}
+              formik={formik}
             />
             {formik.values.ifDeclinedByMentor_chosenReasonForDecline ===
             'other' ? (

diff --git a/apps/redi-connect/src/components/organisms/EditableEducation.tsx b/apps/redi-connect/src/components/organisms/EditableEducation.tsx
@@ -72,7 +72,7 @@ const EditableEducation = ({ profile, profileSaveStart }: any) => {
         name="mentee_highestEducationLevel"
         placeholder="Education Level"
         items={formEducationLevels}
-        {...formik}
+        formik={formik}
       />
     </Editable>
   )

diff --git a/apps/redi-connect/src/components/organisms/EditableLanguages.tsx b/apps/redi-connect/src/components/organisms/EditableLanguages.tsx
@@ -60,7 +60,7 @@ const EditableLanguages = ({ profile, profileSaveStart }: any) => {
         items={formLanguages}
         multiselect
         placeholder="Start typing and select languages"
-        {...formik}
+        formik={formik}
       />
     </Editable>
   )

diff --git a/apps/redi-connect/src/components/organisms/EditableMenteeCount.tsx b/apps/redi-connect/src/components/organisms/EditableMenteeCount.tsx
@@ -91,7 +91,7 @@ const EditableMenteeCount = ({ profile, profileSaveStart }: any) => {
         name="menteeCountCapacity"
         placeholder="Mentee count"
         items={formMenteeCountCapacityOptions}
-        {...formik}
+        formik={formik}
       />
       <Checkbox.Form
         name="optOutOfMenteesFromOtherRediLocation"

diff --git a/apps/redi-connect/src/components/organisms/EditableOccupation.tsx b/apps/redi-connect/src/components/organisms/EditableOccupation.tsx
@@ -155,7 +155,7 @@ const EditableOccupation = ({ profile, profileSaveStart }: any) => {
             name="mentee_occupationCategoryId"
             placeholder="Current Occupation"
             items={formMenteeOccupationCategories}
-            {...formik}
+            formik={formik}
           />
           {occupation === 'job' && (
             <>

diff --git a/apps/redi-connect/src/components/organisms/EditablePersonalDetail.tsx b/apps/redi-connect/src/components/organisms/EditablePersonalDetail.tsx
@@ -1,9 +1,7 @@
-import React from 'react'
 import { subYears } from 'date-fns'
 
 import {
   FormDatePicker,
-  FormInput,
   FormSelect,
 } from '@talent-connect/shared-atomic-design-components'
 import { Editable } from '@talent-connect/shared-atomic-design-components'
@@ -68,7 +66,7 @@ const EditablePersonalDetail = ({ profile, profileSaveStart }: any) => {
         name="gender"
         placeholder="Prefer not to answer"
         items={formGenders}
-        {...formik}
+        formik={formik}
       />
 
       <FormDatePicker

diff --git a/apps/redi-connect/src/components/organisms/EditableRediClass.tsx b/apps/redi-connect/src/components/organisms/EditableRediClass.tsx
@@ -61,7 +61,7 @@ const EditableRediClass = ({ profile, profileSaveStart }: any) => {
         label="Which course are you taking at ReDI?"
         name="mentee_currentlyEnrolledInCourse"
         items={formCourses}
-        {...formik}
+        formik={formik}
       />
     </Editable>
   )

diff --git a/apps/redi-connect/src/components/organisms/modules/MSessions.tsx b/apps/redi-connect/src/components/organisms/modules/MSessions.tsx
@@ -163,7 +163,7 @@ const MSessions = ({
                 name="minuteDuration"
                 placeholder="Add the duration of the session"
                 items={formMentoringSessionDurationOptions}
-                {...formik}
+                formik={formik}
               />
             </form>
           </Modal.Body>

diff --git a/apps/redi-connect/src/pages/front/signup/SignUp.tsx b/apps/redi-connect/src/pages/front/signup/SignUp.tsx
@@ -199,7 +199,7 @@ export default function SignUp() {
                 name="mentee_currentlyEnrolledInCourse"
                 placeholder="Choose your ReDI Course"
                 items={formCourses}
-                {...formik}
+                formik={formik}
               />
             )}
 

diff --git a/...di-talent-pool/src/components/organisms/company-profile-editables/EditableJobPostings.tsx b/...di-talent-pool/src/components/organisms/company-profile-editables/EditableJobPostings.tsx
@@ -274,7 +274,7 @@ function ModalForm({
             label="Location (Federal State in Germany)"
             items={federalStatesOptions}
             placeholder="Select federal states"
-            {...formik}
+            formik={formik}
           />
           <Checkbox.Form
             name="isRemotePossible"
@@ -306,7 +306,7 @@ function ModalForm({
             label="Related positions*"
             name="relatesToPositions"
             items={formRelatedPositions}
-            {...formik}
+            formik={formik}
             multiselect
             placeholder="Start typing and select positions"
             closeMenuOnSelect={false}
@@ -315,7 +315,7 @@ function ModalForm({
             label="Ideal technical skills*"
             name="idealTechnicalSkills"
             items={formTopSkills}
-            {...formik}
+            formik={formik}
             multiselect
             placeholder="Start typing and select skills"
             closeMenuOnSelect={false}
@@ -324,7 +324,7 @@ function ModalForm({
             label="Employment type*"
             name="employmentType"
             items={formEmploymentType}
-            {...formik}
+            formik={formik}
           />
           <FormInput
             name="languageRequirements"

diff --git a/...di-talent-pool/src/components/organisms/jobseeker-profile-editables/EditableEducation.tsx b/...di-talent-pool/src/components/organisms/jobseeker-profile-editables/EditableEducation.tsx
@@ -321,7 +321,7 @@ export function JobseekerFormSectionEducation({
                           name={`education[${index}].certificationType`}
                           label="The type of certification*"
                           items={formCertificationTypes}
-                          {...formik}
+                          formik={formik}
                         />
                         <FormInput
                           name={`education[${index}].institutionName`}
@@ -363,7 +363,7 @@ export function JobseekerFormSectionEducation({
                               name={`education[${index}].startDateMonth`}
                               label="Started in month*"
                               items={formMonthsOptions}
-                              {...formik}
+                              formik={formik}
                             />
                           </Columns.Column>
                           <Columns.Column size={6}>
@@ -382,7 +382,7 @@ export function JobseekerFormSectionEducation({
                                 name={`education[${index}].endDateMonth`}
                                 label="Ended in month*"
                                 items={formMonthsOptions}
-                                {...formik}
+                                formik={formik}
                               />
                             </Columns.Column>
                             <Columns.Column size={6}>

diff --git a/...nt-pool/src/components/organisms/jobseeker-profile-editables/EditableImportantDetails.tsx b/...nt-pool/src/components/organisms/jobseeker-profile-editables/EditableImportantDetails.tsx
@@ -310,7 +310,7 @@ export function JobseekerFormSectionImportantDetails({
             label="What kind of employment are you looking for?*"
             name="desiredEmploymentType"
             items={formDesiredEmploymentType}
-            {...formik}
+            formik={formik}
             multiselect
             placeholder="Select desired employment types"
             closeMenuOnSelect={false}
@@ -319,7 +319,7 @@ export function JobseekerFormSectionImportantDetails({
             label="When are you available to start?*"
             name="availability"
             items={formAvailabilityOptions}
-            {...formik}
+            formik={formik}
           />
           {formik.values.availability === 'date' ? (
             <FormDatePicker
@@ -338,7 +338,7 @@ export function JobseekerFormSectionImportantDetails({
             label="What is your immigration status?"
             name="immigrationStatus"
             items={formImmigrationStatusOptions}
-            {...formik}
+            formik={formik}
           />
         </>
       )}

diff --git a/...di-talent-pool/src/components/organisms/jobseeker-profile-editables/EditableLanguages.tsx b/...di-talent-pool/src/components/organisms/jobseeker-profile-editables/EditableLanguages.tsx
@@ -251,13 +251,13 @@ export function JobseekerFormSectionLanguages({
                           name={`workingLanguages[${index}].language`}
                           label="Language*"
                           items={formLanguages}
-                          {...formik}
+                          formik={formik}
                         />
                         <FormSelect
                           name={`workingLanguages[${index}].proficiencyLevelId`}
                           label="Level of proficiency*"
                           items={formLanguageProficiencyLevels}
-                          {...formik}
+                          formik={formik}
                         />
                       </FormDraggableAccordion>
                     </div>

diff --git a/...t-pool/src/components/organisms/jobseeker-profile-editables/EditableNamePhotoLocation.tsx b/...t-pool/src/components/organisms/jobseeker-profile-editables/EditableNamePhotoLocation.tsx
@@ -208,7 +208,7 @@ function ModalForm({
         name="federalState"
         label="Your place of residence (state)*"
         items={federalStatesOptions}
-        {...formik}
+        formik={formik}
       />
       <Checkbox.Form
         name={`willingToRelocate`}

diff --git a/...edi-talent-pool/src/components/organisms/jobseeker-profile-editables/EditableOverview.tsx b/...edi-talent-pool/src/components/organisms/jobseeker-profile-editables/EditableOverview.tsx
@@ -161,7 +161,7 @@ export function JobseekerFormSectionOverview({
         label="Desired position* (pick 1-3)"
         name="desiredPositions"
         items={formDesiredPositions}
-        {...formik}
+        formik={formik}
         multiselect
         placeholder="Start typing and select positions"
         closeMenuOnSelect={false}
@@ -171,7 +171,7 @@ export function JobseekerFormSectionOverview({
           label="Current ReDI course"
           name="currentlyEnrolledInCourse"
           items={formCourses}
-          {...formik}
+          formik={formik}
         />
       )}
       <Button

diff --git a/...l/src/components/organisms/jobseeker-profile-editables/EditableProfessionalExperience.tsx b/...l/src/components/organisms/jobseeker-profile-editables/EditableProfessionalExperience.tsx
@@ -356,7 +356,7 @@ export function JobseekerFormSectionProfessionalExperience({
                               name={`experience[${index}].startDateMonth`}
                               label="Started in month*"
                               items={formMonthsOptions}
-                              {...formik}
+                              formik={formik}
                             />
                           </Columns.Column>
                           <Columns.Column size={6}>
@@ -375,7 +375,7 @@ export function JobseekerFormSectionProfessionalExperience({
                                 name={`experience[${index}].endDateMonth`}
                                 label="Ended in month*"
                                 items={formMonthsOptions}
-                                {...formik}
+                                formik={formik}
                               />
                             </Columns.Column>
                             <Columns.Column size={6}>

diff --git a/...redi-talent-pool/src/components/organisms/jobseeker-profile-editables/EditableSummary.tsx b/...redi-talent-pool/src/components/organisms/jobseeker-profile-editables/EditableSummary.tsx
@@ -186,7 +186,7 @@ export function JobseekerFormSectionSummary({
         label="Your top technical skills (pick 1-5 skills)"
         name="topSkills"
         items={formTopSkills}
-        {...formik}
+        formik={formik}
         multiselect
         placeholder="Start typing and select skills"
         closeMenuOnSelect={false}

diff --git a/apps/redi-talent-pool/src/pages/front/signup/SignUp.tsx b/apps/redi-talent-pool/src/pages/front/signup/SignUp.tsx
@@ -284,7 +284,7 @@ export default function SignUp() {
                 name="rediLocation"
                 placeholder="Choose your ReDI Location"
                 items={formRediLocations}
-                {...formik}
+                formik={formik}
               />
             )}
 
@@ -297,7 +297,7 @@ export default function SignUp() {
                 items={formCourses.filter(
                   (course) => course.location === formik.values.rediLocation
                 )}
-                {...formik}
+                formik={formik}
               />
             )}
 
@@ -326,7 +326,7 @@ export default function SignUp() {
                   name="howDidHearAboutRediKey"
                   placeholder="How did you first hear about ReDI Talent Pool?"
                   items={howDidHearAboutRediOptionsEntries}
-                  {...formik}
+                  formik={formik}
                 />
                 {formik.values.howDidHearAboutRediKey === 'other' ? (
                   <FormInput

diff --git a/libs/shared-atomic-design-components/src/lib/atoms/FormSelect.styles.ts b/libs/shared-atomic-design-components/src/lib/atoms/FormSelect.styles.ts
@@ -25,11 +25,11 @@ export const formSelectStyles = {
   }),
   control: (provided: any, state: any) => ({
     ...provided,
-    borderColor: state.isFocused ? '#ea5b29' : '#a0a0a0',
+    borderColor: state.isFocused ? 'black' : '#A0A0A0',
     minHeight: '48px',
     boxShadow: 'inset 0 2px 6px rgba(178, 180, 181, 0.3)',
     '&:hover': {
-      borderColor: state.isFocused ? '#ea5b29' : '#f6b9a2',
+      borderColor: 'black'
     },
   }),
   multiValue: (provided: any) => ({

diff --git a/libs/shared-atomic-design-components/src/lib/atoms/FormSelect.tsx b/libs/shared-atomic-design-components/src/lib/atoms/FormSelect.tsx
@@ -1,8 +1,8 @@
-import React from 'react'
 import Select, { components } from 'react-select'
 import { Form } from 'react-bulma-components'
 import { Icon } from '../atoms'
 import { get } from 'lodash'
+import { useFormik } from 'formik'
 import { formSelectStyles } from './FormSelect.styles'
 
 export const DropdownIndicator = (props: any) => (
@@ -23,24 +23,34 @@ const MultiValueRemove = (props: any) => (
   </components.MultiValueRemove>
 )
 
-// TODO add typed safe props
-function FormSelect(props: any) {
+interface FormSelectOption {
+  value: string | number
+  label: string
+}
+
+interface FormSelectProps {
+  name: string
+  items?: FormSelectOption[]
+  placeholder?: string
+  label?: string
+  customOnChange?: () => void,
+  multiselect?: boolean,
+  disabled?: boolean,
+  closeMenuOnSelect?: boolean,
+  formik: ReturnType<typeof useFormik>
+}
+
+function FormSelect(props: FormSelectProps) {
   const {
     name,
     items,
     placeholder,
     label,
     customOnChange,
-    values,
-    setFieldTouched,
-    handleBlur,
     multiselect,
-    isSubmitting,
-    setFieldValue,
-    touched,
-    errors,
     disabled,
     closeMenuOnSelect,
+    formik: { values, setFieldTouched, setFieldValue, touched, errors, handleBlur, isSubmitting }
   } = props
 
   const handleOnChangeDefault = (option: any = []) => {