React -> upgrade forms & init next views

src/components/forms/formGenerator.js

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useState } from 'react'
 
 /**
  * 
@@ -13,15 +13,20 @@ export const FormGenerator = ({
 
     const handler = async (event) => {
         event.preventDefault()
-        for (let i = 0; i < refList.length; i++) {
+
-            if (refList[i].current.value === ''
+        if ( inputList[0].action === 'Download' ) {
-                && inputList[0].action !== 'Update'
+            await action()
-                || i === 0
+        } else {
-                && refList.length !== 1
+            for (let i = 0; i < refList.length; i++) {
-            ) {
+                if (refList[i].current.value === ''
-                refList[i].current.focus()
+                    && inputList[0].action !== 'Update'
-            } else if (i === refList.length - 1) {
+                    || i === 0
-                await action(refList)
+                    && refList.length !== 1
+                ) {
+                    refList[i].current.focus()
+                } else if (i === refList.length - 1) {
+                    await action(refList)
+                }
             }
         }
     }
@@ -51,6 +56,14 @@ export const FormGenerator = ({
                                 key={key}
                             />
                         )
+                    } else if (input.type === 'drop-box') {
+                        return (
+                            <DownloadFilesListInputGenerator 
+                                input={input}
+                                info={info}
+                                key={key}
+                            />
+                        )
                     } else if (input.type === 'file') {
                         return (
                             <UploadInputGenerator
@@ -62,9 +75,16 @@ export const FormGenerator = ({
                     }
                 })
             }
-            <button type='submit'>
+            {
-                { info.button_value }
+                info.button_value === ''
-            </button>
+                ? <></>
+                : <button 
+                      type='submit'
+                  >
+                      { info.button_value }
+                  </button>
+            }
+            
         </form>
     )
 }
@@ -130,6 +150,52 @@ const PasswordInputGenerator = ({
     )
 }
 
+/**
+ * Text input generator, example:
+ * @param {
+ * {    
+ *  type: 'drop-box',   
+ *  name: 'name',
+ *  values: list,
+ *  link: link to the file
+ * }    } input - basic text input 
+ * @param {
+ * {
+ *  type: 'info',
+ *  action: 'Update'
+ *  endpoint: 'Album'
+ * }    } info - information about form
+ */
+const DownloadFilesListInputGenerator = ({
+    input, info
+}) => {
+
+    return (
+        <div
+            id={input.name + info.action + info.endpoint + 'DropBox'}
+        >
+            {input.name + ':'}
+            {
+                input.values.map( (item, index) => {
+
+                        return (
+                            <div
+                                key={ item }
+                            >
+                                <a 
+                                    href={ input.link + index + '/' }
+                                >
+                                    { item }
+                                </a>
+                            </div>
+                        )
+                    }
+                )
+            }
+        </div>
+    )
+}
+
 /**
  * Upload file input generator, example:
  * @param {
@@ -196,4 +262,6 @@ const UploadInputGenerator = ({
     )
 }
 
+
+
 export default FormGenerator

src/components/forms/model_crud/modelShowModelsAndDownload.js

@@ -0,0 +1,65 @@
+import React, { useEffect } from 'react'
+
+import { useSelector, useDispatch } from 'react-redux'
+
+import { userAuthSelector } from '../../../redux/slices/userAuthSlice'
+import { modelCrudSelector } from '../../../redux/slices/modelCrudSlice'
+import modelCrudAsyncThunk from '../../../redux/asyncThunks/modelCrudAsyncThunk'
+
+import { GeneralAddress } from '../../../redux/asyncThunks/abstracts/abstractAddress'
+
+import FormGenerator from '../formGenerator'
+
+
+const ModelShowAndDownloadForm = () => {
+
+    const dispatch = useDispatch()
+    
+    const { models_list } = useSelector( modelCrudSelector )
+    const { user, token } = useSelector( userAuthSelector )
+
+    let blocker = false
+
+    useEffect(
+        () => {
+            if ( models_list.length === 0 && user.id > 0 && token !== '' && !blocker ) {
+                dispatch( modelCrudAsyncThunk.fetchGetAllModels(token) )
+                if ( models_list.length === 0 ) {
+                    blocker = true
+                }
+            }
+        }
+    )
+
+    let inputList = [
+        {
+            type: 'info',
+            action: 'Download',
+            endpint: 'model/download',
+            button_value: 'Refresh Models List'
+        },
+        {
+            type: 'drop-box',
+            name: 'Models',
+            values: models_list,
+            link: GeneralAddress + '/model/',
+        }
+    ]
+
+    const handleRefresh = () => {
+        dispatch( modelCrudAsyncThunk.fetchGetAllModels(token) )
+    }
+
+    return (
+        <>
+            <FormGenerator 
+                inputList={ inputList }
+                refList={ [] }
+                action={ handleRefresh }
+            />
+        </>
+    )
+
+}
+
+export default ModelShowAndDownloadForm

src/components/forms/model_crud/modelUpload.js

@@ -0,0 +1,10 @@
+import React from 'react'
+
+const ModelUploadForm = () => {
+    return (
+        <>
+        </>
+    )
+}
+
+export default ModelUploadForm

src/pages/func_group/model_crud/modelCrudIndex.js

@@ -1,10 +1,41 @@
 import React, { useState, useEffect } from 'react'
 
-const ModelCrudIndex = () => {
+import ModelShowAndDownloadForm from '../../../components/forms/model_crud/modelShowModelsAndDownload'
+import ModelUpload from '../../../components/forms/model_crud/modelUpload'
+
+
+const __handleSwap = (name, movement) => {
+    
+    let display = {
+        display: 'block'
+    }
+
+    let hide = {
+        display: 'none'
+    }
+
+    if ( Object.keys(movement['movement']).includes(name) ) {
+        if (movement['movement'][name])
+            return display
+        else
+            return hide
+    } else {
+        return hide
+    }
+
+}
+
+const ModelCrudIndex = ( movement ) => {
 
     return (
-        <div>
+        <>
-        </div>
+            <div style={ __handleSwap( 'show_models_and_download', movement ) }>
+                <ModelShowAndDownloadForm />
+            </div>
+            <div style={ __handleSwap( 'upload_model', movement ) }>
+                <ModelUpload />
+            </div>
+        </>
     )
 }
 

src/pages/func_group/navigationBar.js

@@ -10,32 +10,26 @@ import userAuthAsyncThunk from '../../redux/asyncThunks/userAuthAsyncThunk'
 
 const __setShowGeneral = ( view, key, movements ) => {
 
-    movements.user_view.setUserCrudView( 
+    movements.user_view.userCrudView = {
-        {
+        update_user: false,
-            update_user: false,
+        delete_user: false
-            delete_user: false
+    }
-        }
-    )
 
-    movements.model_view.setModelCrudView( 
+    movements.model_view.modelCrudView = {
-        {
+        show_models_and_dwonload: false,
-            show_models_and_dwonload: false,
+        upload_model: false
-            upload_model: false
+    }
-        }
-    )
 
-    movements.render_view.setRenderView( 
+    movements.render_view.renderView = {
-        {
+        show_ready_renders_and_download: false,
-            show_ready_renders_and_download: false,
+        render_functionality: {
-            render_functionality: {
+            render_single_image: false,
-                render_single_image: false,
+            render_single_set: false,
-                render_single_set: false,
+            render_all: false,
-                render_all: false,
+            render_image_by_vector: false,
-                render_image_by_vector: false,
+            render_set_by_vector: false
-                render_set_by_vector: false
-            }
         }
-    )
+    }
 
     if (view === 'user_view') {
         let new_move = movements.user_view.userCrudView
@@ -44,6 +38,7 @@ const __setShowGeneral = ( view, key, movements ) => {
             new_move
         )
     } else if (view === 'model_view') {
+        
         let new_move = movements.model_view.modelCrudView
         new_move[key] = true
         movements.model_view.setModelCrudView( 
@@ -144,7 +139,7 @@ const NavigationBar = ({ movements }) => {
                     ├── Models
                     </div>
                     <div style={ __styleChanger( showModels ) }>
-                        <div onClick={ () => __setShowGeneral( 'model_view', 'show_models_and_dwonload', movements )}>
+                        <div onClick={ () => __setShowGeneral( 'model_view', 'show_models_and_download', movements )}>
                             │   ├── Show Models & Download
                         </div>
                         <div onClick={ () => __setShowGeneral( 'model_view', 'upload_model', movements ) }>

src/pages/func_group/rootUtils.js

@@ -22,7 +22,7 @@ const GeneralView = () => {
     )
     const [modelCrudView, setModelCrudView] = useState(
         {
-            show_models_and_dwonload: false,
+            show_models_and_download: false,
             upload_model: false
         }
     )
@@ -60,16 +60,16 @@ const GeneralView = () => {
                 movements={ movements }
             />
             <UserCrudIndex 
-                movements={ movements }
+                movement={ movements.user_view.userCrudView }
             />
             <ModelCrudIndex 
-                movements={ movements }
+                movement={ movements.model_view.modelCrudView }
             />
             <RenderCrudIndex 
-                movements={ movements }
+                movement={ movements.render_view.renderView }
             />
             <RenderWebsocketIndex 
-                movements={ movements }
+                movement={ movements.render_view.renderView }
             />
         </>
     )

src/redux/asyncThunks/abstracts/abstractAddress.js

@@ -1 +1 @@
-export const GeneralAddress = 'localhost:9090'
+export const GeneralAddress = 'http://localhost:9090'

src/redux/asyncThunks/abstracts/abstractService.js

@@ -1,7 +1,7 @@
 import axios from 'axios'
 import { GeneralAddress } from './abstractAddress'
 
-const APIAddress = 'http://' + GeneralAddress
+const APIAddress = GeneralAddress
 
 let defaultBody = {}
 

src/redux/slices/modelCrudSlice.js

@@ -8,7 +8,6 @@ const modelCrudSlice = createSlice(
             models_list: [],
             download_blend_file: '',
             upload_blend_file_status: ''
-
         },
         reducers: {},
         extraReducers: {