feat: save user preferences for language

libs/gql-schema/schema.ts

@@ -44,6 +44,11 @@ const rootSchema = `
     TEMPLATE
   }
 
+  enum Language {
+    en
+    es
+  }
+
   input BulkUpdateScriptInput {
     searchString: String!
     replaceString: String!
@@ -98,6 +103,7 @@ const rootSchema = `
     email: String!
     cell: String!
     notificationFrequency: String!
+    language: Language!
     oldPassword: String
     newPassword: String
   }

libs/gql-schema/user.ts

@@ -17,6 +17,7 @@ export const schema = `
     terms: Boolean
     isSuperadmin: Boolean!
     notificationFrequency: String!
+    language: Language!
     isSuspended: Boolean!
   }
 

libs/spoke-codegen/src/graphql/session.graphql

@@ -22,6 +22,13 @@ query CurrentUserSuperAdmin {
   }
 }
 
+query GetCurrentUserLanguage {
+  currentUser {
+    id
+    language
+  }
+}
+
 query CurrentUserOrganizationRoles($organizationId: String!) {
   currentUser {
     id

migrations/20240920042142_add_user_language.js

@@ -0,0 +1,19 @@
+/**
+ * @param { import("knex").Knex } knex
+ * @returns { Promise<void> }
+ */
+exports.up = function up(knex) {
+  return knex.schema.alterTable("user", (t) => {
+    t.enu("language", ["en", "es"]).notNullable().defaultTo("en");
+  });
+};
+
+/**
+ * @param { import("knex").Knex } knex
+ * @returns { Promise<void> }
+ */
+exports.down = function down(knex) {
+  return knex.schema.alterTable("user", (t) => {
+    t.dropColumn("language");
+  });
+};

src/api/user.ts

@@ -5,3 +5,17 @@ export enum NotificationFrequencyType {
   Daily = "DAILY",
   None = "NONE"
 }
+
+export enum Language {
+  English = "en",
+  Spanish = "es"
+}
+
+export const languageEnumToLabel = (value: Language) => {
+  switch (value) {
+    case Language.Spanish:
+      return "Español";
+    default:
+      return "English";
+  }
+};

src/containers/UserEdit/index.jsx

@@ -11,7 +11,11 @@ import React from "react";
 import Form from "react-formal";
 import * as yup from "yup";
 
-import { NotificationFrequencyType } from "../../api/user";
+import {
+  Language,
+  languageEnumToLabel,
+  NotificationFrequencyType
+} from "../../api/user";
 import GSForm from "../../components/forms/GSForm";
 import GSSubmitButton from "../../components/forms/GSSubmitButton";
 import SpokeFormField from "../../components/forms/SpokeFormField";
@@ -43,7 +47,8 @@ const styles = StyleSheet.create({
 class UserEdit extends React.Component {
   state = {
     user: {
-      notificationFrequency: NotificationFrequencyType.All
+      notificationFrequency: NotificationFrequencyType.All,
+      language: Language.English
     },
     changePasswordDialog: false,
     successDialog: false,
@@ -175,7 +180,8 @@ class UserEdit extends React.Component {
       firstName: yup.string().required(),
       lastName: yup.string().required(),
       cell: yup.string().required(),
-      notificationFrequency: yup.string().required()
+      notificationFrequency: yup.string().required(),
+      language: yup.string().required()
     };
     const password = yup.string().required();
     const passwordConfirm = (refField = "password") =>
@@ -297,6 +303,16 @@ class UserEdit extends React.Component {
                   })
                 )}
               />
+              <SpokeFormField
+                label="Language"
+                name="language"
+                {...dataTest("language")}
+                type="select"
+                choices={Object.values(Language).map((option) => ({
+                  value: option,
+                  label: languageEnumToLabel(option)
+                }))}
+              />
             </span>
           )}
           {(authType === UserEditMode.Login ||
@@ -447,6 +463,7 @@ const mutations = {
           cell
           email
           notificationFrequency
+          language
         }
       }
     `,

src/routes.jsx

@@ -1,5 +1,6 @@
 /* eslint-disable react/no-unstable-nested-components */
 import { gql } from "@apollo/client";
+import i18n from "i18next";
 import React from "react";
 import { Redirect, Route, Switch, withRouter } from "react-router-dom";
 
@@ -54,11 +55,16 @@ class ProtectedInner extends React.Component {
         query currentUser {
           currentUser {
             id
+            language
           }
         }
       `
     })
-      .then((result) => result.data.currentUser.id)
+      .then((result) => {
+        const { id: userId, language: userLanguage } = result.data.currentUser;
+        i18n.changeLanguage(userLanguage);
+        return userId;
+      })
       .then(() => this.setState({ isAuthed: true }))
       .catch((_err) => history.push(loginUrl));
   }

src/schema.graphql

@@ -10,6 +10,11 @@ enum CampaignBuilderMode {
   TEMPLATE
 }
 
+enum Language {
+  en
+  es
+}
+
 input BulkUpdateScriptInput {
   searchString: String!
   replaceString: String!
@@ -64,6 +69,7 @@ input UserInput {
   email: String!
   cell: String!
   notificationFrequency: String!
+  language: Language!
   oldPassword: String
   newPassword: String
 }
@@ -366,6 +372,7 @@ type User {
   terms: Boolean
   isSuperadmin: Boolean!
   notificationFrequency: String!
+  language: Language!
   isSuspended: Boolean!
 }
 

src/server/api/root-mutations.ts

@@ -477,7 +477,8 @@ const rootMutations = {
             last_name: userData.lastName,
             email: userData.email,
             cell: userData.cell,
-            notification_frequency: userData.notificationFrequency
+            notification_frequency: userData.notificationFrequency,
+            language: userData.language
           },
           ["id", "auth0_id"]
         );
@@ -494,7 +495,8 @@ const rootMutations = {
           last_name: userData.lastName,
           email: userData.email,
           cell: userData.cell,
-          notification_frequency: userData.notificationFrequency
+          notification_frequency: userData.notificationFrequency,
+          language: userData.language
         };
       } else {
         userData = member;

src/server/api/user.js

@@ -163,6 +163,7 @@ export const resolvers = {
       "assignedCell",
       "terms",
       "notificationFrequency",
+      "language",
       "isSuspended"
     ]),
     isSuperadmin: (userRecord, _, { user: authUser }) => {

src/server/local-auth-helpers.ts

@@ -162,7 +162,8 @@ const signup: AuthHelper = async (options) => {
           last_name: capitalizeWord(reqBody.lastName),
           cell: reqBody.cell,
           is_superadmin: false,
-          notification_frequency: reqBody.notificationFrequency
+          notification_frequency: reqBody.notificationFrequency,
+          language: reqBody.language
         })
         .returning("*");
       resolve(user);