Remove old stuff
This commit is contained in:
parent
c288ee145b
commit
1aad1d9e2d
11 changed files with 22 additions and 366 deletions
|
@ -1,7 +1,11 @@
|
||||||
import { useAtom } from "jotai";
|
import { Atom, useAtom } from "jotai";
|
||||||
import { useState } from "react";
|
import { useState } from "react";
|
||||||
|
|
||||||
export default function EditBox({ valueAtom }) {
|
export interface Props {
|
||||||
|
valueAtom: Atom<number>;
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function EditBox({ valueAtom }: Props) {
|
||||||
const [value, setValue] = useAtom(valueAtom);
|
const [value, setValue] = useAtom(valueAtom);
|
||||||
const [valueInput, setValueInput] = useState("");
|
const [valueInput, setValueInput] = useState("");
|
||||||
const [editing, setEditing] = useState(false);
|
const [editing, setEditing] = useState(false);
|
||||||
|
@ -11,12 +15,12 @@ export default function EditBox({ valueAtom }) {
|
||||||
currency: "USD",
|
currency: "USD",
|
||||||
});
|
});
|
||||||
|
|
||||||
const startEditing = (_) => {
|
const startEditing = (_: any) => {
|
||||||
setValueInput(value.toString());
|
setValueInput(value.toString());
|
||||||
setEditing(true);
|
setEditing(true);
|
||||||
};
|
};
|
||||||
|
|
||||||
const finalize = (e) => {
|
const finalize = (e: Event) => {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
try {
|
try {
|
||||||
const n = parseFloat(valueInput);
|
const n = parseFloat(valueInput);
|
||||||
|
|
|
@ -2,6 +2,11 @@
|
||||||
const nextConfig = {
|
const nextConfig = {
|
||||||
reactStrictMode: true,
|
reactStrictMode: true,
|
||||||
swcMinify: true,
|
swcMinify: true,
|
||||||
}
|
|
||||||
|
|
||||||
module.exports = nextConfig
|
typescript: {
|
||||||
|
// TODO: Move fast and break things lmao
|
||||||
|
ignoreBuildErrors: true,
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
module.exports = nextConfig;
|
||||||
|
|
|
@ -1,82 +0,0 @@
|
||||||
import type { NextPage } from "next";
|
|
||||||
import EditBox from "../components/EditBox";
|
|
||||||
|
|
||||||
const Home: NextPage = () => {
|
|
||||||
return (
|
|
||||||
<main>
|
|
||||||
<h2>Items</h2>
|
|
||||||
|
|
||||||
<details>
|
|
||||||
<summary>Details for nerds</summary>
|
|
||||||
<pre>{JSON.stringify(state)}</pre>
|
|
||||||
</details>
|
|
||||||
|
|
||||||
<p>
|
|
||||||
Final total: {formatter.format(state.finalTotal)}
|
|
||||||
<EditBox value={state.finalTotal} />
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
onInput={(e) => trySetNum(["finalTotal"], e.target.value)}
|
|
||||||
value={state.finalTotal}
|
|
||||||
/>
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<ul style={{ "text-align": "left" }}>
|
|
||||||
<For each={state.items}>
|
|
||||||
{(item, i) => (
|
|
||||||
<li>
|
|
||||||
{item.name} ({formatter.format(item.price)})
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
onInput={(e) =>
|
|
||||||
trySetNum(["items", i(), "price"], e.target.value)
|
|
||||||
}
|
|
||||||
value={item.price}
|
|
||||||
/>
|
|
||||||
<ul>
|
|
||||||
<For each={item.people}>
|
|
||||||
{(person, j) => <li>{person.name}</li>}
|
|
||||||
</For>
|
|
||||||
<li>
|
|
||||||
<form onSubmit={(e) => itemAddPerson(e, i())}>
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
placeholder="Add person to split..."
|
|
||||||
onInput={(e) =>
|
|
||||||
setState("items", i(), "personEdit", e.target.value)
|
|
||||||
}
|
|
||||||
value={item.personEdit}
|
|
||||||
/>
|
|
||||||
</form>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</li>
|
|
||||||
)}
|
|
||||||
</For>
|
|
||||||
|
|
||||||
<li>
|
|
||||||
<form onSubmit={addItem}>
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
placeholder="Add item..."
|
|
||||||
onInput={(e) => setState("itemEdit", e.target.value)}
|
|
||||||
value={state.itemEdit}
|
|
||||||
/>
|
|
||||||
</form>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
|
|
||||||
<ul>
|
|
||||||
<For each={Array.from(state.totals)}>
|
|
||||||
{([person, amount], i) => (
|
|
||||||
<li>
|
|
||||||
{person} : {formatter.format(amount)}
|
|
||||||
</li>
|
|
||||||
)}
|
|
||||||
</For>
|
|
||||||
</ul>
|
|
||||||
</main>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default Home;
|
|
|
@ -74,22 +74,24 @@ const Home: NextPage = () => {
|
||||||
<main>
|
<main>
|
||||||
<h2>Items</h2>
|
<h2>Items</h2>
|
||||||
|
|
||||||
<div>
|
|
||||||
Receipt Total:
|
|
||||||
<EditBox valueAtom={totalAtom} />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<form onSubmit={add}>
|
<form onSubmit={add}>
|
||||||
<ParsedInputDisplay input={input} />
|
<ParsedInputDisplay input={input} />
|
||||||
|
|
||||||
<input
|
<input
|
||||||
|
autoFocus={true}
|
||||||
type="text"
|
type="text"
|
||||||
placeholder="Add item..."
|
placeholder="Add item..."
|
||||||
onInput={(e) => setInput(e.target.value)}
|
onInput={(e) => setInput(e.target.value)}
|
||||||
value={input}
|
value={input}
|
||||||
|
style={{ padding: "8px", fontSize: "1.5em" }}
|
||||||
/>
|
/>
|
||||||
</form>
|
</form>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
Receipt Total:
|
||||||
|
<EditBox valueAtom={totalAtom} />
|
||||||
|
</div>
|
||||||
|
|
||||||
<ul>
|
<ul>
|
||||||
{receipt.map((itemAtom, i) => {
|
{receipt.map((itemAtom, i) => {
|
||||||
return (
|
return (
|
||||||
|
|
|
@ -1,2 +0,0 @@
|
||||||
export default function EditBox() {
|
|
||||||
}
|
|
|
@ -1,3 +0,0 @@
|
||||||
import { mount, StartClient } from "solid-start/entry-client";
|
|
||||||
|
|
||||||
mount(() => <StartClient />, document);
|
|
|
@ -1,9 +0,0 @@
|
||||||
import {
|
|
||||||
createHandler,
|
|
||||||
renderAsync,
|
|
||||||
StartServer,
|
|
||||||
} from "solid-start/entry-server";
|
|
||||||
|
|
||||||
export default createHandler(
|
|
||||||
renderAsync((event) => <StartServer event={event} />)
|
|
||||||
);
|
|
40
src/root.css
40
src/root.css
|
@ -1,40 +0,0 @@
|
||||||
body {
|
|
||||||
font-family: Gordita, Roboto, Oxygen, Ubuntu, Cantarell,
|
|
||||||
'Open Sans', 'Helvetica Neue', sans-serif;
|
|
||||||
}
|
|
||||||
|
|
||||||
a {
|
|
||||||
margin-right: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
main {
|
|
||||||
text-align: center;
|
|
||||||
padding: 1em;
|
|
||||||
margin: 0 auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
h1 {
|
|
||||||
color: #335d92;
|
|
||||||
text-transform: uppercase;
|
|
||||||
font-size: 4rem;
|
|
||||||
font-weight: 100;
|
|
||||||
line-height: 1.1;
|
|
||||||
margin: 4rem auto;
|
|
||||||
max-width: 14rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
p {
|
|
||||||
max-width: 14rem;
|
|
||||||
margin: 2rem auto;
|
|
||||||
line-height: 1.35;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (min-width: 480px) {
|
|
||||||
h1 {
|
|
||||||
max-width: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
p {
|
|
||||||
max-width: none;
|
|
||||||
}
|
|
||||||
}
|
|
39
src/root.tsx
39
src/root.tsx
|
@ -1,39 +0,0 @@
|
||||||
// @refresh reload
|
|
||||||
import { Suspense } from "solid-js";
|
|
||||||
import {
|
|
||||||
A,
|
|
||||||
Body,
|
|
||||||
ErrorBoundary,
|
|
||||||
FileRoutes,
|
|
||||||
Head,
|
|
||||||
Html,
|
|
||||||
Meta,
|
|
||||||
Routes,
|
|
||||||
Scripts,
|
|
||||||
Title,
|
|
||||||
} from "solid-start";
|
|
||||||
import "./root.css";
|
|
||||||
|
|
||||||
export default function Root() {
|
|
||||||
return (
|
|
||||||
<Html lang="en">
|
|
||||||
<Head>
|
|
||||||
<Title>SolidStart - Bare</Title>
|
|
||||||
<Meta charset="utf-8" />
|
|
||||||
<Meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
||||||
</Head>
|
|
||||||
<Body>
|
|
||||||
<Suspense>
|
|
||||||
<ErrorBoundary>
|
|
||||||
<A href="/">Index</A>
|
|
||||||
<A href="/about">About</A>
|
|
||||||
<Routes>
|
|
||||||
<FileRoutes />
|
|
||||||
</Routes>
|
|
||||||
</ErrorBoundary>
|
|
||||||
</Suspense>
|
|
||||||
<Scripts />
|
|
||||||
</Body>
|
|
||||||
</Html>
|
|
||||||
);
|
|
||||||
}
|
|
|
@ -1,19 +0,0 @@
|
||||||
import { Title } from "solid-start";
|
|
||||||
import { HttpStatusCode } from "solid-start/server";
|
|
||||||
|
|
||||||
export default function NotFound() {
|
|
||||||
return (
|
|
||||||
<main>
|
|
||||||
<Title>Not Found</Title>
|
|
||||||
<HttpStatusCode code={404} />
|
|
||||||
<h1>Page Not Found</h1>
|
|
||||||
<p>
|
|
||||||
Visit{" "}
|
|
||||||
<a href="https://start.solidjs.com" target="_blank">
|
|
||||||
start.solidjs.com
|
|
||||||
</a>{" "}
|
|
||||||
to learn how to build SolidStart apps.
|
|
||||||
</p>
|
|
||||||
</main>
|
|
||||||
);
|
|
||||||
}
|
|
|
@ -1,161 +0,0 @@
|
||||||
import { createStore } from "solid-js/store";
|
|
||||||
import { batch, createComputed, createSignal, For } from "solid-js";
|
|
||||||
import { Title } from "solid-start";
|
|
||||||
|
|
||||||
export default function Home() {
|
|
||||||
const [state, setState] = createStore({
|
|
||||||
itemEdit: "",
|
|
||||||
items: [],
|
|
||||||
finalTotal: 0,
|
|
||||||
|
|
||||||
get totals() {
|
|
||||||
const totals = new Map();
|
|
||||||
|
|
||||||
let subtotalSum = 0;
|
|
||||||
for (let item of state.items) {
|
|
||||||
const price = item.price;
|
|
||||||
const numPeople = item.people.length;
|
|
||||||
if (numPeople == 0) continue;
|
|
||||||
|
|
||||||
const eachPrice = price / numPeople;
|
|
||||||
subtotalSum += price;
|
|
||||||
for (let person of item.people) {
|
|
||||||
const personName = person.name.toString();
|
|
||||||
let accum = totals.get(personName) || 0;
|
|
||||||
accum += eachPrice;
|
|
||||||
totals.set(personName, accum);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
if (subtotalSum == 0) return totals;
|
|
||||||
|
|
||||||
const proportion = state.finalTotal / subtotalSum;
|
|
||||||
console.log("Subtotal sum", subtotalSum, proportion);
|
|
||||||
const newTotals = new Map();
|
|
||||||
for (let person of totals.keys()) {
|
|
||||||
const value = totals.get(person);
|
|
||||||
newTotals.set(person, value * proportion);
|
|
||||||
}
|
|
||||||
|
|
||||||
return newTotals;
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
const [totals, setTotals] = createSignal(new Map());
|
|
||||||
|
|
||||||
const addItem = (e) => {
|
|
||||||
e.preventDefault();
|
|
||||||
batch(() => {
|
|
||||||
setState("items", [
|
|
||||||
...state.items,
|
|
||||||
{ name: state.itemEdit, price: 0, personEdit: "", people: [] },
|
|
||||||
]);
|
|
||||||
setState("itemEdit", "");
|
|
||||||
});
|
|
||||||
return false;
|
|
||||||
};
|
|
||||||
|
|
||||||
const itemAddPerson = (e, i) => {
|
|
||||||
e.preventDefault();
|
|
||||||
batch(() => {
|
|
||||||
setState("items", i, "people", [
|
|
||||||
...state.items[i].people,
|
|
||||||
{ name: state.items[i].personEdit },
|
|
||||||
]);
|
|
||||||
setState("items", i, "personEdit", "");
|
|
||||||
});
|
|
||||||
return false;
|
|
||||||
};
|
|
||||||
|
|
||||||
const trySetNum = (target, v) => {
|
|
||||||
try {
|
|
||||||
let n = parseFloat(v);
|
|
||||||
console.log([...target, n]);
|
|
||||||
setState.apply(null, [...target, n]);
|
|
||||||
} catch (e) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const formatter = new Intl.NumberFormat("en-US", {
|
|
||||||
style: "currency",
|
|
||||||
currency: "USD",
|
|
||||||
});
|
|
||||||
|
|
||||||
return (
|
|
||||||
<main>
|
|
||||||
<Title>Hello World</Title>
|
|
||||||
|
|
||||||
<h2>Items</h2>
|
|
||||||
|
|
||||||
<details>
|
|
||||||
<summary>Details for nerds</summary>
|
|
||||||
<pre>{JSON.stringify(state)}</pre>
|
|
||||||
</details>
|
|
||||||
|
|
||||||
<p>
|
|
||||||
Final total: {formatter.format(state.finalTotal)}
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
onInput={(e) => trySetNum(["finalTotal"], e.target.value)}
|
|
||||||
value={state.finalTotal}
|
|
||||||
/>
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<ul style={{ "text-align": "left" }}>
|
|
||||||
<For each={state.items}>
|
|
||||||
{(item, i) => (
|
|
||||||
<li>
|
|
||||||
{item.name} ({formatter.format(item.price)})
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
onInput={(e) =>
|
|
||||||
trySetNum(["items", i(), "price"], e.target.value)
|
|
||||||
}
|
|
||||||
value={item.price}
|
|
||||||
/>
|
|
||||||
<ul>
|
|
||||||
<For each={item.people}>
|
|
||||||
{(person, j) => <li>{person.name}</li>}
|
|
||||||
</For>
|
|
||||||
<li>
|
|
||||||
<form onSubmit={(e) => itemAddPerson(e, i())}>
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
placeholder="Add person to split..."
|
|
||||||
onInput={(e) =>
|
|
||||||
setState("items", i(), "personEdit", e.target.value)
|
|
||||||
}
|
|
||||||
value={item.personEdit}
|
|
||||||
/>
|
|
||||||
</form>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</li>
|
|
||||||
)}
|
|
||||||
</For>
|
|
||||||
|
|
||||||
<li>
|
|
||||||
<form onSubmit={addItem}>
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
placeholder="Add item..."
|
|
||||||
onInput={(e) => setState("itemEdit", e.target.value)}
|
|
||||||
value={state.itemEdit}
|
|
||||||
/>
|
|
||||||
</form>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
|
|
||||||
<ul>
|
|
||||||
<For each={Array.from(state.totals)}>
|
|
||||||
{([person, amount], i) => (
|
|
||||||
<li>
|
|
||||||
{person} : {formatter.format(amount)}
|
|
||||||
</li>
|
|
||||||
)}
|
|
||||||
</For>
|
|
||||||
</ul>
|
|
||||||
</main>
|
|
||||||
);
|
|
||||||
}
|
|
Loading…
Reference in a new issue