inventree/InvenTree
2
0
Fork 0
mirror of https://github.com/inventree/InvenTree.git synced 2025-06-13 18:45:40 +00:00
Code Activity

move UI rendering out of App.tsx

Browse Source 
this makes bundles that just use API components (eg. to render out PUI settings controls for inclusion CUI) much easier
This commit is contained in:
Matthias Mair
2023-12-24 00:28:58 +01:00
parent fc5645a9a5
commit 7714b00310
3 changed files with 26 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
src/frontend/src/App.tsx
View File

@ -1,9 +1,6 @@
import { useViewportSize } from '@mantine/hooks';
import { QueryClient } from '@tanstack/react-query';
import axios from 'axios';
import { lazy } from 'react';
import { Loadable } from './functions/loading';
import { useLocalState } from './states/LocalState';
import { useSessionState } from './states/SessionState';
@ -18,23 +15,3 @@ export function setApiDefaults() {
api.defaults.headers.common['Authorization'] = `Token ${token}`;
}
export const queryClient = new QueryClient();
function checkMobile() {
const { height, width } = useViewportSize();
if (width < 425 || height < 425) return true;
return false;
}
const MobileAppView = Loadable(lazy(() => import('./views/MobileAppView')));
const DesktopAppView = Loadable(lazy(() => import('./views/DesktopAppView')));
// Main App
export default function App() {
// Check if mobile
if (checkMobile()) {
return <MobileAppView />;
}
// Main App component
return <DesktopAppView />;
}

4
src/frontend/src/main.tsx
View File

@ -4,8 +4,8 @@ import ReactDOM from 'react-dom/client';
import 'react-grid-layout/css/styles.css';
import 'react-resizable/css/styles.css';
import App from './App';
import { HostList } from './states/states';
import MainView from './views/MainView';
// define settings
declare global {
@ -71,7 +71,7 @@ export const base_url = window.INVENTREE_SETTINGS.base_url || 'platform';
ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
<React.StrictMode>
<App />
<MainView />
</React.StrictMode>
);

24
src/frontend/src/views/MainView.tsx Normal file
View File

@ -0,0 +1,24 @@
import { useViewportSize } from '@mantine/hooks';
import { lazy } from 'react';
import { Loadable } from '../functions/loading';
function checkMobile() {
const { height, width } = useViewportSize();
if (width < 425 || height < 425) return true;
return false;
}
const MobileAppView = Loadable(lazy(() => import('./MobileAppView')));
const DesktopAppView = Loadable(lazy(() => import('./DesktopAppView')));
// Main App
export default function MainView() {
// Check if mobile
if (checkMobile()) {
return <MobileAppView />;
}
// Main App component
return <DesktopAppView />;
}