Merge pull request #10 from ChurchApps/add-count-step

add: final confirmation before import

src/Home.tsx

@@ -19,6 +19,8 @@ export const Home = () => {
   const [status, setStatus] = useState<any>({});
   const [activeTab, setActiveTab] = useState<string>("step1");
 
+  const [showFinalCount, setShowFinalCount] = useState<boolean>(false);
+
   const isLoadingSourceData = dataImportSource && !importData;
 
   const handleStartOver = () => {
@@ -28,6 +30,7 @@ export const Home = () => {
     setDataExportSource(null)
     setIsExporting(false)
     setStatus({})
+    setShowFinalCount(false);
   };
 
   console.log("***Made it Home");
@@ -49,7 +52,7 @@ export const Home = () => {
             <TabPreview importData={importData} isLoadingSourceData={isLoadingSourceData} setActiveTab={setActiveTab} dataImportSource={dataImportSource} />
           </Tab>
           <Tab eventKey="step3" title="Step 3 - Destination" disabled={activeTab !== "step3"}>
-            <TabDestination importData={importData} setActiveTab={setActiveTab} dataImportSource={dataImportSource} dataExportSource={dataExportSource} setDataExportSource={setDataExportSource} setIsExporting={setIsExporting} setStatus={setStatus} />
+            <TabDestination importData={importData} setActiveTab={setActiveTab} dataImportSource={dataImportSource} dataExportSource={dataExportSource} setDataExportSource={setDataExportSource} setIsExporting={setIsExporting} setStatus={setStatus} showFinalCount={showFinalCount} setShowFinalCount={setShowFinalCount} />
           </Tab>
           <Tab eventKey="step4" title="Step 4 - Run" disabled={activeTab !== "step4"}>
             <TabRun dataExportSource={dataExportSource} isExporting={isExporting} status={status} />

src/components/FinalCountPreview.tsx

@@ -0,0 +1,56 @@
+import React from "react";
+import { Table } from "react-bootstrap";
+import { ImportDataInterface } from "../helpers/ImportHelper";
+import { DisplayBox } from "@churchapps/apphelper";
+
+interface Props {
+  importData: ImportDataInterface;
+  chumsData: ImportDataInterface;
+}
+
+export const FinalCountPreview = (props: Props) => {
+  const camelCaseToWords = (str: string) => {
+    const spacedString = str.replace(/([A-Z])/g, " $1");
+    const capitalisedString = spacedString.charAt(0).toUpperCase() + spacedString.slice(1);
+    return capitalisedString;
+  };
+
+  const getRows = () => {
+    let rows: any[] = [];
+    const keys = Object.keys(props.chumsData);
+    keys.forEach((key, index) => {
+      let chumsData = props.chumsData[key as keyof ImportDataInterface];
+      let importData = props.importData[key as keyof ImportDataInterface];
+      const total = chumsData.length + importData.length;
+      rows.push(
+        <tr key={index}>
+          <td>{camelCaseToWords(key)}</td>
+          <td>{chumsData.length}</td>
+          <td>{importData.length}</td>
+          <td>{total}</td>
+        </tr>
+      );
+    });
+    return rows;
+  };
+
+  const getTable = () => (
+    <Table>
+      <thead>
+        <tr>
+          <th>Category</th>
+          <th>Current</th>
+          <th>To Add</th>
+          <th>Total</th>
+        </tr>
+      </thead>
+      <tbody>{getRows()}</tbody>
+    </Table>
+  );
+
+  return (
+    <DisplayBox headerIcon="" headerText="Final Count">
+      {getTable()}
+    </DisplayBox>
+  );
+};

src/components/TabDestination.tsx

@@ -1,11 +1,13 @@
-import React from "react"
+import React, { useState } from "react"
 import { Dropdown, DropdownButton } from "react-bootstrap";
 import { ImportDataInterface } from "../helpers/ImportHelper";
 import { DataSourceType } from "../types";
+import getChumsData from "../helpers/ImportHelpers/ImportChumsDbHelper"
 import generateBreezeZip from "../helpers/ExportHelpers/ExportBreezeZipHelper"
 import generateChumsZip from "../helpers/ExportHelpers/ExportChumsZipHelper"
 import exportToChumsDb from "../helpers/ExportHelpers/ExportChumsDbHelper"
 import generatePlanningCenterZip from "../helpers/ExportHelpers/ExportPlanningCenterZipHelper"
+import { FinalCountPreview } from "./FinalCountPreview";
 
 interface Props {
   dataImportSource?: String;
@@ -15,16 +17,35 @@ interface Props {
   setDataExportSource: (src: string | null) => void
   setStatus: (status: string) => void
   setIsExporting: (exporting: boolean) => void;
+  showFinalCount: boolean;
+  setShowFinalCount: (showing: boolean) => void;
 }
 
 export const TabDestination = (props: Props) => {
+  const [chumsData, setChumsData] = useState<ImportDataInterface>();
   let progress: any = {};
 
   const setProgress = (name: string, status: string) => {
     progress[name] = status;
     props.setStatus({ ...progress });
   }
 
+  const getChumsDBData = async () => {
+    const data = await getChumsData();
+    setChumsData(data);
+  }
+
+  const handleSelect = (e: string) => {
+    if (e === DataSourceType.CHUMS_DB) {
+      props.setDataExportSource(e);
+      getChumsDBData();
+      props.setShowFinalCount(true);
+    } else {
+      props.setShowFinalCount(false);
+      handleExport(e);
+    }
+  }
+
   const handleExport = async (e: string) => {
     props.setDataExportSource(e)
     if (e === props.dataImportSource) {
@@ -60,13 +81,23 @@ export const TabDestination = (props: Props) => {
   return (<>
     <h2>Step 3 - Choose Export Destination</h2>
     <p>Choose export format</p>
-    <DropdownButton id="dropdown-export-types" title={props.dataExportSource ?? "Choose One"} onSelect={(e) => handleExport(e)}>
+    <DropdownButton id="dropdown-export-types" title={props.dataExportSource ?? "Choose One"} onSelect={handleSelect}>
       <Dropdown.Item eventKey={DataSourceType.CHUMS_DB}>Chums Database</Dropdown.Item>
       <Dropdown.Item eventKey={DataSourceType.CHUMS_ZIP}>Chums Export Zip</Dropdown.Item>
       <Dropdown.Item eventKey={DataSourceType.BREEZE_ZIP}>Breeze Export Zip</Dropdown.Item>
       <Dropdown.Item eventKey={DataSourceType.PLANNING_CENTER_ZIP}>Planning Center zip</Dropdown.Item>
     </DropdownButton>
     <br></br>
     <br></br>
+    <div>
+      {props.showFinalCount && props.importData && chumsData &&
+        <>
+          <FinalCountPreview importData={props.importData} chumsData={chumsData} />
+          <button className="btn btn-success float-right" onClick={() => handleExport(DataSourceType.CHUMS_DB)}>Confirm</button>
+        </>
+      }
+    </div>
+    <br></br>
+    <br></br>
   </>)
 }