refactor(ui): some ui structure refactor (#1069)

some ui structure refactor

packages/ui/src/App.tsx

@@ -1,9 +1,7 @@
-import { conditionalString } from '@silverhand/essentials';
 import React, { useEffect } from 'react';
 import { Route, Routes, BrowserRouter, Navigate } from 'react-router-dom';
 
-import * as styles from './App.module.scss';
+import AppContent from './containers/AppContent';
-import AppContent from './components/AppContent';
 import LoadingLayerProvider from './containers/LoadingLayerProvider';
 import usePageContext from './hooks/use-page-context';
 import usePreview from './hooks/use-preview';
@@ -29,8 +27,6 @@ const App = () => {
 
   useEffect(() => {
     if (isPreview) {
-      document.body.classList.add(conditionalString(styles.preview));
-
       return;
     }
 
@@ -61,17 +57,21 @@ const App = () => {
             />
 
             <Route element={<LoadingLayerProvider />}>
-              {/* always keep route path with param as the last one */}
               <Route path="/sign-in" element={<SignIn />} />
               <Route path="/sign-in/:method" element={<SecondarySignIn />} />
               <Route path="/register" element={<Register />} />
               <Route path="/register/:method" element={<Register />} />
 
               {/* social sign-in pages */}
-              <Route path="/sign-in/callback/:connector" element={<SocialSignInCallback />} />
+              <Route
+                path="/social/sign-in-callback/:connector"
+                element={<SocialSignInCallback />}
+              />
               <Route path="/callback/:connector" element={<Callback />} />
               <Route path="/social/register/:connector" element={<SocialRegister />} />
               <Route path="/social/landing/:connector" element={<SocialLanding />} />
+
+              {/* always keep route path with param as the last one */}
               <Route path="/:type/:method/passcode-validation" element={<Passcode />} />
             </Route>
 

packages/ui/src/hooks/use-preview.ts

@@ -1,8 +1,10 @@
 import { Language } from '@logto/phrases';
 import { AppearanceMode } from '@logto/schemas';
+import { conditionalString } from '@silverhand/essentials';
 import i18next from 'i18next';
 import { useEffect, useState } from 'react';
 
+import * as styles from '@/App.module.scss';
 import { Context } from '@/hooks/use-page-context';
 import initI18n from '@/i18n/init';
 import { SignInExperienceSettingsResponse, Platform } from '@/types';
@@ -32,6 +34,9 @@ const usePreview = (context: Context): [boolean, PreviewConfig?] => {
     // Init i18n
     void initI18n();
 
+    // Block pointer event
+    document.body.classList.add(conditionalString(styles.preview));
+
     const previewMessageHandler = (event: MessageEvent) => {
       if (event.origin !== window.location.origin) {
         return;

packages/ui/src/hooks/use-social-callback-handler.ts

@@ -47,7 +47,7 @@ const useSocialCallbackHandler = () => {
       // Web flow
       navigate(
         {
-          pathname: `/sign-in/callback/${connectorId}`,
+          pathname: `/social/sign-in-callback/${connectorId}`,
           search: data,
         },
         {

packages/ui/src/hooks/use-social.ts

@@ -24,7 +24,7 @@ const useSocial = () => {
         : redirectTo;
 
     getLogtoNativeSdk()?.getPostMessage()({
-      callbackUri: `${window.location.origin}/sign-in/callback/${connectorId}`,
+      callbackUri: `${window.location.origin}/social/sign-in-callback/${connectorId}`,
       redirectTo: redirectUri,
     });
   }, []);

packages/ui/src/pages/SocialSignInCallback/index.test.tsx

@@ -24,9 +24,9 @@ describe('SocialCallbackPage with code', () => {
     Object.defineProperty(window, 'location', {
       value: {
         origin,
-        href: `/sign-in/callback?state=${state}&code=foo`,
+        href: `/social/sign-in-callback?state=${state}&code=foo`,
         search: `?state=${state}&code=foo`,
-        pathname: '/sign-in/callback',
+        pathname: '/social/sign-in-callback',
         replace: jest.fn(),
       },
     });
@@ -34,9 +34,9 @@ describe('SocialCallbackPage with code', () => {
 
     renderWithPageContext(
       <SettingsProvider>
-        <MemoryRouter initialEntries={['/sign-in/callback/github']}>
+        <MemoryRouter initialEntries={['/social/sign-in-callback/github']}>
           <Routes>
-            <Route path="/sign-in/callback/:connector" element={<SocialCallback />} />
+            <Route path="/social/sign-in-callback/:connector" element={<SocialCallback />} />
           </Routes>
         </MemoryRouter>
       </SettingsProvider>