feat: keep language when creating new user

settings with language setting available when disconnected

Author: pyphilia

public/app/config/config.js

@@ -43,7 +43,7 @@ const PRODUCT_NAME = 'Graasp';
 const TMP_FOLDER = 'tmp';
 const DEFAULT_LANG = 'en';
 const DEFAULT_DEVELOPER_MODE = false;
-const TEACHER_USER_MODE = 'teacher';
+const TEACHER_USER_MODE = 'student';
 const DEFAULT_USER_MODE = TEACHER_USER_MODE;
 const DEFAULT_GEOLOCATION_ENABLED = false;
 const VISUAL_SYNC_MODE = 'visual';
@@ -55,10 +55,10 @@ const DEFAULT_AUTHENTICATION = false;
 const DEFAULT_ACTION_ACCESSIBILITY = false;
 const DEFAULT_ACTIONS_AS_ENABLED = true;
 
-const DEFAULT_USER = {
+const DEFAULT_USER = (lang = DEFAULT_LANG) => ({
   geolocation: null,
   settings: {
-    lang: DEFAULT_LANG,
+    lang,
     developerMode: DEFAULT_DEVELOPER_MODE,
     geolocationEnabled: DEFAULT_GEOLOCATION_ENABLED,
     syncMode: DEFAULT_SYNC_MODE,
@@ -68,7 +68,7 @@ const DEFAULT_USER = {
   },
   favoriteSpaces: [],
   recentSpaces: [],
-};
+});
 
 const ANONYMOUS_USERNAME = 'Anonymous';
 

public/app/listeners/signIn.js

@@ -1,43 +1,48 @@
 const ObjectId = require('bson-objectid');
-const _ = require('lodash');
 const { USERS_COLLECTION } = require('../db');
 const { SIGN_IN_CHANNEL } = require('../config/channels');
 const {
   DEFAULT_USER,
   ANONYMOUS_USERNAME,
   AUTHENTICATED,
+  DEFAULT_LANG,
 } = require('../config/config');
 
-const createNewUser = (username, createdAt, anonymous = false) => {
+const createNewUser = (
+  username,
+  createdAt,
+  lang = DEFAULT_LANG,
+  anonymous = false
+) => {
   const id = ObjectId().str;
 
   return {
     id,
     username,
     createdAt,
     anonymous,
-    ..._.cloneDeep(DEFAULT_USER),
+    ...DEFAULT_USER(lang),
   };
 };
 
 const signIn = (mainWindow, db) => async (
   event,
-  { username, anonymous = false }
+  { username, lang = DEFAULT_LANG, anonymous = false }
 ) => {
   const users = db.get(USERS_COLLECTION);
 
   const now = new Date();
 
   let user;
   if (anonymous) {
-    user = createNewUser(ANONYMOUS_USERNAME, now, anonymous);
+    user = createNewUser(ANONYMOUS_USERNAME, now, lang, anonymous);
     users.push(user).write();
   } else {
     // check in db if username exists
     user = users.find({ username }).value();
 
     if (!user) {
-      user = createNewUser(username, now);
+      user = createNewUser(username, now, lang);
       users.push(user).write();
     }
   }

src/App.js

@@ -194,11 +194,7 @@ export class App extends Component {
                 path={LOAD_SELECTION_SPACE_PATH}
                 component={Authorization()(LoadSelectionScreen)}
               />
-              <Route
-                exact
-                path={SETTINGS_PATH}
-                component={Authorization()(Settings)}
-              />
+              <Route exact path={SETTINGS_PATH} component={Settings} />
               <Route
                 exact
                 path={SYNC_SPACE_PATH}

src/__snapshots__/App.test.js.snap

@@ -388,15 +388,7 @@ exports[`<App /> renders correctly 1`] = `
           path="/load-space/selection"
         />
         <Route
-          component={
-            Object {
-              "$$typeof": Symbol(react.memo),
-              "WrappedComponent": [Function],
-              "compare": null,
-              "displayName": "Connect(ComposedComponent)",
-              "type": [Function],
-            }
-          }
+          component={[Function]}
           exact={true}
           path="/settings"
         />

src/actions/authentication.js

@@ -27,10 +27,10 @@ const flagSigningIn = createFlag(FLAG_SIGNING_IN);
 const flagSigningOut = createFlag(FLAG_SIGNING_OUT);
 const flagGettingAuthenticated = createFlag(FLAG_GETTING_AUTHENTICATED);
 
-const signIn = async ({ username, anonymous }) => async dispatch => {
+const signIn = async ({ username, lang, anonymous }) => async dispatch => {
   try {
     dispatch(flagSigningIn(true));
-    window.ipcRenderer.send(SIGN_IN_CHANNEL, { username, anonymous });
+    window.ipcRenderer.send(SIGN_IN_CHANNEL, { username, lang, anonymous });
     window.ipcRenderer.once(SIGN_IN_CHANNEL, async (event, user) => {
       if (user === ERROR_GENERAL) {
         toastr.error(ERROR_MESSAGE_HEADER, ERROR_SIGNING_IN);

src/components/Settings.js

@@ -17,7 +17,7 @@ import SyncAdvancedSwitch from './space/sync/SyncAdvancedSwitch';
 import StudentModeSwitch from './common/StudentModeSwitch';
 import ActionEnabledSwitch from './common/ActionEnabledSwitch';
 import ActionAccessibilitySwitch from './common/ActionAccessibilitySwitch';
-import { USER_MODES } from '../config/constants';
+import { USER_MODES, DEFAULT_USER_MODE } from '../config/constants';
 
 const styles = theme => ({
   ...Styles(theme),
@@ -43,10 +43,31 @@ export class Settings extends Component {
       changeLanguage: PropTypes.func.isRequired,
     }).isRequired,
     userMode: PropTypes.oneOf(Object.values(USER_MODES)).isRequired,
+    authenticated: PropTypes.bool.isRequired,
+  };
+
+  renderDeveloperModeSwitch = () => {
+    const { userMode } = this.props;
+    return userMode === USER_MODES.TEACHER ? <DeveloperSwitch /> : null;
+  };
+
+  renderActionSettings = () => {
+    const { t } = this.props;
+    return (
+      <>
+        <Typography variant="h5" color="inherit" className="mt-2">
+          {t('Actions')}
+        </Typography>
+        <FormGroup>
+          <ActionEnabledSwitch />
+          <ActionAccessibilitySwitch />
+        </FormGroup>
+      </>
+    );
   };
 
   render() {
-    const { classes, t, userMode } = this.props;
+    const { classes, t, authenticated } = this.props;
 
     return (
       <Main id={SETTINGS_MAIN_ID}>
@@ -56,27 +77,28 @@ export class Settings extends Component {
           </Typography>
           <FormGroup>
             <LanguageSelect />
-            <GeolocationControl />
-            <SyncAdvancedSwitch />
-            <StudentModeSwitch />
-            {userMode === USER_MODES.TEACHER ? <DeveloperSwitch /> : null}
+            {authenticated && (
+              <>
+                <GeolocationControl />
+                <SyncAdvancedSwitch />
+                <StudentModeSwitch />
+                {this.renderDeveloperModeSwitch()}
+              </>
+            )}
           </FormGroup>
           <Divider variant="middle" classes={{ root: classes.divider }} />
-          <Typography variant="h5" color="inherit" className="mt-2">
-            {t('Actions')}
-          </Typography>
-          <FormGroup>
-            <ActionEnabledSwitch />
-            <ActionAccessibilitySwitch />
-          </FormGroup>
+
+          {authenticated && this.renderActionSettings()}
         </div>
       </Main>
     );
   }
 }
 
 const mapStateToProps = ({ authentication }) => ({
-  userMode: authentication.getIn(['user', 'settings', 'userMode']),
+  authenticated: authentication.getIn(['authenticated']),
+  userMode:
+    authentication.getIn(['user', 'settings', 'userMode']) || DEFAULT_USER_MODE,
 });
 
 const ConnectedComponent = connect(mapStateToProps, null)(Settings);

src/components/Settings.test.js

@@ -33,6 +33,7 @@ const createSettingsProps = () => {
       changeLanguage: jest.fn(),
     },
     userMode: USER_MODES.TEACHER,
+    authenticated: true,
   };
 };
 

src/components/signin/SignInScreen.js

@@ -12,7 +12,11 @@ import PropTypes from 'prop-types';
 import logo from '../../logo.svg';
 import Styles from '../../Styles';
 import { signIn } from '../../actions/authentication';
-import { AUTHENTICATED, ACTION_VERBS } from '../../config/constants';
+import {
+  AUTHENTICATED,
+  ACTION_VERBS,
+  DEFAULT_LANGUAGE,
+} from '../../config/constants';
 import { HOME_PATH } from '../../config/paths';
 import Main from '../common/Main';
 import {
@@ -96,6 +100,7 @@ class SignInScreen extends Component {
     authenticated: PropTypes.bool.isRequired,
     actionsEnabled: PropTypes.bool.isRequired,
     user: PropTypes.instanceOf(Map),
+    lang: PropTypes.string.isRequired,
   };
 
   static defaultProps = {
@@ -136,15 +141,15 @@ class SignInScreen extends Component {
 
   handleSignIn = () => {
     const { username } = this.state;
-    const { dispatchSignIn, actionsEnabled } = this.props;
+    const { dispatchSignIn, actionsEnabled, lang } = this.props;
     if (username.length) {
-      dispatchSignIn({ username, actionsEnabled });
+      dispatchSignIn({ username, actionsEnabled, lang });
     }
   };
 
   handleAnonymousSignIn = () => {
-    const { dispatchSignIn } = this.props;
-    dispatchSignIn({ anonymous: true });
+    const { dispatchSignIn, lang } = this.props;
+    dispatchSignIn({ anonymous: true, lang });
   };
 
   handleUsername = event => {
@@ -216,7 +221,7 @@ class SignInScreen extends Component {
 }
 
 const mapStateToProps = ({ authentication }) => ({
-  user: authentication.getIn(['user']),
+  lang: authentication.getIn(['user', 'settings', 'lang']) || DEFAULT_LANGUAGE,
   authenticated: authentication.getIn(['authenticated']) === AUTHENTICATED,
   actionsEnabled: authentication.getIn(['user', 'settings', 'actionsEnabled']),
 });