feat: use member's lang when signed in (#212)

* feat: use member's lang when signed in

* refactor: update yarn lock

src/components/common/TranslationWrapper.tsx

@@ -0,0 +1,28 @@
+import React, { useContext, useEffect } from 'react';
+import { I18nextProvider } from 'react-i18next';
+
+import { getLangCookie } from '@graasp/sdk';
+
+import i18n from '../../config/i18n';
+import { QueryClientContext } from '../QueryClientContext';
+
+type Props = {
+  children: JSX.Element;
+};
+
+const TranslationWrapper = ({ children }: Props): JSX.Element => {
+  const { hooks } = useContext(QueryClientContext);
+  const { data: member } = hooks.useCurrentMember();
+
+  useEffect(() => {
+    // change language
+    const lang = member?.extra?.lang ?? getLangCookie();
+    if (lang) {
+      i18n.changeLanguage(lang);
+    }
+  }, [member]);
+
+  return <I18nextProvider i18n={i18n}>{children}</I18nextProvider>;
+};
+
+export default TranslationWrapper;

src/components/common/Wrapper.js

@@ -3,23 +3,23 @@ import { ErrorBoundary } from '@sentry/react';
 import PropTypes from 'prop-types';
 
 import React, { useState } from 'react';
-import { I18nextProvider, useTranslation } from 'react-i18next';
+import { useTranslation } from 'react-i18next';
 import 'react-toastify/dist/ReactToastify.css';
 
 import { Divider, ThemeProvider } from '@mui/material';
 
-import { getLangCookie } from '@graasp/sdk';
 import { LIBRARY } from '@graasp/translations';
 import '@graasp/ui/dist/bundle.css';
 
-import i18n from '../../config/i18n';
 import defaultTheme from '../../config/theme';
 import { QueryClientProvider } from '../QueryClientContext';
 import Footer from '../layout/Footer';
 import { LoginModalProvider } from './SignInModalContext';
+import TranslationWrapper from './TranslationWrapper';
 
 const Content = ({ children }) => {
   const { t } = useTranslation();
+
   return (
     <ErrorBoundary fallback={t(LIBRARY.UNEXPECTED_ERROR_MESSAGE)}>
       <LoginModalProvider>
@@ -40,12 +40,6 @@ const Wrapper = ({ dehydratedState, children }) => {
   const [theme, setTheme] = useState(defaultTheme);
 
   React.useEffect(async () => {
-    // change language
-    const lang = getLangCookie();
-    if (lang) {
-      i18n.changeLanguage(lang);
-    }
-
     if (typeof window !== 'undefined') {
       setTheme((await import('@graasp/ui')).theme);
     }
@@ -55,9 +49,9 @@ const Wrapper = ({ dehydratedState, children }) => {
     <ThemeProvider theme={theme}>
       <div sx={{ flexGrow: 1, height: '100%' }}>
         <QueryClientProvider dehydratedState={dehydratedState}>
-          <I18nextProvider i18n={i18n}>
+          <TranslationWrapper>
             <Content>{children}</Content>
-          </I18nextProvider>
+          </TranslationWrapper>
         </QueryClientProvider>
       </div>
     </ThemeProvider>

src/components/home/CreateButton.tsx

@@ -8,7 +8,7 @@ import Fab from '@mui/material/Fab';
 import { redirect } from '@graasp/sdk';
 import { LIBRARY } from '@graasp/translations';
 
-import { GRAASP_BUILDER_URL } from '../../config/constants';
+import { GRAASP_BUILDER_HOST } from '../../config/constants';
 import { QueryClientContext } from '../QueryClientContext';
 
 const CreateButton: FC = () => {
@@ -17,7 +17,7 @@ const CreateButton: FC = () => {
   const { data: user } = hooks.useCurrentMember();
 
   const redirectToCompose = () => {
-    redirect(GRAASP_BUILDER_URL);
+    redirect(GRAASP_BUILDER_HOST);
   };
 
   // show create button only if logged in

src/components/layout/Footer.js

@@ -26,7 +26,10 @@ const Footer = () => {
 
     // on signed in: change user language
     if (member?.id) {
-      editMember({ extra: { lang: newLang } });
+      editMember({
+        id: member.id,
+        extra: { lang: newLang },
+      });
     }
     // otherwise set cookie
     else {

src/config/constants.ts

@@ -3,11 +3,11 @@ import { Context } from '@graasp/sdk';
 import {
   SHOW_NOTIFICATIONS as ENV_SHOW_NOTIFICATIONS,
   GRAASP_AUTH_HOST,
-  GRAASP_BUILDER_HOST,
   GRAASP_ANALYTICS_HOST,
   GRAASP_PERFORM_HOST,
   NEXT_PUBLIC_DOMAIN,
   PUBLISHED_TAG_ID,
+  GRAASP_BUILDER_HOST as ENV_GRAASP_BUILDER_HOST,
 } from './env';
 
 export const APP_KEYWORDS = ['graasp', 'library'];
@@ -24,6 +24,8 @@ export const INLINE_MATH_INDICATOR = '\\(';
 export const BLOCK_MATH_REGEX = /(\\\[(.*?)\\])/g;
 export const INLINE_MATH_REGEX = /(\\\((.*?)\\\))/g;
 
+export const GRAASP_BUILDER_HOST = ENV_GRAASP_BUILDER_HOST || 'http://localhost:3111';
+
 export const ITEM_TYPES = {
   APPLICATION: 'Application',
   FOLDER: 'folder',
@@ -49,8 +51,6 @@ export const MAIL_BREAK_LINE = '%0D%0A';
 
 export const LEFT_MENU_WIDTH = 300;
 
-export const GRAASP_BUILDER_URL = 'https://builder.graasp.org';
-
 export const CATEGORY_TYPES = {
   LEVEL: 'level',
   DISCIPLINE: 'discipline',