User language preference and user language menu

app/graphql/mutations/update_user_language_preference.rb

@@ -0,0 +1,15 @@
+module Mutations
+    class UpdateUserLanguagePreference < BaseMutation
+      description 'Sets user language preference'
+
+      null true
+
+      argument :id, ID, required: true
+
+
+      def resolve(**args)
+        UserPreferenceResolver.update_user_language_preference(object, args, context)
+      end
+    end
+  end
+

app/graphql/resolvers/user_preference_resolver.rb

@@ -7,5 +7,15 @@ def confirm_profile_settings(context)
 
       preference
     end
+
+    def update_user_language_preference(_, args, _context)
+      language_id = args[:id]
+      current_user_id = _context[:current_user].id
+
+      user_preference = UserPreference.find_by(user_id: current_user_id)
+      user_preference.update(language_id: language_id)
+
+      { id: language_id }
+    end
   end
 end

app/graphql/types/language_graph_type.rb

@@ -0,0 +1,15 @@
+module Types
+    class LanguageGraphType < Types::BaseObject
+      graphql_name 'Language'
+      description 'Supported languages'
+
+      implements GraphQL::Relay::Node.interface
+      global_id_field :gid
+
+      field :id, ID, null: false
+      field :language_code, String, null: false
+      field :language_name, String, null: false
+
+    end
+  end
+

app/graphql/types/mutation_type.rb

@@ -36,5 +36,6 @@ class MutationType < Types::BaseObject
     field :delete_tag, TagGraphType, mutation: Mutations::DeleteTag
 
     field :confirm_profile_settings, UserPreferenceGraphType, mutation: Mutations::ConfirmProfileSettings
+    field :update_user_language_preference, UserPreferenceGraphType, mutation: Mutations::UpdateUserLanguagePreference
   end
 end

app/graphql/types/query_type.rb

@@ -152,5 +152,11 @@ def tag(id:)
     def tags
       Tag.all
     end
+
+    field :languages, [LanguageGraphType], null: true
+    def languages
+      Language.all
+    end
+
   end
 end

app/graphql/types/user_preference_graph_type.rb

@@ -8,5 +8,6 @@ class UserPreferenceGraphType < Types::BaseObject
 
     field :id, ID, null: false
     field :confirmed_profile_settings, Boolean, null: false
+    field :language_id, ID, null: false
   end
 end

app/javascript/components/App/index.js

@@ -18,7 +18,7 @@ const MuiTheme = {
   },
 }
 
-const App = ({ loading, currentUser, offices, userPopover, toggleUserPopover, children }) => {
+const App = ({ loading, currentUser, offices, userPopover, toggleUserPopover, children, languages }) => {
   if (!currentUser) return null
 
   return (
@@ -31,8 +31,9 @@ const App = ({ loading, currentUser, offices, userPopover, toggleUserPopover, ch
             <div>
               <Header>
                 <UserProfileMenu
+                  languages={languages}
                   offices={offices}
-                  togglePopover={e => toggleUserPopover(e.currentTarget)}
+                  togglePopover={(e) => toggleUserPopover(e.currentTarget)}
                   popover={userPopover}
                 />
               </Header>

app/javascript/components/UserProfileMenu/LanguageMenu.jsx

@@ -13,9 +13,8 @@ const LanguageMenu = ( { languages, previousMenuValue, selectedItem, t }) =>
   </PreviousItem>
   <Separator />
   {languages.map((language, i) => (
-    <Item key={i} value={{ office: selectedItem.office, language }}>
-      {' '}
-      {language.label}{' '}
+    <Item key={i} value={{ office: selectedItem.office, language: { label: language.languageName, value: language.languageCode } }}>
+      {language.languageName}
     </Item>
   ))}
 </>

app/javascript/components/UserProfileMenu/index.jsx

@@ -1,4 +1,4 @@
-import React, { useState, useContext } from 'react'
+import React, { useState, useContext, useEffect } from 'react'
 import * as R from 'ramda'
 import styled from 'styled-components'
 import { withRouter } from 'react-router'
@@ -14,6 +14,7 @@ import { Avatar } from '@zendeskgarden/react-avatars'
 import { MD } from '@zendeskgarden/react-typography'
 
 import UpdateUserOfficeMutation from '/mutations/UpdateUserOfficeMutation.gql'
+import UpdateUserLanguagePreferenceMutation from '/mutations/UpdateUserLanguagePreferenceMutation.gql'
 import { UserContext, FilterContext } from '/context'
 import GeneralSettingsMenu from './GeneralSettingsMenu'
 import DefaultOfficeMenu from './DefaultOfficeMenu'
@@ -34,30 +35,31 @@ const UserName = styled(MD)`
   font-weight: bold;
 `
 
-const UserProfileMenu = ({ offices, location, router, togglePopover }) => {
-  const languages = [
-    { label: 'English', value: 'en' },
-    { label: '日本語', value: 'ja' },
-    { label: 'Español', value: 'es' },
-  ]
+const UserProfileMenu = ({ offices, location, router, togglePopover, languages }) => {
 
   const { i18n, t } = useTranslation()
   const { currentUser, setOffice } = useContext(UserContext)
   const { setOfficeValue } = useContext(FilterContext)
   const [ isOpen, setIsOpen ] = useState(false)
   const [ tempSelectedItem, setTempSelectedItem ] = useState()
-  const [ selectedItem, setSelectedItem ] = useState({ office: currentUser.office, language: languages[0] })
+  // language: reach out to local storage first
+  const [ selectedItem, setSelectedItem ] = useState({ office: currentUser.office, language: i18n.language })
   const [ updateDefaultOffice ] = useMutation(UpdateUserOfficeMutation)
+  const [ updateUserLanguagePreference ] = useMutation(UpdateUserLanguagePreferenceMutation)
 
   if (R.isNil(currentUser) || R.isEmpty(currentUser)) return null
 
+  useEffect(() => {
+    const selectedLanguage = R.find(R.propEq("languageCode", i18n.language), languages)
+    setSelectedItem({ ...selectedItem, language: { label: selectedLanguage.languageName, value: selectedLanguage.languageCode } })
+  }, [i18n.language])
+
   const handleOfficeSelect = office =>
     updateDefaultOffice({ variables: { userId: currentUser.id, officeId: office.id } })
       .then(response => setOffice(R.path(['data', 'updateUserOffice', 'office'], response)))
       .then(_ => setOfficeValue(office.id))
       .then(_ => togglePopover('user'))
 
-
   const handleStateChange = (changes, stateAndHelpers) => {
     if (R.hasPath(['isOpen'])(changes)) {
       setIsOpen(
@@ -95,6 +97,8 @@ const UserProfileMenu = ({ offices, location, router, togglePopover }) => {
         i18n.changeLanguage(selectedItem.language.value, () => {
           // TODO: Handle callback (error/success)
         })
+        const selectedLanguage = R.find(R.propEq("languageCode", selectedItem.language.value), languages)
+        updateUserLanguagePreference({ variables: { id: selectedLanguage.id } })
         setSelectedItem(selectedItem)
       }
       // The following are for accessibility support for Link navigation

app/javascript/fragments/LanguageEntry.gql

@@ -0,0 +1,5 @@
+fragment LanguageEntry on Language {
+    id
+    languageCode
+    languageName
+}

app/javascript/fragments/UserPreferenceEntry.gql

@@ -1,4 +1,5 @@
 fragment UserPreferenceEntry on UserPreference {
   id
   confirmedProfileSettings
+  languageId
 }

app/javascript/i18n.js

@@ -6,7 +6,7 @@ i18n
   .use(Backend)
   .use(initReactI18next) // passes i18n down to react-i18next
   .init({
-    lng: 'en',
+    lng: 'en', // reach out to local storage first.
     fallbackLng: 'en',
 
     keySeparator: false, // we do not use keys in form messages.welcome

app/javascript/mutations/UpdateUserLanguagePreferenceMutation.gql

@@ -0,0 +1,5 @@
+mutation updateUserLanguagePreference($id:ID!) {
+  updateUserLanguagePreference(id: $id) {
+    id
+  }
+}

app/javascript/pages/App/index.js

@@ -12,12 +12,23 @@ import { togglePopover } from 'actions'
 
 import AppQuery from './query.gql'
 
-// TODO refactor it into AppPage as a functional component
-const MomentLocale = ({ children }) => {
+// TODO refactor it into AppPage as a functional component // todo: change name
+const RemoteLocale = ({ children, currentUser, languages }) => {
   const { i18n } = useTranslation()
+
   useEffect(() => {
-    moment.locale(i18n.language)
-  }, [i18n.language])
+    const languageId = R.pipe(R.prop('preference'), R.prop('languageId'))(currentUser)
+
+    if (!R.isNil(languageId)) {
+      const chosenLanguage = R.find(R.propEq('id', languageId))(languages)
+      const languageCode = R.prop('languageCode', chosenLanguage)
+      i18n.changeLanguage(languageCode, () => {
+        // TODO: Handle callback (error/success)
+      })
+      moment.locale(languageCode)
+    }
+  }, [currentUser])
+
   return <>{children}</>
 }
 
@@ -28,15 +39,16 @@ class AppPage extends Component {
 
   render() {
     const {
-      data: { networkStatus, currentUser, offices },
+      data: { networkStatus, currentUser, offices, languages },
       togglePopover,
       popover,
       children,
     } = this.props
 
     return (
-      <MomentLocale>
+      <RemoteLocale currentUser={currentUser} languages={languages}>
         <App
+          languages={languages}
           loading={networkStatus === NetworkStatus.loading}
           currentUser={currentUser}
           offices={offices}
@@ -45,7 +57,7 @@ class AppPage extends Component {
         >
           {children}
         </App>
-      </MomentLocale>
+      </RemoteLocale>
     )
   }
 }

app/javascript/pages/App/query.gql

@@ -1,6 +1,7 @@
 #import "fragments/UserEntry.gql"
 #import "fragments/OfficeEntry.gql"
 #import "fragments/UserPreferenceEntry.gql"
+#import "fragments/LanguageEntry.gql"
 
 query AppQuery {
   currentUser {
@@ -17,4 +18,7 @@ query AppQuery {
   offices(sortBy: NAME_ASC) {
     ...OfficeEntry
   }
+  languages {
+    ...LanguageEntry
+  }
 }

app/models/language.rb

@@ -0,0 +1,3 @@
+class Language < ApplicationRecord
+    has_many :user_preferences
+end

app/models/user_preference.rb

@@ -1,5 +1,6 @@
 class UserPreference < ApplicationRecord
   belongs_to :user
+  belongs_to :language
 
   scope :for_user, ->(user) { where(user: user) }
 end

db/migrate/20201216035051_create_language_table.rb

@@ -0,0 +1,16 @@
+class CreateLanguageTable < ActiveRecord::Migration[5.2]
+  def change
+    create_table :languages do |t|
+      t.string :language_code
+      t.string :language_name
+    end
+
+    add_index :languages, :language_code, unique: true
+
+    return unless Language.all.length.zero?
+
+    [
+      ['en', 'English'], ['es', 'Español'], ['ja', '日本語']
+    ].each { |language| Language.create_with(language_code: language[0]).find_or_create_by(language_name: language[1]) }
+  end
+end

db/migrate/20201216035300_add_language_to_user_preference.rb

@@ -0,0 +1,6 @@
+class AddLanguageToUserPreference < ActiveRecord::Migration[5.2]
+  def change
+    add_column :user_preferences, :language_id, :bigint, default:1
+    add_foreign_key :user_preferences, :languages
+  end
+end

db/schema.rb

@@ -10,7 +10,7 @@
 #
 # It's strongly recommended that you check this file into your version control system.
 
-ActiveRecord::Schema.define(version: 2020_05_06_054322) do
+ActiveRecord::Schema.define(version: 2020_12_16_035300) do
 
   # These are extensions that must be enabled in order to support this database
   enable_extension "plpgsql"
@@ -87,6 +87,12 @@
     t.index ["user_id"], name: "index_individual_events_on_user_id"
   end
 
+  create_table "languages", force: :cascade do |t|
+    t.string "language_code"
+    t.string "language_name"
+    t.index ["language_code"], name: "index_languages_on_language_code", unique: true
+  end
+
   create_table "offices", id: :serial, force: :cascade do |t|
     t.string "name", null: false
     t.string "identifier", null: false
@@ -145,6 +151,7 @@
     t.bigint "user_id"
     t.datetime "created_at", null: false
     t.datetime "updated_at", null: false
+    t.bigint "language_id", default: 1
     t.index ["user_id"], name: "index_user_preferences_on_user_id"
   end
 
@@ -184,5 +191,6 @@
   add_foreign_key "event_tags", "tags"
   add_foreign_key "individual_event_tags", "individual_events"
   add_foreign_key "individual_event_tags", "tags"
+  add_foreign_key "user_preferences", "languages"
   add_foreign_key "user_preferences", "users"
 end