Merge pull request #10 from iptq/feature/praseAtom

parseAtom generic function, move to lib

lib/parseAtomToJSON.ts

@@ -0,0 +1,36 @@
+import { PrimitiveAtom, Getter } from "jotai";
+
+export const parseAtomToJSON = <T extends PrimitiveAtom<any>, K extends any>(atomToParse: T, get: Getter): K => {
+  const getAtomValue = get(atomToParse);
+
+  if (getAtomValue instanceof Array) {
+    return parseAtomArrayToJSON(getAtomValue, get) as K;
+  }
+
+  if (getAtomValue instanceof Object) {
+    return parseAtomObjectToJSON(atomToParse as PrimitiveAtom<Object>, get) as K;
+  }
+
+
+  return getAtomValue as K;
+}
+
+
+const parseAtomObjectToJSON = <T extends PrimitiveAtom<Object>>(atomObject: T, get: Getter) => {
+  const parsed = {} as Record<string, unknown>;
+  const getAtomObject = get(atomObject) as Record<string, PrimitiveAtom<unknown>>;
+  const itemKeys = Object.keys(getAtomObject);
+
+
+  itemKeys.forEach((key) => {
+    const atomValueToParse = getAtomObject[key];
+    parsed[key] = parseAtomToJSON(atomValueToParse, get);
+  })
+
+  return parsed;
+}
+
+const parseAtomArrayToJSON = <T extends PrimitiveAtom<unknown>[]>(atomArray: T, get: Getter) => {
+  return atomArray.map((atomElement) => parseAtomToJSON(atomElement, get));
+}
+

lib/state.ts

@@ -2,11 +2,23 @@ import { atom, PrimitiveAtom } from "jotai";
 import { SetAtom } from "jotai/core/atom";
 import { IPerson } from "../components/Person";
 import { IReceiptItem, Receipt } from "../components/ReceiptItem";
+import { parseAtomToJSON } from "./parseAtomToJSON";
 import parseInput from "./parseInput";
 
 export const totalAtom = atom(0);
 export const receiptAtom = atom<PrimitiveAtom<IReceiptItem>[]>([]);
 
+export const receiptAtomToJSON = atom((get) => {
+  const receiptJSON: any[] = [];
+  const receipt = get(receiptAtom);
+
+  for (const itemAtom of receipt) {
+    receiptJSON.push(parseAtomToJSON(itemAtom, get));
+  }
+
+  return receiptJSON;
+});
+
 export const receiptTotalAtom = atom((get) => {
   const totalValue = get(totalAtom);
   const receipt = get(receiptAtom);

pages/index.tsx

@@ -1,10 +1,10 @@
-import { useAtom, atom } from "jotai";
+import { useAtom, atom, PrimitiveAtom } 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";
-import ReceiptItem from "../components/ReceiptItem";
+import ReceiptItem, { IReceiptItem } from "../components/ReceiptItem";
 import { moneyFormatter } from "../lib/formatter";
 import { ParsedInputDisplay } from "../lib/parseInput";
 import {
@@ -12,6 +12,7 @@ import {
   receiptAtom,
   receiptTotalAtom,
   totalAtom,
+  receiptAtomToJSON,
 } from "../lib/state";
 
 const Home: NextPage = () => {
@@ -19,30 +20,10 @@ const Home: NextPage = () => {
   const [input, setInput] = useState("");
   const [total] = useAtom(totalAtom);
   const [calculated] = useAtom(receiptTotalAtom);
+  const [receiptJson] = useAtom(receiptAtomToJSON);
+
   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",
@@ -58,13 +39,13 @@ const Home: NextPage = () => {
   };
 
   const receiptJSONString = JSON.stringify(receiptJson);
+
   useEffect(() => {
     const updateDb = async () => {
-      const response = await fetch("/api/createReceipt", {
+      const response = await fetch("/api/updateReceipt", {
         method: "POST",
         body: JSON.stringify({ receipts: receiptJson }),
       });
-      console.log(receiptJSONString);
     };
 
     if (isAddCalled.current) {