From 7b01d3d10281fb9bcb76dac0152c98a306520099 Mon Sep 17 00:00:00 2001 From: Tudor Stanciu 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 ( - History + Logs - - - - Date - Customer - Amount - Total price ($) - - - - {history.map(historyRow => ( - - - {historyRow.date} - - {historyRow.customerId} - {historyRow.amount} - - {Math.round(historyRow.amount * 5 * 100) / 100} - - - ))} - -
+
+ ( + + )} + /> +
+
); };