WIP: split up settings object

assets/js/Components/Admin/AdminApp.js

@@ -14,21 +14,26 @@ import '../../../css/udoit4-theme.css'
 export default function AdminApp(initialData) {
 
   // If there are multiple accounts available, the first account is the selected accountId
-  let accountId = initialData.settings?.accountId
-  if(initialData.settings?.accounts) {
-    const accountIds = Object.keys(initialData.settings.accounts)
+  let accountId = initialData.accountId
+  if(initialData.accounts) {
+    const accountIds = Object.keys(initialData.accounts)
     accountId = accountIds.shift()
   }
 
   let initialFilters = {
     accountId: accountId,
-    termId: initialData.settings.defaultTerm,
+    termId: initialData.termInfo.defaultTerm,
     includeSubaccounts: true,
     courseId: null
   }
 
   const [messages, setMessages] = useState(initialData.messages || [])
-  const [settings, setSettings] = useState(initialData.settings || null)
+  const [preferences, setPreferences] = useState(initialData.preferences ?? {})
+  const [instanceInfo, setInstanceInfo] = useState(initialData.instanceInfo ?? {})
+  const [termInfo, setTermInfo] = useState(initialData.termInfo || {})
+  const [labels, setLabels] = useState(initialData.labels ?? [])
+  const [accounts, setAccounts] = useState(initialData.accounts)
+
   const [courses, setCourses] = useState({})
   const [selectedCourse, setSelectedCourse] = useState(null)
   const [filters, setFilters] = useState({...initialFilters})
@@ -40,13 +45,13 @@ export default function AdminApp(initialData) {
   const [trayOpen, setTrayOpen] = useState(false)
 
   const t = useCallback((key) => {
-    return (settings.labels[key]) ? settings.labels[key] : key
-  }, [settings.labels])
+    return (labels[key]) ? labels[key] : key
+  }, [labels])
 
   const loadCourses = (filters) => {
     setLoadingCourses(true)
 
-    const api = new Api(settings)
+    const api = new Api(instanceInfo)
     api.getAdminCourses(filters)
       .then((response) => response.json())
       .then((data) => {
@@ -121,10 +126,9 @@ export default function AdminApp(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 ${preferences.fontSize || 'font-medium'} ${preferences.fontSize || 'sans-serif'} ${preferences.darkMode ? 'dark-mode' : ''}`}>
       <AdminHeader
         t={t}
-        settings={settings}
         navigation={navigation}
         handleNavigation={handleNavigation}
       />
@@ -133,7 +137,9 @@ export default function AdminApp(initialData) {
         { (navigation !== 'reports' && navigation !== 'dashboard') &&
           <AdminFilters
             t={t}
-            settings={settings}
+            preferences={preferences}
+            accounts={accounts}
+            termInfo={termInfo}
             filters={filters}
             handleFilter={handleFilter}
             loadingContent={loadingCourses}
@@ -159,7 +165,7 @@ export default function AdminApp(initialData) {
             {('dashboard' === navigation) &&
               <AdminDashboard
                 t={t}
-                settings={settings}
+                preferences={preferences}
                 courses={courses}
                 handleNavigation={handleNavigation}
                 addMessage={addMessage}
@@ -168,8 +174,8 @@ export default function AdminApp(initialData) {
             {('courses' === navigation) &&
               <CoursesPage
                 t={t}
-                settings={settings}
                 courses={courses}
+                instanceInfo={instanceInfo}
                 searchTerm={searchTerm}
                 addMessage={addMessage}
                 handleCourseUpdate={handleCourseUpdate}
@@ -180,15 +186,15 @@ export default function AdminApp(initialData) {
             {('reports' === navigation) &&
               <ReportsPage
                 t={t}
-                settings={settings}
+                instanceInfo={instanceInfo}
                 filters={filters}
                 selectedCourse={selectedCourse}
               />
             }
             {('users' === navigation) &&
               <UsersPage
                 t={t}
-                settings={settings}
+                instanceInfo={instanceInfo}
                 searchTerm={searchTerm}
                 accountId={accountId}
                 termId={filters.termId}

assets/js/Components/Admin/AdminDashboard.js

@@ -4,7 +4,7 @@ import '../HomePage.css'
 
 export default function AdminDashboard({
   t,
-  settings,
+  preferences,
   courses
 }) {
   const [dashboardStats, setDashboardStats] = useState({
@@ -25,7 +25,7 @@ export default function AdminDashboard({
   })
 
   const progressMeterRadius = () => {
-    switch (settings?.user?.roles?.font_size) {
+    switch (preferences.fontSize) {
       case 'font-small':
         return 40;
       case 'font-normal':

assets/js/Components/Admin/AdminFilters.js

@@ -5,7 +5,9 @@ import '../Widgets/FixIssuesFilters.css'
 
 export default function AdminFilters({
   t,
-  settings,
+  preferences,
+  accounts,
+  termInfo,
   filters,
   handleFilter,
   loadingContent,
@@ -19,7 +21,7 @@ export default function AdminFilters({
   // When the "settings" are loaded, create the Account and Term dropdown options
   useEffect(() => {
     let tempAccountOptions = []
-    for (const acct of Object.values(settings.accounts)) {
+    for (const acct of Object.values(accounts)) {
       tempAccountOptions.push({
         id: acct.id,
         name: acct.name
@@ -28,14 +30,14 @@ export default function AdminFilters({
     setAccountOptions(tempAccountOptions)
 
     let tempTermOptions = []
-    for (const [key, val] of Object.entries(settings.terms)) {
+    for (const [key, val] of Object.entries(termInfo.terms)) {
       tempTermOptions.push({
         id: key,
         name: val,
       })
     }
     setTermOptions(tempTermOptions)
-  }, [settings])
+  }, [termInfo, accounts])
 
   const handleAccountSelect = (newValue) => {
     handleFilter({ accountId: newValue })

assets/js/Components/Admin/AdminHeader.js

@@ -7,7 +7,6 @@ import '../Header.css'
 
 export default function AdminHeader({
   t,
-  settings,
   navigation,
   handleNavigation
 }) {

assets/js/Components/Admin/CoursesPage.js

@@ -6,7 +6,7 @@ import ReportIcon from '../Icons/ReportIcon'
 
 export default function CoursePage({
   t,
-  settings,
+  instanceInfo,
   courses,
   searchTerm,
   handleCourseUpdate,
@@ -163,7 +163,7 @@ export default function CoursePage({
   }
 
   const handleScanClick = (course) => {
-    let api = new Api(settings)
+    let api = new Api(instanceInfo)
     setIsAnyScanning(true)
 
     // For unscanned courses, course.id will be the LMS course ID (string/number)
@@ -283,7 +283,7 @@ export default function CoursePage({
 
   const checkForReport = (course) => {
     const newReportInterval = 5000
-    let api = new Api(settings)
+    let api = new Api(instanceInfo)
     const courseId = course.udoitId || course.id
     const originalId = course.originalId  // Save the original ID for removal
 

assets/js/Components/Admin/ReportsPage.js

@@ -7,28 +7,20 @@ import IssuesTable from '../Reports/IssuesTable'
 import ProgressIcon from '../Icons/ProgressIcon'
 import '../ReportsPage.css'
 import { analyzeReport } from '../../Services/Report'
+import { ISSUE_STATE } from '../../Services/Constants'
 
 export default function ReportsPage({
   t,
-  settings,
+  instanceInfo,
   filters,
   selectedCourse
 }) {
 const [groupedReports, setGroupedReports] = useState(null)
 const [issues, setIssues] = useState(null)
 const [instructors, setInstructors] = useState([])
 
-const ISSUE_STATE = {
-  UNCHANGED: 0,
-  SAVING: 1,
-  RESOLVING: 2,
-  SAVED: 3,
-  RESOLVED: 4,
-  ERROR: 5,
-}
-
 const getReportHistory = () => {
-  const api = new Api(settings);
+  const api = new Api(instanceInfo);
     api.getAdminReportHistory(filters)
       .then((responseStr) => responseStr.json())
       .then((response) => {

assets/js/Components/Admin/UsersPage.js

@@ -5,7 +5,7 @@ import ProgressIcon from '../Icons/ProgressIcon'
 
 export default function UsersPage({
   t,
-  settings,
+  instanceInfo,
   accountId,
   searchTerm,
   termId
@@ -30,7 +30,7 @@ export default function UsersPage({
   })
 
   const getUsers = () => {
-    const api = new Api(settings)
+    const api = new Api(instanceInfo)
     api.getAdminUser()
       .then((responseStr) => responseStr.json())
       .then((response) => {
@@ -46,20 +46,20 @@ export default function UsersPage({
   }, [])
 
   const handleUserDeauthorize = (user) => {
-    const api = new Api(settings)
+    const api = new Api(instanceInfo)
 
     user.hasApiKey = false
 
-    api.updateUser(user)
-      .then((responseStr) => responseStr.json())
-      .then((response) => {
-        let tempUsers = Object.assign({}, users)
-        if (response && response.id) {
-          const ind = users.findIndex((el) => { el.id === response.id })
-          tempUsers[ind] = response
-          setUsers(tempUsers)
-        }
-      })
+    // api.updateUser(user)
+    //   .then((responseStr) => responseStr.json())
+    //   .then((response) => {
+    //     let tempUsers = Object.assign({}, users)
+    //     if (response && response.id) {
+    //       const ind = users.findIndex((el) => { el.id === response.id })
+    //       tempUsers[ind] = response
+    //       setUsers(tempUsers)
+    //     }
+    //   })
   }
 
   const handleTableSettings = (setting) => {