first commit

package.json

@@ -3,17 +3,20 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@material-ui/core": "^4.11.3",
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^11.1.0",
     "@testing-library/user-event": "^12.1.10",
+    "lodash": "^4.17.21",
+    "lodash.debounce": "^4.0.8",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-scripts": "4.0.3",
     "web-vitals": "^1.0.1"
   },
   "scripts": {
     "start": "react-scripts start",
-    "build": "react-scripts build",
+    "build": "tsc",
     "test": "react-scripts test",
     "eject": "react-scripts eject"
   },
@@ -34,5 +37,12 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "@types/lodash": "^4.14.168",
+    "@types/lodash.debounce": "^4.0.6",
+    "@types/react": "^17.0.3",
+    "@types/react-dom": "^17.0.3",
+    "typescript": "^4.2.3"
   }
 }

src/App.tsx

@@ -0,0 +1,29 @@
+import { Fragment, useState } from "react";
+import { Container, Grid, CssBaseline, Paper, Box } from "@material-ui/core";
+
+import UserInput from "./UserInput";
+import DbLike from "./DbLike";
+
+function App() {
+	const [savedValue, setSavedValue] = useState("");
+	return (
+		<Fragment>
+			<CssBaseline />
+			<Container>
+				<Box height="50px" />
+				<Paper square>
+					<Grid justify="center" container>
+						<Grid xs={12} sm={6} item>
+							<UserInput setSavedValue={setSavedValue} />
+						</Grid>
+						<Grid xs={12} sm={6} item>
+							<DbLike debouncedValue={savedValue} />
+						</Grid>
+					</Grid>
+				</Paper>
+			</Container>
+		</Fragment>
+	);
+}
+
+export default App;

src/DbLike.tsx

@@ -0,0 +1,19 @@
+import { Typography, Box } from "@material-ui/core";
+
+const DbLike = (props: { debouncedValue: string }) => {
+	return (
+		<Box
+			p={2}
+			bgcolor="primary.main"
+			display="flex"
+			flexDirection="column"
+			color="white"
+			height="100%"
+		>
+			<h2>DB like saved output</h2>
+			<Typography component="p">{props.debouncedValue}</Typography>
+		</Box>
+	);
+};
+
+export default DbLike;

src/UserInput.tsx

@@ -0,0 +1,31 @@
+import { useCallback } from "react";
+import debounce from "lodash.debounce";
+import { TextField, Box } from "@material-ui/core";
+
+const UserInput = (props: { setSavedValue: Function }) => {
+	const debouncedSave = useCallback(
+		debounce((newValue: any) => props.setSavedValue(newValue), 1000),
+		[]
+	);
+
+	const saveMessage = (e: any) => {
+		const newValue = e.target.value;
+		debouncedSave(newValue);
+	};
+
+	return (
+		<Box p={2} display="flex" flexDirection="column" height="100%">
+			<h2>User realtime input</h2>
+			<TextField
+				multiline
+				rows={4}
+				fullWidth
+				variant="outlined"
+				label="Type message here"
+				onChange={(e) => saveMessage(e)}
+			/>
+		</Box>
+	);
+};
+
+export default UserInput;

src/index.js → src/index.tsx

@@ -1,14 +1,13 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import './index.css';
-import App from './App';
-import reportWebVitals from './reportWebVitals';
+import React from "react";
+import ReactDOM from "react-dom";
+import App from "./App";
+import reportWebVitals from "./reportWebVitals";
 
 ReactDOM.render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>,
-  document.getElementById('root')
+	<React.StrictMode>
+		<App />
+	</React.StrictMode>,
+	document.getElementById("root")
 );
 
 // If you want to start measuring performance in your app, pass a function

src/react-app-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="react-scripts" />

src/types/images.d.ts

@@ -0,0 +1,2 @@
+declare module '*.jpg';
+declare module '*.jpeg';

tsconfig.json

@@ -0,0 +1,45 @@
+{
+  "compilerOptions": {
+    "outDir": "build/dist",
+    "module": "esnext",
+    "target": "es5",
+    "lib": [
+      "es6",
+      "dom"
+    ],
+    "sourceMap": true,
+    "allowJs": true,
+    "jsx": "react-jsx",
+    "moduleResolution": "node",
+    "esModuleInterop": true,
+    "rootDir": "src",
+    "noImplicitReturns": true,
+    "noImplicitThis": true,
+    "noImplicitAny": true,
+    "strictNullChecks": true,
+    "skipLibCheck": true,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "noFallthroughCasesInSwitch": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "typeRoots" : ["node_modules/@types", "src/types"],
+  },
+  "exclude": [
+    "node_modules",
+    "build",
+    "scripts",
+    "acceptance-tests",
+    "webpack",
+    "jest",
+    "src/setupTests.ts"
+  ],
+  "types": [
+    "typePatches"
+  ],
+  "include": [
+    "src"
+  ]
+}