slice-machine-ui 2.18.1-alpha.jp-unauthorized-error.3 → 2.18.1-alpha.jp-unauthorized-error-improvement.1

package/src/pages/_app.tsx

@@ -13,34 +13,33 @@ import "@/styles/starry-night.css";
 import "@/styles/tabs.css";
 import "@/styles/toaster.css";
 
+import { ThemeProvider, TooltipProvider } from "@prismicio/editor-ui";
 import {
-  Box,
-  DefaultErrorMessage,
-  ThemeProvider,
-  TooltipProvider,
-} from "@prismicio/editor-ui";
-import { ConnectedRouter } from "connected-next-router";
+  isInvalidActiveEnvironmentError,
+  isUnauthorizedError,
+} from "@slicemachine/manager/client";
+import { useSuspenseQuery } from "@tanstack/react-query";
+import { ConnectedRouter as StoreConnectedRouter } from "connected-next-router";
 import type { NextPage } from "next";
 import type { AppContext, AppInitialProps } from "next/app";
 import dynamic from "next/dynamic";
 import Head from "next/head";
 import Router from "next/router";
-import { type FC, type ReactNode, Suspense, useEffect, useState } from "react";
+import { type FC, type ReactNode, Suspense, useEffect } from "react";
 import { Provider } from "react-redux";
-import type { Store } from "redux";
-import type { Persistor } from "redux-persist/es/types";
 import { PersistGate } from "redux-persist/integration/react";
 import { ThemeProvider as ThemeUIThemeProvider, useThemeUI } from "theme-ui";
 
 import { getState } from "@/apiClient";
-import { ErrorBoundary } from "@/ErrorBoundary";
+import { AppStateErrorBoundary } from "@/errorBoundaries";
+import { useActiveEnvironment } from "@/features/environments/useActiveEnvironment";
 import { AutoSyncProvider } from "@/features/sync/AutoSyncProvider";
 import { RouteChangeProvider } from "@/hooks/useRouteChange";
 import SliceMachineApp from "@/legacy/components/App";
 import LoadingPage from "@/legacy/components/LoadingPage";
 import ToastContainer from "@/legacy/components/ToasterContainer";
 import { normalizeFrontendCustomTypes } from "@/legacy/lib/models/common/normalizers/customType";
-import type ServerState from "@/legacy/lib/models/server/ServerState";
+import { QueryClientProvider } from "@/queryClient";
 import configureStore from "@/redux/store";
 import theme from "@/theme";
 
@@ -68,50 +67,11 @@ const RemoveDarkMode: FC<RemoveDarkModeProps> = ({ children }) => {
   return <>{children}</>;
 };
 
-function App({
-  Component,
-  pageProps,
-}: AppContextWithComponentLayout & AppInitialProps) {
-  const [serverState, setServerState] = useState<ServerState | null>(null);
-  const [smStore, setSMStore] = useState<{
-    store: Store;
-    persistor: Persistor;
-  } | null>(null);
+function App(props: AppContextWithComponentLayout & AppInitialProps) {
+  // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+  const { Component, pageProps } = props;
 
-  useEffect(() => {
-    async function getInitialState() {
-      const serverState = await getState();
-      setServerState(serverState);
-    }
-    void getInitialState();
-  }, []);
-
-  useEffect(() => {
-    if (!serverState || smStore) {
-      return;
-    }
-
-    const normalizedCustomTypes = normalizeFrontendCustomTypes(
-      serverState.customTypes,
-      serverState.remoteCustomTypes,
-    );
-
-    const { store, persistor } = configureStore({
-      environment: serverState.env,
-      availableCustomTypes: {
-        ...normalizedCustomTypes,
-      },
-      slices: {
-        libraries: serverState.libraries,
-        remoteSlices: serverState.remoteSlices,
-      },
-    });
-
-    setSMStore({ store, persistor });
-  }, [serverState, smStore]);
-
-  // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
-  const ComponentLayout = Component.CustomLayout || SliceMachineApp;
+  const ComponentLayout = Component.CustomLayout ?? SliceMachineApp;
 
   return (
     <>
@@ -119,50 +79,83 @@ function App({
         <title>Slice Machine</title>
       </Head>
       <ThemeUIThemeProvider theme={theme}>
-        <RemoveDarkMode>
-          <ThemeProvider mode="light">
-            <TooltipProvider>
-              {!smStore || !serverState ? (
-                <LoadingPage />
-              ) : (
-                <Provider store={smStore.store}>
-                  <ConnectedRouter Router={Router}>
-                    <PersistGate loading={null} persistor={smStore.persistor}>
-                      <ErrorBoundary
-                        renderError={() => (
-                          <Box
-                            justifyContent="center"
-                            width="100%"
-                            padding={80}
-                          >
-                            <DefaultErrorMessage
-                              title="Error"
-                              description="An error occurred while rendering the app."
-                            />
-                          </Box>
-                        )}
-                      >
-                        <Suspense fallback={<LoadingPage />}>
-                          <AutoSyncProvider>
-                            <RouteChangeProvider>
-                              <ComponentLayout>
-                                <Component {...pageProps} />
-                              </ComponentLayout>
-                            </RouteChangeProvider>
-                          </AutoSyncProvider>
-                        </Suspense>
-                      </ErrorBoundary>
-                    </PersistGate>
-                  </ConnectedRouter>
-                  <ToastContainer />
-                </Provider>
-              )}
-            </TooltipProvider>
-          </ThemeProvider>
-        </RemoveDarkMode>
+        <QueryClientProvider>
+          <RemoveDarkMode>
+            <ThemeProvider mode="light">
+              <TooltipProvider>
+                <AppStateErrorBoundary>
+                  <Suspense fallback={<LoadingPage />}>
+                    <AppStateValidator>
+                      <AppStateWrapper>
+                        <AutoSyncProvider>
+                          <ComponentLayout>
+                            <Component {...pageProps} />
+                          </ComponentLayout>
+                        </AutoSyncProvider>
+                      </AppStateWrapper>
+                    </AppStateValidator>
+                  </Suspense>
+                </AppStateErrorBoundary>
+                <ToastContainer />
+              </TooltipProvider>
+            </ThemeProvider>
+          </RemoveDarkMode>
+        </QueryClientProvider>
       </ThemeUIThemeProvider>
     </>
   );
 }
 
+/** This is where we should check for unwanted states that should prevent the
+ * user from using the app, and trigger the {@link AppStateErrorBoundary} to
+ * display something explaining why. */
+function AppStateValidator(props: { children: ReactNode }) {
+  const activeEnvironment = useActiveEnvironment({ suspense: true });
+
+  if (
+    isUnauthorizedError(activeEnvironment.error) ||
+    isInvalidActiveEnvironmentError(activeEnvironment.error)
+  ) {
+    throw activeEnvironment.error;
+  }
+
+  return <>{props.children}</>;
+}
+
+function AppStateWrapper({ children }: { children: ReactNode }) {
+  const { data: state } = useSuspenseQuery({
+    queryKey: ["getInitialState"],
+    queryFn: async () => {
+      const serverState = await getState();
+      const { store, persistor } = configureStore({
+        environment: serverState.env,
+        availableCustomTypes: {
+          ...normalizeFrontendCustomTypes(
+            serverState.customTypes,
+            serverState.remoteCustomTypes,
+          ),
+        },
+        slices: {
+          libraries: serverState.libraries,
+          remoteSlices: serverState.remoteSlices,
+        },
+      });
+
+      return { serverState, store, persistor };
+    },
+    staleTime: Infinity,
+    gcTime: Infinity,
+  });
+
+  return (
+    <Provider store={state.store}>
+      <StoreConnectedRouter Router={Router}>
+        <PersistGate loading={null} persistor={state.persistor}>
+          <RouteChangeProvider>{children}</RouteChangeProvider>
+        </PersistGate>
+      </StoreConnectedRouter>
+    </Provider>
+  );
+}
+
 export default dynamic(() => Promise.resolve(App), { ssr: false });

package/src/pages/changes.tsx

@@ -25,8 +25,8 @@ import {
   AppLayoutHeader,
 } from "@/legacy/components/AppLayout";
 import {
-  AuthErrorPage,
   OfflinePage,
+  UnauthenticatedView,
 } from "@/legacy/components/ChangesEmptyState";
 import { ChangesItems } from "@/legacy/components/ChangesItems";
 import {
@@ -114,8 +114,8 @@ const Changes: React.FunctionComponent = () => {
     if (!isOnline) {
       return <OfflinePage />;
     }
-    if (authStatus === AuthStatus.FORBIDDEN) {
-      return <AuthErrorPage authStatus={authStatus} />;
+    if (authStatus === AuthStatus.UNAUTHENTICATED) {
+      return <UnauthenticatedView />;
     }
     if (numberOfChanges === 0) {
       return (
@@ -160,8 +160,7 @@ const Changes: React.FunctionComponent = () => {
               disabled={
                 numberOfChanges === 0 ||
                 !isOnline ||
-                authStatus === AuthStatus.UNAUTHORIZED ||
-                authStatus === AuthStatus.FORBIDDEN ||
+                authStatus !== AuthStatus.AUTHORIZED ||
                 isSyncing
               }
               loading={isSyncing}

package/src/queryClient.tsx

@@ -0,0 +1,24 @@
+import {
+  QueryClient,
+  QueryClientProvider as RCQueryClientProvider,
+} from "@tanstack/react-query";
+import { ReactNode } from "react";
+
+export const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      staleTime: 5 * 60 * 1000,
+      gcTime: 10 * 60 * 1000,
+      retry: false,
+      refetchOnWindowFocus: "always",
+    },
+  },
+});
+
+export function QueryClientProvider(props: { children: ReactNode }) {
+  return (
+    <RCQueryClientProvider client={queryClient}>
+      {props.children}
+    </RCQueryClientProvider>
+  );
+}

package/test/__testutils__/index.tsx

@@ -5,7 +5,8 @@ import { Provider } from "react-redux";
 import { AnyAction, Store } from "redux";
 import { BaseStyles, ThemeProvider as ThemeUIThemeProvider } from "theme-ui";
 
-import { ErrorBoundary } from "@/ErrorBoundary";
+import { DefaultErrorBoundary } from "@/errorBoundaries";
+import { QueryClientProvider } from "@/queryClient";
 
 import configureStore from "../../src/redux/store";
 import type { SliceMachineStoreType } from "../../src/redux/type";
@@ -44,15 +45,17 @@ function render(
     children: any;
   }) {
     return (
-      <ThemeUIThemeProvider theme={theme}>
-        <TooltipProvider>
-          <BaseStyles>
-            <Provider store={store}>
-              <ErrorBoundary>{children}</ErrorBoundary>
-            </Provider>
-          </BaseStyles>
-        </TooltipProvider>
-      </ThemeUIThemeProvider>
+      <QueryClientProvider>
+        <ThemeUIThemeProvider theme={theme}>
+          <TooltipProvider>
+            <BaseStyles>
+              <Provider store={store}>
+                <DefaultErrorBoundary>{children}</DefaultErrorBoundary>
+              </Provider>
+            </BaseStyles>
+          </TooltipProvider>
+        </ThemeUIThemeProvider>
+      </QueryClientProvider>
     );
   }
   return {