Fixed ibutsu-header and dashboard context loading

context is now synced from params, and params are accounted for in
componentDidMount scope functions.

Page refreshes now set both the project and dashboard selection from
URL params!

Author: mshriver

frontend/src/components/ibutsu-header.js

@@ -83,6 +83,44 @@ export class IbutsuHeader extends React.Component {
     };
   }
 
+  sync_context = () => {
+    // TODO handle portal_id
+    // Primary object
+    const { primaryObject, setPrimaryObject, setPrimaryType } = this.context;
+    const { selectedProject } = this.state;
+    const paramProject = this.props.params?.project_id;
+    let updatedPrimary = undefined;
+
+    // API fetch and set the context
+    if (paramProject && primaryObject?.id !== paramProject) {
+      HttpClient.get([Settings.serverUrl, 'project', paramProject])
+        .then(response => HttpClient.handleResponse(response))
+        .then(data => {
+          updatedPrimary = data;
+          setPrimaryObject(data)
+          setPrimaryType('project')
+          // update state
+          this.setState({
+            selectedProject: data,
+            isProjectSelectorOpen: false,
+            inputValue: data?.title,
+            filterValue: ''
+          });
+      });
+    }
+
+    // update selector state
+    if (updatedPrimary && !selectedProject) {
+      this.setState({
+        selectedProject: updatedPrimary,
+        inputValue: updatedPrimary.title
+      })
+    }
+
+    if ( updatedPrimary ) {
+      this.emitProjectChange(updatedPrimary);
+    }
+  }
 
   showNotification(type, title, message, action = null, timeout = null, key = null) {
     if (!this.eventEmitter) {
@@ -132,45 +170,22 @@ export class IbutsuHeader extends React.Component {
   }
 
   getSelectorOptions = (endpoint = "project") => {
+    // adding s here seems dumb, but this scope is small, it's only abstracted for 2 things
+    const pluralEndpoint = endpoint+'s';
     const params = {pageSize: 10};
     if (this.state.filterValue) {
       params['filter'] = ['title%' + this.state.filterValue];
     }
-
-    const {setPrimaryObject} = this.context;
-
-    // adding s here seems dumb, but this scope is small, it's only abstracted for 2 things
     HttpClient.get([Settings.serverUrl, endpoint], params)
       .then(response => HttpClient.handleResponse(response))
       .then(data => {
-        // populate context and current input value if passed
-        for ( let item of data[endpoint+'s'] ) {
-          if (item.id === this.props.params?.project_id) {
-            this.setState({
-              inputValue: item.title,
-              filterValue: ''
-            });
-            setPrimaryObject(item);
-          }
+          this.setState(
+            {
+              projects: data[pluralEndpoint],
+              filteredProjects: data[pluralEndpoint],
+            })
         }
-        this.setState(
-          {
-            projects: data[endpoint+'s'],
-            filteredProjects: data[endpoint+'s'],
-
-          })
-      }
     );
-
-
-  }
-
-  findPrimary = (endpoint, name) => {
-    HttpClient.get([Settings.serverUrl, endpoint], {'name': name})
-    .then(response => HttpClient.handleResponse(response))
-    .then(data => {return( data[endpoint+'s'] )}
-    )
-
   }
 
   onBeforeUpload = (files) => {
@@ -290,10 +305,9 @@ export class IbutsuHeader extends React.Component {
 
   componentDidMount() {
     this.getSelectorOptions("project");
+    this.sync_context();
     this.checkVersion();
     this.versionCheckId = setInterval(() => this.checkVersion(), VERSION_CHECK_TIMEOUT);
-
-
   }
 
   componentDidUpdate(prevProps, prevState) {
@@ -350,8 +364,6 @@ export class IbutsuHeader extends React.Component {
     </MenuToggle>
   );
 
-
-
   render() {
     document.title = 'Ibutsu';
     const apiUiUrl = Settings.serverUrl + '/ui/';

frontend/src/components/ibutsu-page.js

@@ -15,11 +15,9 @@ import {
 import ElementWrapper from './elementWrapper';
 import { IbutsuHeader } from '../components';
 import { ALERT_TIMEOUT } from '../constants';
-import { HttpClient } from '../services/http';
 import { getDateString, getTheme } from '../utilities';
 import { IbutsuContext } from '../services/context';
 import IbutsuSidebar from './sidebar';
-import { Settings } from '../settings';
 
 
 export class IbutsuPage extends React.Component {
@@ -90,43 +88,13 @@ export class IbutsuPage extends React.Component {
     }
   }
 
-  sync_context() {
-    // TODO handle portal_id
-    // Primary object
-    const { primaryObject, setPrimaryType, setPrimaryObject } = this.context;
-    let param_project = this.props.params?.project_id;
-
-    if (param_project && primaryObject?.id !== param_project) {
-      HttpClient.get([Settings.serverUrl, 'project', param_project])
-        .then(response => HttpClient.handleResponse(response))
-        .then(data => {
-          setPrimaryObject(data);
-          setPrimaryType('project')
-        });
-
-    }
-
-    // Active dashboard
-    const { activeDashboard, setActiveDashboard } = this.context;
-    let param_dash = this.props.params?.dashboard_id;
-    if ( param_dash && activeDashboard?.id !== param_dash) {
-      HttpClient.get([Settings.serverUrl, 'dashboard', param_dash])
-        .then(response => HttpClient.handleResponse(response))
-        .then(data => {
-          setActiveDashboard(data);
-        });
-
-    }
-  }
-
   componentDidMount() {
     this.setTheme();
   }
 
   render() {
     document.title = this.props.title || 'Ibutsu';
     // TODO: render project or portal depending on menutoggle + select event
-    this.sync_context();
     return (
       <React.Fragment>
         <AlertGroup isToast>

frontend/src/dashboard.js

@@ -74,22 +74,57 @@ export class Dashboard extends React.Component {
     };
     props.eventEmitter.on('projectChange', (value) => {
       this.getDashboards(value);
-      this.checkDefaultDashboard(value);
+      this.getDefaultDashboard(value);
     });
   }
 
+  sync_context = () => {
+    // Active dashboard
+    const { activeDashboard } = this.context;
+    const { selectedDashboard } = this.state;
+    const paramDash = this.props.params?.dashboard_id;
+    let updatedDash = undefined;
+    // API call to update context
+    if ( paramDash && activeDashboard?.id !== paramDash) {
+      HttpClient.get([Settings.serverUrl, 'dashboard', paramDash])
+        .then(response => HttpClient.handleResponse(response))
+        .then(data => {
+          const { setActiveDashboard } = this.context;
+          setActiveDashboard(data);
+          updatedDash = data;
+          this.setState({
+            selectedDashboard: data,
+            isDashboardSelectorOpen: false,
+            filterValueDashboard: '',
+            dashboardInputValue: data.title,
+          });  // callback within class component  won't have updated context
+          // TODO don't pass value when converting to functional component
+          this.getWidgets(data);
+        });
+    }
+
+    if (updatedDash && !selectedDashboard ) {
+      this.setState({
+        selectedDashboard: updatedDash,
+        dashboardInputValue: updatedDash.title
+      })
+    }
+  }
+
   getDashboards = (handledOject = null) => {
     // value is checked because of handler scope not seeing context state updates
+    // TODO: react-router loaders would be way better
     const { primaryObject } = this.context;
-    const targetObject = handledOject ?? primaryObject;
-    console.log("getting dashboards");
-    if (!targetObject) {
+    const paramProject = this.props.params?.project_id;
+    const primaryObjectId = handledOject?.id ?? primaryObject?.id ?? paramProject;
+
+    if (!primaryObjectId) {
       this.setState({dashboardInputValue: ''})
       return;
     }
     // TODO: set based on primaryType
     let params = {
-      'project_id': targetObject.id,
+      'project_id': primaryObjectId,
       'pageSize': 10
     };
 
@@ -99,14 +134,24 @@ export class Dashboard extends React.Component {
     HttpClient.get([Settings.serverUrl, 'dashboard'], params)
       .then(response => HttpClient.handleResponse(response))
       .then(data => {
-        this.setState({dashboards: data['dashboards'], filteredDashboards: data['dashboards']}, this.getWidgets);
+        this.setState({dashboards: data['dashboards'], filteredDashboards: data['dashboards']});
       });
   }
 
-  checkDefaultDashboard = (handledObject = null) => {
+  getDefaultDashboard = (handledObject = null) => {
     const { primaryObject, activeDashboard, setActiveDashboard } = this.context;
-    const targetObject = handledObject ?? primaryObject;
-    console.log("checking default dash");
+    const paramProject = this.props.params?.project_id;
+
+    let targetObject = handledObject ?? primaryObject ?? paramProject;
+
+    if (typeof(targetObject) === 'string') {
+      HttpClient.get([Settings.serverUrl, 'project', paramProject])
+        .then(response => HttpClient.handleResponse(response))
+        .then(data => {
+          targetObject = data;
+        });
+
+    }
 
     if ( !activeDashboard && targetObject?.defaultDashboard ){
       setActiveDashboard(targetObject.defaultDashboard);
@@ -125,7 +170,6 @@ export class Dashboard extends React.Component {
   getWidgets = (dashboard) => {
     let params = {'type': 'widget'};
     const { activeDashboard } = this.context;
-    console.log('getting widgets');
     // TODO don't pass value when converting to functional component
     let target_dash = null;
     if (dashboard === undefined) {
@@ -305,8 +349,9 @@ export class Dashboard extends React.Component {
   }
 
   componentDidMount() {
+    this.sync_context();
     this.getDashboards();
-    this.checkDefaultDashboard();
+    this.getDefaultDashboard();
     this.getWidgets();
   }