logic for writing to db after adding receipt item

.gitignore

@@ -18,6 +18,7 @@
 # misc
 .DS_Store
 *.pem
+.vscode
 
 # debug
 npm-debug.log*
@@ -26,7 +27,9 @@ yarn-error.log*
 .pnpm-debug.log*
 
 # local env files
-.env*.local
+.env*
+.local
+
 
 # vercel
 .vercel

lib/getMongoDBClient.ts

@@ -0,0 +1,17 @@
+import { MongoClient } from 'mongodb';
+
+const USERNAME = process.env.MONGO_USERNAME
+const PASSWORD = process.env.MONGO_PASSWORD
+const HOSTNAME = process.env.MONGO_HOSTNAME
+
+const URI =
+  `mongodb://${USERNAME}:${PASSWORD}@${HOSTNAME ?? 'localhost'}:3001`;
+
+export const getMongoDBClient = async () => {
+  const client = new MongoClient(URI);
+
+  await client.connect();
+  const receiptdb = client.db("receipt");
+
+  return receiptdb.collection('receipt');
+}

package.json

@@ -12,6 +12,7 @@
     "@reduxjs/toolkit": "^1.8.6",
     "bootstrap": "^5.2.2",
     "jotai": "^1.8.6",
+    "mongodb": "^4.11.0",
     "next": "12.3.1",
     "react": "18.2.0",
     "react-bootstrap": "^2.5.0",

pages/api/hello.ts

@@ -1,13 +0,0 @@
-// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
-import type { NextApiRequest, NextApiResponse } from 'next'
-
-type Data = {
-  name: string
-}
-
-export default function handler(
-  req: NextApiRequest,
-  res: NextApiResponse<Data>
-) {
-  res.status(200).json({ name: 'John Doesdfsdf' })
-}

pages/api/updateReceipt.ts

@@ -0,0 +1,20 @@
+import type { NextApiRequest, NextApiResponse } from 'next'
+import { getMongoDBClient } from '../../lib/getMongoDBClient';
+
+
+export default async function handler(
+  req: NextApiRequest,
+  res: NextApiResponse<Record<string, string>[] | Record<string, string>>
+) {
+  const receipt = req.body;
+  const client = await getMongoDBClient();
+
+  console.log('called', receipt);
+
+  try {
+    // TODO implement this
+    res.status(200).json(receipt);
+  } catch (e) {
+    res.status(500).json({message: (e as Error).message});
+  }
+}

pages/index.tsx

@@ -1,5 +1,6 @@
-import { useAtom } from "jotai";
+import { useAtom, atom } from "jotai";
 import type { NextPage } from "next";
+import { useEffect, useRef } from "react";
 import { SyntheticEvent, useState } from "react";
 import { Form } from "react-bootstrap";
 import NumberEditBox from "../components/NumberEditBox";
@@ -18,19 +19,61 @@ const Home: NextPage = () => {
   const [input, setInput] = useState("");
   const [total] = useAtom(totalAtom);
   const [calculated] = useAtom(receiptTotalAtom);
+  const isAddCalled = useRef(false);
+
+  const [receiptJson] = useAtom(
+    atom((get) => {
+      const receiptJson: any[] = [];
+      for (const itemAtom of receipt) {
+        const receiptItemFromAtom = get(itemAtom);
+        const splitBetweenArray = get(receiptItemFromAtom.splitBetween).map(
+          (personAtom) => ({
+            name: get(get(personAtom).name),
+          })
+        );
+        const receiptItemParsed = {
+          name: get(receiptItemFromAtom.name),
+          price: get(receiptItemFromAtom.price),
+          splitBetween: splitBetweenArray,
+        };
+        receiptJson.push(receiptItemParsed);
+      }
+
+      return receiptJson;
+    })
+  );
 
   const formatter = new Intl.NumberFormat("en-US", {
     style: "currency",
     currency: "USD",
   });
 
-  const add = (e: SyntheticEvent) => {
+  const add = async (e: SyntheticEvent) => {
     e.preventDefault();
+    isAddCalled.current = true;
+
     addLine(input, receipt, setReceipt);
     setInput("");
     return false;
   };
 
+  const receiptJSONString = JSON.stringify(receiptJson);
+  console.log("ASDFASDF", receiptJSONString);
+
+  useEffect(() => {
+    const updateDb = async () => {
+      const response = await fetch("/api/createReceipt", {
+        method: "POST",
+        body: JSON.stringify({ receipts: receiptJson }),
+      });
+      console.log(receiptJSONString);
+    };
+
+    if (isAddCalled.current) {
+      updateDb();
+    }
+  }, [receiptJSONString]);
+
   return (
     <main>
       <h1>Items</h1>