♻️(app-desk) create Auth component

- Create the Auth component, it will manage the authentication.
- Moved auth folder to features folder.

src/frontend/apps/desk/src/api/__tests__/fetchApi.test.tsx

@@ -1,6 +1,6 @@
 import fetchMock from 'fetch-mock';
 
-import useAuthStore from '@/auth/useAuthStore';
+import { useAuthStore } from '@/features/';
 
 import { fetchAPI } from '../fetchApi';
 

src/frontend/apps/desk/src/api/fetchApi.ts

@@ -1,4 +1,4 @@
-import useAuthStore from '@/auth/useAuthStore';
+import { useAuthStore } from '@/features/';
 
 export const fetchAPI = async (input: string, init?: RequestInit) => {
   const apiUrl = `${process.env.NEXT_PUBLIC_API_URL}${input}`;

src/frontend/apps/desk/src/app/InnerLayout.tsx

@@ -1,34 +1,11 @@
-import { Loader } from '@openfun/cunningham-react';
-import { useEffect } from 'react';
-
-import useAuthStore from '@/auth/useAuthStore';
 import { Box } from '@/components';
-import { HEADER_HEIGHT, Header } from '@/features/header';
+import { HEADER_HEIGHT, Header, Menu } from '@/features/';
-import { Menu } from '@/features/menu';
 
 export default function InnerLayout({
   children,
 }: {
   children: React.ReactNode;
 }) {
-  const { initAuth, authenticated, initialized } = useAuthStore();
-
-  useEffect(() => {
-    if (initialized) {
-      return;
-    }
-
-    initAuth();
-  }, [initAuth, initialized]);
-
-  if (!authenticated) {
-    return (
-      <Box $height="100vh" $width="100vw" $align="center" $justify="center">
-        <Loader />
-      </Box>
-    );
-  }
-
   return (
     <Box as="main" $direction="column" $height="100vh" $css="overflow:hidden;">
       <Header />

src/frontend/apps/desk/src/app/layout.tsx

@@ -5,10 +5,10 @@ import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
 
 import { useCunninghamTheme } from '@/cunningham';
-
+import { Auth } from '@/features/auth/Auth';
 import '@/i18n/initI18n';
-import InnerLayout from './InnerLayout';
 
+import InnerLayout from './InnerLayout';
 import './globals.css';
 
 const queryClient = new QueryClient();
@@ -26,7 +26,9 @@ export default function RootLayout({
         <QueryClientProvider client={queryClient}>
           <ReactQueryDevtools />
           <CunninghamProvider theme={theme}>
-            <InnerLayout>{children}</InnerLayout>
+            <Auth>
+              <InnerLayout>{children}</InnerLayout>
+            </Auth>
           </CunninghamProvider>
         </QueryClientProvider>
       </body>

src/frontend/apps/desk/src/features/auth/Auth.tsx

@@ -0,0 +1,28 @@
+import { Loader } from '@openfun/cunningham-react';
+import { PropsWithChildren, useEffect } from 'react';
+
+import { Box } from '@/components';
+
+import { useAuthStore } from './useAuthStore';
+
+export const Auth = ({ children }: PropsWithChildren) => {
+  const { initAuth, authenticated, initialized } = useAuthStore();
+
+  useEffect(() => {
+    if (initialized) {
+      return;
+    }
+
+    initAuth();
+  }, [initAuth, initialized]);
+
+  if (!authenticated) {
+    return (
+      <Box $height="100vh" $width="100vw" $align="center" $justify="center">
+        <Loader />
+      </Box>
+    );
+  }
+
+  return children;
+};

src/frontend/apps/desk/src/features/auth/index.ts

@@ -0,0 +1,2 @@
+export * from './Auth';
+export * from './useAuthStore';

src/frontend/apps/desk/src/features/auth/useAuthStore.tsx

@@ -16,7 +16,7 @@ const initialState = {
   token: null,
 };
 
-const useAuthStore = create<AuthStore>((set) => ({
+export const useAuthStore = create<AuthStore>((set) => ({
   authenticated: initialState.authenticated,
   initialized: initialState.initialized,
   token: initialState.token,
@@ -39,5 +39,3 @@ const useAuthStore = create<AuthStore>((set) => ({
     set(initialState);
   },
 }));
-
-export default useAuthStore;

src/frontend/apps/desk/src/features/index.ts

@@ -1,3 +1,4 @@
+export * from './auth/';
 export * from './header/';
 export * from './language/';
 export * from './menu/';