refactor: update ui

package.json

@@ -39,6 +39,7 @@
     "@graasp/chatbox": "3.3.0",
     "@graasp/query-client": "3.25.0",
     "@graasp/sdk": "4.31.0",
+    "@graasp/stylis-plugin-rtl": "2.2.0",
     "@graasp/translations": "1.32.0",
     "@graasp/ui": "5.2.0",
     "@mui/icons-material": "5.16.4",
@@ -65,7 +66,6 @@
     "react-router-dom": "6.25.1",
     "react-toastify": "10.0.5",
     "stylis": "4.3.2",
-    "stylis-plugin-rtl": "2.1.1",
     "uuid": "10.0.0"
   },
   "devDependencies": {

src/App.tsx

@@ -12,7 +12,7 @@ import {
 import { Alert, Button, Stack, Typography } from '@mui/material';
 
 import { buildSignInPath, saveUrlForRedirection } from '@graasp/sdk';
-import { CustomInitialLoader, withAuthorization } from '@graasp/ui';
+import { CustomInitialLoader, SignedInWrapper } from '@graasp/ui';
 
 import { AUTHENTICATION_HOST, DOMAIN } from '@/config/env';
 import { HOME_PATH, buildContentPagePath, buildMainPath } from '@/config/paths';
@@ -74,20 +74,6 @@ export const App = (): JSX.Element => {
     return <CustomInitialLoader />;
   }
 
-  const props = {
-    currentMember,
-    redirectionLink: buildSignInPath({
-      host: AUTHENTICATION_HOST,
-      // allows to go back to this page after login
-      redirectionUrl: window.location.href,
-    }),
-    onRedirect: () => {
-      // save current url for later redirection after sign in
-      saveUrlForRedirection(location.pathname, DOMAIN);
-    },
-  };
-  const HomePageWithAuthorization = withAuthorization(HomePage, props);
-
   const fullscreen = Boolean(searchParams.get('fullscreen') === 'true');
 
   return (
@@ -97,7 +83,25 @@ export const App = (): JSX.Element => {
           <Route index element={<RedirectToRootContentPage />} />
           <Route path=":itemId" element={<ItemPage />} />
         </Route>
-        <Route path={HOME_PATH} element={<HomePageWithAuthorization />} />
+        <Route
+          path={HOME_PATH}
+          element={
+            <SignedInWrapper
+              onRedirect={() => {
+                // save current url for later redirection after sign in
+                saveUrlForRedirection(location.pathname, DOMAIN);
+              }}
+              redirectionLink={buildSignInPath({
+                host: AUTHENTICATION_HOST,
+                // allows to go back to this page after login
+                redirectionUrl: window.location.href,
+              })}
+              currentAccount={currentMember}
+            >
+              <HomePage />
+            </SignedInWrapper>
+          }
+        />
         <Route path="*" element={<Navigate to={HOME_PATH} />} />
       </Route>
     </Routes>

src/contexts/CurrentMemberContext.tsx

@@ -1,5 +1,8 @@
 import { createContext, useContext, useEffect } from 'react';
 
+import { AccountType } from '@graasp/sdk';
+import { DEFAULT_LANG } from '@graasp/translations';
+
 import i18n from '@/config/i18n';
 import { hooks } from '@/config/queryClient';
 
@@ -20,7 +23,9 @@ export const CurrentMemberContextProvider = ({
   const query = useCurrentMember();
 
   // update language depending on user setting
-  const lang = query.data?.extra?.lang;
+  const lang =
+    (query?.data?.type === AccountType.Individual && query.data.extra?.lang) ||
+    DEFAULT_LANG;
   useEffect(() => {
     if (lang !== i18n.language) {
       i18n.changeLanguage(lang);

src/modules/chatbox/Chatbox.tsx

@@ -22,7 +22,7 @@ const Chatbox = ({ item }: Props): JSX.Element => {
   const { data: messages, isLoading: isChatLoading } = useItemChat(item.id);
   const { data: itemPermissions, isLoading: isLoadingItemPermissions } =
     useItemMemberships(item.id);
-  const members = itemPermissions?.map((m) => m.member);
+  const members = itemPermissions?.map((m) => m.account);
   const { data: currentMember, isLoading: isLoadingCurrentMember } =
     useCurrentMemberContext();
   const { mutate: sendMessage } = usePostItemChatMessage();

src/modules/item/Item.tsx

@@ -7,6 +7,7 @@ import { Alert, Box, Container, Divider, Skeleton, Stack } from '@mui/material';
 
 import { Api } from '@graasp/query-client';
 import {
+  AccountType,
   ActionTriggers,
   AppItemType,
   Context,
@@ -233,10 +234,13 @@ const AppContent = ({ item }: { item: AppItemType }): JSX.Element => {
         contextPayload={{
           apiHost: API_HOST,
           settings: item.settings,
-          lang: item.lang || member?.extra?.lang || DEFAULT_LANG,
+          lang:
+            item.lang ||
+            (member?.type === AccountType.Individual && member?.extra?.lang) ||
+            DEFAULT_LANG,
           permission: PermissionLevel.Read,
           context: Context.Player,
-          memberId: member?.id,
+          accountId: member?.id,
           itemId: item.id,
         }}
         showCollapse={item.settings?.isCollapsible}

src/modules/pages/ItemPage.tsx

@@ -3,7 +3,7 @@ import { useNavigate, useParams } from 'react-router-dom';
 import { Container, Stack, Typography, styled } from '@mui/material';
 
 import { ItemLoginSchemaType } from '@graasp/sdk';
-import { Button, CustomInitialLoader, ItemLoginScreen } from '@graasp/ui';
+import { Button, CustomInitialLoader, ItemLoginWrapper } from '@graasp/ui';
 
 import { usePlayerTranslation } from '@/config/i18n';
 import { HOME_PATH } from '@/config/paths';
@@ -109,13 +109,15 @@ const ItemPage = (): JSX.Element | null => {
     }
 
     return (
-      <ItemLoginScreen
+      <ItemLoginWrapper
         itemId={itemId}
         signIn={itemLoginSignIn}
         itemLoginSchemaType={itemLoginSchemaType}
         usernameInputId={ITEM_LOGIN_USERNAME_INPUT_ID}
         signInButtonId={ITEM_LOGIN_SIGN_IN_BUTTON_ID}
         passwordInputId={ITEM_LOGIN_PASSWORD_INPUT_ID}
+        enrollContent={<EnrollScreen />}
+        // requestAccessContent={<Reque}
       />
     );
   }

yarn.lock

@@ -1510,6 +1510,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@graasp/stylis-plugin-rtl@npm:2.2.0":
+  version: 2.2.0
+  resolution: "@graasp/stylis-plugin-rtl@npm:2.2.0"
+  dependencies:
+    cssjanus: "npm:^2.3.0"
+  peerDependencies:
+    stylis: 4.x
+  checksum: 10/4b873aa7465c894ff5422f851522feda36bf73923f7a859befc7d5c8049e660a80a103090b977d01fad5c7d2c7ab92e313a7fa3eb263e2ce41bdb9597762edac
+  languageName: node
+  linkType: hard
+
 "@graasp/translations@npm:1.32.0":
   version: 1.32.0
   resolution: "@graasp/translations@npm:1.32.0"
@@ -3865,10 +3876,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"cssjanus@npm:^2.0.1":
-  version: 2.1.0
-  resolution: "cssjanus@npm:2.1.0"
-  checksum: 10/858ab0be770f9f898f3331dafbd8c377a8ca3c7ee88fd5b65b702c260d61ff70fe9d9c70bf343ece0594600904deead97d78ad0ede97ad55accfdc98ebe1dcf2
+"cssjanus@npm:^2.3.0":
+  version: 2.3.0
+  resolution: "cssjanus@npm:2.3.0"
+  checksum: 10/eaa78f8b6047f52ea504964fd15b3f92b4d3603dd50350ad3c8c53dc51db8d4f75bac54570cd281df8ac368ed8759ccc677ae3cb53583af051688d63dc329232
   languageName: node
   linkType: hard
 
@@ -5710,6 +5721,7 @@ __metadata:
     "@graasp/chatbox": "npm:3.3.0"
     "@graasp/query-client": "npm:3.25.0"
     "@graasp/sdk": "npm:4.31.0"
+    "@graasp/stylis-plugin-rtl": "npm:2.2.0"
     "@graasp/translations": "npm:1.32.0"
     "@graasp/ui": "npm:5.2.0"
     "@mui/icons-material": "npm:5.16.4"
@@ -5766,7 +5778,6 @@ __metadata:
     react-toastify: "npm:10.0.5"
     rollup-plugin-visualizer: "npm:5.12.0"
     stylis: "npm:4.3.2"
-    stylis-plugin-rtl: "npm:2.1.1"
     typescript: "npm:5.5.4"
     uuid: "npm:10.0.0"
     vite: "npm:5.3.4"
@@ -9942,17 +9953,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"stylis-plugin-rtl@npm:2.1.1":
-  version: 2.1.1
-  resolution: "stylis-plugin-rtl@npm:2.1.1"
-  dependencies:
-    cssjanus: "npm:^2.0.1"
-  peerDependencies:
-    stylis: 4.x
-  checksum: 10/262d2c762216556ed3dc8218ea5929ae24b4b0fae020eb41c217911e6628374009d1e1b24256ed6a2f39cbbf302a877f2efe912b628c71dd15fde90866ca54ca
-  languageName: node
-  linkType: hard
-
 "stylis@npm:4.2.0":
   version: 4.2.0
   resolution: "stylis@npm:4.2.0"