Rewrite to react

This commit is contained in:
Michael Zhang 2022-10-24 02:10:52 -05:00
parent f824f94210
commit c288ee145b
19 changed files with 4829 additions and 6508 deletions

3
.eslintrc.json Normal file
View file

@ -0,0 +1,3 @@
{
"extends": "next/core-web-vitals"
}

46
.gitignore vendored
View file

@ -1,24 +1,36 @@
dist
.solid
.output
.vercel
.netlify
netlify
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
# dependencies
/node_modules
/.pnp
.pnp.js
# IDEs and editors
/.idea
.project
.classpath
*.launch
.settings/
# testing
/coverage
# Temp
gitignore
# next.js
/.next/
/out/
# System Files
# production
/build
# misc
.DS_Store
Thumbs.db
*.pem
# debug
npm-debug.log*
yarn-debug.log*
yarn-error.log*
.pnpm-debug.log*
# local env files
.env*.local
# vercel
.vercel
# typescript
*.tsbuildinfo
next-env.d.ts

View file

@ -1,9 +1,34 @@
# Wisesplit
This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
Does the one calculation I expected Splitwise to have but it didn't.
## Getting Started
## Contact
First, run the development server:
License: AGPL-3.0
```bash
npm run dev
# or
yarn dev
```
Author: Michael Zhang
Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
You can start editing the page by modifying `pages/index.tsx`. The page auto-updates as you edit the file.
[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.ts`.
The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.
## Learn More
To learn more about Next.js, take a look at the following resources:
- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
## Deploy on Vercel
The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.

46
components/EditBox.tsx Normal file
View file

@ -0,0 +1,46 @@
import { useAtom } from "jotai";
import { useState } from "react";
export default function EditBox({ valueAtom }) {
const [value, setValue] = useAtom(valueAtom);
const [valueInput, setValueInput] = useState("");
const [editing, setEditing] = useState(false);
const formatter = new Intl.NumberFormat("en-US", {
style: "currency",
currency: "USD",
});
const startEditing = (_) => {
setValueInput(value.toString());
setEditing(true);
};
const finalize = (e) => {
e.preventDefault();
try {
const n = parseFloat(valueInput);
setValue(n);
setEditing(false);
} catch (e) {
// TODO: Handle
}
};
if (editing) {
return (
<form onSubmit={finalize} style={{ display: "inline" }}>
<input
autoFocus={true}
type="number"
step="0.01"
value={valueInput}
onBlur={finalize}
onInput={(e) => setValueInput(e.target.value)}
/>
</form>
);
} else {
return <span onClick={startEditing}>{formatter.format(value)}</span>;
}
}

14
components/Person.tsx Normal file
View file

@ -0,0 +1,14 @@
import { Atom, useAtom } from "jotai";
export interface IPerson {
name: string;
}
export interface Props {
personAtom: Atom<IPerson>;
}
export default function Person({ personAtom }: Props) {
const [person, _] = useAtom(personAtom);
return <span style={{ marginInline: "5px" }}>{person.name}</span>;
}

View file

@ -0,0 +1,44 @@
import { Atom, useAtom } from "jotai";
import EditBox from "./EditBox";
import Person from "./Person";
export interface IReceiptItem {
name: string;
price: Atom<number>;
splitBetween: Atom<Atom<string>[]>;
}
export interface Props {
itemAtom: Atom<IReceiptItem>;
}
function SplitBetween({ splitBetweenAtom }) {
const [splitBetween, _] = useAtom(splitBetweenAtom);
return splitBetween.length > 0 ? (
<div>
Split between ({splitBetween.length}):
{splitBetween.map((a, i) => (
<Person personAtom={a} key={`split-${i}`} />
))}
</div>
) : (
<></>
);
}
function Price({ priceAtom }) {
return <EditBox valueAtom={priceAtom} />;
}
export default function ReceiptItem({ itemAtom }: Props) {
const [item, _] = useAtom(itemAtom);
return (
<>
<span>
<b>{item.name}</b>
</span>
(<Price priceAtom={item.price} />)
<SplitBetween splitBetweenAtom={item.splitBetween} />
</>
);
}

59
lib/parseInput.tsx Normal file
View file

@ -0,0 +1,59 @@
export interface ParsedInput {
itemName: string;
price?: number;
splitBetween: Set<string>;
}
export function ParsedInputDisplay({ input }) {
const parsed = parseInput(input);
const formatter = new Intl.NumberFormat("en-US", {
style: "currency",
currency: "USD",
});
return (
<div style={{ fontSize: ".8em" }}>
<div>
<b>{parsed.itemName}</b>
{parsed.price !== undefined && <>({formatter.format(parsed.price)})</>}
</div>
{parsed.splitBetween.size > 0 && (
<>
Split between:
<ul>
{[...parsed.splitBetween].map((personName) => (
<li key={personName}>{personName}</li>
))}
</ul>
</>
)}
</div>
);
}
export default function parseInput(line: string): ParsedInput {
const words = line.split(" ");
let price = undefined;
const splitBetween = new Set<string>();
const final = [];
for (let word of words) {
if (word.startsWith("$") && word.length > 1) {
price = parseFloat(word.slice(1));
continue;
}
if (word.startsWith("@") && word.length > 1) {
splitBetween.add(word.slice(1));
continue;
}
final.push(word);
}
const itemName = final.join(" ");
return { itemName, price, splitBetween };
}

7
next.config.js Normal file
View file

@ -0,0 +1,7 @@
/** @type {import('next').NextConfig} */
const nextConfig = {
reactStrictMode: true,
swcMinify: true,
}
module.exports = nextConfig

10640
package-lock.json generated

File diff suppressed because it is too large Load diff

View file

@ -1,24 +1,27 @@
{
"name": "splitwise",
"name": "wisesplit",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "solid-start dev",
"build": "solid-start build",
"start": "solid-start start"
},
"type": "module",
"devDependencies": {
"solid-start-node": "^0.2.0",
"typescript": "^4.8.4",
"vite": "^3.1.8"
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint"
},
"dependencies": {
"@solidjs/meta": "^0.28.0",
"@solidjs/router": "^0.5.0",
"solid-js": "^1.6.0",
"solid-start": "^0.2.0",
"undici": "^5.11.0"
"@reduxjs/toolkit": "^1.8.6",
"jotai": "^1.8.6",
"next": "12.3.1",
"react": "18.2.0",
"react-dom": "18.2.0",
"react-redux": "^8.0.4"
},
"engines": {
"node": ">=16"
"devDependencies": {
"@types/node": "18.11.4",
"@types/react": "18.0.21",
"@types/react-dom": "18.0.6",
"eslint": "8.26.0",
"eslint-config-next": "12.3.1",
"typescript": "4.8.4"
}
}
}

8
pages/_app.tsx Normal file
View file

@ -0,0 +1,8 @@
import "../styles/globals.css";
import type { AppProps } from "next/app";
function MyApp({ Component, pageProps }: AppProps) {
return <Component {...pageProps} />;
}
export default MyApp;

13
pages/api/hello.ts Normal file
View file

@ -0,0 +1,13 @@
// 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 Doe' })
}

82
pages/index-old.tsx Normal file
View file

@ -0,0 +1,82 @@
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;

117
pages/index.tsx Normal file
View file

@ -0,0 +1,117 @@
import { atom, PrimitiveAtom, useAtom } from "jotai";
import { selectAtom } from "jotai/utils";
import type { NextPage } from "next";
import { useState } from "react";
import EditBox from "../components/EditBox";
import ReceiptItem, { IReceiptItem } from "../components/ReceiptItem";
import Totals from "../components/Totals";
import parseInput, { ParsedInputDisplay } from "../lib/parseInput";
const totalAtom = atom(0);
const receiptAtom = atom<PrimitiveAtom<IReceiptItem>[]>([]);
const receiptTotalAtom = atom((get) => {
const totalValue = get(totalAtom);
const receipt = get(receiptAtom);
const totals = new Map();
let subtotalSum = 0;
for (const itemAtom of receipt) {
const item = get(itemAtom);
const price = get(item.price);
const splitBetween = get(item.splitBetween);
const numSplitters = splitBetween.length;
if (numSplitters == 0) continue;
const eachPrice = price / numSplitters;
subtotalSum += price;
for (const personAtom of splitBetween) {
const person = get(personAtom);
const personName = person.name;
let accum = totals.get(personName) || 0;
accum += eachPrice;
totals.set(personName, accum);
}
}
if (subtotalSum == 0) return totals;
const newTotals = new Map();
const proportion = totalValue / subtotalSum;
for (const [person, value] of totals.entries()) {
newTotals.set(person, value * proportion);
}
return newTotals;
});
const Home: NextPage = () => {
const [receipt, setReceipt] = useAtom(receiptAtom);
const [total] = useAtom(receiptTotalAtom);
const [input, setInput] = useState("");
const formatter = new Intl.NumberFormat("en-US", {
style: "currency",
currency: "USD",
});
const add = (e) => {
e.preventDefault();
let parsed = parseInput(input);
console.log(parsed);
const price = atom(parsed.price || 0);
const splitBetween = atom(
[...parsed.splitBetween].map((a) => atom({ name: a }))
);
setReceipt((prev) => [
...prev,
atom<IReceiptItem>({ name: parsed.itemName, price, splitBetween }),
]);
setInput("");
return false;
};
return (
<main>
<h2>Items</h2>
<div>
Receipt Total:
<EditBox valueAtom={totalAtom} />
</div>
<form onSubmit={add}>
<ParsedInputDisplay input={input} />
<input
type="text"
placeholder="Add item..."
onInput={(e) => setInput(e.target.value)}
value={input}
/>
</form>
<ul>
{receipt.map((itemAtom, i) => {
return (
<li key={`receiptItem-${i}`}>
<ReceiptItem itemAtom={itemAtom} />
</li>
);
})}
</ul>
<div>
Total breakdown:
<ul>
{[...total.entries()].map(([person, value], i) => (
<li key={`breakdown-${i}`}>
<b>{person}</b>: {formatter.format(value)}
</li>
))}
</ul>
</div>
</main>
);
};
export default Home;

Binary file not shown.

Before

Width:  |  Height:  |  Size: 664 B

After

Width:  |  Height:  |  Size: 25 KiB

4
public/vercel.svg Normal file
View file

@ -0,0 +1,4 @@
<svg width="283" height="64" viewBox="0 0 283 64" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path d="M141.04 16c-11.04 0-19 7.2-19 18s8.96 18 20 18c6.67 0 12.55-2.64 16.19-7.09l-7.65-4.42c-2.02 2.21-5.09 3.5-8.54 3.5-4.79 0-8.86-2.5-10.37-6.5h28.02c.22-1.12.35-2.28.35-3.5 0-10.79-7.96-17.99-19-17.99zm-9.46 14.5c1.25-3.99 4.67-6.5 9.45-6.5 4.79 0 8.21 2.51 9.45 6.5h-18.9zM248.72 16c-11.04 0-19 7.2-19 18s8.96 18 20 18c6.67 0 12.55-2.64 16.19-7.09l-7.65-4.42c-2.02 2.21-5.09 3.5-8.54 3.5-4.79 0-8.86-2.5-10.37-6.5h28.02c.22-1.12.35-2.28.35-3.5 0-10.79-7.96-17.99-19-17.99zm-9.45 14.5c1.25-3.99 4.67-6.5 9.45-6.5 4.79 0 8.21 2.51 9.45 6.5h-18.9zM200.24 34c0 6 3.92 10 10 10 4.12 0 7.21-1.87 8.8-4.92l7.68 4.43c-3.18 5.3-9.14 8.49-16.48 8.49-11.05 0-19-7.2-19-18s7.96-18 19-18c7.34 0 13.29 3.19 16.48 8.49l-7.68 4.43c-1.59-3.05-4.68-4.92-8.8-4.92-6.07 0-10 4-10 10zm82.48-29v46h-9V5h9zM36.95 0L73.9 64H0L36.95 0zm92.38 5l-27.71 48L73.91 5H84.3l17.32 30 17.32-30h10.39zm58.91 12v9.69c-1-.29-2.06-.49-3.2-.49-5.81 0-10 4-10 10V51h-9V17h9v9.2c0-5.08 5.91-9.2 13.2-9.2z" fill="#000"/>
</svg>

After

Width:  |  Height:  |  Size: 1.1 KiB

129
styles/Home.module.css Normal file
View file

@ -0,0 +1,129 @@
.container {
padding: 0 2rem;
}
.main {
min-height: 100vh;
padding: 4rem 0;
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.footer {
display: flex;
flex: 1;
padding: 2rem 0;
border-top: 1px solid #eaeaea;
justify-content: center;
align-items: center;
}
.footer a {
display: flex;
justify-content: center;
align-items: center;
flex-grow: 1;
}
.title a {
color: #0070f3;
text-decoration: none;
}
.title a:hover,
.title a:focus,
.title a:active {
text-decoration: underline;
}
.title {
margin: 0;
line-height: 1.15;
font-size: 4rem;
}
.title,
.description {
text-align: center;
}
.description {
margin: 4rem 0;
line-height: 1.5;
font-size: 1.5rem;
}
.code {
background: #fafafa;
border-radius: 5px;
padding: 0.75rem;
font-size: 1.1rem;
font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono,
Bitstream Vera Sans Mono, Courier New, monospace;
}
.grid {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
max-width: 800px;
}
.card {
margin: 1rem;
padding: 1.5rem;
text-align: left;
color: inherit;
text-decoration: none;
border: 1px solid #eaeaea;
border-radius: 10px;
transition: color 0.15s ease, border-color 0.15s ease;
max-width: 300px;
}
.card:hover,
.card:focus,
.card:active {
color: #0070f3;
border-color: #0070f3;
}
.card h2 {
margin: 0 0 1rem 0;
font-size: 1.5rem;
}
.card p {
margin: 0;
font-size: 1.25rem;
line-height: 1.5;
}
.logo {
height: 1em;
margin-left: 0.5rem;
}
@media (max-width: 600px) {
.grid {
width: 100%;
flex-direction: column;
}
}
@media (prefers-color-scheme: dark) {
.card,
.footer {
border-color: #222;
}
.code {
background: #111;
}
.logo img {
filter: invert(1);
}
}

26
styles/globals.css Normal file
View file

@ -0,0 +1,26 @@
html,
body {
padding: 0;
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
}
a {
color: inherit;
text-decoration: none;
}
* {
box-sizing: border-box;
}
@media (prefers-color-scheme: dark) {
html {
color-scheme: dark;
}
body {
color: white;
background: black;
}
}

View file

@ -1,16 +1,21 @@
{
"compilerOptions": {
"allowSyntheticDefaultImports": true,
"target": "es6",
"lib": ["dom", "dom.iterable", "esnext"],
"allowJs": true,
"skipLibCheck": true,
"downlevelIteration": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"noEmit": true,
"esModuleInterop": true,
"target": "ESNext",
"module": "ESNext",
"module": "esnext",
"moduleResolution": "node",
"jsxImportSource": "solid-js",
"resolveJsonModule": true,
"isolatedModules": true,
"jsx": "preserve",
"types": ["vite/client"],
"baseUrl": "./",
"paths": {
"~/*": ["./src/*"]
}
}
"incremental": true
},
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
"exclude": ["node_modules"]
}