feat: implement RouterProvider, add draft mode mechanisms, update storage keys, and refactor module transformation logic.

This commit is contained in:
Firman Ramdhani
2026-07-27 14:17:42 +07:00
parent e2872a3d18
commit a1a82c5307
8 changed files with 292 additions and 63 deletions
+17 -15
View File
@@ -1,14 +1,26 @@
import { lazy, Suspense, useEffect } from 'react';
import { BrowserRouter, Navigate, Route, Routes } from 'react-router-dom';
import { createBrowserRouter, RouterProvider, Navigate } from 'react-router-dom';
import { ThemeProvider } from '@repo/ui/provider';
import { NotFound, Forbidden, Maintenance, ComingSoon, AgGridProvider } from '@repo/ui/components';
import { LoadingScreen } from '../core/components/loading-screen';
import { useThemeStore } from '../core/stores/theme.store';
import { initializeAndPurgeHistoryBackground } from './modules/layouts/hooks/useHistoryTracker';
import { appStorage, AppStorageKey } from '../core/storage/local';
const AuthModule = lazy(() => import('./auth'));
const AppModule = lazy(() => import('./modules'));
const router = createBrowserRouter([
{ path: '/auth/*', element: <AuthModule /> },
{ path: '/app/*', element: <AppModule /> },
{ path: '/404', element: <NotFound homeUrl="/app" /> },
{ path: '/403', element: <Forbidden homeUrl="/app" /> },
{ path: '/maintenance', element: <Maintenance /> },
{ path: '/coming-soon', element: <ComingSoon /> },
{ path: '/', element: <Navigate to="/app" /> },
{ path: '*', element: <Navigate to="/404" /> },
]);
export default function App() {
const colorScheme = useThemeStore((s) => s.colorScheme);
@@ -16,25 +28,15 @@ export default function App() {
// Execution runs purely in the background (fire and forget)
// Will not block the initial UI rendering process
initializeAndPurgeHistoryBackground();
// appStorage.setItem(AppStorageKey.USER_ID, 'firman');
}, []);
return (
<ThemeProvider colorScheme={colorScheme} density={'compact'}>
<AgGridProvider bypassLicense>
<BrowserRouter>
<Suspense fallback={<LoadingScreen />}>
<Routes>
<Route path="/auth/*" element={<AuthModule />} />
<Route path="/app/*" element={<AppModule />} />
<Route path="/404" element={<NotFound homeUrl="/app" />} />
<Route path="/403" element={<Forbidden homeUrl="/app" />} />
<Route path="/maintenance" element={<Maintenance />} />
<Route path="/coming-soon" element={<ComingSoon />} />
<Route path="/" element={<Navigate to="/app" />} />
<Route path="*" element={<Navigate to="/404" />} />
</Routes>
</Suspense>
</BrowserRouter>
<Suspense fallback={<LoadingScreen />}>
<RouterProvider router={router} />
</Suspense>
</AgGridProvider>
</ThemeProvider>
);
+5 -6
View File
@@ -1,16 +1,17 @@
import { createLocalStorage, createIndexedDB } from '@repo/core-storage';
export const AppStorageKey = {
USER_PROFILE: 'user_profile',
LANGUAGE: 'app_language',
THEME: 'app_theme',
ACCESS_TOKEN: 'access_token',
REFRESH_TOKEN: 'refresh_token',
USER_ID: 'u_id',
} as const;
export type AppStorageKeyValue = (typeof AppStorageKey)[keyof typeof AppStorageKey];
export const AppDatabaseKey = {
USER_PROFILE: 'user_profile',
OFFLINE_DRAFT: 'offline_draft',
SYSTEM_SETTINGS: 'system_settings',
HISTORY_PAGE: 'history_page',
@@ -20,19 +21,17 @@ export const AppDatabaseKey = {
export type AppDatabaseKeyValue = (typeof AppDatabaseKey)[keyof typeof AppDatabaseKey];
export const APP_STORAGE_ENCRYPTED_KEYS = new Set<AppStorageKeyValue>([
AppStorageKey.USER_PROFILE,
AppStorageKey.USER_ID,
AppStorageKey.ACCESS_TOKEN,
AppStorageKey.REFRESH_TOKEN,
]);
export const APP_STORAGE_PLAIN_KEYS = new Set<AppStorageKeyValue>([
AppStorageKey.LANGUAGE,
AppStorageKey.THEME,
]);
export const APP_STORAGE_PLAIN_KEYS = new Set<AppStorageKeyValue>([AppStorageKey.LANGUAGE, AppStorageKey.THEME]);
export const APP_DATABASE_ENCRYPTED_KEYS = new Set<AppDatabaseKeyValue>([]);
export const APP_DATABASE_PLAIN_KEYS = new Set<AppDatabaseKeyValue>([
AppDatabaseKey.USER_PROFILE,
AppDatabaseKey.OFFLINE_DRAFT,
AppDatabaseKey.SYSTEM_SETTINGS,
AppDatabaseKey.HISTORY_PAGE,