wehub-resource-sync
111 lines
3.9 KiB
TypeScript
111 lines
3.9 KiB
TypeScript
import React, { useContext, useCallback, useEffect, useRef } from 'react';
|
|
import {
|
|
MemoryRouter,
|
|
Routes,
|
|
Route,
|
|
useLocation,
|
|
UNSAFE_NavigationContext,
|
|
} from 'react-router-dom';
|
|
import NotesListPage from './pages/NotesListPage';
|
|
import NoteEditorPage from './pages/NoteEditorPage';
|
|
import TodoListPage from './pages/TodoListPage';
|
|
import FoldersPage from './pages/FoldersPage';
|
|
import NotesSettingsPage from './pages/SettingsPage';
|
|
import TrashPage from './pages/TrashPage';
|
|
import PrivateNotesPage from './pages/PrivateNotesPage';
|
|
import { useAppNavigationHandler } from '../../os/hooks/useAppNavigationHandler';
|
|
import { dimensToCssVars, themeToCssVars } from '../../os/utils/themeToCssVars';
|
|
import { applySkinToThemeColors } from '../../os/SkinService';
|
|
import { useDarkMode } from '../../os/hooks/useDarkMode';
|
|
import { useAppStrings } from '../../os/useAppStrings';
|
|
import { manifest } from './manifest';
|
|
import { colors, colorsDark } from './res/colors';
|
|
import { colorStates, colorStatesDark } from './res/colors.states';
|
|
import { dimens } from './res/dimens';
|
|
import { anim } from './res/anim';
|
|
import { strings } from './res/strings';
|
|
import { stringsEn } from './res/strings.en';
|
|
import { useAppNavigate } from './navigation';
|
|
|
|
/** Handles back navigation and route observation for the OS */
|
|
const NotesNavigationHandler: React.FC = () => {
|
|
const location = useLocation();
|
|
const { back, go } = useAppNavigate();
|
|
const { navigator } = useContext(UNSAFE_NavigationContext);
|
|
const historyIndexRef = useRef(0);
|
|
|
|
useEffect(() => {
|
|
const memoryNavigator = navigator as any;
|
|
if (typeof memoryNavigator?.index === 'number') {
|
|
historyIndexRef.current = memoryNavigator.index;
|
|
}
|
|
}, [location, navigator]);
|
|
|
|
const handleBackPress = useCallback((): boolean => {
|
|
const memoryNavigator = navigator as any;
|
|
const currentIndex =
|
|
typeof memoryNavigator?.index === 'number' ? memoryNavigator.index : historyIndexRef.current;
|
|
|
|
if (currentIndex > 0) {
|
|
back();
|
|
return true;
|
|
}
|
|
|
|
if (location.pathname !== '/') {
|
|
go('home.open', {}, { mode: 'replace' });
|
|
return true;
|
|
}
|
|
|
|
return false;
|
|
}, [back, go, location.pathname, navigator]);
|
|
|
|
useAppNavigationHandler('notes', {
|
|
onBack: handleBackPress,
|
|
onNavigate: (path, navigateToPath) => {
|
|
const normalized = path.startsWith('/') ? path : `/${path}`;
|
|
navigateToPath(normalized);
|
|
},
|
|
});
|
|
|
|
return null;
|
|
};
|
|
|
|
|
|
/** Notes App root component */
|
|
const NotesApp: React.FC = () => {
|
|
const { isDark } = useDarkMode();
|
|
const s = useAppStrings(strings, stringsEn);
|
|
const themeColors = isDark
|
|
? { ...manifest.theme.colors, ...(manifest.theme.colorsDark ?? {}) }
|
|
: manifest.theme.colors;
|
|
const appColors = isDark ? { ...colors, ...colorsDark } : colors;
|
|
const appColorStates = isDark ? { ...colorStates, ...colorStatesDark } : colorStates;
|
|
const cssVars = {
|
|
...themeToCssVars(applySkinToThemeColors(themeColors)),
|
|
...dimensToCssVars(appColors, { prefix: '--app-c-' }),
|
|
...dimensToCssVars(appColorStates, { prefix: '--app-cs-' }),
|
|
...dimensToCssVars(dimens),
|
|
...dimensToCssVars(anim, { prefix: '--app-' }),
|
|
};
|
|
return (
|
|
<div className="h-full w-full" style={cssVars as React.CSSProperties}>
|
|
<MemoryRouter>
|
|
<NotesNavigationHandler />
|
|
<div className="h-full w-full bg-white relative overflow-hidden">
|
|
<Routes>
|
|
<Route path="/" element={<NotesListPage />} />
|
|
<Route path="/todo" element={<TodoListPage />} />
|
|
<Route path="/folders" element={<FoldersPage />} />
|
|
<Route path="/settings" element={<NotesSettingsPage />} />
|
|
<Route path="/trash" element={<TrashPage />} />
|
|
<Route path="/private" element={<PrivateNotesPage />} />
|
|
<Route path="/note/:id" element={<NoteEditorPage />} />
|
|
</Routes>
|
|
</div>
|
|
</MemoryRouter>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default NotesApp;
|