refactor input form generator && complete update abstract

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

@@ -0,0 +1,12 @@
+export const validate = ( inputs ) => {
+    let object = {}
+    for (let i = 0; i < inputs.length; i++) {
+        if ( 
+            inputs[i]['type'] === 'text' 
+            && inputs[i]['ref'] !== undefined 
+            && inputs[i]['ref'].current.value !== '' 
+        )
+            object[ inputs[i]['name'] ] = inputs[i]['ref'].current.value
+    }
+    return object
+}

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

@@ -14,7 +14,11 @@ export const FormGenerator = ({
     const handler = async (event) => {
         event.preventDefault()
         for ( let i = 0; i < refList.length; i++ ) {
-            if ( refList[i].current.value === '' ) {
+            if ( 
+                refList[i].current.value === '' 
+                && inputList[0].action !== 'Update'
+                || i === 0 && refList.length !== 1
+            ) {
                 refList[i].current.focus()
             } else if ( i === refList.length - 1 ) {
                 await action( refList )
@@ -22,15 +26,20 @@ export const FormGenerator = ({
         }
     }
     
+    let info
+
     return (
         <form onSubmit={ event => handler( event ) }>
             {   
                 inputList.map( (input, key) => {
                     
-                    if ( input.type === 'text' ) {
+                    if ( input.type === 'info' ) {
+                        info = input
+                    } else if ( input.type === 'text' ) {
                         return ( 
                             <TextInputGenerator 
                                 input={ input }
+                                info={ info }
                                 key={ key } 
                             /> 
                         )
@@ -38,6 +47,7 @@ export const FormGenerator = ({
                         return (
                             <UploadInputGenerator 
                                 input={ input }
+                                info={ info }
                                 key={ key } 
                             />
                         )
@@ -55,18 +65,23 @@ export const FormGenerator = ({
  * {    
  *  type: 'text',   
  *  name: 'name',       
- *  endpoint: 'Album',    
  *  ref: React.createRef()  
  * }    } input - basic text input 
+ * @param {
+ * {
+ *  type: 'info',
+ *  action: 'Update'
+ *  endpoint: 'Album'
+ * }    } info - information about form
  */
 const TextInputGenerator = ({ 
-    input
+    input, info
 }) => {
     return (
         <div>
             { input.name + ':' }
             <input 
-                id={ input.name + input.endpoint + 'Input' }
+                id={ input.name + info.action + info.endpoint + 'Input' }
                 autoComplete='off'
                 ref={ input.ref }
             />
@@ -87,7 +102,7 @@ const TextInputGenerator = ({
  * }    } input -  
  */
 const UploadInputGenerator = ({ 
-    input 
+    input, info
 }) => {
     
     const onLoadFile = async ( event ) => {
@@ -129,7 +144,7 @@ const UploadInputGenerator = ({
             </pre>
             <input 
                 style={ { marginTop: '-55px' } }
-                id={ input.name + input.endpoint + 'Input' }
+                id={ input.name + info.action + info.endpoint + 'Input' }
                 className='uploadInput'
                 type='file'
                 accept={ input.fileType + '/*' }

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

@@ -3,7 +3,7 @@ import { connect } from 'react-redux'
 
 import { createAlbum } from '../../../../../../stores/album/duck/operations'
 import { generateUrlCode } from '../../../../../generateUrlCode'
-import FormGenerator from '../Abstract Utils/FormGenerator'
+import { FormGenerator } from '../Abstract Utils/FormGenerator'
 import { ResetComponent } from '../Abstract Utils/ResetComponent'
 
 
@@ -28,22 +28,24 @@ const AlbumCreate = ({
     ]
 
     let inputList = [
+        {
+            type: 'info',
+            action: 'Create',
+            endpoint: 'Album'
+        },
         {
             type: 'text',
             name: 'title',
-            endpoint: 'Album',
             ref: titleInput
         },
         {
             type: 'text',
             name: 'description',
-            endpoint: 'Album',
             ref: descriptionInput
         },
         {
             type: 'file',
             name: 'image',
-            endpoint: 'Album',
             fileType: 'image',
             dropInfo: imageInfo,
             setDropInfo: setImageInfo,

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

@@ -23,10 +23,14 @@ const AlbumDelete = ({
     ]
 
     let inputList = [
+        {
+            type: 'info',
+            action: 'Delete',
+            endpoint: 'Album'
+        },
         {
             type: 'text',
-            name: 'idDelete',
-            endpoint: 'Album',
+            name: 'id',
             ref: idInput
         }
     ]

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

@@ -24,10 +24,14 @@ const AlbumGetOne = ({
     ]
 
     let inputList = [
+        {
+            type: 'info',
+            action: 'GetOne',
+            endpoint: 'Album'
+        },
         {
             type: 'text',
-            name: 'idGetOne',
-            endpoint: 'Album',
+            name: 'id',
             ref: getOneInput
         }
     ]

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

@@ -2,6 +2,9 @@ import React, { useState, useEffect } from 'react'
 import { connect } from 'react-redux'
 
 import { updateAlbum } from '../../../../../../stores/album/duck/operations'
+import { FormGenerator } from '../Abstract Utils/FormGenerator'
+import { ResetComponent } from '../Abstract Utils/ResetComponent'
+import { validate } from '../Abstract Utils/AbstractUpdate'
 
 
 const AlbumUpdate = ({ 
@@ -13,41 +16,62 @@ const AlbumUpdate = ({
 }) => {
 
     const [message, setMessage] = useState('')
+    const [image, setImage] = useState('')
+    const [imageInfo, setImageInfo] = useState('Drop/Click\nfor upload album image...')
     
     const idInput = React.createRef()
     const userInput = React.createRef()
     const titleInput = React.createRef()
     const descriptionInput = React.createRef()
-    const imageInput = React.createRef()
 
-    const update = (event) => {
-        event.preventDefault()
+    let refList = [
+        idInput,
+        userInput,
+        titleInput,
+        descriptionInput
+    ]
 
-        let id = idInput.current.value
-        let userID = userInput.current.value
-        let title = titleInput.current.value
-        let description = descriptionInput.current.value
-        let image = imageInput.current.value
-        
-        if ( id !== '' ) {
-            updateFetch(id, userID, title, description, image)
-        } else {
-            document.getElementById('idUpdateAlbumInput').focus()
+    let inputList = [
+        {
+            type: 'info',
+            action: 'Update',
+            endpoint: 'Album'
+        },
+        {
+            type: 'text',
+            name: 'id',
+            ref: idInput
+        },
+        {
+            type: 'text',
+            name: 'user',
+            ref: userInput
+        },
+        {
+            type: 'text',
+            name: 'title',
+            ref: titleInput
+        },
+        {
+            type: 'text',
+            name: 'description',
+            ref: descriptionInput
+        },
+        {
+            type: 'file',
+            name: 'image',
+            fileType: 'image',
+            dropInfo: imageInfo,
+            setDropInfo: setImageInfo,
+            file: image,
+            setFile: setImage
         }
-    }
+    ]
 
-    const updateFetch = async (id, userID, title, description, image) => {
-        let album = {}
-        if ( userID !== '' )
-            album['user_id'] = userID
-        if ( title !== '' )    
-            album['title'] = title
-        if ( description !== '' )
-            album['description'] = description
-        if ( image !== '' )
-            album['image'] = image
+    const updateFetch = async ( refs ) => {
+        let album = validate( inputList )
         await updateAlbum(
-            id,
+            album.id,
             album,
             user.token
         ).then( response => {
@@ -55,62 +79,26 @@ const AlbumUpdate = ({
         })
     }
     
-    useEffect( 
-        () => {
-            if ( componentVisible ) {
-                document.getElementById('idUpdateAlbumInput').focus()
-            } else {
-                activateConsoleInput()         
-            }
-            if ( message !== '' ) {
-
-                userInput.current.value = ''
-                titleInput.current.value = ''
-                descriptionInput.current.value = ''
-                imageInput.current.value = ''
-
-                setConsoleHistory( consoleHistory + message )
-                setComponentVisible( false )
-                setMessage('')
-            }
-        }
-    )
+    const resetState = () => {
+        setConsoleHistory( consoleHistory + message )
+        setComponentVisible( false )
+        setMessage('')
+    }
 
     return (
         <div>
-            <form onSubmit={ update }>
-                id:
-                <input 
-                        id='idUpdateAlbumInput'
-                        autoComplete='off'
-                        ref={ idInput }
-                    /> <br />
-                user_id:
-                <input 
-                        id='userUpdateAlbumInput'
-                        autoComplete='off'
-                        ref={ userInput }
-                    /> <br />
-                title:
-                <input 
-                        id='titleUpdateAlbumInput'
-                        autoComplete='off'
-                        ref={ titleInput }
-                    /> <br />
-                description:
-                <input 
-                        id='descriptionUpdateAlbumInput'
-                        autoComplete='off'
-                        ref={ descriptionInput }
-                    /> <br />
-                image:
-                <input 
-                        id='imageUpdateAlbumInput'
-                        autoComplete='off'
-                        ref={ imageInput }
-                    />
-                <button type='submit' />
-            </form>
+            <FormGenerator 
+                inputList={ inputList }
+                refList={ refList }
+                action={ updateFetch }
+            />
+            <ResetComponent 
+                resetState={ resetState }
+                refList={ refList }
+                message={ message }
+                componentVisible={ componentVisible }
+                activateConsoleInput={ activateConsoleInput }
+            />
         </div>
     )
 }