Add and read from default user settings, removes some magic variables.

Author: mbusch3

assets/js/Components/App.js

@@ -9,7 +9,7 @@ import SettingsPage from './SettingsPage'
 import Api from '../Services/Api'
 import MessageTray from './Widgets/MessageTray'
 import { analyzeReport } from '../Services/Report'
-import { ISSUE_STATE, WIDGET_STATE, ISSUE_FILTER, FILE_FILTER, FILE_TYPES, FILE_TYPE_MAP } from '../Services/Settings'
+import { ISSUE_STATE, WIDGET_STATE, ISSUE_FILTER, FILE_FILTER, FILE_TYPES, FILE_TYPE_MAP, DEFAULT_USER_SETTINGS } from '../Services/Settings'
 
 
 export default function App(initialData) {
@@ -24,7 +24,9 @@ export default function App(initialData) {
     { ISSUE_FILTER }, 
     { FILE_FILTER },
     { FILE_TYPES },
-    { FILE_TYPE_MAP }))
+    { FILE_TYPE_MAP },
+    { DEFAULT_USER_SETTINGS }
+  ))
   const [sections, setSections] = useState([])
 
   const [navigation, setNavigation] = useState('summary')
@@ -341,7 +343,10 @@ export default function App(initialData) {
 
   return (
     <div id="app-container"
-         className={`flex-column flex-grow-1 ${settings?.user?.roles?.font_size || 'font-medium'} ${settings?.user?.roles?.font_family || 'sans-serif'} ${settings?.user?.roles?.dark_mode ? 'dark-mode' : ''}`}>
+         className={`flex-column flex-grow-1 `
+          + `${settings?.user?.roles?.font_size || settings.DEFAULT_USER_SETTINGS.FONT_SIZE} `
+          + `${settings?.user?.roles?.font_family || settings.DEFAULT_USER_SETTINGS.FONT_FAMILY} `
+          + `${settings?.user?.roles?.dark_mode ? 'dark-mode' : ''}`}>
       { !welcomeClosed ?
         ( <WelcomePage
             t={t}

assets/js/Components/SettingsPage.js

@@ -17,7 +17,7 @@ export default function SettingsPage({
 
   useEffect(() => {
     // Set up alert options
-    let currentAlertTimeout = settings?.user?.roles?.alert_timeout || 5000
+    let currentAlertTimeout = settings?.user?.roles?.alert_timeout || settings.DEFAULT_USER_SETTINGS.ALERT_TIMEOUT
     setAlertOptions([
       { value: '5000', name: t('settings.option.alert_timeout.5s'), selected: currentAlertTimeout === '5000' },
       { value: '10000', name: t('settings.option.alert_timeout.10s'), selected: currentAlertTimeout === '10000' },
@@ -26,7 +26,7 @@ export default function SettingsPage({
     ])
 
     // Set up font size options
-    let currentFontSize = settings?.user?.roles?.font_size || 'font-medium'
+    let currentFontSize = settings?.user?.roles?.font_size || settings.DEFAULT_USER_SETTINGS.FONT_SIZE
     setFontSizeOptions([
       { value: 'font-small', name: t('settings.label.font_size.small'), selected: currentFontSize === 'font-small' },
       { value: 'font-medium', name: t('settings.label.font_size.medium'), selected: currentFontSize === 'font-medium' },
@@ -35,7 +35,7 @@ export default function SettingsPage({
     ])
 
     // Set up font family options
-    let currentFontFamily = settings?.user?.roles?.font_family || 'sans-serif'
+    let currentFontFamily = settings?.user?.roles?.font_family || settings.DEFAULT_USER_SETTINGS.FONT_FAMILY
     setFontFamilyOptions([
       { value: 'sans-serif', name: t('settings.label.font_family.sans_serif'), selected: currentFontFamily === 'sans-serif' },
       { value: 'serif', name: t('settings.label.font_family.serif'), selected: currentFontFamily === 'serif' },
@@ -44,20 +44,21 @@ export default function SettingsPage({
     ])
 
     // Set up language options
-    let currentLanguage = settings?.user?.roles?.lang || 'en'
+    let currentLanguage = settings?.user?.roles?.lang || settings.DEFAULT_USER_SETTINGS.LANGUAGE
     setLanguageOptions([
       { value: 'en', name: 'English', selected: currentLanguage === 'en' },
       { value: 'es', name: 'Español', selected: currentLanguage === 'es' }
     ])
   }, [settings])
 
   // For new users, the 'show_filters' attribute may not be set, so we need to check if it exists before using it
-  const [showFilters, setShowFilters] = useState(settings?.user?.roles && ('show_filters' in settings.user.roles) ? settings.user.roles.show_filters : true)
-  const [darkMode, setDarkMode] = useState(settings?.user?.roles && ('dark_mode' in settings.user.roles) ? settings.user.roles.dark_mode : false)
+  // Because the values might be false, we need to differentiate between undefined and false
+  const [showFilters, setShowFilters] = useState(settings?.user?.roles && ('show_filters' in settings.user.roles) ? settings.user.roles.show_filters : settings.DEFAULT_USER_SETTINGS.SHOW_FILTERS)
+  const [darkMode, setDarkMode] = useState(settings?.user?.roles && ('dark_mode' in settings.user.roles) ? settings.user.roles.dark_mode : settings.DEFAULT_USER_SETTINGS.DARK_MODE)
 
   const handleShowFiltersChange = (newValue) => {
     setShowFilters(newValue)
-    updateUserSettings({ "show_filters": newValue})
+    updateUserSettings({ "show_filters": newValue })
   }
 
   const handleDarkModeChange = (newValue) => {

assets/js/Components/Widgets/FixIssuesFilters.js

@@ -63,7 +63,7 @@ export default function FixIssuesFilters({
   const [usedFilters, setUsedFilters] = useState(null)
   const [detailedFilters, setDetailedFilters] = useState(null)
   // For new users, the 'show_filters' attribute may not be set, so we need to check if it exists before using it
-  const [showFilters, setShowFilters] = useState(settings?.user?.roles && ('show_filters' in settings.user.roles) ? settings.user.roles.show_filters : true)
+  const [showFilters, setShowFilters] = useState(settings?.user?.roles && ('show_filters' in settings.user.roles) ? settings.user.roles.show_filters : settings.DEFAULT_USER_SETTINGS.SHOW_FILTERS)
 
   // When the page loads, only show the "Modules" filter is there are modules to filter by...
   useEffect(() => {

assets/js/Components/Widgets/ReviewFilesFilters.js

@@ -55,7 +55,7 @@ export default function ReviewFilesFilters({
   const [usedFilters, setUsedFilters] = useState(null)
   const [detailedFilters, setDetailedFilters] = useState(null)
   // For new users, the 'show_filters' attribute may not be set, so we need to check if it exists before using it
-  const [showFilters, setShowFilters] = useState(settings?.user?.roles && ('show_filters' in settings.user.roles) ? settings.user.roles.show_filters : true)
+  const [showFilters, setShowFilters] = useState(settings?.user?.roles && ('show_filters' in settings.user.roles) ? settings.user.roles.show_filters : settings.DEFAULT_USER_SETTINGS.SHOW_FILTERS)
 
   // When the page loads, only show the "Modules" filter is there are modules to filter by...
   useEffect(() => {

assets/js/Services/Settings.js

@@ -90,6 +90,15 @@ export const FILE_TYPE_MAP = {
   'video': FILE_FILTER.FILE_VIDEO,
 }
 
+export const DEFAULT_USER_SETTINGS = {
+  ALERT_TIMEOUT: '5000',
+  FONT_SIZE: 'font-medium',
+  FONT_FAMILY: 'sans-serif',
+  DARK_MODE: false,
+  SHOW_FILTERS: true,
+  LANGUAGE: 'en',
+}
+
 export function findEditURLWithIssue(issue, settings) {
   if (!issue || !settings || !settings.institution) {
     return ''