add game name and player # validation

pollen8 · Nov 8, 2018 · c026328 · c026328
1 parent a28624b
commit c026328
Show file tree

Hide file tree

Showing 2 changed files with 70 additions and 16 deletions.
diff --git a/client/src/Games/AddGame.tsx b/client/src/Games/AddGame.tsx
@@ -5,10 +5,12 @@ import {
   RouteComponentProps,
   withRouter,
 } from 'react-router-dom';
+import { required } from 'validate-promise';
 
 import {
   Button,
   Form,
+  FormFeedback,
   FormGroup,
   Input,
   Label,
@@ -43,6 +45,28 @@ const initialData: IAddGameRequest = {
   players: [],
 };
 
+const contract = [
+  {
+    key: 'name',
+    msg: () => 'Name is required',
+    promises: [{
+      rule: required,
+    }]
+  },
+  {
+    key: 'players',
+    msg: () => 'Must have between 5 and 10 players',
+    promises: [{
+      rule: (value: any, row, msg): Promise<string | void> => {
+        if (value.length < 5 || value.length > 9) {
+          return Promise.reject(msg());
+        }
+        return Promise.resolve();
+      },
+    }]
+  }
+];
+
 const AddGame: React.SFC<RouteComponentProps<any>> = ({ history }) => {
   return (
     <Mutation
@@ -58,33 +82,46 @@ const AddGame: React.SFC<RouteComponentProps<any>> = ({ history }) => {
         history.push(`/games/${data.addGame.id}`);
       }}>
       {(addGame) => (
-        <Form<IAddGameRequest> initialData={initialData}>
-          {({ setValue, formData }) => {
+        <Form<IAddGameRequest>
+          initialData={initialData}
+          contract={contract}
+        >
+          {({ setValue, formData, validate, errors }) => {
             return <div>
               <h1>New Game</h1>
               <FormGroup>
                 <Label>
                   Name:
               </Label>
                 <Input onChange={(e) => setValue('name', e.target.value)} />
+                {
+                  errors.name && <FormFeedback valid={false}>
+                    {errors.name[0]}
+                  </FormFeedback>
+                }
               </FormGroup>
               <PlayerSelect
                 value={formData.players.map((p) => p.value)}
+                errors={errors.players}
                 onChange={(e) => setValue('players', e)} />
               <FormGroup>
                 <Button
                   type="button"
-                  onClick={(e) => {
-                    e.preventDefault();
-                    const game = {
-                      variables: {
-                        ...formData,
-                        numberOfPlayers: formData.players.length,
-                        players: formData.players.map((p) => p.value),
-                      }
-                    };
-                    addGame(game);
-
+                  onClick={async (e) => {
+                    try {
+                      e.preventDefault();
+                      await validate(formData);
+                      const game = {
+                        variables: {
+                          ...formData,
+                          numberOfPlayers: formData.players.length,
+                          players: formData.players.map((p) => p.value),
+                        }
+                      };
+                      addGame(game);
+                    } catch (e) {
+                      console.error(e);
+                    }
                   }}
                 >
                   Add

diff --git a/client/src/Games/PlayerSelect.tsx b/client/src/Games/PlayerSelect.tsx
@@ -1,13 +1,22 @@
-import { FormGroup, Label, VirtualizedSelect } from '@infosum/unikitty';
 import * as React from 'react';
-import { Query } from "react-apollo";
+import { Query } from 'react-apollo';
+
+import {
+  FormFeedback,
+  FormGroup,
+  Label,
+  VirtualizedSelect,
+} from '@infosum/unikitty';
+
 import { GET_USERS } from '../Users/Users';
 
 interface IProps {
   onChange: (v) => void;
   value: string[];
+  errors?: string[] | undefined;
 }
-const PlayerSelect: React.SFC<IProps> = ({ onChange, value }) => {
+
+const PlayerSelect: React.SFC<IProps> = ({ onChange, value, errors }) => {
   return (
     <Query query={GET_USERS}>
       {({ loading, error, data }) => {
@@ -26,6 +35,14 @@ const PlayerSelect: React.SFC<IProps> = ({ onChange, value }) => {
               multi={true}
               options={options}
               onChange={onChange} />
+            {
+              errors
+                ? <FormFeedback valid={false}>
+                  {errors[0]}
+                </FormFeedback>
+                :
+                <FormFeedback>Between 5 and 10 players</FormFeedback>
+            }
           </FormGroup>
         )
       }}