Show errors messages when token is invalid

bbb-learning-dashboard/src/App.js

@@ -6,29 +6,38 @@ import Card from './components/Card';
 import UsersTable from './components/UsersTable';
 import StatusTable from './components/StatusTable';
 import PollsTable from './components/PollsTable';
+import ErrorMessage from './components/ErrorMessage';
 
 class App extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
+      loading: true,
       activitiesJson: {},
       tab: 'overview',
+      meetingId: '',
+      learningDashboardAccessToken: '',
     };
   }
 
   componentDidMount() {
-    this.fetchActivitiesJson();
+    this.setDashboardParams();
     setInterval(() => {
       this.fetchActivitiesJson();
     }, 10000);
   }
 
-  fetchActivitiesJson() {
+  setDashboardParams() {
+    let learningDashboardAccessToken = '';
+    let meetingId = '';
+
     const urlSearchParams = new URLSearchParams(window.location.search);
     const params = Object.fromEntries(urlSearchParams.entries());
-    if (typeof params.meeting === 'undefined') return;
 
-    let learningDashboardAccessToken = '';
+    if (typeof params.meeting !== 'undefined') {
+      meetingId = params.meeting;
+    }
+
     if (typeof params.report !== 'undefined') {
       learningDashboardAccessToken = params.report;
     } else {
@@ -40,18 +49,30 @@ class App extends React.Component {
       });
     }
 
+    this.setState({ learningDashboardAccessToken, meetingId }, this.fetchActivitiesJson);
+  }
+
+  fetchActivitiesJson() {
+    const { learningDashboardAccessToken, meetingId } = this.state;
+
     if (learningDashboardAccessToken !== '') {
-      fetch(`${params.meeting}/${learningDashboardAccessToken}/learning_dashboard_data.json`)
+      fetch(`${meetingId}/${learningDashboardAccessToken}/learning_dashboard_data.json`)
         .then((response) => response.json())
         .then((json) => {
-          this.setState({ activitiesJson: json });
+          this.setState({ activitiesJson: json, loading: false });
           document.title = `Learning Dashboard - ${json.name}`;
+        }).catch(() => {
+          this.setState({ loading: false });
         });
+    } else {
+      this.setState({ loading: false });
     }
   }
 
   render() {
-    const { activitiesJson, tab } = this.state;
+    const {
+      activitiesJson, tab, learningDashboardAccessToken, loading,
+    } = this.state;
     const { intl } = this.props;
 
     function totalOfRaiseHand() {
@@ -131,6 +152,15 @@ class App extends React.Component {
       return meetingAveragePoints;
     }
 
+    function getErrorMessage() {
+      if (learningDashboardAccessToken === '') {
+        return intl.formatMessage({ id: 'app.learningDashboard.errors.invalidToken', defaultMessage: 'Invalid session token' });
+      }
+      return intl.formatMessage({ id: 'app.learningDashboard.errors.dataUnavailable', defaultMessage: 'Data is no longer available' });
+    }
+
+    if (loading === false && typeof activitiesJson.name === 'undefined') return <ErrorMessage message={getErrorMessage()} />;
+
     return (
       <div className="mx-10">
         <div className="flex items-start justify-between pb-3">
@@ -148,18 +178,23 @@ class App extends React.Component {
                 day="numeric"
               />
               {
-                        activitiesJson.endedOn > 0
-                          ? (
-                            <span className="px-2 py-1 ml-3 font-semibold leading-tight text-red-700 bg-red-100 rounded-full">
-                              <FormattedMessage id="app.learningDashboard.indicators.meetingStatusEnded" defaultMessage="Ended" />
-                            </span>
-                          )
-                          : (
-                            <span className="px-2 py-1 ml-3 font-semibold leading-tight text-green-700 bg-green-100 rounded-full">
-                              <FormattedMessage id="app.learningDashboard.indicators.meetingStatusActive" defaultMessage="Active" />
-                            </span>
-                          )
-                    }
+                activitiesJson.endedOn > 0
+                  ? (
+                    <span className="px-2 py-1 ml-3 font-semibold leading-tight text-red-700 bg-red-100 rounded-full">
+                      <FormattedMessage id="app.learningDashboard.indicators.meetingStatusEnded" defaultMessage="Ended" />
+                    </span>
+                  )
+                  : null
+              }
+              {
+                activitiesJson.endedOn === 0
+                  ? (
+                    <span className="px-2 py-1 ml-3 font-semibold leading-tight text-green-700 bg-green-100 rounded-full">
+                      <FormattedMessage id="app.learningDashboard.indicators.meetingStatusActive" defaultMessage="Active" />
+                    </span>
+                  )
+                  : null
+              }
             </p>
             <p>
               <FormattedMessage id="app.learningDashboard.indicators.duration" defaultMessage="Duration" />

bbb-learning-dashboard/src/components/ErrorMessage.jsx

@@ -0,0 +1,22 @@
+import React from 'react';
+
+function ErrorMessage(props) {
+  const { message } = props;
+
+  return (
+    <div className="container flex flex-col items-center px-6 mx-auto">
+      <svg className="w-12 h-12 my-8 text-gray-700" fill="currentColor" viewBox="0 0 20 20">
+        <path
+          fillRule="evenodd"
+          d="M13.477 14.89A6 6 0 015.11 6.524l8.367 8.368zm1.414-1.414L6.524 5.11a6 6 0 018.367 8.367zM18 10a8 8 0 11-16 0 8 8 0 0116 0z"
+          clipRule="evenodd"
+        />
+      </svg>
+      <h1 className="text-xl font-semibold text-gray-700 dark:text-gray-200">
+        {message}
+      </h1>
+    </div>
+  );
+}
+
+export default ErrorMessage;

bigbluebutton-html5/public/locales/en.json

@@ -922,5 +922,7 @@
     "app.learningDashboard.pollsTable.anonymousAnswer": "Anonymous Poll (answers in the last row)",
     "app.learningDashboard.pollsTable.anonymousRowName": "Anonymous",
     "app.learningDashboard.statusTimelineTable.title": "Status Timeline",
-    "app.learningDashboard.statusTimelineTable.colParticipant": "Participant"
+    "app.learningDashboard.statusTimelineTable.colParticipant": "Participant",
+    "app.learningDashboard.errors.invalidToken": "Invalid session token",
+    "app.learningDashboard.errors.dataUnavailable": "Data is no longer available"
 }