Merge pull request #123 from Maker-Management-Platform/master

v1.1.0

Author: EduardoOliveira

package-lock.json

@@ -31,16 +31,21 @@
     "axios": "^1.6.0",
     "axios-hooks": "^5.0.1",
     "dayjs": "^1.11.10",
+    "dompurify": "^3.0.8",
     "embla-carousel-react": "^7.1.0",
+    "mdi-react": "^9.4.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-grid-layout": "1.3.4",
     "react-modal-image": "^2.6.0",
     "react-router-dom": "^6.18.0",
+    "reconnecting-eventsource": "^1.6.2",
     "three": "^0.158.0"
   },
   "devDependencies": {
     "@types/react": "^18.2.15",
     "@types/react-dom": "^18.2.7",
+    "@types/react-grid-layout": "^1.3.5",
     "@typescript-eslint/eslint-plugin": "^6.0.0",
     "@typescript-eslint/parser": "^6.0.0",
     "@vitejs/plugin-react": "^4.0.3",
@@ -51,6 +56,6 @@
     "postcss-preset-mantine": "^1.11.1",
     "postcss-simple-vars": "^7.0.1",
     "typescript": "^5.0.2",
-    "vite": "^4.4.5"
+    "vite": "^4.5.2"
   }
 }

package.json

@@ -1 +1 @@
-{"local_backend":"/api"}
+{"localBackend":"/api"}

public/settings.json

@@ -1,41 +1,48 @@
-import {useDisclosure, useMediaQuery} from '@mantine/hooks';
-import {AppShell, Burger, Group, LoadingOverlay} from '@mantine/core';
-import {NavBar} from "./core/navbar/NavBar.tsx";
-import {Outlet} from "react-router-dom";
-import {SettingsContext} from './core/utils/settingsContext.ts';
-import useAxios from 'axios-hooks';
+import { useDisclosure, useMediaQuery } from '@mantine/hooks';
+import { AppShell, Burger, Group, LoadingOverlay } from '@mantine/core';
+import { NavBar } from "./core/navbar/NavBar.tsx";
+import { Outlet } from "react-router-dom";
 import { AxiosErrorHandler } from './core/axios-error-handler/AxiosErrorHandler.tsx';
+import { ScrollToTop } from './core/scroll-to-top/ScrollToTop.tsx';
+import { DashboardProvider } from './dashboard/provider/DashboardProvider.tsx';
+import { PrinterWidgetProvider } from './printers/providers/PrinterWidgetProvider.tsx';
+import { SSEProvider } from './core/sse/SSEProvider.tsx';
+import { SettingsProvider } from './core/settings/settingsProvider.tsx';
 
-function App() {
-    const [opened, {toggle}] = useDisclosure();
+export default function App() {
+    const [opened, { toggle }] = useDisclosure();
     const matches = useMediaQuery('(min-width: 900px)');
-    const [{data, loading, error}] = useAxios(`/settings.json`);
 
     return (
-        <SettingsContext.Provider value={data}>
-            <LoadingOverlay visible={loading} zIndex={1000} overlayProps={{ blur: 2 }} />
-            {!loading && <AppShell
-                withBorder={true}
-                header={{height: 60, collapsed: matches}}
-                //footer={{height: 60}}
-                navbar={{width: 80, breakpoint: 'sm', collapsed: {mobile: !opened}}}
-                aside={{width: 300, breakpoint: 'md', collapsed: {desktop: true, mobile: true}}}
-                padding="md"
-            >
-                <AppShell.Header>
-                    <Group h="100%" px="md">
-                        <Burger opened={opened} onClick={toggle} hiddenFrom="sm" size="sm"/>
-                    </Group>
-                </AppShell.Header>
-                <NavBar />
-                <AppShell.Main>
-                    <Outlet />
-                </AppShell.Main>
-                <AppShell.Aside p="md">Aside</AppShell.Aside>
-            </AppShell>}
-            <AxiosErrorHandler/>
-        </SettingsContext.Provider>
+        <SettingsProvider
+            loading={<LoadingOverlay visible={true} zIndex={1000} overlayProps={{ blur: 2 }} />}
+        >
+            <SSEProvider>
+                <DashboardProvider>
+                    <AppShell
+                        withBorder={true}
+                        header={{ height: 60, collapsed: matches }}
+                        //footer={{height: 60}}
+                        navbar={{ width: 80, breakpoint: 'sm', collapsed: { mobile: !opened } }}
+                        aside={{ width: 300, breakpoint: 'md', collapsed: { desktop: true, mobile: true } }}
+                        padding="md"
+                    >
+                        <AppShell.Header>
+                            <Group h="100%" px="md">
+                                <Burger opened={opened} onClick={toggle} hiddenFrom="sm" size="sm" />
+                            </Group>
+                        </AppShell.Header>
+                        <NavBar />
+                        <AppShell.Main>
+                            <Outlet />
+                        </AppShell.Main>
+                        <AppShell.Aside p="md">Aside</AppShell.Aside>
+                    </AppShell>
+                    <ScrollToTop />
+                    <AxiosErrorHandler />
+                    <PrinterWidgetProvider />
+                </DashboardProvider>
+            </SSEProvider>
+        </SettingsProvider>
     )
-}
-
-export default App
+}

src/App.tsx

@@ -4,11 +4,11 @@ import classes from './FileCard.module.css';
 import { DropDownMenu } from '../parts/drop-down-menu/DropDownMenu.tsx';
 import { AssetCardProps } from '../AssetCardProps.ts';
 import { useCallback, useContext, useState } from 'react';
-import { SettingsContext } from '@/core/utils/settingsContext.ts';
+import { SettingsContext } from '@/core/settings/settingsContext.ts';
 
 
 export function FileCard({ asset, projectUuid, selected, onSelectChange, onDelete }: AssetCardProps) {
-    const { local_backend } = useContext(SettingsContext);
+    const { settings } = useContext(SettingsContext);
     const [loading, setLoading] = useState(false);
     const toggleLoadingCallback = useCallback(() => {
         setLoading((l) => {
@@ -41,7 +41,7 @@ export function FileCard({ asset, projectUuid, selected, onSelectChange, onDelet
                             projectUuid={projectUuid}
                             id={asset.id}
                             openDetails={() => onSelectChange(true)}
-                            downloadURL={`${local_backend}/projects/${projectUuid}/assets/${asset?.id}?download=true'`}
+                            downloadURL={`${settings.localBackend}/projects/${projectUuid}/assets/${asset?.id}?download=true'`}
                             onDelete={() => onDelete(projectUuid, asset.id)}
                             toggleLoad={toggleLoadingCallback}>
                         </DropDownMenu>