Skip to content

Commit

Permalink
feat(hook): Add apiFetch to collect data from api
Browse files Browse the repository at this point in the history 
ref: #1 nofusscomputing/centurion_erp#248 nofusscomputing/centurion_erp#307 nofusscomputing/centurion_erp#319
  • Loading branch information
@jon-nfc
jon-nfc committed Sep 28, 2024
1 parent 923202e commit 52a0727
Show file tree
Hide file tree
Showing 6 changed files with 159 additions and 141 deletions.
2 changes: 1 addition & 1 deletion .vscode/launch.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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": [
Expand Down
25 changes: 14 additions & 11 deletions src/App.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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";



Expand Down Expand Up @@ -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 => {

Expand Down
109 changes: 44 additions & 65 deletions src/components/page/Navbar.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,15 +1,18 @@
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";



const Navbar = ({
nav_visible,
}) => {

const [ menu_entries, SetMenuEntries ] = useState(null)
const params = useParams();

const [ navigation, SetNavigationEntries ] = useState(null)

const [ nav_menu, setNavMenu ] = useState(null);

Expand All @@ -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'
)

})
},[])


Expand All @@ -52,39 +51,30 @@ 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
name = {String(module.icon)}
/>
:
<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'
Expand All @@ -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>
}
Expand Down
63 changes: 63 additions & 0 deletions src/hooks/apiFetch.js
View file
Original file line number Diff line number Diff line change
@@ -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;
}
53 changes: 18 additions & 35 deletions src/layout/Detail.jsx
View file
Original file line number Diff line number Diff line change
@@ -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";

Expand All @@ -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 (
Expand All @@ -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()
|| (
Expand Down
Loading

0 comments on commit 52a0727

Please sign in to comment.