diff --git a/README.md b/README.md index 3756810..7e76fd4 100644 --- a/README.md +++ b/README.md @@ -19,6 +19,12 @@ This site is written using a [React](https://reactjs.org/) front end, with a [Ex ### Instructions +Install node 16.x + +```bash +nvm install && nvm use +``` + Set a local database environment variable to use ```bash diff --git a/client/src/components/CitySelector/index.tsx b/client/src/components/CitySelector/index.tsx index 9547c0d..baf338e 100644 --- a/client/src/components/CitySelector/index.tsx +++ b/client/src/components/CitySelector/index.tsx @@ -2,10 +2,11 @@ import { Button, FormGroup, Input, InputGroup, Label } from 'reactstrap'; import React from 'react'; import Select from 'react-select'; +import { formatCityLabel } from '../utils'; import { useCities } from '@csh/ui/api/city'; import { useToggle } from 'react-use'; -type SelectVal = { value: number; label: string }; +export type SelectVal = { value: number; label: string }; interface CitySelectorProps { name?: string; @@ -18,6 +19,7 @@ interface CitySelectorProps { setNewCountry?: (newCountry: string) => void; remote?: boolean; setRemote?: (remote: boolean) => void; + initialValue?: SelectVal; } export const CitySelector: React.FunctionComponent = ({ @@ -30,7 +32,8 @@ export const CitySelector: React.FunctionComponent = ({ newCountry, setNewCountry, remote, - setRemote + setRemote, + initialValue }) => { const { cities, isLoading } = useCities(); const [createCity, toggleCreateCity] = useToggle(cities.length == 0); @@ -41,7 +44,7 @@ export const CitySelector: React.FunctionComponent = ({ const cityOptions = cities.map(city => { return { - label: `${city.city}, ${city.state ?? city.country}`, + label: formatCityLabel(city.city, city.state, city.country), value: city.id }; }); @@ -53,6 +56,7 @@ export const CitySelector: React.FunctionComponent = ({ name={name} options={cityOptions} isLoading={isLoading} + defaultValue={initialValue} onChange={value => onChange(value as SelectVal)} isDisabled={remote} /> diff --git a/client/src/components/OfferModal/CityInput.tsx b/client/src/components/OfferModal/CityInput.tsx index dbec5fe..de28c6c 100644 --- a/client/src/components/OfferModal/CityInput.tsx +++ b/client/src/components/OfferModal/CityInput.tsx @@ -1,6 +1,6 @@ +import { CitySelector, SelectVal } from '../CitySelector'; import { FormGroup, Label } from 'reactstrap'; -import { CitySelector } from '../CitySelector'; import React from 'react'; interface CityInputProps { @@ -13,6 +13,7 @@ interface CityInputProps { setNewCountry: (newCountry: string) => void; remote?: boolean; setRemote: (remote: boolean) => void; + initialValue?: SelectVal; } export const CityInput: React.FunctionComponent = ({ @@ -24,7 +25,8 @@ export const CityInput: React.FunctionComponent = ({ newCountry, setNewCountry, remote, - setRemote + setRemote, + initialValue }) => { const onCitySelect = ({ value }: { value: number }) => { setLocationId(value); @@ -43,6 +45,7 @@ export const CityInput: React.FunctionComponent = ({ setNewCountry={setNewCountry} remote={remote} setRemote={setRemote} + initialValue={initialValue} /> ); diff --git a/client/src/components/OfferModal/PositionInput.tsx b/client/src/components/OfferModal/PositionInput.tsx index 8e21f61..9e081a7 100644 --- a/client/src/components/OfferModal/PositionInput.tsx +++ b/client/src/components/OfferModal/PositionInput.tsx @@ -1,8 +1,8 @@ import { FormGroup, Label } from 'reactstrap'; +import { PositionSelector, SelectVal } from '../PositionSelector'; import { Company } from '@csh/ui/api/types/company'; import { JobType } from '@csh/ui/api/types/position'; -import { PositionSelector } from '../PositionSelector'; import React from 'react'; interface PositionInputProps { @@ -12,6 +12,7 @@ interface PositionInputProps { setOfferPositionTitle?: (newPositionTitle: string) => void; offerPositionType?: JobType; setOfferPositionType?: (newPositionType: JobType) => void; + initialValue?: SelectVal; } export const PositionInput: React.FunctionComponent = ({ @@ -20,7 +21,8 @@ export const PositionInput: React.FunctionComponent = ({ offerPositionTitle, setOfferPositionTitle, offerPositionType, - setOfferPositionType + setOfferPositionType, + initialValue }) => { const onPositionSelect = ({ value }: { value: number }) => { setOfferPositionId(value); @@ -36,6 +38,7 @@ export const PositionInput: React.FunctionComponent = ({ setNewPositionTitle={setOfferPositionTitle} newPositionType={offerPositionType} setNewPositionType={setOfferPositionType} + initialValue={initialValue} /> ); diff --git a/client/src/components/OfferModal/UpdateOfferModal/index.tsx b/client/src/components/OfferModal/UpdateOfferModal/index.tsx index 776f412..f2a0726 100644 --- a/client/src/components/OfferModal/UpdateOfferModal/index.tsx +++ b/client/src/components/OfferModal/UpdateOfferModal/index.tsx @@ -7,6 +7,7 @@ import { ModalHeader } from 'reactstrap'; import { Housing, Offer, PayType, UpdateOffer } from '@csh/ui/api/types/offer'; +import { formatCityLabel, formatPositionTitle } from '../../utils'; import { BodyInput } from '../BodyInput'; import { CityInput } from '../CityInput'; @@ -185,6 +186,13 @@ export const UpdateOfferModal: React.FunctionComponent = setOfferPositionTitle={setOfferPositionTitle} offerPositionType={offerPositionType} setOfferPositionType={setOfferPositionType} + initialValue={{ + value: offerPositionId, + label: formatPositionTitle( + offerPositionTitle, + offerPositionType + ) + }} /> = setNewCountry={setOfferLocationCountry} remote={remote} setRemote={setRemote} + initialValue={ + offerLocationId + ? { + value: offerLocationId, + label: formatCityLabel( + offerLocationCity, + offerLocationState, + offerLocationCountry + ) + } + : undefined + } /> void; newPositionType?: JobType; setNewPositionType?: (newPositionType: JobType) => void; + initialValue?: SelectVal; } export const PositionSelector: React.FunctionComponent = @@ -27,7 +29,8 @@ export const PositionSelector: React.FunctionComponent = newPositionTitle, setNewPositionTitle, newPositionType, - setNewPositionType + setNewPositionType, + initialValue }) => { const { positions, isLoading } = usePositions(company.id); const [createPosition, toggleCreatePosition] = useToggle( @@ -40,9 +43,7 @@ export const PositionSelector: React.FunctionComponent = const positionOptions = positions.map(position => { return { - label: `${position.title}${ - position.job_type === JobType.CO_OP ? ` (Co-Op)` : ' (Fulltime)' - }`, + label: formatPositionTitle(position.title, position.job_type), value: position.id }; }); @@ -53,6 +54,7 @@ export const PositionSelector: React.FunctionComponent =