export type JournalRow = Readonly<{ debitItem: string, debitValue: number creditItem: string, creditValue: number, }> export type JournalData = Readonly<JournalRow[]>

type RowProps = Readonly<{ data: JournalRow update: (newData: JournalRow) => void }> export const Row: React.VFC<RowProps> = () => null; //一旦中身無いので、nullを返しておく

<div> <select>{/* ここに課目が並ぶ */}</select> <input type='number' /> <select>{/* ここに課目が並ぶ */}</select> <input type='number' /> </div>

import { useState } from "react" import { Row } from "./Row"; import { JournalData } from "./types/journal" export const Journal = () => { const [data, setData] = useState<JournalData>([]); return <>{ data.map((d) => <Row data={d} update={() => {/* 一旦空の関数を渡してごまかす */}} />) }</> }

const createInitialData = () => ({ debitItem: '', debitValue: 0, creditItem: '', creditValue: 0, });

- const [data, setData] = useState<JournalData>([]); + const [data, setData] = useState<JournalData>([createInitialData()]);

<div className="App"> - <header className="App-header"> - <img src={logo} className="App-logo" alt="logo" /> - <p> - Edit <code>src/App.tsx</code> and save to reload. - </p> - <a - className="App-link" - href="https://reactjs.org" - target="_blank" - rel="noopener noreferrer" - > - Learn React - </a> - </header> + <Journal /> </div>

export const Journal = () => { const [data, setData] = useState<JournalData>([createInitialData()]); + const addRow = () => { + setData((prev) => [...prev, createInitialData()]) + } + return <>{ data.map((d) => <Row data={d} update={() => {/* 一旦空の関数を渡してごまかす */}} />) - }</> + } + <button onClick={addRow}>行を追加</button> + </> }

const createInitialData = () => ({ + id: crypto.randomUUID(), debitItem: '', debitValue: 0, creditItem: '',

declare interface Crypto { randomUUID: () => string; }

import { screen, render, fireEvent } from "@testing-library/react"; import {Journal} from "./Journal"; test('「行を追加」ボタンをクリックすると1行増える', () => { render(<Journal />); const button = screen.getByText('行を追加'); fireEvent.click(button); expect(screen.getAllByRole('row').length).toBe(2); })

- <div> + <div role="row"> <select>{/* ここに課目が並ぶ */}</select>

global.crypto = require('crypto');

jest.mock("./Row", () => ({ Row: () => <div role="row"></div> }));

["現金", "当座預金", "普通預金", "定期預金", "その他の預金", "受取手形", "売掛金", "有価証券", "商品"]

useEffect(() => { subscribe(onUpdate); return () => unsubscribe() }, [onUpdate])

+type ItemsAPI = Readonly<string[]> + type RowProps = Readonly<{ data: JournalRow update: (newData: JournalRow) => void }> export const Row: React.VFC<RowProps> = () => { + const [items, setItems] = useState<ItemsAPI | undefined>(undefined); + + useEffect(() => { + fetch('/api/items.json') + .then((res) => res.json()) + .then((json: ItemsAPI) => { + setItems(json); + }); + }, []); return <div role="row"> - <select>{/* ここに課目が並ぶ */}</select> + <select>{ + items?.map(item => <option value={item}>{item}</option>) + }</select> <input type='number' /> - <select>{/* ここに課目が並ぶ */}</select> + <select>{ + items?.map(item => <option value={item}>{item}</option>) + }</select> <input type='number' /> </div> }

export const Journal = () => { - const [data, setData] = useState<JournalData>([createInitialData()]); - - const addRow = () => { - setData((prev) => [...prev, createInitialData()]) - } + const {data, updateDataById, addRow} = useJournalData(); return <>{ - data.map((d) => <Row key={d.id} data={d} update={() => {/* 一旦空の関数を渡してごまかす */}} />) + data.map((d) => <Row key={d.id} data={d} update={updateDataById} />) } <button onClick={addRow}>行を追加</button> </>

import { JournalData, JournalRow } from "./types/journal" export const useJournalData = (): Readonly<{ data: JournalData, updateDataById: (id: string, newData: Partial<JournalRow>) => void; addRow: () => void; }> => { return { data: [], updateDataById: (id: string, newData: Partial<JournalRow>) => {}, addRow: () => {} } }

import { renderHook } from '@testing-library/react-hooks' import { act } from 'react-dom/test-utils'; import { useJournalData } from './journal-data'; test('updateDateByIdで特定のデータを更新できる', () => { const {result} = renderHook(useJournalData); act(() => { result.current.addRow(); result.current.addRow(); result.current.addRow(); result.current.addRow(); }) const id = result.current.data[2].id; act(() => { result.current.updateDataById(id, {debitValue: 100}); }); expect(result.current.data[2]).toEqual( expect.objectContaining({debitValue: 100}) ) act(() => { result.current.updateDataById(id, {debitItem: 'test',debitValue: 200}); }) expect(result.current.data[2]).toEqual( expect.objectContaining({debitItem: 'test',debitValue: 200}) ) })

+ const [data, setData] = useState<JournalData>([createInitialData()]); + return { - data: [], - updateDataById: (id: string, newData: Partial<JournalRow>) => {}, - addRow: () => {} + data, + updateDataById: (id: string, newData: Partial<JournalRow>) => { + setData(prev => prev.map((d) => d.id === id ? { ...d, ...newData } : d)) + }, + addRow: () => { setData((prev) => [...prev, createInitialData()]) } } }

- const [data, setData] = useState<JournalData>([createInitialData()]); - - const addRow = () => { - setData((prev) => [...prev, createInitialData()]) - } + const {data, updateDataById, addRow} = useJournalData(); return <>{ - data.map((d) => <Row key={d.id} data={d} update={() => {/* 一旦空の関数を渡してごまかす */}} />) + data.map((d) => { + const update = (_data: Partial<JournalRow>) => updateDataById(d.id, _data) + return <Row key={d.id} data={d} update={update} /> + }) } <button onClick={addRow}>行を追加</button>

type RowProps = Readonly<{ data: JournalRow - update: (newData: JournalRow) => void + update: (newData: Partial<JournalRow>) => void }> - export const Row: React.VFC<RowProps> = ({ }) => { + export const Row: React.VFC<RowProps> = ({ update }) => {

onChange: (event: React.SyntheticEvent<HTMLSelectElement>)

return <div role="row"> - <select>{ + <select onChange={(e: React.SyntheticEvent<HTMLSelectElement>) => update({ + debitItem: e.currentTarget.value + })}>{ items?.map(item => <option value={item}>{item}</option>) }</select> - <input type='number' /> - <select>{ + <input type='number' onChange={(e: React.SyntheticEvent<HTMLInputElement>) => update({ + debitValue: e.currentTarget.valueAsNumber + })}/> + <select onChange={(e: React.SyntheticEvent<HTMLSelectElement>) => update({ + creditItem: e.currentTarget.value + })}>{ items?.map(item => <option value={item}>{item}</option>) }</select> - <input type='number' /> + <input type='number' onChange={(e: React.SyntheticEvent<HTMLInputElement>) => update({ + creditValue: e.currentTarget.valueAsNumber + })}/> </div>

type SumProps = Readonly<{ data: JournalData }> export const Sum: React.VFC<SumProps> = ({data}) => { const debit = data.reduce((sum, d) => sum + d.debitValue, 0); const credit = data.reduce((sum, d) => sum + d.creditValue, 0); return <div role="row"> 借方の合計 {debit}円<br/> 貸方の合計 {credit}円<br/> { debit !== credit ? <span style={{color: 'red'}}> {debit > credit ? "貸方" : "借方"}の不足額: {Math.abs(debit - credit)}円 </span> : null } </div> }

const {data, updateDataById, addRow} = useJournalData(); + useEffect(() => { + console.log('addRow is updated') + }, [addRow]); + return <>{

+ + const addRow = useCallback(() => { + setData((prev) => [...prev, createInitialData()]) + }, []); return { data, updateDataById: (id: string, newData: Partial<JournalRow>) => { setData(prev => prev.map((d) => d.id === id ? { ...d, ...newData } : d)) }, - addRow: () => { setData((prev) => [...prev, createInitialData()]) } + addRow }

// 実際にはもう少し色々やることになると思うので、イメージ図みたいな感じです function connect(usePresenter, View) { const Component: React.FC = (props) => { const propsForView = usePresenter(props); return <View {...props} /> }; return Component; }