mirror of
https://github.com/TryGhost/Ghost.git
synced 2025-02-10 23:36:14 -05:00
422f486de4
refs https://github.com/TryGhost/Product/issues/3832 Hopefully the scrolling finally works consistently - Fixed a bug where clicking the navigated section wouldn't scroll to it - Fixed a bug where the first click after opening settings wouldn't animate the scroll - Fixed a bug where the sidebar would always animate scroll even on the initial page load --- <!-- Leave the line below if you'd like GitHub Copilot to generate a summary from your commit --> <!-- copilot:summary --> ### <samp>🤖 Generated by Copilot at 0996b8b</samp> This pull request improves the scrolling and navigation functionality of the settings page by using a custom hook and a context provider. It refactors the `RoutingProvider` and the `useScrollSection` hook to handle the route and sidebar changes more efficiently, and simplifies the code by removing unnecessary components and state. It also adds new functions to the scroll section context data to update and scroll to the desired section.
80 lines
3.8 KiB
TypeScript
80 lines
3.8 KiB
TypeScript
import DesignSystemProvider from './admin-x-ds/providers/DesignSystemProvider';
|
|
import GlobalDataProvider from './components/providers/GlobalDataProvider';
|
|
import MainContent from './MainContent';
|
|
import NiceModal from '@ebay/nice-modal-react';
|
|
import RoutingProvider, {ExternalLink} from './components/providers/RoutingProvider';
|
|
import clsx from 'clsx';
|
|
import {DefaultHeaderTypes} from './unsplash/UnsplashTypes';
|
|
import {FetchKoenigLexical, OfficialTheme, ServicesProvider} from './components/providers/ServiceProvider';
|
|
import {GlobalDirtyStateProvider} from './hooks/useGlobalDirtyState';
|
|
import {QueryClient, QueryClientProvider} from '@tanstack/react-query';
|
|
import {ScrollSectionProvider} from './hooks/useScrollSection';
|
|
import {ErrorBoundary as SentryErrorBoundary} from '@sentry/react';
|
|
import {Toaster} from 'react-hot-toast';
|
|
import {UpgradeStatusType} from './utils/globalTypes';
|
|
import {ZapierTemplate} from './components/settings/advanced/integrations/ZapierModal';
|
|
|
|
interface AppProps {
|
|
ghostVersion: string;
|
|
officialThemes: OfficialTheme[];
|
|
zapierTemplates: ZapierTemplate[];
|
|
externalNavigate: (link: ExternalLink) => void;
|
|
darkMode?: boolean;
|
|
unsplashConfig: DefaultHeaderTypes
|
|
sentryDSN: string | null;
|
|
fetchKoenigLexical: FetchKoenigLexical;
|
|
onUpdate: (dataType: string, response: unknown) => void;
|
|
onInvalidate: (dataType: string) => void;
|
|
onDelete: (dataType: string, id: string) => void;
|
|
upgradeStatus?: UpgradeStatusType;
|
|
}
|
|
|
|
const queryClient = new QueryClient({
|
|
defaultOptions: {
|
|
queries: {
|
|
refetchOnWindowFocus: false,
|
|
staleTime: 5 * (60 * 1000), // 5 mins
|
|
cacheTime: 10 * (60 * 1000), // 10 mins
|
|
// We have custom retry logic for specific errors in fetchApi()
|
|
retry: false
|
|
}
|
|
}
|
|
});
|
|
|
|
function App({ghostVersion, officialThemes, zapierTemplates, externalNavigate, darkMode = false, unsplashConfig, fetchKoenigLexical, sentryDSN, onUpdate, onInvalidate, onDelete, upgradeStatus}: AppProps) {
|
|
const appClassName = clsx(
|
|
'admin-x-settings admin-x-base h-[100vh] w-full overflow-y-auto overflow-x-hidden',
|
|
darkMode && 'dark'
|
|
);
|
|
|
|
return (
|
|
<SentryErrorBoundary>
|
|
<QueryClientProvider client={queryClient}>
|
|
<ServicesProvider fetchKoenigLexical={fetchKoenigLexical} ghostVersion={ghostVersion} officialThemes={officialThemes} sentryDSN={sentryDSN} unsplashConfig={unsplashConfig} upgradeStatus={upgradeStatus} zapierTemplates={zapierTemplates} onDelete={onDelete} onInvalidate={onInvalidate} onUpdate={onUpdate}>
|
|
<GlobalDataProvider>
|
|
<ScrollSectionProvider>
|
|
<RoutingProvider externalNavigate={externalNavigate}>
|
|
<GlobalDirtyStateProvider>
|
|
<DesignSystemProvider>
|
|
<div className={appClassName} id="admin-x-root" style={{
|
|
height: '100vh',
|
|
width: '100%'
|
|
}}
|
|
>
|
|
<Toaster />
|
|
<NiceModal.Provider>
|
|
<MainContent />
|
|
</NiceModal.Provider>
|
|
</div>
|
|
</DesignSystemProvider>
|
|
</GlobalDirtyStateProvider>
|
|
</RoutingProvider>
|
|
</ScrollSectionProvider>
|
|
</GlobalDataProvider>
|
|
</ServicesProvider>
|
|
</QueryClientProvider>
|
|
</SentryErrorBoundary>
|
|
);
|
|
}
|
|
|
|
export default App;
|