From f00abc1828f5cbfedd9a0f3d46eddae9b9815775 Mon Sep 17 00:00:00 2001
From: Yaxue Guo <yaxue.guo23@gmail.com>
Date: Mon, 14 Oct 2024 22:02:46 +0800
Subject: [PATCH] #352: replaced mock data with API data for user publications

---
 src/App.js                                    |  2 +-
 src/pages/{static => }/PublicationTracker.jsx | 59 +++++++++++++------
 src/services/portalData.json                  |  2 +-
 src/services/publicationService.js            |  8 +++
 4 files changed, 51 insertions(+), 20 deletions(-)
 rename src/pages/{static => }/PublicationTracker.jsx (66%)
 create mode 100644 src/services/publicationService.js

diff --git a/src/App.js b/src/App.js
index a59ebfe..a2eb3ff 100644
--- 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 b/src/pages/PublicationTracker.jsx
similarity index 66%
rename from src/pages/static/PublicationTracker.jsx
rename to src/pages/PublicationTracker.jsx
index 517d4d8..d2b6e6e 100644
--- a/src/pages/static/PublicationTracker.jsx
+++ b/src/pages/PublicationTracker.jsx
@@ -1,8 +1,11 @@
 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 = {
@@ -10,7 +13,9 @@ class PublicationTracker extends Component {
       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
index 07c4ac1..be96f5f 100644
--- 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
new file mode 100644
index 0000000..acc2e8f
--- /dev/null
+++ 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);
+}