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);