Add uniforms to starter app (#417)

Author: kingsleyzissou

client/package.json

@@ -31,7 +31,10 @@
     "react-router-dom": "5.1.2",
     "react-scripts": "3.4.1",
     "subscriptions-transport-ws": "0.9.16",
-    "typescript": "3.8.3"
+    "typescript": "3.8.3",
+    "uniforms-ionic": "^0.0.11",
+    "uniforms": "3.0.0-alpha.3",
+    "uniforms-bridge-simple-schema-2": "3.0.0-alpha.3"
   },
   "scripts": {
     "start": "npm run build && cap serve",

client/src/forms/TaskForm.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import {AutoForm, TextField, LongTextField, HiddenField, SubmitField, ErrorsField} from 'uniforms-ionic';
+import {schema} from './schema';
+
+export function TaskForm({model, handleSubmit}) {
+  return (
+      <AutoForm 
+        schema={schema} 
+        onSubmit={handleSubmit} 
+        model={model}
+      >
+          <ErrorsField />
+          <TextField name="title" />
+          <LongTextField name="description" />
+          <HiddenField name="status" value="OPEN" />
+          <HiddenField name="version" value={model.version ?? 1} />
+          <SubmitField />
+      </AutoForm>
+  )
+}

client/src/forms/schema.js

@@ -0,0 +1,30 @@
+import SimpleSchema from 'simpl-schema';
+import SimpleSchema2Bridge from 'uniforms-bridge-simple-schema-2';
+import { LongTextField } from 'uniforms-ionic';
+
+const s = new SimpleSchema({
+  title: {
+    type: String,
+    uniforms: {
+      required: true
+    }
+  },
+
+  description: {
+    type: String,
+    uniforms: {
+      component: LongTextField,
+    }
+  },
+
+  status: {
+    type: String,
+    allowedValues: ['OPEN', 'ASSIGNED', 'COMPLETE']
+  },
+
+  version: {
+    type: Number
+  }
+});
+
+export const schema = new SimpleSchema2Bridge(s);

client/src/pages/AddTaskPage.tsx

@@ -1,22 +1,14 @@
-import React, { useState, SyntheticEvent } from 'react'
+import React, { useState } from 'react'
 import { RouteComponentProps } from 'react-router-dom'
-import {
-  IonContent,
-  IonButton,
-  IonItem,
-  IonLabel,
-  IonInput,
-  IonToast,
-} from '@ionic/react';
+import { IonContent, IonToast } from '@ionic/react';
 import { useOfflineMutation } from 'react-offix-hooks';
 import { mutationOptions } from '../helpers';
 import { Header } from '../components/Header';
 import { createTask } from '../graphql/mutations/createTask';
+import { TaskForm } from '../forms/TaskForm';
 
 export const AddTaskPage: React.FC<RouteComponentProps> = ({ history, match }) => {
 
-  const [title, setTitle] = useState<string>('');
-  const [description, setDescription] = useState<string>('');
   const [ showToast, setShowToast ] = useState<boolean>(false);
   const [ errorMessage, setErrorMessage ] = useState<string>('');
 
@@ -32,51 +24,19 @@ export const AddTaskPage: React.FC<RouteComponentProps> = ({ history, match }) =
     setShowToast(true);
   };
 
-  const submit = (event: SyntheticEvent) => {
-    event.preventDefault();
-    const variables = {
-      input: {
-        title,
-        description,
-        status: 'OPEN',
-        version: 1
-      },
-    };
-    
+  const submit = (model: any) => {    
     createTaskMutation({
-      variables
+      variables: {input: {...model}}
     })
-    .then(() => history.push('/'))
-    .catch(handleError);
+      .then(() => history.push('/'))
+      .catch(handleError);
   };
 
   return (
     <>
       <Header title="Add task" backHref="/tasks" match={match} />
       <IonContent>
-        <form onSubmit={submit} style={{ padding: '0 16px' }}>
-          <IonItem>
-            <IonLabel color="primary" position="floating">Title</IonLabel>
-            <IonInput 
-              type="text" 
-              required 
-              name="title" 
-              value={title} 
-              onInput={(e:any) => setTitle(e.target.value)} 
-            />
-          </IonItem>
-          <IonItem>
-            <IonLabel color="primary" position="floating">Description</IonLabel>
-            <IonInput 
-              type="text" 
-              required 
-              name="description" 
-              value={description} 
-              onInput={(e:any) => setDescription(e.target.value)}
-            />
-          </IonItem>
-          <IonButton className="submit-btn" expand="block" type="submit">Create</IonButton>
-        </form>
+        <TaskForm handleSubmit={submit} model={{}} />
         <IonToast
           isOpen={showToast}
           onDidDismiss={() => setShowToast(false)}

client/src/pages/UpdateTaskPage.tsx

@@ -1,12 +1,9 @@
-import React, { useState, SyntheticEvent } from 'react'
+import React, { useState } from 'react'
 import { RouteComponentProps } from 'react-router-dom'
 import {
   IonContent,
   IonCard,
-  IonButton,
-  IonItem,
   IonLabel,
-  IonInput,
   IonCardHeader,
   IonCardContent,
   IonNote,
@@ -22,13 +19,11 @@ import { mutationOptions } from '../helpers';
 import { IUpdateMatchParams } from '../declarations';
 import { updateTask } from '../graphql/mutations/updateTask';
 import { findTasks } from '../graphql/queries/findTasks';
+import { TaskForm } from '../forms/TaskForm';
 
 export const UpdateTaskPage: React.FC<RouteComponentProps<IUpdateMatchParams>> = ({ history, match }) => {
 
   const { id } = match.params;
-
-  const [title, setTitle] = useState<string>(null!);
-  const [description, setDescription] = useState<string>(null!);
   const [ showToast, setShowToast ] = useState<boolean>(false);
   const [ errorMessage, setErrorMessage ] = useState<string>('');
   const { loading, error, data } = useQuery(findTasks, { 
@@ -46,27 +41,20 @@ export const UpdateTaskPage: React.FC<RouteComponentProps<IUpdateMatchParams>> =
       history.push('/');
       return;
     }
+    console.log(error);
     setErrorMessage(error.message);
     setShowToast(true);
   }
 
-  const submit = (event: SyntheticEvent) => {
-    event.preventDefault();
-    const task = data.findTasks;
-    delete task.__typename;
-    const variables = { 
-      input: {
-        ...task,
-        title: title || task.title,
-        description: description || task.description,
-      }
-    };
-
+  const submit = (model: any) => {
+    // remove `__typename` property without
+    // deleting from the model object (as this may be a state reference)
+    const { __typename, ...no__typename } = model;
     updateTaskMutation({
-      variables
+      variables: { input: no__typename }
     })
-    .then(() => history.push('/'))
-    .catch(handleError);
+      .then(() => history.push('/'))
+      .catch(handleError);
   }
 
   if (error) return <pre>{JSON.stringify(error)}</pre>;
@@ -99,17 +87,7 @@ export const UpdateTaskPage: React.FC<RouteComponentProps<IUpdateMatchParams>> =
               </IonLabel>
             </IonCardContent>
           </IonCard>
-          <form onSubmit={submit} style={{ padding: '0 16px' }}>
-            <IonItem>
-              <IonLabel color="primary" position="floating">Title</IonLabel>
-              <IonInput type="text" name="title" onInput={(e: any) => setTitle(e.target.value)} value={task.title} />
-            </IonItem>
-            <IonItem>
-              <IonLabel color="primary" position="floating">Description</IonLabel>
-              <IonInput type="text" name="description" onInput={(e: any) => setDescription(e.target.value)} value={task.description} />
-            </IonItem>
-            <IonButton className="submit-btn" expand="block" type="submit">Update</IonButton>
-          </form>
+          <TaskForm handleSubmit={submit} model={task} />
           <IonToast
             isOpen={showToast}
             onDidDismiss={() => setShowToast(false)}

server/package.json

@@ -35,7 +35,7 @@
     "express-session": "1.17.0",
     "graphql-tag": "2.10.3",
     "keycloak-connect": "9.0.2",
-    "keycloak-connect-graphql": "0.4.0",
+    "keycloak-connect-graphql": "0.5.0",
     "@graphback/keycloak-authz": "0.12.0"
   }
 }