validation fixes

goty-client/src/components/controls/Search.tsx

@@ -1,7 +1,11 @@
-import { useState } from 'react'
+import { useContext, useState } from 'react'
 import { GameService } from '../../api/gameService'
 import { Game } from '../../models/game'
 import { AutoComplete } from './AutoComplete/AutoComplete'
+import {
+  InputStateKeyContext,
+  SubmissionInputContext,
+} from '../submission/useSubmissionForm'
 
 export interface SearchProps {
   placeholder: string
@@ -10,7 +14,10 @@ export interface SearchProps {
 }
 
 export const Search = (props: SearchProps) => {
-  const [input, setInput] = useState('')
+  const key = useContext(InputStateKeyContext)
+  const {
+    [key]: [input, setInput],
+  } = useContext(SubmissionInputContext)
   const [suggestions, setSuggestions] = useState<Game[]>([])
   const handleSearch = (searchText: string) =>
     GameService.searchGames({

goty-client/src/components/submission/BestOldGame.tsx

@@ -1,6 +1,7 @@
 import { Game } from '../../models/game'
 import { useProperties } from '../../api/useProperties'
 import { SingleGame } from '../controls/SingleGame'
+import { InputStateKeyContext } from './useSubmissionForm'
 
 export interface BestOldGameProps {
   readonly: boolean
@@ -20,13 +21,15 @@ export const BestOldGame = ({
     handleSetBestOldGame && handleSetBestOldGame(bestOldGame)
   }
   return (
-    <SingleGame
-      title="Best Old Game"
-      subtitle={`What is your favorite old game of ${properties.year}?`}
-      readonly={readonly}
-      game={bestOldGame}
-      handleSelect={handleSelect}
-      rules={rules(properties.year)}
-    />
+    <InputStateKeyContext.Provider value={'bestOldGame'}>
+      <SingleGame
+        title="Best Old Game"
+        subtitle={`What is your favorite old game of ${properties.year}?`}
+        readonly={readonly}
+        game={bestOldGame}
+        handleSelect={handleSelect}
+        rules={rules(properties.year)}
+      />
+    </InputStateKeyContext.Provider>
   )
 }

goty-client/src/components/submission/GOTY.tsx

@@ -5,6 +5,7 @@ import { Rules } from './Rules'
 import { useProperties } from '../../api/useProperties'
 import { Search } from '../controls/Search'
 import { OrderedList } from '../controls/OrderedList'
+import { InputStateKeyContext } from './useSubmissionForm'
 
 export enum MoveDirection {
   IncreaseRank,
@@ -80,11 +81,13 @@ export const GOTY = ({ games, handleSetGames, readonly }: GOTYProps) => {
       <Rules readonly={readonly} rules={properties.gotyQuestion.rules} />
       {!readonly && getTieBreaker(properties.tiePoints)}
       {readonly || games.length === properties.tiePoints.length ? null : (
-        <Search
-          year={properties.year}
-          placeholder="Select a game"
-          handleSelect={handleAddGame}
-        />
+        <InputStateKeyContext.Provider value={'goty'}>
+          <Search
+            year={properties.year}
+            placeholder="Select a game"
+            handleSelect={handleAddGame}
+          />
+        </InputStateKeyContext.Provider>
       )}
       <OrderedList
         games={games}

goty-client/src/components/submission/MostAnticipated.tsx

@@ -1,5 +1,6 @@
 import { Game } from '../../models/game'
 import { SingleGame } from '../controls/SingleGame'
+import { InputStateKeyContext } from './useSubmissionForm'
 
 export interface MostAnticipatedProps {
   readonly: boolean
@@ -18,13 +19,15 @@ export const MostAnticipated = ({
     handleSetMostAnticipated && handleSetMostAnticipated(mostAnticipated)
   }
   return (
-    <SingleGame
-      title="Most Anticipated"
-      subtitle="What game are you looking forward to most?"
-      readonly={readonly}
-      game={mostAnticipated}
-      handleSelect={handleSelect}
-      rules={rules}
-    />
+    <InputStateKeyContext.Provider value={'mostAnticipated'}>
+      <SingleGame
+        title="Most Anticipated"
+        subtitle="What game are you looking forward to most?"
+        readonly={readonly}
+        game={mostAnticipated}
+        handleSelect={handleSelect}
+        rules={rules}
+      />
+    </InputStateKeyContext.Provider>
   )
 }

goty-client/src/components/submission/MostDisappointing.tsx

@@ -1,5 +1,6 @@
 import { Game } from '../../models/game'
 import { SingleGame } from '../controls/SingleGame'
+import { InputStateKeyContext } from './useSubmissionForm'
 
 export interface MostDisappointingProps {
   readonly: boolean
@@ -18,14 +19,16 @@ export const MostDisappointing = ({
     handleSetMostDisappointing && handleSetMostDisappointing(mostDisappointing)
   }
   return (
-    <SingleGame
-      title="Most Disappointing"
-      subtitle="What game didnt live up to your expectations?"
-      readonly={readonly}
-      game={mostDisappointing}
-      handleSelect={handleSelect}
-      rules={[`Any game released in ${year}`]}
-      year={year}
-    />
+    <InputStateKeyContext.Provider value={'mostDisappointing'}>
+      <SingleGame
+        title="Most Disappointing"
+        subtitle="What game didnt live up to your expectations?"
+        readonly={readonly}
+        game={mostDisappointing}
+        handleSelect={handleSelect}
+        rules={[`Any game released in ${year}`]}
+        year={year}
+      />
+    </InputStateKeyContext.Provider>
   )
 }

goty-client/src/components/submission/SubmissionForm/SubmissionForm.tsx

@@ -9,63 +9,61 @@ import { useProperties } from '../../../api/useProperties'
 import { useDocumentTitle } from '../../../util/useDocumentTitle'
 import { Game } from '../../../models/game'
 import { Name } from '../Name'
-import { Submission } from '../../../models/submission'
 import { MostDisappointing } from '../MostDisappointing'
+import { SubmissionInputContext, useSubmissionForm } from '../useSubmissionForm'
 
 interface SubmissionFormProps {
-  submission: Submission
-  handleSetSubmission: (submission: Submission) => void
-  handleSubmitSubmission: () => void
-  isValid: boolean
+  handleDone: () => void
+  handleError: (error: any) => void
 }
 export const SubmissionForm = ({
-  submission,
-  handleSetSubmission,
-  handleSubmitSubmission,
-  isValid,
+  handleDone,
+  handleError,
 }: SubmissionFormProps) => {
   const { properties } = useProperties()
+  const { submission, setSubmission, isValid, isDirty, inputs, handleSubmit } =
+    useSubmissionForm(handleDone, handleError)
 
   const handleSetName = (name: string) => {
-    handleSetSubmission({
+    setSubmission({
       ...submission,
       name,
     })
   }
   const handleSetBestOldGame = (bestOldGame: Game | null) => {
-    handleSetSubmission({
+    setSubmission({
       ...submission,
       bestOldGame,
     })
   }
   const handleSetMostAnticipated = (mostAnticipated: Game | null) => {
-    handleSetSubmission({
+    setSubmission({
       ...submission,
       mostAnticipated,
     })
   }
 
   const handleSetMostDisappointing = (mostDisappointing: Game | null) => {
-    handleSetSubmission({
+    setSubmission({
       ...submission,
       mostDisappointing,
     })
   }
   const handleSetEnteredGiveaway = (enteredGiveaway: boolean) => {
-    handleSetSubmission({
+    setSubmission({
       ...submission,
       enteredGiveaway,
     })
   }
   const handleSetGames = (gamesOfTheYear: Game[]) => {
-    handleSetSubmission({
+    setSubmission({
       ...submission,
       gamesOfTheYear,
     })
   }
   useDocumentTitle('GOTY - Submission')
   return (
-    <>
+    <SubmissionInputContext.Provider value={inputs}>
       <Card>
         <span className={styles.required}>* Required</span>
       </Card>
@@ -104,11 +102,11 @@ export const SubmissionForm = ({
       ) : null}
       <Button
         className={styles.submitButton}
-        disabled={!isValid}
-        onClick={handleSubmitSubmission}
+        disabled={!(isValid && isDirty)}
+        onClick={handleSubmit}
       >
         Submit
       </Button>
-    </>
+    </SubmissionInputContext.Provider>
   )
 }

goty-client/src/components/submission/SubmissionRouter.tsx

@@ -3,7 +3,7 @@ import { End } from './End/End'
 import { isGotyConcluded } from '../../util/isGotyConcluded'
 import { useProperties } from '../../api/useProperties'
 import { Concluded } from './Concluded'
-import { SubmissionHub } from './SubmissionHub'
+import { SubmissionForm } from './SubmissionForm/SubmissionForm'
 
 export const SubmissionRouter = () => {
   const [isDone, setIsDone] = useState(false)
@@ -21,7 +21,7 @@ export const SubmissionRouter = () => {
   return isDone ? (
     <End error={error} handleDone={() => setIsDone(false)} />
   ) : (
-    <SubmissionHub
+    <SubmissionForm
       handleDone={() => setIsDone(true)}
       handleError={handleError}
     />