parseAtom generic function, move to lib
This commit is contained in:
parent
398ce7b727
commit
d4dda9affa
3 changed files with 56 additions and 26 deletions
36
lib/parseAtomToJSON.ts
Normal file
36
lib/parseAtomToJSON.ts
Normal file
|
@ -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));
|
||||
}
|
||||
|
12
lib/state.ts
12
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);
|
||||
|
|
|
@ -1,17 +1,19 @@
|
|||
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 { parseAtomToJSON } from "../lib/parseAtomToJSON";
|
||||
import { ParsedInputDisplay } from "../lib/parseInput";
|
||||
import {
|
||||
addLine,
|
||||
receiptAtom,
|
||||
receiptTotalAtom,
|
||||
totalAtom,
|
||||
receiptAtomToJSON,
|
||||
} from "../lib/state";
|
||||
|
||||
const Home: NextPage = () => {
|
||||
|
@ -19,30 +21,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 +40,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) {
|
||||
|
|
Loading…
Reference in a new issue