From f190dd7b6e2ae2e15b2f51a70682a7553895e234 Mon Sep 17 00:00:00 2001 From: pepper Date: Sun, 17 Jan 2021 20:59:34 -0500 Subject: [PATCH] Moved table compronent to generic --- src/components/root/Pages/Historical.js | 7 +- src/components/root/Pages/Upcoming.js | 24 ++- .../{HistoricalSingle.js => CompTable.js} | 18 +- .../root/common/Tables/UpcomingSingle.js | 169 ------------------ 4 files changed, 30 insertions(+), 188 deletions(-) rename src/components/root/common/Tables/{HistoricalSingle.js => CompTable.js} (92%) delete mode 100644 src/components/root/common/Tables/UpcomingSingle.js diff --git a/src/components/root/Pages/Historical.js b/src/components/root/Pages/Historical.js index f54bafd..379b1a0 100644 --- a/src/components/root/Pages/Historical.js +++ b/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 ; + if (!this.state.error) { + return ; } else { console.log("error"); return ; diff --git a/src/components/root/Pages/Upcoming.js b/src/components/root/Pages/Upcoming.js index a60254f..2c83291 100644 --- a/src/components/root/Pages/Upcoming.js +++ b/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 ; + } else { + console.log("error"); + return ; + } + } + render() { return (
@@ -17,9 +35,7 @@ class Upcoming extends Component {
-
- -
+
{this.renderItems()}
diff --git a/src/components/root/common/Tables/HistoricalSingle.js b/src/components/root/common/Tables/CompTable.js similarity index 92% rename from src/components/root/common/Tables/HistoricalSingle.js rename to src/components/root/common/Tables/CompTable.js index 967b14f..eb68e51 100644 --- a/src/components/root/common/Tables/HistoricalSingle.js +++ b/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) => ( @@ -169,4 +165,4 @@ const HistoricalSingle = () => { ); }; -export default HistoricalSingle; +export default CompTable; diff --git a/src/components/root/common/Tables/UpcomingSingle.js b/src/components/root/common/Tables/UpcomingSingle.js deleted file mode 100644 index c029462..0000000 --- a/src/components/root/common/Tables/UpcomingSingle.js +++ /dev/null @@ -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, - }) => ( -
- {options.map((option) => { - const isSelect = currSizePerPage === `${option.page}`; - return ( - - ); - })} -
- ); - - 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) => ( - - {" "} - {cell}{" "} - - ), - }, - { 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) => {cell} , - }, - { 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) => {cell} , - }, - ]; - useEffect(() => { - getListData(); - }, []); - - return ( -
- {loading ? ( - - {(props) => ( -
-
-

- -
- -
- -
- - Export CSV!! - -
- )} - - ) : ( - - )} -
- ); -}; - -export default UpcomingSingle;