diff --git a/src/api-calls.js b/src/api-calls.js index 01f3934..a7fe581 100644 --- a/src/api-calls.js +++ b/src/api-calls.js @@ -10,10 +10,7 @@ export const getMemberData = async memberId => { const response = await fetch(routes.api.users.getMemberData(memberId)); return response.json(); }; -export const getBasicSystemInfo = async memberId => { - const response = await fetch(routes.api.users.basicSystemInfoUpdate()); - return response.json(); -}; + export const getDropDrownItems = async details => { const response = await fetch(routes.api.users.basicSystemInfoUpdate(details)); return response.json(); diff --git a/src/compoents/CompanyDropDown.jsx b/src/compoents/DropdownCompany.jsx similarity index 95% rename from src/compoents/CompanyDropDown.jsx rename to src/compoents/DropdownCompany.jsx index 575a4a8..bfa51a3 100644 --- a/src/compoents/CompanyDropDown.jsx +++ b/src/compoents/DropdownCompany.jsx @@ -1,6 +1,6 @@ import React, { useState, useEffect, useRef } from 'react'; import { FormControl, FormLabel, TextField, Autocomplete } from '@mui/material'; -import { getBasicSystemInfo } from '../api-calls'; +import { getDropDrownItems } from '../api-calls'; import { createFilterOptions } from '@mui/material/Autocomplete'; const filter = createFilterOptions(); @@ -20,7 +20,7 @@ export default function CompanyDropdownUpdate({ // Fetch the list of companies when the component mounts async function fetchCompanies() { try { - const response = await getBasicSystemInfo(); + const response = await getDropDrownItems('companies'); setCompanies(response.company_list); } catch (error) { console.error('Error fetching companies:', error); diff --git a/src/compoents/DropdownCompanySimple.jsx b/src/compoents/DropdownCompanySimple.jsx new file mode 100644 index 0000000..3e62871 --- /dev/null +++ b/src/compoents/DropdownCompanySimple.jsx @@ -0,0 +1,68 @@ +import React, { useState, useEffect, useRef } from 'react'; +import { FormControl, FormLabel, TextField, Autocomplete } from '@mui/material'; +import { getDropDrownItems } from '../api-calls'; +import { createFilterOptions } from '@mui/material/Autocomplete'; + +const filter = createFilterOptions(); + +export default function DropdownCompanySimple({ + error, answers, setAnswers, isRequired +}) { + const [ companies, setCompanies ] = useState([]); + const [ selectedCompany, setSelectedCompany ] = useState(null); + + useEffect(() => { + const firstCompany = Array.isArray(answers?.company) ? answers?.company[0] : null; + setSelectedCompany(answers.select_company || firstCompany || null); + }, [ answers?.select_company || answers?.company ]); + + useEffect(() => { + // Fetch the list of companies when the component mounts + async function fetchCompanies() { + try { + const response = await getDropDrownItems('companies'); + setCompanies(response.companies); + } catch (error) { + console.error('Error fetching companies:', error); + } + } + + fetchCompanies(); + }, []); + + return ( + + {isRequired && <>*} Company + { + return typeof option === 'object' ? option.company_name : ''; + }} + isOptionEqualToValue={(option, value) => option?.id === value?.id} + renderOption={(props, option) => ( +
  • + {option.company_name} +
    + {option.company_url} +
    • + )} + filterOptions={(options, params) => { + return filter(options, params); + }} + onChange={(event, newValue) => { + setSelectedCompany(newValue); + setAnswers('select_company', newValue); + setAnswers('company', newValue); + setAnswers('company_id', newValue?.id); + }} + renderInput={params => ( + + )} + /> +     + ); +} diff --git a/src/compoents/DropdownCompanyTypes.jsx b/src/compoents/DropdownCompanyTypes.jsx new file mode 100644 index 0000000..da07c8c --- /dev/null +++ b/src/compoents/DropdownCompanyTypes.jsx @@ -0,0 +1,59 @@ +import React, { useState, useEffect } from 'react'; +import { Autocomplete, FormControl, FormLabel, TextField } from '@mui/material'; +import { getDropDrownItems } from '../api-calls'; +import { createFilterOptions } from '@mui/material/Autocomplete'; + +const filter = createFilterOptions(); +export default function DropdownCompanyTypes({ isRequired, setAnswers, formErrors }) { + const [ companyTypes, setCompanyTypes ] = useState([]); + + useEffect(() => { + // Fetch the list of companies when the component mounts + async function fetchData() { + try { + const response = await getDropDrownItems('company_types'); + setCompanyTypes(response.company_types); + } catch (error) { + console.error('Error fetching company types:', error); + } + } + + fetchData(); + }, []); + + return ( + ( +
  • + {option.name} +
    • + )} + getOptionLabel={option => { + return option.name; + }} + filterOptions={(options, params) => { + const filtered = filter(options, params); + + const { inputValue } = params; + // Suggest the creation of a new value + const isExisting = options.some(option => inputValue === option.name); + if (inputValue !== '' && !isExisting) { + filtered.push({ + inputValue, + label: `Add "${inputValue}"`, + }); + } + + return filtered; + }} + onChange={(event, value) => setAnswers('company_types', value)} + renderInput={params => } + /> + ); +} diff --git a/src/compoents/CompanyDropDownUpdate.jsx b/src/compoents/DropdownCompanyUpdate.jsx similarity index 82% rename from src/compoents/CompanyDropDownUpdate.jsx rename to src/compoents/DropdownCompanyUpdate.jsx index bdf5f8f..f290f58 100644 --- a/src/compoents/CompanyDropDownUpdate.jsx +++ b/src/compoents/DropdownCompanyUpdate.jsx @@ -1,12 +1,12 @@ import React, { useState, useEffect, useRef } from 'react'; import { FormControl, FormLabel, TextField, Autocomplete } from '@mui/material'; -import { getBasicSystemInfo } from '../api-calls'; +import { getDropDrownItems } from '../api-calls'; import { createFilterOptions } from '@mui/material/Autocomplete'; const filter = createFilterOptions(); -export default function CompanyDropdownUpdate({ - error, answers, setAnswers, onCompanySelect +export default function DropdownCompanyUpdate({ + error, answers, setAnswers, isRequired, onCompanySelect }) { const [ companies, setCompanies ] = useState([]); const [ selectedCompany, setSelectedCompany ] = useState(answers.select_company || null); @@ -19,7 +19,7 @@ export default function CompanyDropdownUpdate({ // Fetch the list of companies when the component mounts async function fetchCompanies() { try { - const response = await getBasicSystemInfo(); + const response = await getDropDrownItems('companies'); setCompanies(response.company_list); } catch (error) { console.error('Error fetching companies:', error); @@ -33,7 +33,6 @@ export default function CompanyDropdownUpdate({ * Company } + renderInput={params => ( + + )} /> ); diff --git a/src/compoents/DepartmentsDropdown.jsx b/src/compoents/DropdownDepartments.jsx similarity index 80% rename from src/compoents/DepartmentsDropdown.jsx rename to src/compoents/DropdownDepartments.jsx index ad82b92..888abf2 100644 --- a/src/compoents/DepartmentsDropdown.jsx +++ b/src/compoents/DropdownDepartments.jsx @@ -1,10 +1,12 @@ import React, { useState, useEffect } from 'react'; import { Autocomplete, FormControl, FormLabel, TextField } from '@mui/material'; -import { getBasicSystemInfo } from '../api-calls'; +import { getDropDrownItems } from '../api-calls'; import { createFilterOptions } from '@mui/material/Autocomplete'; const filter = createFilterOptions(); -export default function DepartmentsDropdown({ isRequired, error, setAnswers }) { +export default function DropdownDepartments({ + isRequired, error, setAnswers = false, handleAutocompleteChange +}) { const [ departments, setDepartments ] = useState([]); const [ selectedDepartment, setSelectedDepartment ] = useState(''); @@ -12,8 +14,8 @@ export default function DepartmentsDropdown({ isRequired, error, setAnswers }) { // Fetch the list of companies when the component mounts async function fetchDepartments() { try { - const response = await getBasicSystemInfo(); - setDepartments(response.job_department); + const response = await getDropDrownItems('job_departments'); + setDepartments(response.job_departments); } catch (error) { console.error('Error fetching departments:', error); } @@ -67,10 +69,14 @@ export default function DepartmentsDropdown({ isRequired, error, setAnswers }) { // value={selectedSkill} onChange={(e, newValue) => { setSelectedDepartment(newValue); - setAnswers(prevState => ({ - ...prevState, - department: newValue, - })); + if (handleAutocompleteChange) { + handleAutocompleteChange('job_department', newValue); + } else { + setAnswers(prevState => ({ + ...prevState, + department: newValue, + })); + } }} renderOption={(props, option) =>
  • {option.name}
    • } renderInput={params => } diff --git a/src/compoents/DropdownDepartmentsSimple.jsx b/src/compoents/DropdownDepartmentsSimple.jsx new file mode 100644 index 0000000..8a8d176 --- /dev/null +++ b/src/compoents/DropdownDepartmentsSimple.jsx @@ -0,0 +1,77 @@ +import React, { useState, useEffect } from 'react'; +import { Autocomplete, FormControl, FormLabel, TextField } from '@mui/material'; +import { getDropDrownItems } from '../api-calls'; +import { createFilterOptions } from '@mui/material/Autocomplete'; + +const filter = createFilterOptions(); +export default function DropdownDepartments({ + isRequired, error, setAnswers, handleAutocompleteChange +}) { + const [ departments, setDepartments ] = useState([]); + const [ selectedDepartment, setSelectedDepartment ] = useState(''); + + useEffect(() => { + // Fetch the list of companies when the component mounts + async function fetchDepartments() { + try { + const response = await getDropDrownItems('job_departments'); + setDepartments(response.job_departments); + } catch (error) { + console.error('Error fetching departments:', error); + } + } + + fetchDepartments(); + }, []); + + return ( + (option.inputValue && value.inputValue && option.inputValue === value.inputValue) || option === value} + getOptionLabel={option => { + if (typeof option === 'string') { + return option; + } + // Check for the special case where the option has an inputValue property + if (option.inputValue) return option.inputValue; + + // Existing logic + return option.name; + }} + filterOptions={(options, params) => { + const filtered = filter(options, params); + + const { inputValue } = params; + // Suggest the creation of a new value + const isExisting = options.some(option => inputValue === option.name); + if (inputValue !== '' && !isExisting) { + filtered.push({ + inputValue, + name: `Add "${inputValue}"`, + }); + } + + return filtered; + }} + // value={selectedSkill} + onChange={(e, newValue) => { + setSelectedDepartment(newValue); + if (handleAutocompleteChange) { + handleAutocompleteChange('job_department', newValue); + } else { + setAnswers(prevState => ({ + ...prevState, + department: newValue, + })); + } + }} + renderOption={(props, option) =>
  • {option.name}
    • } + renderInput={params => } + /> + ); +} diff --git a/src/compoents/DropdownEthic.jsx b/src/compoents/DropdownEthic.jsx new file mode 100644 index 0000000..a5466c4 --- /dev/null +++ b/src/compoents/DropdownEthic.jsx @@ -0,0 +1,61 @@ +import React, { useState, useEffect } from 'react'; +import { Autocomplete, TextField } from '@mui/material'; +import { getDropDrownItems } from '../api-calls'; +import { createFilterOptions } from '@mui/material/Autocomplete'; + +const filter = createFilterOptions(); +export default function EthicDropdown({ + isRequired, setAnswers, formErrors, handleChange +}) { + const [ ethic, setEthic ] = useState([]); + + useEffect(() => { + // Fetch the list of companies when the component mounts + async function fetchData() { + try { + const response = await getDropDrownItems('ethic'); + setEthic(response.ethic); + } catch (error) { + console.error('Error fetching ethic:', error); + } + } + + fetchData(); + }, []); + + return ( + ( +
  • + {option.ethnicity} +
    • + )} + getOptionLabel={option => { + return option.ethnicity; + }} + filterOptions={(options, params) => { + const filtered = filter(options, params); + + const { inputValue } = params; + // Suggest the creation of a new value + const isExisting = options.some(option => inputValue === option.ethnicity); + if (inputValue !== '' && !isExisting) { + filtered.push({ + inputValue, + label: `Add "${inputValue}"`, + }); + } + + return filtered; + }} + onChange={(event, value) => setAnswers('identity_ethic', value)} + renderInput={params => } + /> + ); +} diff --git a/src/compoents/ExpericesDropdown.jsx b/src/compoents/DropdownExperices.jsx similarity index 91% rename from src/compoents/ExpericesDropdown.jsx rename to src/compoents/DropdownExperices.jsx index 672b74e..d2137b4 100644 --- a/src/compoents/ExpericesDropdown.jsx +++ b/src/compoents/DropdownExperices.jsx @@ -1,6 +1,6 @@ import React, { useState, useEffect } from 'react'; import { Autocomplete, FormControl, FormLabel, TextField } from '@mui/material'; -import { getBasicSystemInfo } from '../api-calls'; +import { getDropDrownItems } from '../api-calls'; import { createFilterOptions } from '@mui/material/Autocomplete'; const filter = createFilterOptions(); @@ -12,10 +12,10 @@ export default function ExperiencesDropdown({ isRequired, setAnswers, error }) { // Fetch the list of companies when the component mounts async function fetchExperiences() { try { - const response = await getBasicSystemInfo(); - setExperiences(response.career_journey_choices); + const response = await getDropDrownItems('years_of_experience'); + setExperiences(response.years_of_experience); } catch (error) { - console.error('Error fetching skills:', error); + console.error('Error fetching years_of_experience:', error); } } diff --git a/src/compoents/DropdownGender.jsx b/src/compoents/DropdownGender.jsx new file mode 100644 index 0000000..3f41f22 --- /dev/null +++ b/src/compoents/DropdownGender.jsx @@ -0,0 +1,61 @@ +import React, { useState, useEffect } from 'react'; +import { Autocomplete, TextField } from '@mui/material'; +import { getDropDrownItems } from '../api-calls'; +import { createFilterOptions } from '@mui/material/Autocomplete'; + +const filter = createFilterOptions(); +export default function GenderDropdown({ + isRequired, setAnswers, formErrors, handleChange +}) { + const [ gender, setGender ] = useState([]); + + useEffect(() => { + // Fetch the list of companies when the component mounts + async function fetchData() { + try { + const response = await getDropDrownItems('gender'); + setGender(response.gender); + } catch (error) { + console.error('Error fetching gender:', error); + } + } + + fetchData(); + }, []); + + return ( + ( +
  • + {option.gender} +
    • + )} + getOptionLabel={option => { + return option.gender; + }} + filterOptions={(options, params) => { + const filtered = filter(options, params); + + const { inputValue } = params; + // Suggest the creation of a new value + const isExisting = options.some(option => inputValue === option.gender); + if (inputValue !== '' && !isExisting) { + filtered.push({ + inputValue, + label: `Add "${inputValue}"`, + }); + } + + return filtered; + }} + onChange={(event, value) => setAnswers('gender_identities', value)} + renderInput={params => } + /> + ); +} diff --git a/src/compoents/DropdownIndustries.jsx b/src/compoents/DropdownIndustries.jsx new file mode 100644 index 0000000..5252dff --- /dev/null +++ b/src/compoents/DropdownIndustries.jsx @@ -0,0 +1,78 @@ +import React, { useState, useEffect } from 'react'; +import { Autocomplete, FormControl, FormLabel, TextField } from '@mui/material'; +import { getDropDrownItems } from '../api-calls'; +import { createFilterOptions } from '@mui/material/Autocomplete'; + +const filter = createFilterOptions(); +export default function DropdownIndustries({ + isRequired, error, setAnswers = false, handleAutocompleteChange +}) { + const [ industries, setIndustries ] = useState([]); + const [ selectedDepartment, setSelectedDepartment ] = useState(''); + + useEffect(() => { + // Fetch the list of companies when the component mounts + async function fetchDepartments() { + try { + const response = await getDropDrownItems('job_industries'); + setIndustries(response.job_industries); + } catch (error) { + console.error('Error fetching industries:', error); + } + } + + fetchDepartments(); + }, []); + + return ( + (option.inputValue && value.inputValue && option.inputValue === value.inputValue) || option === value} + getOptionLabel={option => { + if (typeof option === 'string') { + return option; + } + // Check for the special case where the option has an inputValue property + if (option.inputValue) return option.inputValue; + + // Existing logic + return option.name; + }} + filterOptions={(options, params) => { + const filtered = filter(options, params); + + const { inputValue } = params; + // Suggest the creation of a new value + const isExisting = options.some(option => inputValue === option.name); + if (inputValue !== '' && !isExisting) { + filtered.push({ + inputValue, + name: `Add "${inputValue}"`, + }); + } + + return filtered; + }} + // value={selectedSkill} + onChange={(e, newValue) => { + setSelectedDepartment(newValue); + if (handleAutocompleteChange) { + handleAutocompleteChange('job_department', newValue); + } else { + setAnswers(prevState => ({ + ...prevState, + department: newValue, + })); + } + }} + renderOption={(props, option) =>
  • {option.name}
    • } + renderInput={params => } + /> + ); +} diff --git a/src/compoents/JobRoleDropdown.jsx b/src/compoents/DropdownJobRole.jsx similarity index 96% rename from src/compoents/JobRoleDropdown.jsx rename to src/compoents/DropdownJobRole.jsx index b9c77df..f7a07ba 100644 --- a/src/compoents/JobRoleDropdown.jsx +++ b/src/compoents/DropdownJobRole.jsx @@ -4,7 +4,7 @@ import { getDropDrownItems } from '../api-calls'; import { createFilterOptions } from '@mui/material/Autocomplete'; const filter = createFilterOptions(); -export default function JobRoleDropdown({ isRequired, setAnswers, formErrors }) { +export default function DropdownJobRole({ isRequired, setAnswers, formErrors }) { const [ jobRoles, setJobRoles ] = useState([]); useEffect(() => { diff --git a/src/compoents/PronounsDropdown.jsx b/src/compoents/DropdownPronouns.jsx similarity index 97% rename from src/compoents/PronounsDropdown.jsx rename to src/compoents/DropdownPronouns.jsx index feaf9cf..b6d7036 100644 --- a/src/compoents/PronounsDropdown.jsx +++ b/src/compoents/DropdownPronouns.jsx @@ -4,7 +4,7 @@ import { getDropDrownItems } from '../api-calls'; import { createFilterOptions } from '@mui/material/Autocomplete'; const filter = createFilterOptions(); -export default function PronounsDropdown({ isRequired, setAnswers, formErrors }) { +export default function DropdownPronouns({ isRequired, setAnswers, formErrors }) { const [ pronouns, setPronouns ] = useState([]); useEffect(() => { diff --git a/src/compoents/RolesDropdown.jsx b/src/compoents/DropdownRoles.jsx similarity index 94% rename from src/compoents/RolesDropdown.jsx rename to src/compoents/DropdownRoles.jsx index b9acf92..3b14e62 100644 --- a/src/compoents/RolesDropdown.jsx +++ b/src/compoents/DropdownRoles.jsx @@ -1,10 +1,10 @@ import React, { useState, useEffect } from 'react'; import { Autocomplete, FormControl, FormLabel, TextField } from '@mui/material'; -import { getBasicSystemInfo } from '../api-calls'; +import { getDropDrownItems } from '../api-calls'; import { createFilterOptions } from '@mui/material/Autocomplete'; const filter = createFilterOptions(); -export default function RolesDropdown({ isRequired, error, setAnswers }) { +export default function DropdownRoles({ isRequired, error, setAnswers }) { const [ roles, setRoles ] = useState([]); const [ selectedRoles, setSelectedRoles ] = useState(''); @@ -12,7 +12,7 @@ export default function RolesDropdown({ isRequired, error, setAnswers }) { // Fetch the list of companies when the component mounts async function fetchRoles() { try { - const response = await getBasicSystemInfo(); + const response = await getDropDrownItems('job_roles'); setRoles(response.job_roles); } catch (error) { console.error('Error fetching roles:', error); diff --git a/src/compoents/SalaryDropdown.jsx b/src/compoents/DropdownSalary.jsx similarity index 72% rename from src/compoents/SalaryDropdown.jsx rename to src/compoents/DropdownSalary.jsx index 901c1eb..b4f1912 100644 --- a/src/compoents/SalaryDropdown.jsx +++ b/src/compoents/DropdownSalary.jsx @@ -1,21 +1,21 @@ -import React, {useState, useEffect} from 'react'; -import {Autocomplete, FormControl, FormLabel, TextField} from '@mui/material'; -import {getBasicSystemInfo} from "../api-calls"; -import {createFilterOptions} from "@mui/material/Autocomplete"; +import React, { useState, useEffect } from 'react'; +import { Autocomplete, FormControl, FormLabel, TextField } from '@mui/material'; +import { getDropDrownItems } from '../api-calls'; +import { createFilterOptions } from '@mui/material/Autocomplete'; const filter = createFilterOptions(); -export default function SalaryDropdown({setAnswers, labelName}) { - const [salaries, setSalaries] = useState([]); - const [selectedSalary, setSelectedSalary] = useState(''); +export default function DropdownSalary({ setAnswers, labelName }) { + const [ salaries, setSalaries ] = useState([]); + const [ selectedSalary, setSelectedSalary ] = useState(''); useEffect(() => { // Fetch the list of companies when the component mounts async function fetchSkills() { try { - const response = await getBasicSystemInfo(); + const response = await getDropDrownItems(); setSalaries(response.job_salary_range); } catch (error) { - console.error("Error fetching salaries:", error); + console.error('Error fetching salaries:', error); } } @@ -36,7 +36,7 @@ export default function SalaryDropdown({setAnswers, labelName}) { isOptionEqualToValue={(option, value) => (option.inputValue && value.inputValue && option.inputValue === value.inputValue) || option === value } - getOptionLabel={(option) => { + getOptionLabel={option => { if (typeof option === 'string') { return option; } @@ -49,9 +49,9 @@ export default function SalaryDropdown({setAnswers, labelName}) { filterOptions={(options, params) => { const filtered = filter(options, params); - const {inputValue} = params; + const { inputValue } = params; // Suggest the creation of a new value - const isExisting = options.some((option) => inputValue === option.range); + const isExisting = options.some(option => inputValue === option.range); if (inputValue !== '' && !isExisting) { filtered.push({ inputValue, @@ -64,7 +64,7 @@ export default function SalaryDropdown({setAnswers, labelName}) { // value={selectedSkill} onChange={(e, newValue) => { setSelectedSalary(e.target.value); - if(labelName === 'Min Salary') { + if (labelName === 'Min Salary') { setAnswers(prevState => ({ ...prevState, min_compensation: newValue, @@ -75,11 +75,9 @@ export default function SalaryDropdown({setAnswers, labelName}) { max_compensation: newValue, })); } - - }} - renderOption={(props, option) =>
  • {option.range }
    • } - renderInput={(params) => } + renderOption={(props, option) =>
  • {option.range}
    • } + renderInput={params => } /> ); diff --git a/src/compoents/DropdownSexuality.jsx b/src/compoents/DropdownSexuality.jsx new file mode 100644 index 0000000..1fe17cc --- /dev/null +++ b/src/compoents/DropdownSexuality.jsx @@ -0,0 +1,61 @@ +import React, { useState, useEffect } from 'react'; +import { Autocomplete, TextField } from '@mui/material'; +import { getDropDrownItems } from '../api-calls'; +import { createFilterOptions } from '@mui/material/Autocomplete'; + +const filter = createFilterOptions(); +export default function SexualityDropdown({ + isRequired, setAnswers, formErrors, handleChange +}) { + const [ sexuality, setSexuality ] = useState([]); + + useEffect(() => { + // Fetch the list of companies when the component mounts + async function fetchData() { + try { + const response = await getDropDrownItems('sexuality'); + setSexuality(response.sexuality); + } catch (error) { + console.error('Error fetching sexuality:', error); + } + } + + fetchData(); + }, []); + + return ( + ( +
  • + {option.identity} +
    • + )} + getOptionLabel={option => { + return option.identity; + }} + filterOptions={(options, params) => { + const filtered = filter(options, params); + + const { inputValue } = params; + // Suggest the creation of a new value + const isExisting = options.some(option => inputValue === option.identity); + if (inputValue !== '' && !isExisting) { + filtered.push({ + inputValue, + label: `Add "${inputValue}"`, + }); + } + + return filtered; + }} + onChange={(event, value) => setAnswers('identity_sexuality', value)} + renderInput={params => } + /> + ); +} diff --git a/src/compoents/SkillsDropdown.jsx b/src/compoents/DropdownSkills.jsx similarity index 79% rename from src/compoents/SkillsDropdown.jsx rename to src/compoents/DropdownSkills.jsx index 2ffa3ab..edad5cc 100644 --- a/src/compoents/SkillsDropdown.jsx +++ b/src/compoents/DropdownSkills.jsx @@ -1,10 +1,12 @@ import React, { useState, useEffect } from 'react'; import { Autocomplete, FormControl, FormLabel, TextField } from '@mui/material'; -import { getBasicSystemInfo } from '../api-calls'; +import { getDropDrownItems } from '../api-calls'; import { createFilterOptions } from '@mui/material/Autocomplete'; const filter = createFilterOptions(); -export default function SkillsDropdown({ isRequired, error, setAnswers }) { +export default function DropdownSkills({ + isRequired, error, setAnswers, handleInputChange +}) { const [ skills, setSkills ] = useState([]); const [ selectedSkill, setSelectedSkill ] = useState(''); @@ -12,7 +14,7 @@ export default function SkillsDropdown({ isRequired, error, setAnswers }) { // Fetch the list of companies when the component mounts async function fetchSkills() { try { - const response = await getBasicSystemInfo(); + const response = await getDropDrownItems('job_skills'); setSkills(response.job_skills); } catch (error) { console.error('Error fetching skills:', error); @@ -72,10 +74,18 @@ export default function SkillsDropdown({ isRequired, error, setAnswers }) { // value={selectedSkill} onChange={(e, newValue) => { setSelectedSkill(newValue); - setAnswers(prevState => ({ - ...prevState, - skills: newValue, - })); + if (handleInputChange) { + const valueArray = []; + newValue.map((item, index) => { + valueArray.push(item.name); + }); + handleInputChange('job_skills', newValue); + } else { + setAnswers(prevState => ({ + ...prevState, + skills: newValue, + })); + } }} renderInput={params => } /> diff --git a/src/compoents/DropdownSkillsSimple.jsx b/src/compoents/DropdownSkillsSimple.jsx new file mode 100644 index 0000000..de81703 --- /dev/null +++ b/src/compoents/DropdownSkillsSimple.jsx @@ -0,0 +1,63 @@ +import React, { useState, useEffect } from 'react'; +import { Autocomplete, FormControl, FormLabel, TextField } from '@mui/material'; +import { getDropDrownItems } from '../api-calls'; +import { createFilterOptions } from '@mui/material/Autocomplete'; + +const filter = createFilterOptions(); +export default function DropdownSkillsSimple({ + isRequired, error, setAnswers, formErrors, handleInputChange +}) { + const [ skills, setSkills ] = useState([]); + const [ selectedSkill, setSelectedSkill ] = useState(''); + + useEffect(() => { + // Fetch the list of companies when the component mounts + async function fetchSkills() { + try { + const response = await getDropDrownItems('job_skills'); + setSkills(response.job_skills); + } catch (error) { + console.error('Error fetching skills:', error); + } + } + + fetchSkills(); + }, []); + + return ( + ( +
  • + {option.name} +
    • + )} + getOptionLabel={option => { + return option.name; + }} + filterOptions={(options, params) => { + const filtered = filter(options, params); + + const { inputValue } = params; + // Suggest the creation of a new value + const isExisting = options.some(option => inputValue === option.name); + if (inputValue !== '' && !isExisting) { + filtered.push({ + inputValue, + name: `Add "${inputValue}"`, + }); + } + + return filtered; + }} + // value={selectedSkill} + onChange={(event, newValue) => handleInputChange('job_skills', newValue)} + renderInput={params => } + /> + ); +} diff --git a/src/compoents/DropdownYearsOfExperience.jsx b/src/compoents/DropdownYearsOfExperience.jsx new file mode 100644 index 0000000..e669cff --- /dev/null +++ b/src/compoents/DropdownYearsOfExperience.jsx @@ -0,0 +1,59 @@ +import React, { useState, useEffect } from 'react'; +import { Autocomplete, FormControl, FormLabel, TextField } from '@mui/material'; +import { getDropDrownItems } from '../api-calls'; +import { createFilterOptions } from '@mui/material/Autocomplete'; + +const filter = createFilterOptions(); +export default function YearsOfExperienceDropdown({ isRequired, setAnswers, formErrors }) { + const [ pronouns, setPronouns ] = useState([]); + + useEffect(() => { + // Fetch the list of companies when the component mounts + async function fetchData() { + try { + const response = await getDropDrownItems('years_of_experience'); + setPronouns(response.years_of_experience); + } catch (error) { + console.error('Error fetching years of experience:', error); + } + } + + fetchData(); + }, []); + + return ( + ( +
  • + {option.label} +
    • + )} + getOptionLabel={option => { + return option.label; + }} + filterOptions={(options, params) => { + const filtered = filter(options, params); + + const { inputValue } = params; + // Suggest the creation of a new value + const isExisting = options.some(option => inputValue === option.label); + if (inputValue !== '' && !isExisting) { + filtered.push({ + inputValue, + label: `Add "${inputValue}"`, + }); + } + + return filtered; + }} + onChange={(event, value) => setAnswers('years_of_experience', value)} + renderInput={params => } + /> + ); +} diff --git a/src/compoents/JobDetails.jsx b/src/compoents/JobDetails.jsx index 2f4fbf0..9ee2549 100644 --- a/src/compoents/JobDetails.jsx +++ b/src/compoents/JobDetails.jsx @@ -10,11 +10,11 @@ import {Container, InputAdornment, OutlinedInput, ButtonGroup,} from '@mui/material'; -import SkillsDropdown from './SkillsDropdown'; -import SalaryDropdown from './SalaryDropdown'; -import RolesDropdown from './RolesDropdown'; -import DepartmentsDropdown from './DepartmentsDropdown'; -import ExperiencesDropdown from './ExpericesDropdown'; +import DropdownSkills from './DropdownSkills'; +import DropdownSalary from './DropdownSalary'; +import DropdownRoles from './DropdownRoles'; +import DropdownDepartments from './DropdownDepartments'; +import ExperiencesDropdown from './DropdownExperices'; import { EditorContent, useEditor } from '@tiptap/react'; import StarterKit from '@tiptap/starter-kit'; import Heading from '@tiptap/extension-heading'; @@ -211,10 +211,10 @@ export default function JobForm({ formErrors, answers, setAnswers }) { - + - + - + * Link to Job Application @@ -250,8 +250,8 @@ export default function JobForm({ formErrors, answers, setAnswers }) { onChange={handleChange} /> - - + + - + {/* Pronouns Dropdown */} - + } label="Would you like your pronouns saved on your profile?" @@ -64,7 +66,7 @@ function BasicInfoStep({ * What is the job title that best fits your desired or current position? - + {!!formErrors.job_roles && {formErrors.job_roles}} @@ -98,46 +100,47 @@ function BasicInfoStep({ Please select the company you work with. - - (option.inputValue && value.inputValue && option.inputValue === value.inputValue) || option === value - } - getOptionLabel={option => { - if (typeof option === 'string') { - return option; - } - // Check for the special case where the option has an inputValue property - if (option.inputValue) return option.inputValue; + + {/**/} + {/* (option.inputValue && value.inputValue && option.inputValue === value.inputValue) || option === value*/} + {/* }*/} + {/* getOptionLabel={option => {*/} + {/* if (typeof option === 'string') {*/} + {/* return option;*/} + {/* }*/} + {/* // Check for the special case where the option has an inputValue property*/} + {/* if (option.inputValue) return option.inputValue;*/} - // Existing logic - return option.company_name; - }} - filterOptions={(options, params) => { - const filtered = filter(options, params); + {/* // Existing logic*/} + {/* return option.company_name;*/} + {/* }}*/} + {/* filterOptions={(options, params) => {*/} + {/* const filtered = filter(options, params);*/} - const { inputValue } = params; - // Suggest the creation of a new value - const isExisting = options.some(option => inputValue === option.company_name); - if (inputValue !== '' && !isExisting) { - filtered.push({ - inputValue, - name: `Add "${inputValue}"`, - }); - } + {/* const { inputValue } = params;*/} + {/* // Suggest the creation of a new value*/} + {/* const isExisting = options.some(option => inputValue === option.company_name);*/} + {/* if (inputValue !== '' && !isExisting) {*/} + {/* filtered.push({*/} + {/* inputValue,*/} + {/* name: `Add "${inputValue}"`,*/} + {/* });*/} + {/* }*/} - return filtered; - }} - renderOption={(props, option) =>
  • {option.company_name}
    • } - onChange={(event, value) => handleAutocompleteChange('company_name', value)} - renderInput={params => } - /> + {/* return filtered;*/} + {/* }}*/} + {/* renderOption={(props, option) =>
  • {option.company_name}
    • }*/} + {/* onChange={(event, value) => handleAutocompleteChange('company_name', value)}*/} + {/* renderInput={params => }*/} + {/*/>*/}     )} @@ -152,40 +155,11 @@ function BasicInfoStep({ * How long have you been on your tech journey? - - (option.inputValue && value.inputValue && option.inputValue === value.inputValue) || option === value - } - getOptionLabel={option => { - if (typeof option === 'string') { - return option; - } - // Check for the special case where the option has an inputValue property - if (option.inputValue) return option.inputValue; - - // Existing logic - return option.name; - }} - filterOptions={(options, params) => { - const filtered = filter(options, params); - - return filtered; - }} - renderOption={(props, option) =>
  • {option.pronouns || option.name}
    • } - onChange={(event, value) => { - // Update the value to be the index + 1 - value = value.map((item, index) => index + 1); - handleAutocompleteChange('tech_journey', value); - }} - renderInput={params => } + {!!formErrors.tech_journey && {formErrors.tech_journey}}     diff --git a/src/compoents/onboarding/IdentityQuestionsStep.jsx b/src/compoents/onboarding/IdentityQuestionsStep.jsx index 2e5ef80..47972ca 100644 --- a/src/compoents/onboarding/IdentityQuestionsStep.jsx +++ b/src/compoents/onboarding/IdentityQuestionsStep.jsx @@ -3,6 +3,9 @@ import React from 'react'; import { createFilterOptions } from '@mui/material/Autocomplete'; import FormControlLabel from '@mui/material/FormControlLabel'; import Checkbox from '@mui/material/Checkbox'; +import GenderDropdown from '@/compoents/DropdownGender'; +import EthicDropdown from '@/compoents/DropdownEthic'; +import SexualityDropdown from '@/compoents/DropdownSexuality'; const filter = createFilterOptions(); @@ -29,41 +32,7 @@ function IdentityQuestionsStep({ Please select the sexual identities that best describe you today. - - (option.inputValue && value.inputValue && option.inputValue === value.inputValue) || option === value - } - getOptionLabel={option => { - if (typeof option === 'string') { - return option; - } - if (option.inputValue) return option.inputValue; - return option.name || option.identity; - }} - filterOptions={(options, params) => { - const filtered = filterOptions(options, params); - - const { inputValue } = params; - const isExisting = options.some(option => inputValue === option.name || option.identity); - if (inputValue !== '' && !isExisting) { - filtered.push({ - inputValue, - name: `Add "${inputValue}"`, - }); - } - - return filtered; - }} - renderOption={(props, option) =>
  • {option.name || option.identity}
    • } - onChange={(event, value) => handleAutocompleteChange('identity_sexuality', value)} - renderInput={params => } - /> + If you see any terms you're not sure about we encourage you to check out this site to learn more about people's experiences @@ -79,42 +48,7 @@ function IdentityQuestionsStep({ Please select the gender identities that best describe you today. - - (option.inputValue && value.inputValue && option.inputValue === value.inputValue) || option === value - } - name="gender_identities" - getOptionLabel={option => { - if (typeof option === 'string') { - return option; - } - if (option.inputValue) return option.inputValue; - return option.name || option.gender; - }} - filterOptions={(options, params) => { - const filtered = filterOptions(options, params); - - const { inputValue } = params; - const isExisting = options.some(option => inputValue === option.name || option.gender); - if (inputValue !== '' && !isExisting) { - filtered.push({ - inputValue, - name: `Add "${inputValue}"`, - }); - } - - return filtered; - }} - renderOption={(props, option) =>
  • {option.name || option.gender}
    • } - onChange={(event, value) => handleAutocompleteChange('gender_identities', value)} - renderInput={params => } - /> + } label="Would you like to display your gender your profile?" @@ -126,41 +60,7 @@ function IdentityQuestionsStep({ Please select all the identities that best describe your ethic background - - (option.inputValue && value.inputValue && option.inputValue === value.inputValue) || option === value - } - getOptionLabel={option => { - if (typeof option === 'string') { - return option; - } - if (option.inputValue) return option.inputValue; - return option.name || option.ethnicity; - }} - filterOptions={(options, params) => { - const filtered = filterOptions(options, params); - - const { inputValue } = params; - const isExisting = options.some(option => inputValue === option.name || option.ethnicity); - if (inputValue !== '' && !isExisting) { - filtered.push({ - inputValue, - name: `Add "${inputValue}"`, - }); - } - - return filtered; - }} - renderOption={(props, option) =>
  • {option.name || option.ethnicity}
    • } - onChange={(event, value) => handleAutocompleteChange('identity_ethic', value)} - renderInput={params => } - /> + } label="Would you like to display your ethnicity your profile?" diff --git a/src/compoents/onboarding/SkillsQuestionStep.jsx b/src/compoents/onboarding/SkillsQuestionStep.jsx index ddc7c62..b91b3bf 100644 --- a/src/compoents/onboarding/SkillsQuestionStep.jsx +++ b/src/compoents/onboarding/SkillsQuestionStep.jsx @@ -1,6 +1,10 @@ import { Typography, FormControl, FormLabel, TextField, Button, Input, Grid, Autocomplete, Select, MenuItem, FormHelperText } from '@mui/material'; import React from 'react'; import { createFilterOptions } from '@mui/material/Autocomplete'; +import DropdownSkillsSimple from '@/compoents/DropdownSkillsSimple'; +import DropdownDepartmentsSimple from '@/compoents/DropdownDepartmentsSimple'; +import DropdownCompanyTypes from '../DropdownCompanyTypes'; +import DropdownIndustries from '@/compoents/DropdownIndustries'; const filter = createFilterOptions(); @@ -41,52 +45,7 @@ function SkillsQuestionStep({ * What skills best represent you? - - (option.inputValue && value.inputValue && option.inputValue === value.inputValue) || option === value - } - getOptionLabel={option => { - if (typeof option === 'string') { - return option; - } - // Check for the special case where the option has an inputValue property - if (option.inputValue) return option.inputValue; - - // Existing logic - return option.name; - }} - filterOptions={(options, params) => { - const filtered = filter(options, params); - - const { inputValue } = params; - // Suggest the creation of a new value - const isExisting = options.some(option => inputValue === option.name); - if (inputValue !== '' && !isExisting) { - filtered.push({ - inputValue, - name: `Add "${inputValue}"`, - }); - } - - return filtered; - }} - renderOption={(props, option) =>
  • {option.name || option.name}
    • } - onChange={(event, value) => { - const valueArray = []; - value.map((item, index) => { - valueArray.push(item.name); - }); - handleAutocompleteChange('job_skills', valueArray); - }} - renderInput={params => } - /> + {!!formErrors.job_skills && {formErrors.job_skills}} Please select your top 5 skills     @@ -95,46 +54,7 @@ function SkillsQuestionStep({ * What department best describes your interest? - - (option.inputValue && value.inputValue && option.inputValue === value.inputValue) || option === value - } - getOptionLabel={option => { - if (typeof option === 'string') { - return option; - } - // Check for the special case where the option has an inputValue property - if (option.inputValue) return option.inputValue; - - // Existing logic - return option.name; - }} - filterOptions={(options, params) => { - const filtered = filter(options, params); - - const { inputValue } = params; - // Suggest the creation of a new value - const isExisting = options.some(option => inputValue === option.name); - if (inputValue !== '' && !isExisting) { - filtered.push({ - inputValue, - name: `Add "${inputValue}"`, - }); - } - - return filtered; - }} - renderOption={(props, option) =>
  • {option.name || option.name}
    • } - onChange={(event, value) => handleAutocompleteChange('job_department', value)} - renderInput={params => } - /> + {!!formErrors.job_department && {formErrors.job_department}}     @@ -142,90 +62,14 @@ function SkillsQuestionStep({ What types of companies would you like to work with? - - (option.inputValue && value.inputValue && option.inputValue === value.inputValue) || option === value - } - getOptionLabel={option => { - if (typeof option === 'string') { - return option; - } - // Check for the special case where the option has an inputValue property - if (option.inputValue) return option.inputValue; - - // Existing logic - return option.name; - }} - filterOptions={(options, params) => { - const filtered = filter(options, params); - - const { inputValue } = params; - // Suggest the creation of a new value - const isExisting = options.some(option => inputValue === option.name); - if (inputValue !== '' && !isExisting) { - filtered.push({ - inputValue, - name: `Add "${inputValue}"`, - }); - } - - return filtered; - }} - renderOption={(props, option) =>
  • {option.name || option.name}
    • } - onChange={(event, value) => handleAutocompleteChange('company_types', value)} - renderInput={params => } - /> +     What industries are you interested in? - - (option.inputValue && value.inputValue && option.inputValue === value.inputValue) || option === value - } - getOptionLabel={option => { - if (typeof option === 'string') { - return option; - } - // Check for the special case where the option has an inputValue property - if (option.inputValue) return option.inputValue; - - // Existing logic - return option.name; - }} - filterOptions={(options, params) => { - const filtered = filter(options, params); - - const { inputValue } = params; - // Suggest the creation of a new value - const isExisting = options.some(option => inputValue === option.name); - if (inputValue !== '' && !isExisting) { - filtered.push({ - inputValue, - name: `Add "${inputValue}"`, - }); - } - - return filtered; - }} - renderOption={(props, option) =>
  • {option.name || option.name}
    • } - onChange={(event, value) => handleAutocompleteChange('job_department', value)} - renderInput={params => } - /> +     diff --git a/src/compoents/profile/WorkPlaceForm.jsx b/src/compoents/profile/WorkPlaceForm.jsx index aa99906..f8f72b3 100644 --- a/src/compoents/profile/WorkPlaceForm.jsx +++ b/src/compoents/profile/WorkPlaceForm.jsx @@ -3,7 +3,7 @@ import React, { useEffect, useState } from 'react'; import { useAuth } from '../../providers/AuthProvider'; import { createFilterOptions } from '@mui/material/Autocomplete'; import { useStatus } from '../../providers/MsgStatusProvider'; -import CompanyDropdown from '../CompanyDropDown'; +import CompanyDropdown from '../DropDownCompany'; import { routes } from '../../lib/routes'; const filter = createFilterOptions(); diff --git a/src/pages/NewMemeberPage.jsx b/src/pages/NewMemeberPage.jsx index 149249e..21293ad 100644 --- a/src/pages/NewMemeberPage.jsx +++ b/src/pages/NewMemeberPage.jsx @@ -60,7 +60,7 @@ function validateBasicInfo(answers, setFormErrors) { const isValid = AnswerValidator.validateMany(answers, errors, { photo: 'Please upload your profile photo.', postal_code: 'Please enter your postal code.', - tech_journey: "Please specify how long you've been on your tech journey.", + years_of_experience: "Please specify how long you've been on your tech journey.", job_roles: 'Please specify titles that best fit you.', }); diff --git a/src/pages/NewMentorPage.jsx b/src/pages/NewMentorPage.jsx index 6f6ae9e..ae4fad6 100644 --- a/src/pages/NewMentorPage.jsx +++ b/src/pages/NewMentorPage.jsx @@ -13,7 +13,6 @@ import FormMentorApplication from '../compoents/mentorship/FormMentorApplication import FormMentorCareer from '../compoents/mentorship/FormMentorCareer'; import FormMentorProfile from '../compoents/mentorship/FormMentorProfile'; import FormMentorshipValues from '../compoents/mentorship/FormMentorshipValues'; -import { useStatus } from '../providers/MsgStatusProvider'; import { useStatusMessage } from '../hooks/useStatusMessage'; import { routes } from '@/lib/routes'; @@ -182,8 +181,7 @@ export default function NewMentorPage() { setActiveStep(activeStep - 1); }; - -React.useEffect(() => { + React.useEffect(() => { setHasCompleted(activeStep >= steps.length); }, [ activeStep ]); diff --git a/src/pages/ViewMemberProfile.jsx b/src/pages/ViewMemberProfile.jsx index b5630fa..301592e 100644 --- a/src/pages/ViewMemberProfile.jsx +++ b/src/pages/ViewMemberProfile.jsx @@ -1,13 +1,29 @@ - import BookMentorForm from '../compoents/BookMentorForm'; -import { getBasicSystemInfo, getMemberData } from '@/api-calls'; +import { getDropDrownItems, getMemberData } from '@/api-calls'; import AddMemberNoteCard from '@/compoents/AddMemberNoteCard'; import CompanyCard from '@/compoents/CompanyCard'; import ReviewCard from '@/compoents/ReviewCard'; import HtmlContentRenderer from '@/compoents/utils/HtmlContentRenderer'; import { useAuth } from '@/providers/AuthProvider'; import { GitHub, Instagram, Language, LinkedIn, Twitter, YouTube } from '@mui/icons-material'; -import { Box, Button, Card, CardContent, CardMedia, Chip, CircularProgress, Divider, Grid, Hidden, IconButton, Modal, Typography } from '@mui/material'; +import {Box, + Button, + Card, + CardContent, + CardMedia, + Chip, + CircularProgress, + Divider, + FormControl, + FormLabel, + Grid, + Hidden, + IconButton, + Modal, + Typography, + FormControlLabel, + RadioGroup, + Radio,} from '@mui/material'; import Container from '@mui/material/Container'; import Link from '@mui/material/Link'; import React, { useEffect, useState } from 'react'; @@ -34,7 +50,7 @@ function ViewMemberProfile() { async function fetchData() { try { // eslint-disable-next-line no-undef - const [ memberResponse, basicResponse ] = await Promise.all([ getMemberData(id), getBasicSystemInfo() ]); + const [ memberResponse, basicResponse ] = await Promise.all([ getMemberData(id), getDropDrownItems('pronouns&fields=gender&fields=sexuality'), ]); setMemberData(memberResponse); setBasicData(basicResponse);