From 52a0727e1e4aa8d2330e471ea0119203169eddc4 Mon Sep 17 00:00:00 2001
From: Jon <jonathon.lockwood@networkedweb.com>
Date: Sat, 28 Sep 2024 23:29:45 +0930
Subject: [PATCH] feat(hook): Add apiFetch to collect data from api

ref: #1 nofusscomputing/centurion_erp#248 nofusscomputing/centurion_erp#307 nofusscomputing/centurion_erp#319
---
 .vscode/launch.json            |   2 +-
 src/App.js                     |  25 ++++----
 src/components/page/Navbar.jsx | 109 +++++++++++++--------------------
 src/hooks/apiFetch.js          |  63 +++++++++++++++++++
 src/layout/Detail.jsx          |  53 ++++++----------
 src/layout/List.jsx            |  48 ++++++---------
 6 files changed, 159 insertions(+), 141 deletions(-)
 create mode 100644 src/hooks/apiFetch.js

diff --git a/.vscode/launch.json b/.vscode/launch.json
index e6d1238..632f985 100644
--- a/.vscode/launch.json
+++ b/.vscode/launch.json
@@ -9,7 +9,7 @@
             "type": "chrome",
             "request": "launch",
             "name": "React",
-            "url": "http://localhost:3000/",
+            "url": "http://127.0.0.1:3000/",
             "webRoot": "${workspaceFolder}/src",
             "trace": true,
             "runtimeArgs": [
diff --git a/src/App.js b/src/App.js
index 18c3fe7..602c284 100644
--- a/src/App.js
+++ b/src/App.js
@@ -6,15 +6,15 @@ import {
     createRoutesFromElements,
 } from 'react-router-dom'
 
-import './index.css'
-
-import { ResponseException } from "./classes/Exceptions";
 
-import RootLayout from "./layout/Root";
+import './index.css'
 import Detail from "./layout/Detail";
+import ErrorPage from "./layout/Error";
+import { getCookie } from "./hooks/getCookie";
 import List from "./layout/List";
+import { ResponseException } from "./classes/Exceptions";
+import RootLayout from "./layout/Root";
 import Ticket from "./layout/Ticket";
-import ErrorPage from "./layout/Error";
 
 
 
@@ -86,17 +86,20 @@ export default App;
 
 const detailsLoader = async ({request, params}) => {
 
-    let url = 'http://localhost:8003/api/' + params.module + '/' + params.model
+    let loader = null
 
-    if( params.pk ) {
+    let url = 'http://127.0.0.1:8002/api/v2/' + params.module + '/' + params.model
 
-        url = url + '/' + params.pk
+        if( params.pk ) {
 
-    }
+            url = url + '/' + params.pk
 
-    let loader = null
+        }
 
-    const response = await fetch(url)
+    const response = await fetch(url, {
+        headers: {'X-CSRFToken': getCookie('csrftoken')},
+        credentials: 'include'
+    })
 
         .then( response => {
 
diff --git a/src/components/page/Navbar.jsx b/src/components/page/Navbar.jsx
index d724236..93ba895 100644
--- a/src/components/page/Navbar.jsx
+++ b/src/components/page/Navbar.jsx
@@ -1,7 +1,8 @@
-import { Link, useLocation } from "react-router-dom";
+import { Link, useLocation, useParams } from "react-router-dom";
 import IconLoader from "../IconLoader";
 import { useEffect, useState } from "react";
 import { ResponseException } from "../../classes/Exceptions";
+import { apiFetch } from "../../hooks/apiFetch";
 
 
 
@@ -9,7 +10,9 @@ const Navbar = ({
     nav_visible,
 }) => {
 
-    const [ menu_entries, SetMenuEntries ] = useState(null)
+    const params = useParams();
+
+    const [ navigation, SetNavigationEntries ] = useState(null)
 
     const [ nav_menu, setNavMenu ] = useState(null);
 
@@ -19,31 +22,27 @@ const Navbar = ({
 
     useEffect(() => {
 
-        fetch('http://localhost:8003/api/options/navigation')
+        apiFetch(
+            '',
+            (data) => {
 
-            .then(response => {
+                SetNavigationEntries(data.navigation)
 
-                if( ! response.ok ) {
+                if( params.module ){
 
-                    throw new ResponseException(response)
+                    setNavMenu(params.module);
 
                 }
 
-                return response.json()
-            
-            })
-            
-            .then(data => {
-            
-                SetMenuEntries(data)
-            
-            })
+                if( params.model ) {
 
-            .catch(err => {
+                    setNavPage(String(params.module + '-' + params.model))
 
-                throw Error(err)
+                }
+            },
+            'OPTIONS'
+        )
 
-            })
     },[])
 
 
@@ -52,25 +51,16 @@ const Navbar = ({
         return (
             <div id="navigation" key={'navigation'} className="nav">
             <nav>
-                {menu_entries!= null && menu_entries.map((module, index) =>{
+                {navigation != null && navigation.map((module, index) =>{
 
                     const paths = String(location.pathname).split('/')
 
-                    if(
-                        module.name.toLowerCase() === paths[1] &&
-                        nav_menu === null
-
-                    ) {
-
-                        setNavMenu(module.name.toLowerCase())
-
-                    }
-
                     return(
                         <div className="group">
                             <div id={module.name+'-'+index} className="menu" onClick={()=> setNavMenu(
                                 (module.name.toLowerCase() === nav_menu ? null : module.name.toLowerCase())
                             )}>
+
                                 <span className="icon">
                                     { 'icon' in module ? 
                                         <IconLoader
@@ -78,13 +68,13 @@ const Navbar = ({
                                         />
                                         : 
                                         <IconLoader
-                                            name = {String(module.name)}
+                                            name = {String(module.display_name)}
                                         />
                                     }
                                 </span>
-                                <span className="text">{module.name}</span>
+                                <span className="text">{module.display_name}</span>
                                 <span className="menu-icon">{
-                                    nav_menu === module.name.toLowerCase() ?
+                                    nav_menu === module.name ?
                                     <IconLoader
                                         name='navdown'
                                         height = '25px'
@@ -98,42 +88,31 @@ const Navbar = ({
                                     />
                                 }</span>
                             </div>
-                            {nav_menu === module.name.toLowerCase() &&
+                            {nav_menu === module.name &&
                             
-                                <div id={module.name.toLowerCase()+'-'+index} className="sub-menu">
+                                <div id={module.module+'-'+index} className="sub-menu">
                                 {module.pages.map((page) => {
 
-                                    if(
-                                        location.pathname === page.link &&
-                                        nav_page === null
-
-                                    ) {
-
-                                        setNavPage(module.name.toLowerCase()+'-'+page.name.toLowerCase())
-
-                                    }
-
-                                        return(
-                                            <Link to={ page.link }><div
-                                                className={nav_page === module.name.toLowerCase()+'-'+page.name.toLowerCase() ? 'page active' : 'page'}
-                                                onClick={()=> setNavPage(module.name.toLowerCase()+'-'+page.name.toLowerCase())}
-                                            >
-                                                <span className="icon">
-                                                { 'icon' in page ? 
-                                                    <IconLoader
-                                                        name = {String(page.icon)}
-                                                    />
-                                                    : 
-                                                    <IconLoader
-                                                        name = {String(page.name)}
-                                                    />
-                                                }
-                                                </span>
-                                                <span className="text">
-                                                    { page.name }
-                                                </span>
-                                            </div></Link>
-                                        )
+                                    return(
+                                        <Link to={ page.link }><div
+                                            className={nav_page === module.name.toLowerCase()+'-'+page.name.toLowerCase() ? 'page active' : 'page'}
+                                        >
+                                            <span className="icon">
+                                            { 'icon' in page ? 
+                                                <IconLoader
+                                                    name = {String(page.icon)}
+                                                />
+                                                : 
+                                                <IconLoader
+                                                    name = {String(page.display_name)}
+                                                />
+                                            }
+                                            </span>
+                                            <span className="text">
+                                                { page.display_name }
+                                            </span>
+                                        </div></Link>
+                                    )
                                 })}
                                 </div>
                             }
diff --git a/src/hooks/apiFetch.js b/src/hooks/apiFetch.js
new file mode 100644
index 0000000..5f0c709
--- /dev/null
+++ b/src/hooks/apiFetch.js
@@ -0,0 +1,63 @@
+import { ResponseException } from "../classes/Exceptions";
+import { getCookie } from "./getCookie";
+
+/**
+ * Make an API call to fetch data
+ * 
+ * @param {String} url_path The URL path to fetch from
+ * @param {Function} callback The callback function for the collected data
+ * @param {String} http_method The HTTP method to use
+ * @returns 
+ */
+export async function apiFetch(
+    url_path,
+    callback = null,
+    http_method = 'GET'
+) {
+
+    let api_data = null
+
+    if(
+        ! url_path.startsWith('/')
+        && url_path != ''
+    ) {
+
+        url_path = '/' + url_path
+
+    }
+
+    await fetch('http://127.0.0.1:8002/api/v2' + url_path, {
+        credentials: 'include',
+        headers: {'X-CSRFToken': getCookie('csrftoken')},
+        method: http_method,
+    })
+
+        .then(response => {
+
+            if( ! response.ok ) {
+
+                throw new ResponseException(response)
+            }
+
+            return response.json()
+
+
+        })
+
+        .then(data => {
+
+            if( callback ) {
+
+                callback(data)
+
+            }
+        })
+
+        .catch(err => {
+
+            throw Error(err)
+
+        });
+
+    return api_data;
+}
diff --git a/src/layout/Detail.jsx b/src/layout/Detail.jsx
index 65a7e4d..7f860f6 100644
--- a/src/layout/Detail.jsx
+++ b/src/layout/Detail.jsx
@@ -1,7 +1,7 @@
 import { useEffect, useState } from "react";
 import { useLoaderData, useParams } from "react-router-dom";
-import { ResponseException } from "../classes/Exceptions";
 
+import { apiFetch } from "../hooks/apiFetch";
 import NavTabs from "../components/page/detail/Navtabs";
 import Section from "../components/page/detail/Section";
 
@@ -19,48 +19,31 @@ const Detail = ({
 
     const [metadata, setMetaData] = useState(null);
 
-    if( 'name' in page_data ) {
-
-        setContentHeading(page_data['name']);
-
-    }else if( 'title' in page_data ) {
-
-        setContentHeading(page_data['title']);
-
-    }else{
-        setContentHeading(metadata['name']);
-    }
-
 
     useEffect(() => {
 
-        fetch('http://localhost:8003/api/' + params.module + '/' + params.model + '/' + params.model_id + '/option')
-
-            .then(response => {
+        apiFetch(
+            params.module + '/' + params.model + '/' + params.pk,
+            (data) =>{
 
-                if( ! response.ok ) {
-
-                    throw new ResponseException(response)
-                }
-
-                return response.json()
+                setMetaData(data)
 
-            })
-            .then(data => {
+                if( 'name' in page_data ) {
 
-                setMetaData(data)
+                    setContentHeading(page_data['name']);
 
-            })
-            .catch(err => {
+                }else if( 'title' in page_data ) {
 
-                throw Error(err)
+                    setContentHeading(page_data['title']);
 
-            }
+                }else{
+                    setContentHeading(metadata['name']);
+                }
 
-            );
-    },[
-        params
-    ])
+            },
+            'OPTIONS'
+        )
+    },[])
 
 
     return ( 
@@ -69,9 +52,9 @@ const Detail = ({
             { metadata && <NavTabs
                 active_tab={active_tab}
                 setActiveTab={setActiveTab}
-                tabs={metadata.page_tabs}
+                tabs={metadata.layout}
             />}
-            { metadata !== null && metadata.page_tabs.map(( tab, index ) => {
+            { metadata && metadata.layout.map(( tab, index ) => {
 
                 if( active_tab === tab.name.toLowerCase()
                     || (
diff --git a/src/layout/List.jsx b/src/layout/List.jsx
index 25b8783..7b13a54 100644
--- a/src/layout/List.jsx
+++ b/src/layout/List.jsx
@@ -1,63 +1,53 @@
 import { useEffect, useState } from "react"
 import { Link, useLoaderData, useLocation, useParams } from "react-router-dom"
+
+import { apiFetch } from "../hooks/apiFetch"
 import FieldData from "../functions/FieldData"
 
 
 
-const List = ({ setContentHeading }) => {
+const List = ({
+    setContentHeading
+}) => {
 
     const [metadata, setMetaData] = useState(null)
 
     let devices = useLoaderData();
 
-    useEffect(() => {
-
-        fetch('http://localhost:8003/api/' + params.module + '/' + params.model + '/option')
-
-            .then(response => {
-
-                if (!response.ok) {
-
-                    throw new Response(response.statusText, { 'status': response.status });
+    const params = useParams();
 
-                }
-                return response.json()
-            })
+    useEffect(() => {
 
-            .then(data => {
+        apiFetch(
+            params.module + '/' + params.model,
+            (data) =>{
 
                 setMetaData(data)
+                setContentHeading(data.name)
 
-            })
-
-            .catch(err => {
-
-                throw Error(err)
+            },
+            'OPTIONS' )
 
-            });
+        
 
     }, [devices])
 
 
-    let params = useParams();
-
     let location = useLocation();
 
     return (
         <section>
             {(devices != null && metadata != null) && <div className="content">
-
                 <table>
                     <thead>
                         <tr>
+                            {metadata.table_fields.map(key => {
 
-                            {metadata.fields.map(key => {
-
-                                setContentHeading(metadata.name)
+                                
 
                                 if (key in metadata.actions.POST) {
 
-                                    if (metadata.fields[key] === 'nbsp') {
+                                    if (metadata.table_fields[key] === 'nbsp') {
 
                                         return (
                                             <th>&nbsp</th>
@@ -79,11 +69,11 @@ const List = ({ setContentHeading }) => {
                             return (
                                 <tr id={device.id} key={device.id}>
                                     {
-                                        metadata.fields.map(key => {
+                                        metadata.table_fields.map(key => {
 
                                             if (key in metadata.actions.POST) {
 
-                                                if (metadata.fields[key] === 'nbsp') {
+                                                if (metadata.table_fields[key] === 'nbsp') {
 
                                                     return (
                                                         <td>&nbsp;</td>