Moved table compronent to generic

src/components/root/Pages/Historical.js

@@ -1,7 +1,7 @@
 import React, { Component } from "react";
 
 import { callAPI } from "../../actions/API";
-import HistoricalSingle from "../common/Tables/HistoricalSingle";
+import CompTable from "../common/Tables/CompTable";
 import Error from "../../actions/Error";
 
 // Parent page for the /historical-migrations page,
@@ -14,14 +14,13 @@ class Historical extends Component {
   constructor(props) {
     super(props);
     this.state = {
-      sidemigs: [],
       error: false,
     };
   }
 
   renderItems() {
-    if (!this.props.error) {
-      return <HistoricalSingle data={this.state.sidemigs} />;
+    if (!this.state.error) {
+      return <CompTable data={callAPI('/all/')} />;
     } else {
       console.log("error");
       return <Error />;

src/components/root/Pages/Upcoming.js

@@ -1,5 +1,7 @@
 import React, { Component } from "react";
-import UpcomingSingle from "../common/Tables/UpcomingSingle";
+import CompTable from "../common/Tables/CompTable";
+import { callAPI } from "../../actions/API"
+import Error from "../../actions/Error";
 
 // Upcoming parent page,
 // Most of the good stuff is happening in UpcomingSingle, which does the
@@ -8,6 +10,22 @@ import UpcomingSingle from "../common/Tables/UpcomingSingle";
 // instead of duplicating it.
 
 class Upcoming extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      error: false,
+    };
+  }
+
+  renderItems() {
+    if (!this.state.error) {
+      return <CompTable data={callAPI('/pending/')} />;
+    } else {
+      console.log("error");
+      return <Error />;
+    }
+  }
+
   render() {
     return (
       <div className="row">
@@ -17,9 +35,7 @@ class Upcoming extends Component {
         </div>
         <div className="divider"></div>
         <div className="section">
-          <div className="col s12">
-            <UpcomingSingle />
-          </div>
+          <div className="col s12">{this.renderItems()}</div>
         </div>
         <div className="divider"></div>
       </div>

src/components/root/common/Tables/CompTable.js

@@ -1,5 +1,4 @@
 import React, { useState, useEffect } from "react";
-import { callAPI } from "../../../actions/API";
 import BootstrapTable from "react-bootstrap-table-next";
 import paginationFactory from "react-bootstrap-table2-paginator";
 import * as ReactBootstrap from "react-bootstrap";
@@ -12,7 +11,7 @@ import ToolkitProvider, {
 // Main table for the Historical migrations tab,
 // receives all API information and displays as a table with a searchbox
 
-const HistoricalSingle = () => {
+const CompTable = (props) => {
   const [list, setList] = useState([]);
   const [loading, setLoading] = useState(false);
   const [ticURl, setURL] = useState(null)
@@ -42,15 +41,9 @@ const HistoricalSingle = () => {
 
   const getListData = async () => {
     try {
-      const data = await callAPI.get("/all/");
-      console.log(data);
+      const data = await props.data;
       setList(data.data);
       setLoading(true);
-      // Determine brand and set URL based on brand
-      console.log(data.data.brand)
-      if (data.data.brand === "VentraIP" ) {
-        console.log("memes")
-      }
     } catch (e) {
       console.log(e);
     }
@@ -96,7 +89,10 @@ const HistoricalSingle = () => {
       formatter: (cell, row) => (
         <a
           href={
-            row.brand === "VentraIP" ? "https://helpdesk.ventraip.com.au/profiles/ticket/" + row.ticket_id : null
+            row.brand === "VentraIP" ? "https://helpdesk.ventraip.com.au/profiles/ticket/" + row.ticket_id 
+            : row.brand === "Zuver" ? "https://helpdesk.zuver.net.au/profiles/ticket/" + row.ticket_id 
+            : row.brand === "Synergy" ? "https://helpdesk.synergywholesale.com/profiles/ticket/" + row.ticket_id 
+            : null
           }
           target="_blank"
         >
@@ -169,4 +165,4 @@ const HistoricalSingle = () => {
   );
 };
 
-export default HistoricalSingle;
+export default CompTable;

src/components/root/common/Tables/UpcomingSingle.js

@@ -1,169 +0,0 @@
-import React, { useState, useEffect } from "react";
-import { callAPI } from "../../../actions/API";
-import BootstrapTable from "react-bootstrap-table-next";
-import paginationFactory from "react-bootstrap-table2-paginator";
-import * as ReactBootstrap from "react-bootstrap";
-import filterFactory from "react-bootstrap-table2-filter";
-import ToolkitProvider, {
-  Search,
-  CSVExport,
-} from "react-bootstrap-table2-toolkit";
-
-// Directly linked to the parent page "Upcoming"
-// this element creates the table
-// Each domain links to a uuid, which then links to the page Migrations/uuid
-
-const UpcomingSingle = () => {
-  const [list, setList] = useState([]);
-  const [loading, setLoading] = useState(false);
-  const { SearchBar } = Search;
-  const { ExportCSVButton } = CSVExport;
-  const sizePerPageRenderer = ({
-    options,
-    currSizePerPage,
-    onSizePerPageChange,
-  }) => (
-    <div className="btn-group" role="group">
-      {options.map((option) => {
-        const isSelect = currSizePerPage === `${option.page}`;
-        return (
-          <button
-            key={option.text}
-            type="button"
-            onClick={() => onSizePerPageChange(option.page)}
-            className={`btn ${isSelect ? "btn-secondary" : "btn-success"}`}
-          >
-            {option.text}
-          </button>
-        );
-      })}
-    </div>
-  );
-
-  const getListData = async () => {
-    try {
-      const data = await callAPI.get("/pending/");
-      console.log(data);
-      setList(data.data);
-      setLoading(true);
-    } catch (e) {
-      console.log(e);
-    }
-  };
-  const options = {
-    paginationSize: 4,
-    pageStartIndex: 0,
-    // alwaysShowAllBtns: true, // Always show next and previous button
-    // withFirstAndLast: false, // Hide the going to First and Last page button
-    // hideSizePerPage: true, // Hide the sizePerPage dropdown always
-    // hidePageListOnlyOnePage: true, // Hide the pagination list when only one page
-    firstPageText: "First",
-    prePageText: "Back",
-    nextPageText: "Next",
-    lastPageText: "Last",
-    nextPageTitle: "First page",
-    prePageTitle: "Pre page",
-    firstPageTitle: "Next page",
-    lastPageTitle: "Last page",
-    showTotal: true,
-    disablePageTitle: true,
-    sizePerPageList: [
-      {
-        text: "50",
-        value: 50,
-      },
-      {
-        text: "100",
-        value: 100,
-      },
-    ],
-    sizePerPageRenderer, // A numeric array is also available. the purpose of above example is custom the text
-  };
-  const columns = [
-    { dataField: "id", text: "ID", hidden: true },
-    { dataField: "brand", text: "Brand", sort: true },
-    { dataField: "migration_status", text: "Status", sort: true },
-    {
-      dataField: "ticket_id",
-      text: "TicketID",
-      sort: true,
-      formatter: (cell, row) => (
-        <a
-          href={
-            "https://helpdesk.ventraip.com.au/profiles/ticket/" + row.ticket_id
-          }
-        >
-          {" "}
-          {cell}{" "}
-        </a>
-      ),
-    },
-    { dataField: "booked_date", text: "Booked Date", sort: true },
-    { dataField: "booked_time", text: "Booked Time", sort: true },
-    { dataField: "agent_booked", text: "Agent initials", sort: true },
-    {
-      dataField: "domain",
-      text: "Domain",
-      sort: true,
-      formatter: (cell, row) => <a href={"migrations/" + row.id}> {cell} </a>,
-    },
-    { dataField: "additional_domains", text: "Additional Domains", sort: true },
-    { dataField: "username", text: "Username", sort: true },
-    { dataField: "migration_type", text: "Type", sort: true },
-    { dataField: "original_server", text: "Original Server", sort: true },
-    { dataField: "new_server", text: "New Server", sort: true },
-    { dataField: "migration_status", text: "Status", sort: true },
-    { dataField: "term_date", text: "Termination Date", sort: true },
-    { dataField: "notes", text: "Notes", sort: true },
-    { dataField: "submit_time", text: "Submit Time", sort: true },
-    {
-      dataField: "report",
-      text: "Show Detailed Report",
-      formatter: (cell, row) => <a href={cell + row.id}> {cell} </a>,
-    },
-  ];
-  useEffect(() => {
-    getListData();
-  }, []);
-
-  return (
-    <div className="UpcomingSingle">
-      {loading ? (
-        <ToolkitProvider
-          keyField="name"
-          data={list}
-          columns={columns}
-          search
-          exportCSV
-        >
-          {(props) => (
-            <div>
-              <div className="serSec">
-                <h3 className="hdrOne"></h3>
-                <SearchBar {...props.searchProps} />
-              </div>
-
-              <div className="table-responsive">
-                <BootstrapTable
-                  {...props.baseProps}
-                  filter={filterFactory()}
-                  pagination={paginationFactory(options)}
-                  striped
-                  hover
-                  condensed
-                />
-              </div>
-              <ExportCSVButton {...props.csvProps}>
-                Export CSV!!
-              </ExportCSVButton>
-            </div>
-          )}
-        </ToolkitProvider>
-      ) : (
-        <ReactBootstrap.Spinner animation="border" />
-      )}
-    </div>
-  );
-};
-
-export default UpcomingSingle;