clean client provider types & App.tsx imports

packages/client/src/ClientProvider.tsx

@@ -1,11 +1,19 @@
 import React from 'react';
-import { QueryClientProvider } from 'react-query';
+import { QueryClientProvider, QueryClientProviderProps } from 'react-query';
+
+export interface ClientProviderProps extends Omit<QueryClientProviderProps, 'client'> {
+  children?: React.ReactNode;
+}
 
 // The ClientProvider injects the React-query context into the "context store" of the current package. This is needed due to the fact the repository is a monorepo.
 // This is a pretty hacky solution and a better solution should probably be found to replace it.
-export function ClientProvider({ children }: any) {
+export const ClientProvider: React.FC<ClientProviderProps> = ({ children, ...props }) => {
   return (
-    // @ts-ignore: This exists to add the QueryClientProvider to the current subpackage '@sd/client'. The ReactQueryClient is fetched from the window object (which is set in the parent application).
-    <QueryClientProvider client={window.ReactQueryClient}>{children}</QueryClientProvider>
+    // This exists to add the QueryClientProvider to the current subpackage '@sd/client'.
+    // The ReactQueryClient is fetched from the window object (which is set in the parent application).
+    // @ts-expect-error: react-query depends on the react@^17 FC type which includes children -- once v4.0 is released this will not be necessary
+    <QueryClientProvider {...props} client={window.ReactQueryClient}>
+      {children}
+    </QueryClientProvider>
   );
-}
+};

packages/client/src/window.d.ts

@@ -0,0 +1,7 @@
+import type { QueryClient } from 'react-query/types';
+
+declare global {
+  interface Window {
+    ReactQueryClient: QueryClient;
+  }
+}

packages/interface/src/App.tsx

@@ -1,7 +1,15 @@
+import '@fontsource/inter/variable.css';
+import { BaseTransport, ClientProvider, setTransport } from '@sd/client';
+// global window type extensions
+import '@sd/client/src/window';
+import { Button } from '@sd/ui';
+import clsx from 'clsx';
 import React, { useContext, useEffect, useState } from 'react';
+import { ErrorBoundary, FallbackProps } from 'react-error-boundary';
+import { QueryClient, QueryClientProvider } from 'react-query';
 import {
-  MemoryRouter,
   Location,
+  MemoryRouter,
   Outlet,
   Route,
   Routes,
@@ -9,32 +17,22 @@ import {
   useNavigate
 } from 'react-router-dom';
 import { Sidebar } from './components/file/Sidebar';
-import { SettingsScreen } from './screens/Settings';
-import { ExplorerScreen } from './screens/Explorer';
-import { useCoreEvents } from './hooks/useCoreEvents';
-import { ErrorBoundary, FallbackProps } from 'react-error-boundary';
-import { OverviewScreen } from './screens/Overview';
-import { DebugScreen } from './screens/Debug';
 import { Modal } from './components/layout/Modal';
-import GeneralSettings from './screens/settings/GeneralSettings';
 import SlideUp from './components/transitions/SlideUp';
-import SecuritySettings from './screens/settings/SecuritySettings';
-import LocationSettings from './screens/settings/LocationSettings';
-import { RedirectPage } from './screens/Redirect';
-import { QueryClient, QueryClientProvider } from 'react-query';
-import { BaseTransport, ClientProvider, setTransport } from '@sd/client';
-import { Button } from '@sd/ui';
-import { CoreEvent } from '@sd/core';
-import clsx from 'clsx';
-import './style.scss';
+import { useCoreEvents } from './hooks/useCoreEvents';
 import { ContentScreen } from './screens/Content';
-import LibrarySettings from './screens/settings/LibrarySettings';
-
-import '@fontsource/inter/variable.css';
-
+import { DebugScreen } from './screens/Debug';
+import { ExplorerScreen } from './screens/Explorer';
+import { OverviewScreen } from './screens/Overview';
+import { RedirectPage } from './screens/Redirect';
+import { SettingsScreen } from './screens/Settings';
 import ExperimentalSettings from './screens/settings/ExperimentalSettings';
-
+import GeneralSettings from './screens/settings/GeneralSettings';
+import LibrarySettings from './screens/settings/LibrarySettings';
+import LocationSettings from './screens/settings/LocationSettings';
+import SecuritySettings from './screens/settings/SecuritySettings';
 import { TagScreen } from './screens/Tag';
+import './style.scss';
 
 const queryClient = new QueryClient();
 
@@ -205,26 +203,22 @@ function BrowserRouterContainer() {
 export function bindCoreEvent() {}
 
 export default function App(props: AppProps) {
-  // @ts-ignore: TODO: This is a hack and a better solution should probably be found. This exists so that the queryClient can be accessed within the subpackage '@sd/client'. Refer to <ClientProvider /> for where this is used.
-  if (window.ReactQueryClient === undefined) {
-    // @ts-ignore
-    window.ReactQueryClient = queryClient;
-  }
+  // TODO: This is a hack and a better solution should probably be found.
+  // This exists so that the queryClient can be accessed within the subpackage '@sd/client'.
+  // Refer to <ClientProvider /> for where this is used.
+  window.ReactQueryClient ??= queryClient;
 
   setTransport(props.transport);
 
   console.log('App props', props);
 
-  // default prop values
-  props.isFocused ??= true;
-
   return (
     <>
       {/* @ts-ignore */}
       <ErrorBoundary FallbackComponent={ErrorFallback} onReset={() => {}}>
         {/* @ts-ignore */}
         <QueryClientProvider client={queryClient} contextSharing={false}>
-          <AppPropsContext.Provider value={props}>
+          <AppPropsContext.Provider value={Object.assign({ isFocused: true }, props)}>
             <ClientProvider>
               {props.useMemoryRouter ? <MemoryRouterContainer /> : <BrowserRouterContainer />}
             </ClientProvider>