log screen

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",

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"

src/features/machines/components/MachineLog.js

@@ -1,48 +1,46 @@
-import React from "react";
+import React, { useState } from "react";
-import {
+import { Typography } from "@material-ui/core";
-  Table,
+import { Box, Button } from "@material-ui/core";
-  TableBody,
+import { LazyLog, ScrollFollow } from "react-lazylog";
-  TableCell,
-  TableHead,
-  TableRow,
-  Typography
-} from "@material-ui/core";
-import Box from "@material-ui/core/Box";
 
 const MachineLog = () => {
-  const history = [
+  const [logs, setLogs] = useState(["Welcome..."]);
-    { date: "2020-01-05", customerId: "11091700", amount: 3 },
+  const addLog = text => {
-    { date: "2020-01-02", customerId: "Anonymous", amount: 1 }
+    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">
+      <div style={{ height: 200 }}>
-        <TableHead>
+        <ScrollFollow
-          <TableRow>
+          startFollowing={true}
-            <TableCell>Date</TableCell>
+          render={({ follow, onScroll }) => (
-            <TableCell>Customer</TableCell>
+            <LazyLog
-            <TableCell align="right">Amount</TableCell>
+              extraLines={1}
-            <TableCell align="right">Total price ($)</TableCell>
+              enableSearch
-          </TableRow>
+              text={logs.join("\n")}
-        </TableHead>
+              caseInsensitive
-        <TableBody>
+              follow={follow}
-          {history.map(historyRow => (
+              onScroll={onScroll}
-            <TableRow key={historyRow.date}>
+            />
-              <TableCell component="th" scope="row">
+          )}
-                {historyRow.date}
+        />
-              </TableCell>
+      </div>
-              <TableCell>{historyRow.customerId}</TableCell>
+      <Button variant="contained" color="primary" onClick={randomLog}>
-              <TableCell align="right">{historyRow.amount}</TableCell>
+        Add
-              <TableCell align="right">
+      </Button>
-                {Math.round(historyRow.amount * 5 * 100) / 100}
-              </TableCell>
-            </TableRow>
-          ))}
-        </TableBody>
-      </Table>
     </Box>
   );
 };