fix form validation errors, closes #462

src/components/Form/ImageInput.field.tsx

@@ -5,6 +5,14 @@ import { FieldContainer } from './elements'
 
 export const ImageInputField = ({ input, meta, ...rest }: IFieldProps) => (
   <FieldContainer>
-    <ImageInput {...rest} onFilesChange={files => input.onChange(files)} />
+    <ImageInput
+      {...rest}
+      // as validation happens on blur also want to artificially trigger when values change
+      // (no native blur event)
+      onFilesChange={files => {
+        input.onChange(files)
+        input.onBlur()
+      }}
+    />
   </FieldContainer>
 )

src/components/Form/Select.field.tsx

@@ -66,6 +66,8 @@ export const SelectField = ({ input, meta, ...rest }: ISelectFieldProps) => (
       onChange={v => {
         input.onChange(getValueFromSelect(v))
       }}
+      onBlur={input.onBlur}
+      onFocus={input.onFocus}
       value={getValueForSelect(rest.options, input.value)}
       {...defaultProps}
       {...rest}

src/pages/Howto/Content/CreateHowto/CreateHowto.tsx

@@ -5,7 +5,6 @@ import { FieldArray } from 'react-final-form-arrays'
 import arrayMutators from 'final-form-arrays'
 import { IHowto, IHowtoFormInput } from 'src/models/howto.models'
 import TEMPLATE from './TutorialTemplate'
-import { stripSpecialCharacters } from 'src/utils/helpers'
 import { UploadedFile } from 'src/pages/common/UploadedFile/UploadedFile'
 import { InputField, TextAreaField } from 'src/components/Form/Fields'
 import { SelectField } from 'src/components/Form/Select.field'
@@ -21,7 +20,6 @@ import { ImageInputField } from 'src/components/Form/ImageInput.field'
 import { FileInputField } from 'src/components/Form/FileInput.field'
 import posed, { PoseGroup } from 'react-pose'
 import { inject } from 'mobx-react'
-import { Database } from 'src/stores/database'
 
 interface IState {
   formValues: IHowtoFormInput
@@ -72,23 +70,7 @@ export class CreateHowto extends React.Component<IProps, IState> {
   }
 
   public validateTitle = async (value: any, meta?: FieldState) => {
-    if (meta && (!meta.dirty && meta.valid)) {
-      return undefined
-    }
-    if (value) {
-      const error = this.store.isSlugUnique(stripSpecialCharacters(value))
-      return error
-    } else if ((meta && (meta.touched || meta.visited)) || value === '') {
-      return 'A title for your how-to is required'
-    }
-    return undefined
-  }
-
-  public validate = async (formValues: IHowtoFormInput) => {
-    // TODO: validate cover image exists
-    // if (this.state.formValues.cover_image_url === '') {
-    // alert('Please provide a cover image before saving your tutorial')
-    return Promise.resolve({})
+    this.store.validateTitle(value, meta)
   }
 
   public render() {
@@ -98,13 +80,11 @@ export class CreateHowto extends React.Component<IProps, IState> {
         <Form
           onSubmit={v => this.onSubmit(v as IHowtoFormInput)}
           initialValues={formValues}
-          validate={() => this.validate}
-          validateOnBlur
           mutators={{
             ...arrayMutators,
           }}
+          validateOnBlur
           render={({ handleSubmit, submitting, values, invalid, errors }) => {
-            const v = values as IHowto
             const disabled = invalid || submitting
             return (
               <form onSubmit={handleSubmit}>
@@ -121,27 +101,21 @@ export class CreateHowto extends React.Component<IProps, IState> {
                         component={InputField}
                         placeholder="Title of your How-to *"
                       />
-                      <Field
-                        name="tags"
-                        validateFields={[]}
-                        component={TagsSelectField}
-                      />
+                      <Field name="tags" component={TagsSelectField} />
                       <FlexContainer p={0}>
                         <Field
                           name="tutorial_time"
-                          // TODO - fix validation (#462)
-                          // validate={required}
-                          // validateFields={[]}
+                          validate={required}
+                          validateFields={[]}
                           options={TEMPLATE.TIME_OPTIONS}
                           component={SelectField}
                           placeholder="How much time? *"
                           style={{ marginRight: '4px' }}
                         />
                         <Field
                           name="difficulty_level"
-                          // TODO - fix validation (#462)
-                          // validate={required}
-                          // validateFields={[]}
+                          validate={required}
+                          validateFields={[]}
                           component={SelectField}
                           options={TEMPLATE.DIFFICULTY_OPTIONS}
                           placeholder="How hard is it? *"
@@ -161,9 +135,7 @@ export class CreateHowto extends React.Component<IProps, IState> {
                     <BoxContainer p={0} width={[1, null, '380px']}>
                       <Field
                         name="cover_image"
-                        // TODO - fix validation (#462)
-                        // validate={required}
-                        // validateFields={[]}
+                        validate={required}
                         validateFields={[]}
                         component={ImageInputField}
                         text="Cover Image"

src/stores/Discussions/discussions.store.tsx

@@ -4,7 +4,7 @@ import {
   IDiscussionPost,
   IPostFormInput,
 } from 'src/models/discussions.models'
-import { Database } from '../database'
+import { Database, IDBEndpoints } from '../database'
 import { stripSpecialCharacters } from 'src/utils/helpers'
 import { ModuleStore } from '../common/module.store'
 import { Subscription } from 'rxjs'
@@ -39,8 +39,10 @@ export class DiscussionsStore extends ModuleStore {
     comment: string,
     repliesToId?: string,
   ) {
+    // cast endpoing to IDB endpoints as no way in typescript ot handle regex for subcollection path
+    const endpoint = `discussions/${discussionID}/comments` as IDBEndpoints
     const values: IDiscussionComment = {
-      ...Database.generateDocMeta(`discussions/${discussionID}/comments`),
+      ...Database.generateDocMeta(endpoint),
       comment,
       _discussionID: discussionID,
       replies: [],
@@ -99,8 +101,9 @@ export class DiscussionsStore extends ModuleStore {
     this.allDiscussionComments$.unsubscribe()
     this.activeDoc$.subscribe(doc => {
       if (doc) {
+        const endpoint = `discussions/${doc._id}/comments` as IDBEndpoints
         this.allDiscussionComments$ = Database.getCollection(
-          `discussions/${doc._id}/comments`,
+          endpoint,
         ).subscribe(docs => {
           this.allDiscussionComments = docs
         })

src/stores/Howto/howto.store.tsx

@@ -5,6 +5,7 @@ import { Database } from 'src/stores/database'
 import { stripSpecialCharacters } from 'src/utils/helpers'
 import { IConvertedFileMeta } from 'src/components/ImageInput/ImageInput'
 import { Storage } from '../storage'
+import { FieldState } from 'final-form'
 
 export class HowtoStore {
   // we have two property relating to docs that can be observed
@@ -13,6 +14,7 @@ export class HowtoStore {
   @observable
   public allHowtos: IHowto[] = []
 
+  // *** TODO - migrate these to standard database/common module.store methods (not call afs directly)
   // call getDocList to query 'Howtos' from db and map response to docs observable
   @action
   public async getDocList() {
@@ -46,6 +48,19 @@ export class HowtoStore {
     }
   }
 
+  public validateTitle = async (value: any, meta?: FieldState) => {
+    if (meta && (!meta.dirty && meta.valid)) {
+      return undefined
+    }
+    if (value) {
+      const error = this.isSlugUnique(stripSpecialCharacters(value))
+      return error
+    } else if ((meta && (meta.touched || meta.visited)) || value === '') {
+      return 'A title for your how-to is required'
+    }
+    return undefined
+  }
+
   public generateID = () => {
     return Database.generateDocId('howtos')
   }