Merge pull request #42 from evmiguel/chase-impl

Chase impl

app/purchases/page.tsx

@@ -2,7 +2,6 @@ import { getServerSession } from "next-auth";
 import prisma from "@/lib/prisma";
 import { redirect } from "next/navigation";
 import Purchases from "@/components/Purchases";
-import AddPurchase from "@/components/AddPurchase";
 import Sidebar from "@/components/Sidebar";
 import { authOptions } from "../api/auth/[...nextauth]/options";
 import FilePicker from "@/components/FilePicker";
@@ -36,8 +35,7 @@ export default async function Page() {
             <Sidebar className={"flex space-x-4 pt-10 justify-center md:order-2 md:space-x-0 md:block md:w-50 md:col-span-1 md:mt-10 md:mr-10 md:text-right"} />
             <main className="mb-8 md:col-span-4 md:order-1 lg:col-span-6 xl:col-span-8">
                 <Purchases purchases={purchases} />
-                <AddPurchase />
-                <FilePicker className={'container mx-auto text-center'} />
+                <FilePicker className={'flex justify-center'} />
             </main>
         </div>
     )

classes/WorkbookParser.tsx

@@ -1,6 +1,12 @@
 
 import { Purchase } from '@/components/Purchases/columns';
 import exceljs from 'exceljs';
+import * as d3 from "d3";
+
+enum Banks {
+    AMEX = 'AMEX',
+    CHASE = 'CHASE'
+}
 
 export type ParserOutput = {
     [index: number]: Purchase
@@ -13,15 +19,7 @@ abstract class WorkbookParser {
         this.file = file
     }
 
-    readFile(fileRes: any) {
-        return new Promise((resolve, reject) => {
-          const reader = new FileReader()
-          reader.readAsArrayBuffer(fileRes)
-          reader.onload = () => {
-            resolve(reader.result)
-          }
-        })
-    }
+    abstract readFile(file: File): Promise<any>
 
     abstract parse(): Promise<ParserOutput>
 }
@@ -31,12 +29,22 @@ class AmexWorkbookParser extends WorkbookParser {
         super(file);
     }
 
+    override readFile(fileRes: any) {
+        return new Promise((resolve) => {
+          const reader = new FileReader()
+          reader.readAsArrayBuffer(fileRes)
+          reader.onload = () => {
+            resolve(reader.result)
+          }
+        });
+    }
+
     async parse() {
         const workbook = new exceljs.Workbook();
         const buffer = await this.readFile(this.file);
         const fileData = await workbook.xlsx.load(buffer as Buffer);
         const sheet = fileData.worksheets[0];
-        const data:ParserOutput = { }
+        const data:ParserOutput = {};
         sheet.eachRow((row, rowIndex) => {
             if ([1, 2, 3, 4, 5, 6, 7].includes(rowIndex)) {
                 return;
@@ -55,13 +63,43 @@ class AmexWorkbookParser extends WorkbookParser {
     }
 }
 
-enum Banks {
-    AMEX = 'AMEX'
+class ChaseWorkbookParser extends WorkbookParser {
+    constructor(file: File) {
+        super(file);
+    }
+
+    override readFile(file: File): Promise<any> {
+        return new Promise((resolve) => {
+            const reader = new FileReader()
+            reader.readAsText(file)
+            reader.onload = () => {
+              resolve(reader.result)
+            }
+        })
+    }
+
+    async parse() {
+        const text = await this.readFile(this.file)
+        const csvData = d3.csvParse(text);
+        const data:ParserOutput = {}
+        csvData.forEach((row, index) => {
+            data[index] = {
+                date: new Date(row['Transaction Date']),
+                name: row['Description'],
+                cost: parseFloat(row['Amount']) * -1,
+                category: row['Category']
+            }
+        });
+        return data;
+    }
+
 }
 
 export default function WorkbookParserFactory(bank: string, file: File) {
     if (bank === Banks.AMEX) {
         return new AmexWorkbookParser(file);
-    } 
+    } else if (bank === Banks.CHASE) {
+        return new ChaseWorkbookParser(file);
+    }
     return null;
 }

components/FilePicker/index.tsx

@@ -3,6 +3,17 @@
 import { useRouter } from "next/navigation";
 import WorkbookParserFactory, { ParserOutput } from "@/classes/WorkbookParser";
 import { Purchase } from "../Purchases/columns";
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select"
+import { useState } from "react";
+import { Button } from "../ui/button";
 
 type FilePickerProps = {
   className: string
@@ -12,6 +23,9 @@ export default function FilePicker({ className }: FilePickerProps) {
 
   const router = useRouter();
 
+  const [bank, setBank] = useState('');
+  const [file, setFile] = useState();
+
   async function savePurchases(purchases: ParserOutput) {
 
     Promise.all(Object.values(purchases as Array<Purchase>).map((purchase: Purchase) => {
@@ -38,9 +52,18 @@ export default function FilePicker({ className }: FilePickerProps) {
   }
 
   const readExcel = async (file: File) => {
-      const parser = WorkbookParserFactory('AMEX', file);
+      const parser = WorkbookParserFactory(bank, file);
+      if (!file) {
+        alert('Please select a file')
+        return;
+      }
+
+      if (!bank) {
+        alert('Please select a bank')
+        return;
+      }
       if (!parser) {
-        return
+        return;
       }
       const data = await parser.parse();
       savePurchases(data);
@@ -53,10 +76,22 @@ export default function FilePicker({ className }: FilePickerProps) {
           multiple={true}
           onChange={async (e: any) => {
             const file = e.target.files[0];
-            await readExcel(file);
+            setFile(file);
           }}
           accept=".xlsx,.xls,.csv"
         />
+        <Select onValueChange={setBank}>
+          <SelectTrigger className="w-[180px]">
+            <SelectValue placeholder="Select a bank" />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectGroup>
+              <SelectItem value="AMEX">American Express</SelectItem>
+              <SelectItem value="CHASE">Chase</SelectItem>
+            </SelectGroup>
+          </SelectContent>
+        </Select>
+        <Button onClick={(e) => { e.preventDefault(); readExcel(file as unknown as File);}} className="ml-4">Upload File</Button>
       </div>
     )
 }