Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Second fix for back button #740

Closed
wants to merge 1 commit into from
Closed

Second fix for back button #740

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
108 changes: 40 additions & 68 deletions src/client/useURLSync.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,65 +10,47 @@ import {

// Synchronizes the tab state with the URL parameters.
export const useURLSync = ({
content,
openTab,
setActiveFileId,
tabList,
activeFileId,
}: {
content,
openTab,
setActiveFileId,
tabList,
activeFileId,
}: {
content: VZCodeContent | null;
openTab: (tabState: TabState) => void;
setActiveFileId: (activeFileId: FileId) => void;
tabList: Array<TabState>;
activeFileId: FileId | null;
}) => {
// Use React router to get and set the search parameters.
// Use React router to get and set the search parameters.
const [searchParams, setSearchParams] = useSearchParams();

// Extract the tab state parameters from the search parameters.
const tabStateParams: TabStateParams = useMemo(
() => ({
file: searchParams.get('file'),
tabs: searchParams.get('tabs'),
}),
[searchParams],
() => ({
file: searchParams.get('file'),
tabs: searchParams.get('tabs'),
}),
[searchParams],
);

// `true` after the state is updated based on the
// initial search parameters from the URL.
const isInitialized = useRef(false);

// Initialize the state based on the search parameters.
useEffect(() => {
// Do nothing if the state has already been initialized.
if (isInitialized.current) {
return;
}

// Wait for the content to be loaded.
if (!content) {
return;
}

// Decode the search parameters.
const { tabList, activeFileId } = decodeTabs({
const { tabList: decodedTabList, activeFileId: decodedActiveFileId } = decodeTabs({
tabStateParams,
content,
});

// Mark the state as initialized.
isInitialized.current = true;

// Update the state.
setActiveFileId(activeFileId);
tabList.forEach(openTab);
}, [
content,
searchParams,
setActiveFileId,
openTab,
isInitialized,
]);
decodedTabList.forEach(openTab);
setActiveFileId(decodedActiveFileId);
}, [content, tabStateParams, setActiveFileId, openTab]);

// Track content in a ref so that we can use it in the
// effect below without triggering the effect when
Expand All @@ -78,7 +60,7 @@ export const useURLSync = ({
contentRef.current = content;
}, [content]);

// track setSearchParams in a ref so that we can use it in the
// Track setSearchParams in a ref so that we can use it in the
// effect below without triggering the effect on each render.
// The definition of `setSearchParams` changes on every render.
const setSearchParamsRef = useRef(setSearchParams);
Expand All @@ -102,36 +84,26 @@ export const useURLSync = ({
});

// Update the URL if the search parameters have changed.
setSearchParamsRef.current(
(oldSearchParams: URLSearchParams) => {
// Create a copy of the old search params
const updatedSearchParams = new URLSearchParams(
oldSearchParams,
);

// Set the 'file' parameter
if (newTabStateParams.file) {
updatedSearchParams.set(
'file',
newTabStateParams.file,
);
} else {
updatedSearchParams.delete('file'); // Remove 'file' if it's not present in newTabStateParams
}

// Set the 'tabs' parameter
if (newTabStateParams.tabs) {
updatedSearchParams.set(
'tabs',
newTabStateParams.tabs,
);
} else {
updatedSearchParams.delete('tabs'); // Remove 'tabs' if it's not present in newTabStateParams
}

// Return the updated search params
return updatedSearchParams;
},
);
}, [tabList, activeFileId]);
};
setSearchParamsRef.current((oldSearchParams: URLSearchParams) => {
// Create a copy of the old search params
const updatedSearchParams = new URLSearchParams(oldSearchParams);

// Set the 'file' parameter
if (newTabStateParams.file) {
updatedSearchParams.set('file', newTabStateParams.file);
} else {
updatedSearchParams.delete('file'); // Remove 'file' if it's not present in newTabStateParams
}

// Set the 'tabs' parameter
if (newTabStateParams.tabs) {
updatedSearchParams.set('tabs', newTabStateParams.tabs);
} else {
updatedSearchParams.delete('tabs'); // Remove 'tabs' if it's not present in newTabStateParams
}

// Return the updated search params
return updatedSearchParams;
});
}, [tabList, activeFileId, contentRef]);
};