Merge pull request #44 from linz/convert_to_typescript

Convert to typescript

web/package.json

@@ -3,13 +3,22 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "bootstrap": "4.4.1",
-    "react": "16.12.0",
-    "react-dom": "16.12.0",
-    "react-router": "5.1.2",
-    "react-router-dom": "5.1.2",
-    "react-scripts": "3.3.0",
-    "reactstrap": "8.2.0"
+    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/react": "^13.4.0",
+    "@testing-library/user-event": "^13.5.0",
+    "@types/jest": "^27.5.2",
+    "@types/node": "^16.11.66",
+    "@types/react": "^18.0.21",
+    "@types/react-dom": "^18.0.6",
+    "bootstrap": "5.2.2",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-router": "6.4.2",
+    "react-router-dom": "6.4.2",
+    "react-scripts": "5.0.1",
+    "reactstrap": "9.1.4",
+    "typescript": "^4.8.4",
+    "web-vitals": "^2.1.4"
   },
   "scripts": {
     "start": "react-scripts start",
@@ -28,6 +37,8 @@
   ],
   "proxy": "http://localhost:8081",
   "devDependencies": {
-    "@playwright/test": "1.16.3"
+    "@playwright/test": "1.16.3",
+    "@types/react-router-dom": "5.3.3",
+    "@types/reactstrap": "8.7.2"
   }
 }

web/src/App.css

@@ -1,33 +1,33 @@
 .App {
-  text-align: center;
+    text-align: center;
 }
 
 .App-logo {
-  animation: App-logo-spin infinite 20s linear;
-  height: 40vmin;
-  pointer-events: none;
+    animation: App-logo-spin infinite 20s linear;
+    height: 40vmin;
+    pointer-events: none;
 }
 
 .App-header {
-  background-color: #282c34;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
+    background-color: #282c34;
+    min-height: 100vh;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    font-size: calc(10px + 2vmin);
+    color: white;
 }
 
 .App-link {
-  color: #61dafb;
+    color: #61dafb;
 }
 
 @keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
+    from {
+        transform: rotate(0deg);
+    }
+    to {
+        transform: rotate(360deg);
+    }
 }

web/src/App.test.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+import {render, screen} from '@testing-library/react';
+import App from './App';
+
+test('renders landing page', () => {
+    render(<App/>);
+    const landingPageText = screen.getByText(/Welcome to LandOnLite/i);
+    expect(landingPageText).toBeInTheDocument();
+});

web/src/App.tsx

@@ -0,0 +1,52 @@
+import React from "react";
+import {BrowserRouter, Link, Route, Routes} from "react-router-dom";
+import TitleSearch from "./TitleSearch";
+import {TitlePage} from "./components/TitlePage";
+
+
+function App() {
+    return (
+        <div style={{margin: "15px"}}>
+            <BrowserRouter>
+                <Routes>
+                    <Route path="/" element={<Home/>}/>
+                    <Route path="/titles/:titleNo" element={<TitlePageWrapper/>}/>
+                </Routes>
+            </BrowserRouter>
+        </div>
+    );
+}
+
+export function Home() {
+    return (
+        <div style={{position: "relative"}}>
+            <div style={{
+                position: "fixed",
+                top: "40%",
+                left: "50%",
+                transform: "translate(-50%, -50%)",
+                border: "1px solid #dee2e6",
+                padding: "50px"
+            }}>
+                <h3>Welcome to LandOnLite</h3>
+                <p>You can enter a title number (e.g. "1") to view it.</p>
+                <TitleSearch/>
+            </div>
+        </div>
+    );
+}
+
+export function TitlePageWrapper() {
+    return (
+        <div>
+            <div>
+                <Link style={{marginRight: "10px"}} to="/">&lt; Home</Link>
+                <TitleSearch/>
+            </div>
+            <hr/>
+            <TitlePage/>
+        </div>
+    );
+}
+
+export default App;

web/src/TitleSearch.tsx

@@ -0,0 +1,30 @@
+import React, {useState} from 'react';
+import {Button, Col, Form, Input, Row} from "reactstrap";
+import {useNavigate} from "react-router";
+
+export default function TitleSearch() {
+
+    const [value, setValue] = useState('')
+    const navigate = useNavigate()
+
+    function handleChange(e: any) {
+        setValue(e.target.value)
+    }
+
+    function handleSubmit() {
+        navigate(`/titles/${value}`);
+    }
+
+    return (
+        <div style={{display: "inline-block"}}>
+            <Form onSubmit={handleSubmit}>
+                <Row className="row-cols-lg-auto g-3 align-items-center">
+                    <Col><Input type="text" value={value} onChange={handleChange}
+                                placeholder="Enter a title number"/></Col>
+                    <Col><Button color="primary" type="submit" value="Submit">Go</Button></Col>
+                </Row>
+
+            </Form>
+        </div>
+    );
+}

web/src/components/TitlePage.test.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+import {render, screen} from '@testing-library/react';
+import {TitlePage} from "./TitlePage";
+
+test('renders landing page', () => {
+    render(<TitlePage/>);
+    const titleText = screen.getByText(/Title #/i);
+    expect(titleText).toBeInTheDocument();
+});

web/src/components/TitlePage.js → web/src/components/TitlePage.tsx

@@ -1,28 +1,28 @@
 import React, {useEffect, useState} from "react";
-import {Button, Card, CardBody, Form, Input, Table} from "reactstrap";
+import {Button, Card, CardBody, Col, Form, Input, Row, Table} from "reactstrap";
 import {useParams} from "react-router";
 
 export function TitlePage() {
 
-    let { titleNo } = useParams();
-    const [data, setData] = useState(undefined)
+    let {titleNo} = useParams();
+    const [data, setData] = useState<any>(undefined)
     const [ownerChangeValue, setOwnerChangeValue] = useState("")
 
-    useEffect( ()=>{
+    useEffect(() => {
         loadTitle();
     }, [])
 
-    useEffect(() =>{
-        if(data && String(data.id) !== String(titleNo)) {
+    useEffect(() => {
+        if (data && String(data.id) !== String(titleNo)) {
             loadTitle();
         }
     })
 
-    function ownerNameHandleChange(event) {
+    function ownerNameHandleChange(event: any) {
         setOwnerChangeValue(event.target.value)
     }
 
-    async function ownerNameHandleSubmit(event) {
+    async function ownerNameHandleSubmit(event: any) {
         event.preventDefault();
 
         const res = await fetch(`/api/titles/${data.id}`,
@@ -32,7 +32,8 @@ export function TitlePage() {
                     "Content-Type": "application/json",
 
                 },
-                body: JSON.stringify({ownerName: ownerChangeValue}),});
+                body: JSON.stringify({ownerName: ownerChangeValue}),
+            });
         setData(await res.json())
         setOwnerChangeValue('')
 
@@ -70,10 +71,13 @@ export function TitlePage() {
                         <h4>Change Owner</h4>
                         <p>As a registered conveyancing lawyer, you may record a change of ownership of this title.</p>
                         <Form inline onSubmit={ownerNameHandleSubmit}>
-                            <Input type="text" value={ownerChangeValue} onChange={ownerNameHandleChange}
-                                   placeholder="Enter the new owner name" style={{width: "400px"}}/>
-                            &nbsp;
-                            <Button color="primary" type="submit" value="Submit">Save</Button>
+                            <Row className="row-cols-lg-auto g-3 align-items-center">
+                                <Col>
+                                    <Input type="text" value={ownerChangeValue} onChange={ownerNameHandleChange}
+                                           placeholder="Enter the new owner name" style={{width: "400px"}}/>
+                                </Col>
+                                <Col><Button color="primary" type="submit" value="Submit">Save</Button></Col>
+                            </Row>
                         </Form>
                     </CardBody>
                 </Card>

web/src/index.css

@@ -1,14 +1,14 @@
 body {
-  margin: 0;
-  padding: 0;
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
+    margin: 0;
+    padding: 0;
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
     "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
     sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
 }
 
 code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
+    font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
     monospace;
 }