refactor(settings page & language selector): separate language selector

src/components/input/LanguageSelector.tsx

@@ -0,0 +1,34 @@
+import _ from 'lodash'
+import React from 'react'
+import { useTranslation } from 'react-i18next'
+
+import i18n, { resources } from '../../i18n'
+import SelectWithLabelFormGroup from './SelectWithLableFormGroup'
+
+const LanguageSelector = () => {
+  const { t } = useTranslation()
+
+  let languageOptions = Object.keys(resources).map((abbr) => ({
+    label: resources[abbr].name,
+    value: abbr,
+  }))
+  languageOptions = _.sortBy(languageOptions, (o) => o.label)
+
+  const onLanguageChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
+    const selected = event.target.value
+    i18n.changeLanguage(selected)
+  }
+
+  return (
+    <SelectWithLabelFormGroup
+      name="language"
+      value={i18n.language}
+      label={t('settings.language.label')}
+      isEditable
+      options={languageOptions}
+      onChange={onLanguageChange}
+    />
+  )
+}
+
+export default LanguageSelector

src/settings/Settings.tsx

@@ -1,64 +1,22 @@
-import React, { useState } from 'react'
+import { Row, Column } from '@hospitalrun/components'
+import React from 'react'
 import { useTranslation } from 'react-i18next'
 
-import SelectWithLabelFormGroup from '../components/input/SelectWithLableFormGroup'
-import i18n, { resources } from '../i18n'
+import LanguageSelector from '../components/input/LanguageSelector'
 import useTitle from '../page-header/useTitle'
 
 const Settings = () => {
   const { t } = useTranslation()
   useTitle(t('settings.label'))
 
-  // Language section
-  const languageOptions = Object.keys(resources)
-    .map((abbr) => ({
-      label: resources[abbr].name,
-      value: abbr,
-    }))
-    .sort((a, b) => (a.label > b.label ? 1 : -1))
-
-  const onLanguageChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
-    const selected = event.target.value
-    i18n.changeLanguage(selected)
-  }
-
-  // Temp
-  const tempOptions = [
-    { label: 'Option A', value: 'option-a' },
-    { label: 'Option B', value: 'option-b' },
-  ]
-
-  const [temp, setTemp] = useState(tempOptions[0].value)
-
-  const onTempChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
-    setTemp(event.target.value)
-  }
-
   return (
     <>
-      {/* language selection */}
-      <div className="w-75" style={{ minWidth: '350px', maxWidth: '500px' }}>
-        <SelectWithLabelFormGroup
-          name="language"
-          value={i18n.language}
-          label={t('settings.language.label')}
-          isEditable
-          options={languageOptions}
-          onChange={onLanguageChange}
-        />
-      </div>
-
-      {/* temp: another setting */}
-      <div className="w-75" style={{ minWidth: '350px', maxWidth: '500px' }}>
-        <SelectWithLabelFormGroup
-          name="temp"
-          value={temp}
-          label="Temp setting"
-          isEditable
-          options={tempOptions}
-          onChange={onTempChange}
-        />
-      </div>
+      <Row>
+        <Column xs={12} sm={9}>
+          <LanguageSelector />
+        </Column>
+        <Column xs={0} sm={3} />
+      </Row>
     </>
   )
 }