Fixing update form selectors

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

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<CitySelectorProps> = ({
@@ -30,7 +32,8 @@ export const CitySelector: React.FunctionComponent<CitySelectorProps> = ({
   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<CitySelectorProps> = ({
 
   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<CitySelectorProps> = ({
           name={name}
           options={cityOptions}
           isLoading={isLoading}
+          defaultValue={initialValue}
           onChange={value => onChange(value as SelectVal)}
           isDisabled={remote}
         />

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<CityInputProps> = ({
@@ -24,7 +25,8 @@ export const CityInput: React.FunctionComponent<CityInputProps> = ({
   newCountry,
   setNewCountry,
   remote,
-  setRemote
+  setRemote,
+  initialValue
 }) => {
   const onCitySelect = ({ value }: { value: number }) => {
     setLocationId(value);
@@ -43,6 +45,7 @@ export const CityInput: React.FunctionComponent<CityInputProps> = ({
         setNewCountry={setNewCountry}
         remote={remote}
         setRemote={setRemote}
+        initialValue={initialValue}
       />
     </FormGroup>
   );

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<PositionInputProps> = ({
@@ -20,7 +21,8 @@ export const PositionInput: React.FunctionComponent<PositionInputProps> = ({
   offerPositionTitle,
   setOfferPositionTitle,
   offerPositionType,
-  setOfferPositionType
+  setOfferPositionType,
+  initialValue
 }) => {
   const onPositionSelect = ({ value }: { value: number }) => {
     setOfferPositionId(value);
@@ -36,6 +38,7 @@ export const PositionInput: React.FunctionComponent<PositionInputProps> = ({
         setNewPositionTitle={setOfferPositionTitle}
         newPositionType={offerPositionType}
         setNewPositionType={setOfferPositionType}
+        initialValue={initialValue}
       />
     </FormGroup>
   );

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<UpdateOfferModalProps> =
               setOfferPositionTitle={setOfferPositionTitle}
               offerPositionType={offerPositionType}
               setOfferPositionType={setOfferPositionType}
+              initialValue={{
+                value: offerPositionId,
+                label: formatPositionTitle(
+                  offerPositionTitle,
+                  offerPositionType
+                )
+              }}
             />
             <PayInput
               pay={pay}
@@ -202,6 +210,18 @@ export const UpdateOfferModal: React.FunctionComponent<UpdateOfferModalProps> =
               setNewCountry={setOfferLocationCountry}
               remote={remote}
               setRemote={setRemote}
+              initialValue={
+                offerLocationId
+                  ? {
+                      value: offerLocationId,
+                      label: formatCityLabel(
+                        offerLocationCity,
+                        offerLocationState,
+                        offerLocationCountry
+                      )
+                    }
+                  : undefined
+              }
             />
             <OfferDateInput offerDate={offerDate} setOfferDate={setOfferDate} />
             <OfferDeadlineInput

client/src/components/PositionSelector/index.tsx

@@ -4,6 +4,7 @@ import { Company } from '@csh/ui/api/types/company';
 import { JobType } from '@csh/ui/api/types/position';
 import React from 'react';
 import Select from 'react-select';
+import { formatPositionTitle } from '../utils';
 import { usePositions } from '@csh/ui/api/position';
 import { useToggle } from 'react-use';
 
@@ -17,6 +18,7 @@ interface PositionSelectorProps {
   setNewPositionTitle?: (newPositionTitle: string) => void;
   newPositionType?: JobType;
   setNewPositionType?: (newPositionType: JobType) => void;
+  initialValue?: SelectVal;
 }
 
 export const PositionSelector: React.FunctionComponent<PositionSelectorProps> =
@@ -27,7 +29,8 @@ export const PositionSelector: React.FunctionComponent<PositionSelectorProps> =
     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<PositionSelectorProps> =
 
     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<PositionSelectorProps> =
           <Select
             name={name}
             options={positionOptions}
+            defaultValue={initialValue}
             isLoading={isLoading}
             onChange={value => onChange(value as SelectVal)}
           />

client/src/components/utils.ts

@@ -1,3 +1,5 @@
+import { JobType } from '../api/types/position';
+
 export const formatMoney = (moneyValue: number) =>
   new Intl.NumberFormat('en-US', {
     style: 'currency',
@@ -7,3 +9,15 @@ export const formatMoney = (moneyValue: number) =>
     //minimumFractionDigits: 0,
     //maximumFractionDigits: 0,
   }).format(moneyValue);
+
+export const formatPositionTitle = (title: string, jobType: JobType) => {
+  return `${title}${jobType === JobType.CO_OP ? ` (Co-Op)` : ' (Fulltime)'}`;
+};
+
+export const formatCityLabel = (
+  city: string,
+  state?: string,
+  country?: string
+) => {
+  return `${city}, ${state ?? country}`;
+};

client/src/pages/Home/index.tsx

@@ -1,7 +1,15 @@
+import { Col, Row } from 'reactstrap';
+
 import React from 'react';
 
 const Home: React.FunctionComponent = () => {
-  return <div>Welcome to BrickWall!</div>;
+  return (
+    <div>
+      <Row>
+        <Col></Col>
+      </Row>
+    </div>
+  );
 };
 
 export default Home;