minor fixes
This commit is contained in:
@@ -1,6 +1,6 @@
|
|||||||
import * as React from "react";
|
import * as React from "react";
|
||||||
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
|
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
|
||||||
import { AuthProvider, useAuth, AuthPage } from "../react-auth/src";
|
import { useAuth, AuthPage } from "../react-auth";
|
||||||
import { UploadProvider } from "./providers/UploadProvider";
|
import { UploadProvider } from "./providers/UploadProvider";
|
||||||
import AdminLayout from "./components/AdminLayout";
|
import AdminLayout from "./components/AdminLayout";
|
||||||
import ResourceView from "./components/ResourceView";
|
import ResourceView from "./components/ResourceView";
|
||||||
@@ -10,7 +10,6 @@ import { AppConfig } from "./types/config";
|
|||||||
import { Box, Typography, Paper, CircularProgress } from "@mui/material";
|
import { Box, Typography, Paper, CircularProgress } from "@mui/material";
|
||||||
import AppTheme from "./shared-theme/AppTheme";
|
import AppTheme from "./shared-theme/AppTheme";
|
||||||
import {
|
import {
|
||||||
BrowserRouter,
|
|
||||||
Routes,
|
Routes,
|
||||||
Route,
|
Route,
|
||||||
useNavigate,
|
useNavigate,
|
||||||
@@ -23,7 +22,7 @@ const queryClient = new QueryClient();
|
|||||||
// Create a context for the app config
|
// Create a context for the app config
|
||||||
export const ConfigContext = React.createContext<AppConfig | null>(null);
|
export const ConfigContext = React.createContext<AppConfig | null>(null);
|
||||||
|
|
||||||
function Dashboard() {
|
function Dashboard({ basePath }: { basePath: string }) {
|
||||||
const config = React.useContext(ConfigContext);
|
const config = React.useContext(ConfigContext);
|
||||||
const navigate = useNavigate();
|
const navigate = useNavigate();
|
||||||
return (
|
return (
|
||||||
@@ -53,7 +52,7 @@ function Dashboard() {
|
|||||||
transition: 'transform 0.2s',
|
transition: 'transform 0.2s',
|
||||||
'&:hover': { transform: 'translateY(-4px)', boxShadow: 4 }
|
'&:hover': { transform: 'translateY(-4px)', boxShadow: 4 }
|
||||||
}}
|
}}
|
||||||
onClick={() => navigate(`/${res.name}`)}
|
onClick={() => navigate(`${basePath}/${res.name}`)}
|
||||||
>
|
>
|
||||||
<Typography variant="h6" color="primary">{res.pluralLabel}</Typography>
|
<Typography variant="h6" color="primary">{res.pluralLabel}</Typography>
|
||||||
<Typography variant="body2" color="text.secondary">Manage {res.pluralLabel.toLowerCase()}</Typography>
|
<Typography variant="body2" color="text.secondary">Manage {res.pluralLabel.toLowerCase()}</Typography>
|
||||||
@@ -66,7 +65,7 @@ function Dashboard() {
|
|||||||
|
|
||||||
import ProfileView from "./components/ProfileView";
|
import ProfileView from "./components/ProfileView";
|
||||||
|
|
||||||
function AdminApp() {
|
function AdminApp({ basePath }: { basePath: string }) {
|
||||||
const { currentUser, login, logout, loading, error } = useAuth();
|
const { currentUser, login, logout, loading, error } = useAuth();
|
||||||
const config = React.useContext(ConfigContext);
|
const config = React.useContext(ConfigContext);
|
||||||
const navigate = useNavigate();
|
const navigate = useNavigate();
|
||||||
@@ -90,11 +89,11 @@ function AdminApp() {
|
|||||||
<AdminLayout
|
<AdminLayout
|
||||||
username={currentUser.username}
|
username={currentUser.username}
|
||||||
onLogout={logout}
|
onLogout={logout}
|
||||||
onSelectResource={(name) => navigate(`/${name}`)}
|
onSelectResource={(name) => navigate(`${basePath}/${name}`)}
|
||||||
resources={config?.resources || []}
|
resources={config?.resources || []}
|
||||||
>
|
>
|
||||||
<Routes>
|
<Routes>
|
||||||
<Route path="/" element={<Dashboard />} />
|
<Route path="/" element={<Dashboard basePath={basePath} />} />
|
||||||
<Route path="/profile" element={<ProfileView />} />
|
<Route path="/profile" element={<ProfileView />} />
|
||||||
<Route path="/:resourceName" element={<ResourceRouteWrapper />} />
|
<Route path="/:resourceName" element={<ResourceRouteWrapper />} />
|
||||||
<Route path="/:resourceName/:id" element={<ResourceRouteWrapper />} />
|
<Route path="/:resourceName/:id" element={<ResourceRouteWrapper />} />
|
||||||
@@ -115,7 +114,7 @@ function ResourceRouteWrapper() {
|
|||||||
return <ResourceView config={selectedResource} />;
|
return <ResourceView config={selectedResource} />;
|
||||||
}
|
}
|
||||||
|
|
||||||
export default function Admin() {
|
export default function Admin({ basePath = "/admin" }: { basePath?: string }) {
|
||||||
const [config, setConfig] = React.useState<AppConfig | null>(null);
|
const [config, setConfig] = React.useState<AppConfig | null>(null);
|
||||||
|
|
||||||
React.useEffect(() => {
|
React.useEffect(() => {
|
||||||
@@ -146,13 +145,9 @@ export default function Admin() {
|
|||||||
<AppTheme>
|
<AppTheme>
|
||||||
<QueryClientProvider client={queryClient}>
|
<QueryClientProvider client={queryClient}>
|
||||||
<ConfigContext.Provider value={config}>
|
<ConfigContext.Provider value={config}>
|
||||||
<AuthProvider authBaseUrl={config.authBaseUrl}>
|
|
||||||
<UploadProvider>
|
<UploadProvider>
|
||||||
<BrowserRouter>
|
<AdminApp basePath={basePath} />
|
||||||
<AdminApp />
|
|
||||||
</BrowserRouter>
|
|
||||||
</UploadProvider>
|
</UploadProvider>
|
||||||
</AuthProvider>
|
|
||||||
</ConfigContext.Provider>
|
</ConfigContext.Provider>
|
||||||
</QueryClientProvider>
|
</QueryClientProvider>
|
||||||
</AppTheme>
|
</AppTheme>
|
||||||
|
|||||||
@@ -1,5 +1,5 @@
|
|||||||
import axios, { AxiosInstance } from "axios";
|
import axios, { AxiosInstance } from "axios";
|
||||||
import { createApiClient } from "../../auth/src";
|
import { createApiClient } from "../../react-auth";
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* We expose a singleton-like getter/setter for the API clients
|
* We expose a singleton-like getter/setter for the API clients
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
import SwaggerParser from "@apidevtools/swagger-parser";
|
import SwaggerParser from "@apidevtools/swagger-parser";
|
||||||
import { AppConfig, ResourceConfig, ResourceField, FieldType } from "../types/config";
|
import { AppConfig, ResourceConfig, ResourceField, FieldType } from "../types/config";
|
||||||
import { configuration, profileConfiguration } from "../configuration";
|
import { configuration, profileConfiguration } from "../../src/openapi-config";
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Maps OpenAPI property types to our internal FieldType
|
* Maps OpenAPI property types to our internal FieldType
|
||||||
|
|||||||
15
src/main.jsx
15
src/main.jsx
@@ -1,17 +1,22 @@
|
|||||||
import * as React from 'react';
|
import * as React from 'react';
|
||||||
import { createRoot } from 'react-dom/client';
|
import { createRoot } from 'react-dom/client';
|
||||||
|
import { BrowserRouter, Routes, Route } from "react-router-dom";
|
||||||
import Home from './Home';
|
import Home from './Home';
|
||||||
import { AuthProvider } from "../react-auth/src";
|
import Admin from '../react-openapi/Admin';
|
||||||
import { OpenapiProvider } from "../react-openapi/src";
|
import { AuthProvider } from "../react-auth";
|
||||||
|
|
||||||
const rootElement = document.getElementById('root');
|
const rootElement = document.getElementById('root');
|
||||||
const root = createRoot(rootElement);
|
const root = createRoot(rootElement);
|
||||||
const AUTH_BASE = import.meta.env.VITE_AUTH_BASE_URL;
|
const AUTH_BASE = import.meta.env.VITE_AUTH_BASE_URL;
|
||||||
|
|
||||||
root.render(
|
root.render(
|
||||||
|
<BrowserRouter>
|
||||||
<AuthProvider authBaseUrl={AUTH_BASE}>
|
<AuthProvider authBaseUrl={AUTH_BASE}>
|
||||||
<OpenapiProvider authBaseUrl={AUTH_BASE}>
|
<Routes>
|
||||||
<Home />
|
<Route path="/" element={<Home />} />
|
||||||
</OpenapiProvider>
|
<Route path="/home" element={<Home />} />
|
||||||
|
<Route path="/admin/*" element={<Admin basePath="/admin" />} />
|
||||||
|
</Routes>
|
||||||
</AuthProvider>
|
</AuthProvider>
|
||||||
|
</BrowserRouter>
|
||||||
);
|
);
|
||||||
|
|||||||
Reference in New Issue
Block a user