#352: replaced mock data with API data for user publications

fabric-testbed · Oct 14, 2024 · f00abc1 · f00abc1
1 parent 49506f5
commit f00abc1
Show file tree

Hide file tree

Showing 4 changed files with 51 additions and 20 deletions.
diff --git a/src/App.js b/src/App.js
@@ -34,7 +34,7 @@ import FundingOpportunities from "./pages/static/FundingOpportunities";
 import NewsletterSignup from "./pages/static/NewsletterSignup";
 import Testbeds from "./pages/static/Testbeds.jsx";
 import Publications from "./pages/static/Publications.jsx";
-import PublicationTracker from "./pages/static/PublicationTracker.jsx";
+import PublicationTracker from "./pages/PublicationTracker.jsx";
 import SearchResults from "./pages/SearchResults.jsx";
 import Branding from "./pages/static/Branding.jsx";
 import Header from "./components/Header";

diff --git a/src/pages/static/PublicationTracker.jsx → src/pages/PublicationTracker.jsx b/src/pages/static/PublicationTracker.jsx → src/pages/PublicationTracker.jsx
@@ -1,16 +1,21 @@
 import React, { Component } from "react";
-import BackgroundImage from "../../imgs/network-bg.svg";
-import Table from "../../components/common/Table";
-import publications from "../../services/staticPublications";
+import BackgroundImage from "../imgs/network-bg.svg";
+import Table from "../components/common/Table";
+import { getPublications } from "../services/publicationService.js";
+import SpinnerWithText from "../components/common/SpinnerWithText";
+// import publications from "../services/staticPublications";
 import _ from "lodash";
+import { toast } from "react-toastify";
 
 class PublicationTracker extends Component {
   state = {
     sortColumn: {
       path: "year",
       order: "desc"
     },
-    searchQuery: ""
+    searchQuery: "",
+    publications: [],
+    showSpinner: false
   }
 
   columns = [
@@ -54,6 +59,16 @@ class PublicationTracker extends Component {
     }
   ];
 
+  async componentWillMount() {
+    try {
+      this.setState({ showSpinner: true });
+      const { results } = await getPublications();
+      this.setState({ publications: results, showSpinner: false});
+    } catch (err) {
+      toast.error("Failed to load publications. Please reload this page.");
+    }
+  }
+
   handleSort = (sortColumn) => {
     this.setState({ sortColumn });
   };
@@ -66,9 +81,9 @@ class PublicationTracker extends Component {
     const {
       sortColumn,
       searchQuery,
+      publications: allPublications
     } = this.state;
 
-    const allPublications = publications;
     // filter -> sort -> paginate
     let filtered = allPublications;
     if (searchQuery) {
@@ -92,7 +107,7 @@ class PublicationTracker extends Component {
   };
 
   render() {
-    const { sortColumn, searchQuery } = this.state;
+    const { sortColumn, searchQuery, showSpinner } = this.state;
     const { totalCount, data } = this.getPageData();
 
     return (
@@ -112,18 +127,26 @@ class PublicationTracker extends Component {
             <i className="fa fa-search"></i>
           </button>
         </div>
-        <div className="d-flex flex-row justify-content-end w-100 my-2">
-          <span className="text-monospace">Displaying <b>{totalCount}</b> publications.</span>
-        </div>
-        <Table
-          columns={this.columns}
-          data={data}
-          sortColumn={sortColumn}
-          onSort={this.handleSort}
-          size={"md"}
-          style={"table-striped table-md"}
-          tHeadStyle={"bg-primary-light"}
-        />
+        {
+          showSpinner && <SpinnerWithText text={"Loading user publications..."} />
+        }
+        {
+          !showSpinner &&
+          <div>
+            <div className="d-flex flex-row justify-content-end w-100 my-2">
+              <span className="text-monospace">Displaying <b>{totalCount}</b> publications.</span>
+            </div>
+            <Table
+              columns={this.columns}
+              data={data}
+              sortColumn={sortColumn}
+              onSort={this.handleSort}
+              size={"md"} 
+              style={"table-striped table-md"}
+              tHeadStyle={"bg-primary-light"}
+            />
+          </div>
+        }
       </div>
     );
   }

diff --git a/src/services/portalData.json b/src/services/portalData.json
@@ -1,5 +1,5 @@
 {
-  "version": "1.7.2",
+  "version": "1.7.3",
   "defaultFacility": "FABRIC",
   "facilityOptions": ["FABRIC"],
   "keyLimit": 10,

diff --git a/src/services/publicationService.js b/src/services/publicationService.js
@@ -0,0 +1,8 @@
+import http from './httpService';
+import { default as config } from "../config.json";
+
+const publicationsEndpoint = `${config.publicationsTrackerApiUrl}`;
+
+export function getPublications() {
+  return http.get(publicationsEndpoint);
+}