The application will show an input box at the top of the screen, which is used to type the title of the spreadsheet. Below the title, a table is shown which contains all fields of the spreadsheet. When the user clicks on a field, a popup is created which allows the user to change the content of that field. If the field contains errors, these errors are shown in the popup:
We will use React to create the view of our application. With Stateless Functional Components, we can write pure functions that render the state.
In lib/client/sheet.tsx, we will import React and functions and types that we created before:
import * as React from "react";
import { Dispatch } from "../model/store";
import { Expression, expressionToString, failureText } from "../model/expression"
import { State } from "../model/state";
import { Sheet, Field, Result, ResultField, columns, rows, parseField, fieldToString } from "../model/sheet";
import { update...