From 7b01d3d10281fb9bcb76dac0152c98a306520099 Mon Sep 17 00:00:00 2001
From: Tudor Stanciu <tudor.stanciu94@gmail.com>
Date: Sat, 17 Apr 2021 17:33:29 +0300
Subject: [PATCH] log screen

---
 package-lock.json                             | 82 +++++++++++++++++++
 package.json                                  |  1 +
 .../machines/components/MachineLog.js         | 76 +++++++++--------
 3 files changed, 120 insertions(+), 39 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 43f90a0..f601396 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1843,6 +1843,14 @@
         "react-is": "^16.8.0 || ^17.0.0"
       }
     },
+    "@mattiasbuelens/web-streams-polyfill": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/@mattiasbuelens/web-streams-polyfill/-/web-streams-polyfill-0.2.1.tgz",
+      "integrity": "sha512-oKuFCQFa3W7Hj7zKn0+4ypI8JFm4ZKIoncwAC6wd5WwFW2sL7O1hpPoJdSWpynQ4DJ4lQ6MvFoVDmCLilonDFg==",
+      "requires": {
+        "@types/whatwg-streams": "^0.0.7"
+      }
+    },
     "@nodelib/fs.scandir": {
       "version": "2.1.3",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.3.tgz",
@@ -2499,6 +2507,11 @@
         }
       }
     },
+    "@types/whatwg-streams": {
+      "version": "0.0.7",
+      "resolved": "https://registry.npmjs.org/@types/whatwg-streams/-/whatwg-streams-0.0.7.tgz",
+      "integrity": "sha512-6sDiSEP6DWcY2ZolsJ2s39ZmsoGQ7KVwBDI3sESQsEm9P2dHTcqnDIHRZFRNtLCzWp7hCFGqYbw5GyfpQnJ01A=="
+    },
     "@types/yargs": {
       "version": "15.0.11",
       "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-15.0.11.tgz",
@@ -6541,6 +6554,11 @@
         "bser": "2.1.1"
       }
     },
+    "fetch-readablestream": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/fetch-readablestream/-/fetch-readablestream-0.2.0.tgz",
+      "integrity": "sha512-qu4mXWf4wus4idBIN/kVH+XSer8IZ9CwHP+Pd7DL7TuKNC1hP7ykon4kkBjwJF3EMX2WsFp4hH7gU7CyL7ucXw=="
+    },
     "figgy-pudding": {
       "version": "3.5.2",
       "resolved": "https://registry.npmjs.org/figgy-pudding/-/figgy-pudding-3.5.2.tgz",
@@ -7639,6 +7657,11 @@
       "resolved": "https://registry.npmjs.org/immer/-/immer-7.0.9.tgz",
       "integrity": "sha512-Vs/gxoM4DqNAYR7pugIxi0Xc8XAun/uy7AQu4fLLqaTBHxjOP9pJ266Q9MWA/ly4z6rAFZbvViOtihxUZ7O28A=="
     },
+    "immutable": {
+      "version": "3.8.2",
+      "resolved": "https://registry.npmjs.org/immutable/-/immutable-3.8.2.tgz",
+      "integrity": "sha1-wkOZUUVbs5kT2vKBN28VMOEErfM="
+    },
     "import-cwd": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/import-cwd/-/import-cwd-2.1.0.tgz",
@@ -10362,6 +10385,11 @@
         "through2": "^2.0.0"
       }
     },
+    "mitt": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/mitt/-/mitt-1.2.0.tgz",
+      "integrity": "sha512-r6lj77KlwqLhIUku9UWYes7KJtsczvolZkzp8hbaDPPaE24OmWl5s539Mytlj22siEQKosZ26qCBgda2PKwoJw=="
+    },
     "mixin-deep": {
       "version": "1.3.2",
       "resolved": "https://registry.npmjs.org/mixin-deep/-/mixin-deep-1.3.2.tgz",
@@ -12686,6 +12714,34 @@
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
       "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
     },
+    "react-lazylog": {
+      "version": "4.5.3",
+      "resolved": "https://registry.npmjs.org/react-lazylog/-/react-lazylog-4.5.3.tgz",
+      "integrity": "sha512-lyov32A/4BqihgXgtNXTHCajXSXkYHPlIEmV8RbYjHIMxCFSnmtdg4kDCI3vATz7dURtiFTvrw5yonHnrS+NNg==",
+      "requires": {
+        "@mattiasbuelens/web-streams-polyfill": "^0.2.0",
+        "fetch-readablestream": "^0.2.0",
+        "immutable": "^3.8.2",
+        "mitt": "^1.1.2",
+        "prop-types": "^15.6.1",
+        "react-string-replace": "^0.4.1",
+        "react-virtualized": "^9.21.0",
+        "text-encoding-utf-8": "^1.0.1",
+        "whatwg-fetch": "^2.0.4"
+      },
+      "dependencies": {
+        "whatwg-fetch": {
+          "version": "2.0.4",
+          "resolved": "https://registry.npmjs.org/whatwg-fetch/-/whatwg-fetch-2.0.4.tgz",
+          "integrity": "sha512-dcQ1GWpOD/eEQ97k66aiEVpNnapVj90/+R+SXTPYGHpYBBypfKJEQjLrvMZ7YXbKm21gXd4NcuxUTjiv1YtLng=="
+        }
+      }
+    },
+    "react-lifecycles-compat": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
+      "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA=="
+    },
     "react-refresh": {
       "version": "0.8.3",
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.8.3.tgz",
@@ -12803,6 +12859,14 @@
         "workbox-webpack-plugin": "5.1.4"
       }
     },
+    "react-string-replace": {
+      "version": "0.4.4",
+      "resolved": "https://registry.npmjs.org/react-string-replace/-/react-string-replace-0.4.4.tgz",
+      "integrity": "sha512-FAMkhxmDpCsGTwTZg7p/2v+/GTmxAp73so3fbSvlAcBBX36ujiGRNEaM/1u+jiYQrArhns+7eE92g2pi5E5FUA==",
+      "requires": {
+        "lodash": "^4.17.4"
+      }
+    },
     "react-toastify": {
       "version": "6.2.0",
       "resolved": "https://registry.npmjs.org/react-toastify/-/react-toastify-6.2.0.tgz",
@@ -12824,6 +12888,19 @@
         "prop-types": "^15.6.2"
       }
     },
+    "react-virtualized": {
+      "version": "9.22.3",
+      "resolved": "https://registry.npmjs.org/react-virtualized/-/react-virtualized-9.22.3.tgz",
+      "integrity": "sha512-MKovKMxWTcwPSxE1kK1HcheQTWfuCxAuBoSTf2gwyMM21NdX/PXUhnoP8Uc5dRKd+nKm8v41R36OellhdCpkrw==",
+      "requires": {
+        "@babel/runtime": "^7.7.2",
+        "clsx": "^1.0.4",
+        "dom-helpers": "^5.1.3",
+        "loose-envify": "^1.4.0",
+        "prop-types": "^15.7.2",
+        "react-lifecycles-compat": "^3.0.4"
+      }
+    },
     "read-pkg": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-2.0.0.tgz",
@@ -14830,6 +14907,11 @@
         "minimatch": "^3.0.4"
       }
     },
+    "text-encoding-utf-8": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/text-encoding-utf-8/-/text-encoding-utf-8-1.0.2.tgz",
+      "integrity": "sha512-8bw4MY9WjdsD2aMtO0OzOCY3pXGYNx2d2FfHRVUKkiCPDWjKuOlhLVASS+pD7VkLTVjW268LYJHwsnPFlBpbAg=="
+    },
     "text-table": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz",
diff --git a/package.json b/package.json
index c6f932a..0a28af7 100644
--- a/package.json
+++ b/package.json
@@ -17,6 +17,7 @@
     "react-dom": "^17.0.1",
     "react-flags": "^0.1.18",
     "react-i18next": "^11.4.0",
+    "react-lazylog": "^4.5.3",
     "react-router-dom": "^5.2.0",
     "react-scripts": "4.0.1",
     "react-toastify": "^6.2.0"
diff --git a/src/features/machines/components/MachineLog.js b/src/features/machines/components/MachineLog.js
index 773a871..2400fd8 100644
--- a/src/features/machines/components/MachineLog.js
+++ b/src/features/machines/components/MachineLog.js
@@ -1,48 +1,46 @@
-import React from "react";
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableRow,
-  Typography
-} from "@material-ui/core";
-import Box from "@material-ui/core/Box";
+import React, { useState } from "react";
+import { Typography } from "@material-ui/core";
+import { Box, Button } from "@material-ui/core";
+import { LazyLog, ScrollFollow } from "react-lazylog";
 
 const MachineLog = () => {
-  const history = [
-    { date: "2020-01-05", customerId: "11091700", amount: 3 },
-    { date: "2020-01-02", customerId: "Anonymous", amount: 1 }
-  ];
+  const [logs, setLogs] = useState(["Welcome..."]);
+  const addLog = text => {
+    setLogs(prev => [...prev, text]);
+  };
+
+  const randomLog = () => {
+    addLog(
+      "Text messaging, or texting, is the act of composing and sending electronic messages"
+    );
+    addLog(
+      "The term originally referred to messages sent using the Short Message Service (SMS). "
+    );
+  };
+
   return (
     <Box margin={1}>
       <Typography variant="h6" gutterBottom component="div">
-        History
+        Logs
       </Typography>
-      <Table size="small" aria-label="purchases">
-        <TableHead>
-          <TableRow>
-            <TableCell>Date</TableCell>
-            <TableCell>Customer</TableCell>
-            <TableCell align="right">Amount</TableCell>
-            <TableCell align="right">Total price ($)</TableCell>
-          </TableRow>
-        </TableHead>
-        <TableBody>
-          {history.map(historyRow => (
-            <TableRow key={historyRow.date}>
-              <TableCell component="th" scope="row">
-                {historyRow.date}
-              </TableCell>
-              <TableCell>{historyRow.customerId}</TableCell>
-              <TableCell align="right">{historyRow.amount}</TableCell>
-              <TableCell align="right">
-                {Math.round(historyRow.amount * 5 * 100) / 100}
-              </TableCell>
-            </TableRow>
-          ))}
-        </TableBody>
-      </Table>
+      <div style={{ height: 200 }}>
+        <ScrollFollow
+          startFollowing={true}
+          render={({ follow, onScroll }) => (
+            <LazyLog
+              extraLines={1}
+              enableSearch
+              text={logs.join("\n")}
+              caseInsensitive
+              follow={follow}
+              onScroll={onScroll}
+            />
+          )}
+        />
+      </div>
+      <Button variant="contained" color="primary" onClick={randomLog}>
+        Add
+      </Button>
     </Box>
   );
 };