mirror of
https://github.com/PeWu/topola-viewer.git
synced 2026-07-17 17:21:48 +00:00
Shift showWikiTreeMenus to URL as source of truth
This commit is contained in:
@@ -93,7 +93,7 @@ To refactor `app.tsx` safely and maintain continuous code correctness, we will m
|
|||||||
We will gradually eliminate React state variables in `src/app.tsx` and derive them (including settings like `standalone`, `showWikiTreeMenus`, and `freezeAnimation`) directly from the `useLocation()` search query parameters on render:
|
We will gradually eliminate React state variables in `src/app.tsx` and derive them (including settings like `standalone`, `showWikiTreeMenus`, and `freezeAnimation`) directly from the `useLocation()` search query parameters on render:
|
||||||
* [x] **Step 3.1a:** Shift `chartType` to URL as SSOT. Derive it using `useMemo` from search parameters, replace calls to `setChartType` with URL updates, and remove the React state variable and sync effect.
|
* [x] **Step 3.1a:** Shift `chartType` to URL as SSOT. Derive it using `useMemo` from search parameters, replace calls to `setChartType` with URL updates, and remove the React state variable and sync effect.
|
||||||
* [x] **Step 3.1b:** Shift `standalone` to URL as SSOT. Derive it directly from search parameters on render and remove its React state variable.
|
* [x] **Step 3.1b:** Shift `standalone` to URL as SSOT. Derive it directly from search parameters on render and remove its React state variable.
|
||||||
* [ ] **Step 3.1c:** Shift `showWikiTreeMenus` to URL as SSOT. Derive it directly from search parameters on render and remove its React state variable.
|
* [x] **Step 3.1c:** Shift `showWikiTreeMenus` to URL as SSOT. Derive it directly from search parameters on render and remove its React state variable.
|
||||||
* [ ] **Step 3.1d:** Shift `freezeAnimation` to URL as SSOT. Derive it directly from search parameters on render and remove its React state variable.
|
* [ ] **Step 3.1d:** Shift `freezeAnimation` to URL as SSOT. Derive it directly from search parameters on render and remove its React state variable.
|
||||||
* [ ] **Step 3.2:** Extract `selection` and `detailIndi` state. Parse them directly from URL params (`indi`, `gen`, and `detail`); update display selectors. Remove React states. Ensure that chart selection changes (`onSelection` callback) explicitly clear or update the `detail` query parameter to match the new selection to avoid getting stuck on the old details viewport. Also update the detail-only selection handler (`onDetailSelection`) to update the `detail` query parameter in the URL.
|
* [ ] **Step 3.2:** Extract `selection` and `detailIndi` state. Parse them directly from URL params (`indi`, `gen`, and `detail`); update display selectors. Remove React states. Ensure that chart selection changes (`onSelection` callback) explicitly clear or update the `detail` query parameter to match the new selection to avoid getting stuck on the old details viewport. Also update the detail-only selection handler (`onDetailSelection`) to update the `detail` query parameter in the URL.
|
||||||
* [ ] **Step 3.3:** Extract `showSidePanel` state. Derive state directly from `?sidePanel=` parameter. Remove React state. Enhance URL args helpers to allow generating path/query target objects with replaced values, and ensure layout settings (`sidePanel`) and configuration changes use `replace: true` to prevent polluting the browser history stack.
|
* [ ] **Step 3.3:** Extract `showSidePanel` state. Derive state directly from `?sidePanel=` parameter. Remove React state. Enhance URL args helpers to allow generating path/query target objects with replaced values, and ensure layout settings (`sidePanel`) and configuration changes use `replace: true` to prevent polluting the browser history stack.
|
||||||
|
|||||||
12
src/app.tsx
12
src/app.tsx
@@ -92,12 +92,6 @@ export function App() {
|
|||||||
/** Whether the side panel is shown. */
|
/** Whether the side panel is shown. */
|
||||||
const [showSidePanel, setShowSidePanel] = useState(false);
|
const [showSidePanel, setShowSidePanel] = useState(false);
|
||||||
|
|
||||||
/**
|
|
||||||
* Whether the app should display WikiTree-specific menus when showing data
|
|
||||||
* from WikiTree.
|
|
||||||
*/
|
|
||||||
const [showWikiTreeMenus, setShowWikiTreeMenus] = useState(true);
|
|
||||||
|
|
||||||
/** Whether to show the error popup. */
|
/** Whether to show the error popup. */
|
||||||
const [showErrorPopup, setShowErrorPopup] = useState(false);
|
const [showErrorPopup, setShowErrorPopup] = useState(false);
|
||||||
/** Specification of the source of the data. */
|
/** Specification of the source of the data. */
|
||||||
@@ -125,6 +119,11 @@ export function App() {
|
|||||||
const chartType = args.chartType;
|
const chartType = args.chartType;
|
||||||
/** Whether the app is in standalone mode, i.e. showing 'open file' menus. */
|
/** Whether the app is in standalone mode, i.e. showing 'open file' menus. */
|
||||||
const standalone = args.standalone;
|
const standalone = args.standalone;
|
||||||
|
/**
|
||||||
|
* Whether the app should display WikiTree-specific menus when showing data
|
||||||
|
* from WikiTree.
|
||||||
|
*/
|
||||||
|
const showWikiTreeMenus = args.showWikiTreeMenus;
|
||||||
|
|
||||||
/** Prevents the Google Drive "Open with" state from being processed more than once. */
|
/** Prevents the Google Drive "Open with" state from being processed more than once. */
|
||||||
const stateProcessed = useRef(false);
|
const stateProcessed = useRef(false);
|
||||||
@@ -355,7 +354,6 @@ export function App() {
|
|||||||
setSourceSpec(args.sourceSpec);
|
setSourceSpec(args.sourceSpec);
|
||||||
setSelection(args.selection);
|
setSelection(args.selection);
|
||||||
setDetailIndi(args.selection?.id);
|
setDetailIndi(args.selection?.id);
|
||||||
setShowWikiTreeMenus(args.showWikiTreeMenus);
|
|
||||||
setFreezeAnimation(args.freezeAnimation);
|
setFreezeAnimation(args.freezeAnimation);
|
||||||
setConfig(args.config);
|
setConfig(args.config);
|
||||||
const currentFetchId = ++fetchIdRef.current;
|
const currentFetchId = ++fetchIdRef.current;
|
||||||
|
|||||||
Reference in New Issue
Block a user