[PUI] Move UI rendering out of App.tsx (#6130)

* move UI rendering out of App.tsx
this makes bundles that just use API components (eg. to render out PUI settings controls for inclusion CUI) much easier

* fixes pre-commit warning

* Revert "fixes pre-commit warning"

This reverts commit 712f27bb1c.
This commit is contained in:
Matthias Mair 2023-12-24 07:03:20 +01:00 committed by GitHub
parent fc5645a9a5
commit f3efabeeb8
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 26 additions and 25 deletions

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 />;
}

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>
);

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 />;
}