React -> upgrade forms & fixes

src/components/forms/formGenerator.js

@@ -14,7 +14,9 @@ export const FormGenerator = ({
     const handler = async (event) => {
         event.preventDefault()
 
-        if ( inputList[0].action === 'Download' ) {
+        if ( inputList[0].action === 'Download'
+             || inputList[0].action === 'Upload'
+        ) {
             await action()
         } else {
             for (let i = 0; i < refList.length; i++) {
@@ -215,7 +217,8 @@ const UploadInputGenerator = ({
     const onLoadFile = async (event) => {
         event.preventDefault()
         let data = event.target.files[0]
-        input.setFile(await toBase64(data))
+        // input.setFile(await toBase64(data))
+        input.setFile( data )
         setDropInfos(data.name, data.size)
     }
 
@@ -223,11 +226,12 @@ const UploadInputGenerator = ({
         event.preventDefault()
         event.persist()
         let data = event.dataTransfer.files[0]
-        input.setFile(await toBase64(data))
+        // input.setFile(await toBase64(data))
+        input.setFile( data )
         setDropInfos(data.name, data.size)
     }
 
-    const toBase64 = (file) => new Promise((resolve, reject) => {
+    const toBase64 = async (file) => new Promise((resolve, reject) => {
         let fileReader = new FileReader()
         fileReader.readAsDataURL(file)
         fileReader.onload = () => resolve(fileReader.result)

src/components/forms/model_crud/modelUpload.js

@@ -1,8 +1,58 @@
-import React from 'react'
+import React, { useState } 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 FormGenerator from '../formGenerator'
+
 
 const ModelUploadForm = () => {
+
+    const dispatch = useDispatch()
+
+    const [blend, setBlend] = useState('')
+    const [blendInfo, setBlendInfo] = useState('Drop/Click\nfor upload "*.blend" file')
+    
+    const { upload_blend_file_status } = useSelector( modelCrudSelector )
+    const { user, token } = useSelector( userAuthSelector )
+
+    let inputList = [
+        {
+            type: 'info',
+            action: 'Upload',
+            endpint: 'model/upload',
+            button_value: 'Upload Model'
+        },
+        {
+            type: 'file',
+            name: 'Model',
+            fileType: 'blender',
+            dropInfo: blendInfo,
+            setDropInfo: setBlendInfo,
+            file: blend,
+            setFile: setBlend
+        }
+    ]
+
+    const handleModelUpload = () => {
+        let body = {
+            user_id: user.id,
+            file: blend,
+            token: token
+        }
+        console.log( body )
+        dispatch( modelCrudAsyncThunk.fetchUploadModel( body ) )
+    }
+
     return (
         <>
+            <FormGenerator 
+                inputList={ inputList }
+                refList={ [] }
+                action={ handleModelUpload }
+            />
         </>
     )
 }

src/components/forms/render_crud/renderShowReadyRendersAndDownload.js

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

src/pages/func_group/navigationBar.js

@@ -10,17 +10,17 @@ import userAuthAsyncThunk from '../../redux/asyncThunks/userAuthAsyncThunk'
 
 const __setShowGeneral = ( view, key, movements ) => {
 
-    movements.user_view.userCrudView = {
+    let user_default = {
         update_user: false,
         delete_user: false
     }
 
-    movements.model_view.modelCrudView = {
+    let model_default = {
         show_models_and_dwonload: false,
         upload_model: false
     }
 
-    movements.render_view.renderView = {
+    let render_default = {
         show_ready_renders_and_download: false,
         render_functionality: {
             render_single_image: false,
@@ -37,6 +37,12 @@ const __setShowGeneral = ( view, key, movements ) => {
         movements.user_view.setUserCrudView( 
             new_move
         )
+        movements.model_view.setModelCrudView(
+            model_default
+        )
+        movements.render_view.setRenderView(
+            render_default
+        )
     } else if (view === 'model_view') {
         
         let new_move = movements.model_view.modelCrudView
@@ -44,19 +50,31 @@ const __setShowGeneral = ( view, key, movements ) => {
         movements.model_view.setModelCrudView( 
             new_move
         )
+        movements.user_view.setUserCrudView( 
+            user_default
+        )
+        movements.render_view.setRenderView(
+            render_default
+        )
     } else if (view === 'render_view') {
         let new_move = movements.render_view.renderView
         if ( key in new_move ) {
             new_move[key] = true
-            movements.model_view.setModelCrudView( 
+            movements.render_view.setRenderView( 
                 new_move
             )
         } else {
             new_move['render_functionality'][key] = true
-            movements.model_view.setModelCrudView( 
+            movements.render_view.setRenderView( 
                 new_move
             )
         }
+        movements.model_view.setModelCrudView( 
+            model_default
+        )
+        movements.user_view.setUserCrudView( 
+            user_default
+        )
     }
     
 }
@@ -82,7 +100,7 @@ const NavigationBar = ({ movements }) => {
     const dispatch = useDispatch()
 
     useEffect( () => {
-        if ( user_get === {} && token !== '' && user.id > 0)
+        if ( Object.keys(user_get).length === 0 && token !== '' && user.id > 0)
             dispatch(
                 userCrudAsyncThunk.fetchGetOneUser(
                     {

src/pages/func_group/render/renderIndex.js

@@ -0,0 +1,42 @@
+import React, { useState, useEffect } from 'react'
+
+import RenderShowAndDownloadForm from '../../../components/forms/render_crud/renderShowReadyRendersAndDownload'
+
+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 if (Object.keys(movement['movement']['render_functionality']).includes(name)) {
+        if (movement['movement'][name])
+            return display
+        else
+            return hide
+    } else {
+        return hide
+    }
+
+}
+
+const RenderIndex = ( movement ) => {
+
+    return (
+        <div>
+            <div style={ __handleSwap( 'show_ready_renders_and_download', movement ) }>
+                <RenderShowAndDownloadForm />
+            </div>
+        </div>
+    )
+}
+
+export default RenderIndex

src/pages/func_group/render_crud/renderCrudIndex.js

@@ -1,11 +0,0 @@
-import React, { useState, useEffect } from 'react'
-
-const RenderCrudIndex = () => {
-
-    return (
-        <div>
-        </div>
-    )
-}
-
-export default RenderCrudIndex

src/pages/func_group/root.js

@@ -2,13 +2,6 @@ import React, { useState, useEffect } from 'react'
 
 import VerifyUserSession from './rootUtils'
 
-import UserAuthIndex from './user_auth/userAuthIndex'
-import UserCrudIndex from './user_crud/userCrudIndex'
-import ModelCrudIndex from './model_crud/modelCrudIndex'
-import RenderCrudIndex from './render_crud/renderCrudIndex'
-import RenderWebsocketIndex from './render_websocket/renderWebsocketIndex'
-
-
 const Root = () => {
 
     return (

src/pages/func_group/rootUtils.js

@@ -6,8 +6,7 @@ import { userAuthSelector } from '../../redux/slices/userAuthSlice'
 import UserAuthIndex from './user_auth/userAuthIndex'
 import UserCrudIndex from './user_crud/userCrudIndex'
 import ModelCrudIndex from './model_crud/modelCrudIndex'
-import RenderCrudIndex from './render_crud/renderCrudIndex'
+import RenderIndex from './render/renderIndex'
-import RenderWebsocketIndex from './render_websocket/renderWebsocketIndex'
 
 import NavigationBar from './navigationBar'
 
@@ -65,12 +64,12 @@ const GeneralView = () => {
             <ModelCrudIndex 
                 movement={ movements.model_view.modelCrudView }
             />
-            <RenderCrudIndex 
+            <RenderIndex 
                 movement={ movements.render_view.renderView }
             />
-            <RenderWebsocketIndex 
+            {/* <RenderWebsocketIndex 
                 movement={ movements.render_view.renderView }
-            />
+            /> */}
         </>
     )
 }

src/redux/asyncThunks/abstracts/abstractService.js

@@ -72,6 +72,7 @@ const responseAbstract = async (endpoint, method, token, body) => {
       body,
     )
   )
+  console.log(response)
   return response
 }
 
@@ -86,8 +87,8 @@ const headerBuilder = (url, method, token, body) => {
         headers_r = {
             'authorization': token,
             'x-csrftoken': getCookie('csrftoken'),
-            'accept': 'multipart/form-data',
+            // 'accept': 'multipart/form-data',
-            'content-type': 'multipart/form-data',
+            // 'content-type': 'multipart/form-data'
         }
     }
     let headers = {
@@ -97,10 +98,16 @@ const headerBuilder = (url, method, token, body) => {
         credentials: 'same-origin'
     }
     if (method === 'PUT' || method === 'POST' || method === 'PATCH') {
+        if ('file' in body) {
+            headers = Object.assign({}, headers, {
+                data: body,
+            })
+        } else {
             headers = Object.assign({}, headers, {
                 data: JSON.stringify(body),
             })
         }
+    }
     return headers
 }
 

src/redux/asyncThunks/modelCrudAsyncThunk.js

@@ -45,9 +45,6 @@ const fetchUploadModel = createAsyncThunk(
         body,
         thunkAPI
     ) => {
-        let formData = FormData()
-        formData.append("blend", body.file)
-        body.file = formData
         return await abstractService._post(
             endpoint, 
             body,

src/redux/slices/renderCrudSlice.js

@@ -11,7 +11,7 @@ const renderCrudSlice = createSlice(
         reducers: {},
         extraReducers: {
             [renderCrudAsyncThunk.fetchGetAllRenders.fulfilled.type]: (state, action) => {
-                state.render_list = action.payload.data.render_list
+                state.render_list = action.payload.data
             },
             [renderCrudAsyncThunk.fetchGetOneRenderAndDownload.fulfilled.type]: (state, action) => {
                 state.download_zip_file = action.payload.data