Merge pull request #581 from zendesk/ovillegas/save-language

User language preference and user language menu

app/graphql/mutations/update_user_language_preference.rb

@@ -0,0 +1,13 @@
+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_or_create_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,13 @@
+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,10 @@ 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,38 @@ 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] })
+  const [ selectedItem, setSelectedItem ] = useState({ office: currentUser.office })
   const [ updateDefaultOffice ] = useMutation(UpdateUserOfficeMutation)
+  const [ updateUserLanguagePreference ] = useMutation(UpdateUserLanguagePreferenceMutation)
 
   if (R.isNil(currentUser) || R.isEmpty(currentUser)) return null
 
+
+  const getLanguageFromLanguageCode = (languageCode) => {
+    return R.find(R.propEq("languageCode", languageCode), languages)
+  }
+
+  // Syncs language menu with local language
+  useEffect(() => {
+    const selectedLanguage = getLanguageFromLanguageCode(i18n.language)
+    if (!!selectedLanguage) {
+      selectedLanguage && 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,7 +104,11 @@ const UserProfileMenu = ({ offices, location, router, togglePopover }) => {
         i18n.changeLanguage(selectedItem.language.value, () => {
           // TODO: Handle callback (error/success)
         })
-        setSelectedItem(selectedItem)
+        const selectedLanguage = getLanguageFromLanguageCode(selectedItem.language.value)
+        if (!!selectedLanguage) {
+          updateUserLanguagePreference({ variables: { id: selectedLanguage.id } })
+          setSelectedItem(selectedItem)
+        }
       }
       // The following are for accessibility support for Link navigation
     } else if (selectedItem === 'admin') {

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,20 @@ import { togglePopover } from 'actions'
 
 import AppQuery from './query.gql'
 
-// TODO refactor it into AppPage as a functional component
-const MomentLocale = ({ children }) => {
+const RemoteLocale = ({ children, currentUser, languages }) => {
   const { i18n } = useTranslation()
+
   useEffect(() => {
-    moment.locale(i18n.language)
-  }, [i18n.language])
+    const languageId = R.path(['preference', 'languageId'], currentUser)
+
+    if (!R.isNil(languageId)) {
+      const chosenLanguage = R.find(R.propEq('id', languageId))(languages)
+      const languageCode = R.prop('languageCode', chosenLanguage)
+      i18n.changeLanguage(languageCode)
+      moment.locale(languageCode)
+    }
+  }, [currentUser])
+
   return <>{children}</>
 }
 
@@ -28,15 +36,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 +54,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, dependent: :nullify
+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,17 @@
+class CreateLanguageTable < ActiveRecord::Migration[5.2]
+  def change
+    create_table :languages do |t|
+      t.string :language_code
+      t.string :language_name
+      t.datetime :created_at, default: -> { 'CURRENT_TIMESTAMP' }
+    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

@@ -87,6 +87,13 @@
     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.datetime "created_at", default: -> { "CURRENT_TIMESTAMP" }
+    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 +152,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 +192,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

test/fixtures/language.yml

@@ -0,0 +1,6 @@
+# Read about fixtures at http://api.rubyonrails.org/classes/ActiveRecord/FixtureSet.html
+
+minimum:
+  id: 1
+  language_code: ts
+  language_name: Test

test/graphql/resolvers/user_preference_resolver_test.rb

@@ -12,5 +12,13 @@
       assert_not_nil result
       assert_equal true, result.confirmed_profile_settings
     end
+
+    it 'should set update user language preference' do
+      context = { current_user: users(:a) }
+      args = { id: 1 }
+      result = UserPreferenceResolver.update_user_language_preference(nil, args, context)
+      assert_not_nil result
+      assert_equal 1, result[:id]
+    end
   end
 end

test/integration/cleanliness_test.rb

@@ -50,6 +50,7 @@
         app/graphql/mutations/create_tag.rb
         app/graphql/mutations/update_tag.rb
         app/graphql/mutations/confirm_profile_settings.rb
+        app/graphql/mutations/update_user_language_preference.rb
         app/graphql/portal_schema.rb
         app/graphql/resolvers/office_resolver.rb
         app/graphql/resolvers/organization_resolver.rb
@@ -89,6 +90,7 @@
         app/graphql/types/user_graph_type.rb
         app/graphql/types/tag_graph_type.rb
         app/graphql/types/user_preference_graph_type.rb
+        app/graphql/types/language_graph_type.rb
         app/helpers/application_helper.rb
       ]
     )

test/models/language_test.rb

@@ -0,0 +1,11 @@
+require_relative '../test_helper'
+
+SingleCov.covered!
+
+describe Language do
+  fixtures :language
+  it 'creates a language' do
+    language = Language.new(language_code: 'en', language_name: 'English')
+    assert language.save
+  end
+end