UPDATE: Adds web app (#79)

Things missing:

* Browse mode
* Front end tests
* Storybook
This commit is contained in:
Nicolás Hatcher Andrés
2024-08-18 11:44:16 +02:00
committed by GitHub
parent 083548608e
commit dc23a7f29c
89 changed files with 11245 additions and 364 deletions

59
webapp/src/App.tsx Normal file
View File

@@ -0,0 +1,59 @@
import "./App.css";
import Workbook from "./components/workbook";
import "./i18n";
import styled from "@emotion/styled";
import init, { Model } from "@ironcalc/wasm";
import { useEffect, useState } from "react";
import { WorkbookState } from "./components/workbookState";
function App() {
const [model, setModel] = useState<Model | null>(null);
const [workbookState, setWorkbookState] = useState<WorkbookState | null>(
null,
);
useEffect(() => {
async function start() {
await init();
const queryString = window.location.search;
const urlParams = new URLSearchParams(queryString);
const modelName = urlParams.get("model");
// If there is a model name ?model=example.ic we try to load it
// if there is not, or the loading failed we load an empty model
if (modelName) {
try {
const model_bytes = new Uint8Array(
await (await fetch(`./${modelName}`)).arrayBuffer(),
);
const _model = Model.from_bytes(model_bytes);
if (!model) setModel(_model);
} catch (e) {
const _model = new Model("en", "UTC");
if (!model) setModel(_model);
}
} else {
const _model = new Model("en", "UTC");
if (!model) setModel(_model);
}
if (!workbookState) setWorkbookState(new WorkbookState());
}
start();
}, [model, workbookState]);
if (!model || !workbookState) {
return <Loading>Loading</Loading>;
}
// We could use context for model, but the problem is that it should initialized to null.
// Passing the property down makes sure it is always defined.
return <Workbook model={model} workbookState={workbookState} />;
}
const Loading = styled("div")`
height: 100%;
display: flex;
align-items: center;
justify-content: center;
font-size: 36px;
`;
export default App;