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,6 +13,10 @@ export const FormGenerator = ({
 
     const handler = async (event) => {
         event.preventDefault()
+
+        if ( inputList[0].action === 'Download' ) {
+            await action()
+        } else {
             for (let i = 0; i < refList.length; i++) {
                 if (refList[i].current.value === ''
                     && inputList[0].action !== 'Update'
@@ -25,6 +29,7 @@ export const FormGenerator = ({
                 }
             }
         }
+    }
 
     let info
 
@@ -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 === ''
+                ? <></>
+                : <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 style={ __handleSwap( 'show_models_and_download', movement ) }>
+                <ModelShowAndDownloadForm />
             </div>
+            <div style={ __handleSwap( 'upload_model', movement ) }>
+                <ModelUpload />
+            </div>
+        </>
     )
 }
 

src/pages/func_group/navigationBar.js

@@ -10,22 +10,17 @@ import userAuthAsyncThunk from '../../redux/asyncThunks/userAuthAsyncThunk'
 
 const __setShowGeneral = ( view, key, movements ) => {
 
-    movements.user_view.setUserCrudView( 
+    movements.user_view.userCrudView = {
-        {
         update_user: false,
         delete_user: false
     }
-    )
 
-    movements.model_view.setModelCrudView( 
+    movements.model_view.modelCrudView = {
-        {
         show_models_and_dwonload: false,
         upload_model: false
     }
-    )
 
-    movements.render_view.setRenderView( 
+    movements.render_view.renderView = {
-        {
         show_ready_renders_and_download: false,
         render_functionality: {
             render_single_image: false,
@@ -35,7 +30,6 @@ const __setShowGeneral = ( view, key, movements ) => {
             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: {