From 0843cbd8eda91119c88bfd69c1b1e669db74960d Mon Sep 17 00:00:00 2001
From: Lina Ebeid <linaebe0@gmail.com>
Date: Thu, 25 Jul 2024 16:56:41 +0200
Subject: [PATCH] feat: pass direction to theme provider (#1363)

* feat: pass direction to theme provider

* fix: use i18n direction
---
 package.json            |  2 +-
 src/components/Root.tsx | 52 +++++++++++++++++++++++++++--------------
 yarn.lock               | 33 +++++++++++++++++++-------
 3 files changed, 60 insertions(+), 27 deletions(-)

diff --git a/package.json b/package.json
index 082be6e44..8660a0a22 100644
--- a/package.json
+++ b/package.json
@@ -25,7 +25,7 @@
     "@graasp/query-client": "3.16.0",
     "@graasp/sdk": "4.21.0",
     "@graasp/translations": "1.32.0",
-    "@graasp/ui": "4.22.0",
+    "@graasp/ui": "4.23.0",
     "@mui/icons-material": "5.16.4",
     "@mui/lab": "5.0.0-alpha.172",
     "@mui/material": "5.16.4",
diff --git a/src/components/Root.tsx b/src/components/Root.tsx
index d21a76c5c..79d1d22c8 100644
--- a/src/components/Root.tsx
+++ b/src/components/Root.tsx
@@ -11,16 +11,18 @@ import { I18nextProvider } from 'react-i18next';
 import { BrowserRouter as Router } from 'react-router-dom';
 import { ToastContainer } from 'react-toastify';
 
-import { CssBaseline, ThemeProvider } from '@mui/material';
+import { CssBaseline } from '@mui/material';
 
-import { theme } from '@graasp/ui';
+import { langs } from '@graasp/translations';
+import { ThemeProvider } from '@graasp/ui';
 
 import * as Sentry from '@sentry/react';
 
-import i18nConfig from '../config/i18n';
+import i18nConfig, { useCommonTranslation } from '../config/i18n';
 import {
   QueryClientProvider,
   ReactQueryDevtools,
+  hooks,
   queryClient,
 } from '../config/queryClient';
 import App from './App';
@@ -29,25 +31,39 @@ import { CurrentUserContextProvider } from './context/CurrentUserContext';
 import { FilterItemsContextProvider } from './context/FilterItemsContext';
 import ModalProviders from './context/ModalProviders';
 
+const ThemeWrapper = () => {
+  const { i18n } = useCommonTranslation();
+  const { data: currentMember } = hooks.useCurrentMember();
+
+  return (
+    <ThemeProvider
+      langs={langs}
+      languageSelectSx={{ mb: 2, mr: 2 }}
+      i18n={i18n}
+      defaultDirection={i18n.dir(currentMember?.extra?.lang)}
+    >
+      <CssBaseline />
+      <ToastContainer stacked position="bottom-left" theme="colored" />
+      <Router>
+        <Sentry.ErrorBoundary fallback={<FallbackComponent />}>
+          <ModalProviders>
+            <CurrentUserContextProvider>
+              <FilterItemsContextProvider>
+                <App />
+              </FilterItemsContextProvider>
+            </CurrentUserContextProvider>
+          </ModalProviders>
+        </Sentry.ErrorBoundary>
+      </Router>
+    </ThemeProvider>
+  );
+};
+
 const Root = (): JSX.Element => (
   <HelmetProvider>
     <QueryClientProvider client={queryClient}>
       <I18nextProvider i18n={i18nConfig}>
-        <ThemeProvider theme={theme}>
-          <CssBaseline />
-          <ToastContainer stacked position="bottom-left" theme="colored" />
-          <Router>
-            <Sentry.ErrorBoundary fallback={<FallbackComponent />}>
-              <ModalProviders>
-                <CurrentUserContextProvider>
-                  <FilterItemsContextProvider>
-                    <App />
-                  </FilterItemsContextProvider>
-                </CurrentUserContextProvider>
-              </ModalProviders>
-            </Sentry.ErrorBoundary>
-          </Router>
-        </ThemeProvider>
+        <ThemeWrapper />
       </I18nextProvider>
       {import.meta.env.DEV && import.meta.env.MODE !== 'test' && (
         <ReactQueryDevtools position="bottom-left" />
diff --git a/yarn.lock b/yarn.lock
index 29e7a4209..e12923c4b 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1978,9 +1978,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@graasp/ui@npm:4.22.0":
-  version: 4.22.0
-  resolution: "@graasp/ui@npm:4.22.0"
+"@graasp/ui@npm:4.23.0":
+  version: 4.23.0
+  resolution: "@graasp/ui@npm:4.23.0"
   dependencies:
     "@ag-grid-community/client-side-row-model": "npm:31.3.2"
     "@ag-grid-community/react": "npm:^31.3.2"
@@ -2014,7 +2014,7 @@ __metadata:
     react-router-dom: ^6.11.0
     stylis: ^4.1.3
     stylis-plugin-rtl: ^2.1.1
-  checksum: 10/af8bcd06fd743d84739bf1c20aaceca67321c12456bcd905e7233d50c51c3fed25da41c835f8e9d1543a26a46f1da851c45222763dcbc7ad884cf0abb61b63d3
+  checksum: 10/26d99acd179daee8315b632b28590c10b13e991ef6c66fcda916937e6fff6ce6d8f424fdd2499beba6ef0c3f91d705181b73ec6fe0e551d4b50f1615d1fadb64
   languageName: node
   linkType: hard
 
@@ -3565,8 +3565,8 @@ __metadata:
   linkType: hard
 
 "@testing-library/jest-dom@npm:^6.4.2":
-  version: 6.4.8
-  resolution: "@testing-library/jest-dom@npm:6.4.8"
+  version: 6.4.6
+  resolution: "@testing-library/jest-dom@npm:6.4.6"
   dependencies:
     "@adobe/css-tools": "npm:^4.4.0"
     "@babel/runtime": "npm:^7.9.2"
@@ -3576,7 +3576,24 @@ __metadata:
     dom-accessibility-api: "npm:^0.6.3"
     lodash: "npm:^4.17.21"
     redent: "npm:^3.0.0"
-  checksum: 10/011e5a309e2cfc0c5cee6454427030d9a5d690df212bedcc78c15ee8d23218c3e51be32617ca879f060445ba0ba38e1b8d224b5ab11444ee076c37ed8c1c123a
+  peerDependencies:
+    "@jest/globals": ">= 28"
+    "@types/bun": "*"
+    "@types/jest": ">= 28"
+    jest: ">= 28"
+    vitest: ">= 0.32"
+  peerDependenciesMeta:
+    "@jest/globals":
+      optional: true
+    "@types/bun":
+      optional: true
+    "@types/jest":
+      optional: true
+    jest:
+      optional: true
+    vitest:
+      optional: true
+  checksum: 10/94fad29d740ff2c34967c644e2481a472aa8eeb1f11cdec5d4f81f14b2576660387551264c0fa718c15bfc61dd342f7621d888fe3e4ba1b7f830fe65bdd37bc8
   languageName: node
   linkType: hard
 
@@ -8137,7 +8154,7 @@ __metadata:
     "@graasp/query-client": "npm:3.16.0"
     "@graasp/sdk": "npm:4.21.0"
     "@graasp/translations": "npm:1.32.0"
-    "@graasp/ui": "npm:4.22.0"
+    "@graasp/ui": "npm:4.23.0"
     "@mui/icons-material": "npm:5.16.4"
     "@mui/lab": "npm:5.0.0-alpha.172"
     "@mui/material": "npm:5.16.4"