refactor handler Abstract FormGenerator.js / Create.js

src/components/index/indexConsole/commands/fetchCommands/Abstract Utils/FormGenerator.js

@@ -3,14 +3,27 @@ import React from 'react'
 /**
  * 
  * @param { [ {}, {}, ...{} ] } inputList - list of dicts with info about input
+ * @param { [] } refList - react ref objects list for handler validation
  * @param { } action - fetch method
  */
 const FormGenerator = ({
-    inputList, action
+    inputList, refList,
+    action
 }) => {
 
+    const handler = async (event) => {
+        event.preventDefault()
+        for ( let i = 0; i < refList.length; i++ ) {
+            if ( refList[i].current.value === '' ) {
+                refList[i].current.focus()
+            } else if ( i === refList.length - 1 ) {
+                await action( refList )
+            }
+        }
+    }
+
     return (
-        <form onSubmit={ event => action( event ) }>
+        <form onSubmit={ event => handler( event ) }>
             {   
                 inputList.map( (input, key) => {
 

src/components/index/indexConsole/commands/fetchCommands/Album/Create.js

@@ -60,22 +60,11 @@ const AlbumCreate = ({
         setMessage('')
     }
 
-    const create = async (event) => {
-        event.preventDefault()
-        let title = titleInput.current.value
-        let description = descriptionInput.current.value
-        if ( title !== '' && description !== '' ) {
-            await createFetch(title, description)
-        } if ( description === '') {
-            document.getElementById('descriptionAlbumInput').focus()
-        }
-    }
-
-    const createFetch = async (title, description) => {
+    const createFetch = async ( refs ) => {
         let album = {
             user_id: user.id,
-            title: title,
-            description: description,
+            title: refs[0].current.value,
+            description: refs[1].current.value,
             image: image,
             url_code: generateUrlCode( 'album' ),
         }
@@ -91,7 +80,8 @@ const AlbumCreate = ({
         <div>
             <FormGenerator 
                 inputList={ inputList }
-                action={ create }
+                refList={ refList }
+                action={ createFetch }
             />
             <ResetComponent 
                 resetState={ resetState }