diff --git a/src/pages/AddProject.tsx b/src/pages/AddProject.tsx index 7e21719..b9f275d 100644 --- a/src/pages/AddProject.tsx +++ b/src/pages/AddProject.tsx @@ -3,18 +3,25 @@ import "../style/pages/AddProject.css"; import classNames from "classnames/bind" import axios from "axios"; import { AppContext } from "../contexts/AppContext"; -import CreatableSelect from 'react-select/creatable'; import { withRouter, RouteComponentProps } from 'react-router-dom'; import Cookies from 'js-cookie'; import Modal from 'react-modal'; +import CreatableSelect from 'react-select/creatable'; const validGitHubRepo = /^(?:https:\/\/)*github[.]com\/([a-z0-9-]+)\/([a-z0-9\-_]+)\/?$/; +type FormOption = { + value: string, + label: string +} + +type FormOptions = Array; + type FormState = { experienceLevel: string, currentLeadPosition: string, githubRepo: string, - lookingFor: string, + lookingFor: FormOptions, techStack: { value: string, label: string }[], errors: { experienceLevel: string, @@ -42,7 +49,7 @@ const validateForm = (state) => { let hasInput = false; let inputFields = Object.values(state).filter( - (value: any) => value.length === 0); + (value: any) => value === null || value.length === 0); hasInput = (inputFields.length === 0) ? true : false; @@ -60,7 +67,7 @@ class AddProject extends React.Component { experienceLevel: "", currentLeadPosition: "", githubRepo: "", - lookingFor: "", + lookingFor: [], techStack: [], errors: { experienceLevel: "", @@ -75,6 +82,26 @@ class AddProject extends React.Component { cancelModalOpen: false } + // TODO: These values will be coming in from a getPosition API when #114 is implemented. + lookingForOptions: FormOptions = [ + { + value: 'Frontend Engineer', + label: 'Frontend Engineer' + }, + { + value: 'Backend Engineer', + label: 'Backend Engineer' + }, + { + value: 'Product Manager', + label: 'Product Manager' + }, + { + value: 'UX Researcher', + label: 'UX Researcher' + } + ]; + csrf = ''; isPublicGithubRepo = (githubUrl) => { @@ -119,11 +146,6 @@ class AddProject extends React.Component { } break; - case 'lookingFor': - errors.lookingFor = - value.length === 0 ? "Field cannot be empty" : ""; - break; - case 'techStack': errors.techStack = value.length === 0 ? "Tech stack cannot be empty" : ""; @@ -140,6 +162,23 @@ class AddProject extends React.Component { } as Pick) } + handleCreatableChange = (value: FormOptions, actionMeta: any) => { + const name = actionMeta.name; + const errors = this.state.errors; + + switch (name) { + case 'lookingFor': + errors.lookingFor = + !value || value.length === 0 ? "Field cannot be empty" : ""; + break; + } + + this.setState({ + [name]: value, + errors + } as Pick); + } + showErrors = () => { let currErrors = this.state.errors; if (!!!this.state.experienceLevel) { @@ -181,7 +220,7 @@ class AddProject extends React.Component { const data = { experience_lvl: stateDict.experienceLevel, github_url: stateDict.githubRepo, - looking_for: stateDict.lookingFor, + looking_for: stateDict.lookingFor.map(option => option.label).join(', '), position: stateDict.currentLeadPosition, csrfmiddlewaretoken: this.csrf } @@ -350,14 +389,16 @@ class AddProject extends React.Component { Select or enter what type of contributors you're looking for {/* TODO: Add fixed values for cols, rows */} -