From dc3c9cb7295a9adce962f9399aa1417382f62549 Mon Sep 17 00:00:00 2001 From: allthesignals Date: Tue, 23 Jun 2020 15:11:15 -0400 Subject: [PATCH 1/6] Create DeliveryTable component; Add to DeliveryNeeded Includes changes to the grid system so that the table and explainer text can show in the same view. --- package-lock.json | 8 ++ package.json | 1 + src/webapp/DEVELOPING.md | 14 +++- src/webapp/components/DeliveryTable.js | 33 ++++++++ src/webapp/pages/DeliveryNeeded.js | 100 ++++++++++++++----------- 5 files changed, 112 insertions(+), 44 deletions(-) create mode 100644 src/webapp/components/DeliveryTable.js diff --git a/package-lock.json b/package-lock.json index b8229e86..71d3c80f 100644 --- a/package-lock.json +++ b/package-lock.json @@ -18136,6 +18136,14 @@ "resolved": "https://registry.npmjs.org/ts-pnp/-/ts-pnp-1.1.6.tgz", "integrity": "sha512-CrG5GqAAzMT7144Cl+UIFP7mz/iIhiy+xQ6GGcnjTezhALT02uPMRw7tgDSESgB5MsfKt55+GPWw4ir1kVtMIQ==" }, + "ts-react-json-table": { + "version": "0.1.2", + "resolved": "https://registry.npmjs.org/ts-react-json-table/-/ts-react-json-table-0.1.2.tgz", + "integrity": "sha512-R04BcrlQ8W0526Riq6HvdNRBgZgAMgQFUcpGXymM4PgC+YWW64gfnTKitS8fimOv+rEbxM0mwvaeohwoSfccHg==", + "requires": { + "react": "^16.8.6" + } + }, "tslib": { "version": "1.11.1", "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.11.1.tgz", diff --git a/package.json b/package.json index 4044a4bf..201f1b4a 100644 --- a/package.json +++ b/package.json @@ -78,6 +78,7 @@ "react-i18next": "11.3.5", "react-mapbox-gl": "^4.8.6", "react-scripts": "^3.4.1", + "ts-react-json-table": "^0.1.2", "twilio": "3.42.1" }, "devDependencies": { diff --git a/src/webapp/DEVELOPING.md b/src/webapp/DEVELOPING.md index bc33f667..c88d71ad 100644 --- a/src/webapp/DEVELOPING.md +++ b/src/webapp/DEVELOPING.md @@ -2,4 +2,16 @@ Running the React app locally is easy since we use Create React App `npm run local:react` -You can see the app at `localhost:3000`. Some pages will likely require the API. See `/src/api/DEVELOPING.md` for how to spin that up locally! \ No newline at end of file +You can see the app at `localhost:3000`. Some pages will likely require the API. See `/src/api/DEVELOPING.md` for how to spin that up locally! + +## Dependencies + +It's easy to run the app, but some features require additional configuration. + +### Mapbox API Key + +Set the env variable before running the command: + +`REACT_APP_MAPBOX_ACCESS_TOKEN={your-free-trial-mapbox-token} npm run local:react` + +If you don't want to get a trial token, someone in #tech might have one. diff --git a/src/webapp/components/DeliveryTable.js b/src/webapp/components/DeliveryTable.js new file mode 100644 index 00000000..1b9807c6 --- /dev/null +++ b/src/webapp/components/DeliveryTable.js @@ -0,0 +1,33 @@ +import React from "react"; +import JsonTable from "ts-react-json-table"; + +const DeliveryTable = ({ rows }) => { + return ( + + Slack + + ); + } + } + ]} + /> + ); +}; + +export default DeliveryTable; diff --git a/src/webapp/pages/DeliveryNeeded.js b/src/webapp/pages/DeliveryNeeded.js index 7921f3df..70e97ca2 100644 --- a/src/webapp/pages/DeliveryNeeded.js +++ b/src/webapp/pages/DeliveryNeeded.js @@ -9,6 +9,8 @@ import ListItem from "@material-ui/core/ListItem"; import { useTranslation } from "react-i18next"; import sharedStylesFn from "webapp/style/sharedStyles"; import ClusterMap from "webapp/components/ClusterMap"; +import Grid from "@material-ui/core/Grid"; +import DeliveryTable from "../components/DeliveryTable"; const useStyles = makeStyles((theme) => ({ ...sharedStylesFn(theme), @@ -39,6 +41,7 @@ export default function DeliveryNeeded() { if (error) { return {`${error}`}; } + return ( @@ -55,49 +58,60 @@ export default function DeliveryNeeded() { geoJsonData={data} /> - - - {str("webapp:deliveryNeeded.mapDesc", { - defaultValue: - 'Above is a map of all open requests marked "Delivery Needed"', - })} - - - - {str("webapp:deliveryNeeded.description.dot", { - defaultValue: `Each dot represents a location with one or more requests. This - location is only representative of the cross street data. We do not - store full addresses.`, - })} - - - {str("webapp:deliveryNeeded.description.clickDot", { - defaultValue: `Click on each cluster (large circle with a number) to zoom into - individual request.`, - })} - - - {str("webapp:deliveryNeeded.description.popUp", { - defaultValue: `Click on a dot to pop up details. There is a link to the Slack post - for more details, where you can also claim the delivery.`, - })} - - - {str("webapp:deliveryNeeded.description.multipleRequests", { - defaultValue: `Some dots may represent multiple requests at the same cross-streets. - Clicking on them will display all of the requests.`, - })} - - - {str("webapp:deliveryNeeded.description.questions", { - defaultValue: `Questions or concerns? Please let us know in`, - })} - - {str("webapp:slack.techChannel")} - - - - + + + + + {str("webapp:deliveryNeeded.mapDesc", { + defaultValue: + 'Above is a map of all open requests marked "Delivery Needed"', + })} + + + + {str("webapp:deliveryNeeded.description.dot", { + defaultValue: `Each dot represents a location with one or more requests. This + location is only representative of the cross street data. We do not + store full addresses.`, + })} + + + {str("webapp:deliveryNeeded.description.clickDot", { + defaultValue: `Click on each cluster (large circle with a number) to zoom into + individual request.`, + })} + + + {str("webapp:deliveryNeeded.description.popUp", { + defaultValue: `Click on a dot to pop up details. There is a link to the Slack post + for more details, where you can also claim the delivery.`, + })} + + + {str("webapp:deliveryNeeded.description.multipleRequests", { + defaultValue: `Some dots may represent multiple requests at the same cross-streets. + Clicking on them will display all of the requests.`, + })} + + + {str("webapp:deliveryNeeded.description.questions", { + defaultValue: `Questions or concerns? Please let us know in`, + })} + + {str("webapp:slack.techChannel")} + + + + + + + + f.properties.meta)} + /> + + + ); } From 79aa9db812371341ba4b4838b72e5fa262254fa8 Mon Sep 17 00:00:00 2001 From: allthesignals Date: Tue, 23 Jun 2020 15:29:48 -0400 Subject: [PATCH 2/6] Swap out table dep for already-installed Material Replaces the ts-react-json-table dependency with material-ui, which is already installed and available. --- package-lock.json | 8 --- src/webapp/components/DeliveryTable.js | 75 +++++++++++++++++--------- 2 files changed, 50 insertions(+), 33 deletions(-) diff --git a/package-lock.json b/package-lock.json index 71d3c80f..b8229e86 100644 --- a/package-lock.json +++ b/package-lock.json @@ -18136,14 +18136,6 @@ "resolved": "https://registry.npmjs.org/ts-pnp/-/ts-pnp-1.1.6.tgz", "integrity": "sha512-CrG5GqAAzMT7144Cl+UIFP7mz/iIhiy+xQ6GGcnjTezhALT02uPMRw7tgDSESgB5MsfKt55+GPWw4ir1kVtMIQ==" }, - "ts-react-json-table": { - "version": "0.1.2", - "resolved": "https://registry.npmjs.org/ts-react-json-table/-/ts-react-json-table-0.1.2.tgz", - "integrity": "sha512-R04BcrlQ8W0526Riq6HvdNRBgZgAMgQFUcpGXymM4PgC+YWW64gfnTKitS8fimOv+rEbxM0mwvaeohwoSfccHg==", - "requires": { - "react": "^16.8.6" - } - }, "tslib": { "version": "1.11.1", "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.11.1.tgz", diff --git a/src/webapp/components/DeliveryTable.js b/src/webapp/components/DeliveryTable.js index 1b9807c6..04549db1 100644 --- a/src/webapp/components/DeliveryTable.js +++ b/src/webapp/components/DeliveryTable.js @@ -1,32 +1,57 @@ import React from "react"; -import JsonTable from "ts-react-json-table"; +import Table from "@material-ui/core/Table"; +import TableBody from "@material-ui/core/TableBody"; +import TableCell from "@material-ui/core/TableCell"; +import TableContainer from "@material-ui/core/TableContainer"; +import TableHead from "@material-ui/core/TableHead"; +import TableRow from "@material-ui/core/TableRow"; +import Paper from "@material-ui/core/Paper"; +import { makeStyles } from "@material-ui/core/styles"; + +const useStyles = makeStyles({ + container: { + maxHeight: 440 + } +}); const DeliveryTable = ({ rows }) => { + const classes = useStyles(); + return ( - - Slack - - ); - } - } - ]} - /> + + + + + Code + Cross Street #1 + Cross Street #2 + First Name + Slack Link + + + + {rows.map(row => ( + + + {row.Code} + + {row["Cross Street #1"]} + {row["Cross Street #2"]} + {row["First Name"]} + + + Slack + + + + ))} + +
+ ); }; From e76e08ad6343ed2c2ca4a02082827d80d59428d9 Mon Sep 17 00:00:00 2001 From: allthesignals Date: Sat, 18 Jul 2020 13:44:22 -0500 Subject: [PATCH 3/6] Provide timestamp data in API response --- src/api/delivery-needed/index.js | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/api/delivery-needed/index.js b/src/api/delivery-needed/index.js index d6fd8717..1bdce592 100644 --- a/src/api/delivery-needed/index.js +++ b/src/api/delivery-needed/index.js @@ -17,6 +17,8 @@ const { const makeFeature = async (r) => { let metaJSON = {}; let slackPermalink = {}; + let timestamp; + const location = await fetchCoordFromCrossStreets( ` ${r.fields[crossStreetFirst]}, @@ -42,7 +44,7 @@ const makeFeature = async (r) => { try { const channel = metaJSON.slack_channel; - const timestamp = metaJSON.slack_ts; + timestamp = metaJSON.slack_ts; slackPermalink = await slackapi.chat.getPermalink({ channel, message_ts: timestamp, @@ -69,6 +71,7 @@ const makeFeature = async (r) => { [forDrivingClusters]: Boolean(r.fields[forDrivingClusters]), [householdSize]: r.fields[householdSize], slackPermalink: slackPermalink.ok ? slackPermalink.permalink : "", + timestamp, }, }, }; From bea6f10f334feadc6ff996f3cf16e270e75f1485 Mon Sep 17 00:00:00 2001 From: allthesignals Date: Sat, 18 Jul 2020 13:58:47 -0500 Subject: [PATCH 4/6] Sort by and show epoch timestamp, descending --- src/webapp/components/DeliveryTable.js | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/src/webapp/components/DeliveryTable.js b/src/webapp/components/DeliveryTable.js index 04549db1..341c4e65 100644 --- a/src/webapp/components/DeliveryTable.js +++ b/src/webapp/components/DeliveryTable.js @@ -10,12 +10,13 @@ import { makeStyles } from "@material-ui/core/styles"; const useStyles = makeStyles({ container: { - maxHeight: 440 - } + maxHeight: 440, + }, }); const DeliveryTable = ({ rows }) => { const classes = useStyles(); + const sortedRows = rows.sort((rowA, rowB) => rowB.timestamp - rowA.timestamp); return ( @@ -27,10 +28,11 @@ const DeliveryTable = ({ rows }) => { Cross Street #2 First Name Slack Link + Timestamp - {rows.map(row => ( + {sortedRows.map((row) => ( {row.Code} @@ -47,6 +49,7 @@ const DeliveryTable = ({ rows }) => { Slack + {row.timestamp} ))} From 526fe5c0eef462470f6095a7464ad38691692f3b Mon Sep 17 00:00:00 2001 From: allthesignals Date: Sat, 18 Jul 2020 14:11:49 -0500 Subject: [PATCH 5/6] Format timestamp for readability --- package-lock.json | 130 +++++++++++++++++++++++-- src/webapp/components/DeliveryTable.js | 16 ++- 2 files changed, 134 insertions(+), 12 deletions(-) diff --git a/package-lock.json b/package-lock.json index b8229e86..0bec732c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -60,7 +60,11 @@ "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-1.2.13.tgz", "integrity": "sha512-oWb1Z6mkHIskLzEJ/XWX0srkpkTQ7vaopMQkyaEIoq0fmtFVxOthb8cCxeT+p3ynTdkk/RZwbgG4brR5BeWECw==", "dev": true, - "optional": true + "optional": true, + "requires": { + "bindings": "^1.5.0", + "nan": "^2.12.1" + } }, "glob-parent": { "version": "3.1.0", @@ -2747,8 +2751,7 @@ "@types/eslint-visitor-keys": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/@types/eslint-visitor-keys/-/eslint-visitor-keys-1.0.0.tgz", - "integrity": "sha512-OCutwjDZ4aFS6PB1UZ988C4YgwlBHJd6wCeQqaLdmadZ/7e+w79+hbMUFC1QXDNCmdyoRfAFdm0RypzwR+Qpag==", - "dev": true + "integrity": "sha512-OCutwjDZ4aFS6PB1UZ988C4YgwlBHJd6wCeQqaLdmadZ/7e+w79+hbMUFC1QXDNCmdyoRfAFdm0RypzwR+Qpag==" }, "@types/execa": { "version": "0.9.0", @@ -4457,6 +4460,15 @@ "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.0.0.tgz", "integrity": "sha512-Phlt0plgpIIBOGTT/ehfFnbNlfsDEiqmzE2KRXoX1bLIlir4X/MR+zSyBEkL05ffWgnRSf/DXv+WrUAVr93/ow==" }, + "bindings": { + "version": "1.5.0", + "resolved": "https://registry.npmjs.org/bindings/-/bindings-1.5.0.tgz", + "integrity": "sha512-p2q/t/mhvuOj/UeLlV6566GD/guowlr0hHxClI0W9m7MWYkL1F0hLo+0Aexs9HSPCtR1SXQ0TD3MMKrXZajbiQ==", + "optional": true, + "requires": { + "file-uri-to-path": "1.0.0" + } + }, "bluebird": { "version": "3.7.2", "resolved": "https://registry.npmjs.org/bluebird/-/bluebird-3.7.2.tgz", @@ -7539,7 +7551,6 @@ "version": "2.1.0", "resolved": "https://registry.npmjs.org/eslint-utils/-/eslint-utils-2.1.0.tgz", "integrity": "sha512-w94dQYoauyvlDc43XnGB8lU3Zt713vNChgt4EWwhXAP2XkBvndfxF0AgIqKOOasjPIPzj9JqgwkwbCYD0/V3Zg==", - "dev": true, "requires": { "eslint-visitor-keys": "^1.1.0" } @@ -8020,6 +8031,12 @@ "typedarray-to-buffer": "^3.1.5" } }, + "file-uri-to-path": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/file-uri-to-path/-/file-uri-to-path-1.0.0.tgz", + "integrity": "sha512-0Zt+s3L7Vf1biwWZ29aARiVYLx7iMGnEUl9x33fbB/j3jR81u/O2LbqK+Bm1CDSNDKVtJ/YjwY7TUd5SkeLQLw==", + "optional": true + }, "filesize": { "version": "6.0.1", "resolved": "https://registry.npmjs.org/filesize/-/filesize-6.0.1.tgz", @@ -10227,7 +10244,11 @@ "version": "1.2.13", "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-1.2.13.tgz", "integrity": "sha512-oWb1Z6mkHIskLzEJ/XWX0srkpkTQ7vaopMQkyaEIoq0fmtFVxOthb8cCxeT+p3ynTdkk/RZwbgG4brR5BeWECw==", - "optional": true + "optional": true, + "requires": { + "bindings": "^1.5.0", + "nan": "^2.12.1" + } } } }, @@ -11933,6 +11954,12 @@ "resolved": "https://registry.npmjs.org/mute-stream/-/mute-stream-0.0.8.tgz", "integrity": "sha512-nnbWWOkoWyUsTjKrhgD0dcz22mdkSnpYqbEjIm2nhwhuxlSkpywJmBo8h0ZqJdkp73mb90SssHkN4rsRaBAfAA==" }, + "nan": { + "version": "2.14.1", + "resolved": "https://registry.npmjs.org/nan/-/nan-2.14.1.tgz", + "integrity": "sha512-isWHgVjnFjh2x2yuJ/tj3JbwoHu3UC2dX5G/88Cm24yB6YopVgxvBObDY7n5xW6ExmFhJpSEQqFPvq9zaXc8Jw==", + "optional": true + }, "nanomatch": { "version": "1.2.13", "resolved": "https://registry.npmjs.org/nanomatch/-/nanomatch-1.2.13.tgz", @@ -14668,6 +14695,8 @@ "requires": { "@babel/core": "7.9.0", "@svgr/webpack": "4.3.3", + "@typescript-eslint/eslint-plugin": "^2.10.0", + "@typescript-eslint/parser": "^2.10.0", "babel-eslint": "10.1.0", "babel-jest": "^24.9.0", "babel-loader": "8.1.0", @@ -14793,6 +14822,73 @@ "jest-runtime": "^24.9.0" } }, + "@typescript-eslint/eslint-plugin": { + "version": "2.34.0", + "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-2.34.0.tgz", + "integrity": "sha512-4zY3Z88rEE99+CNvTbXSyovv2z9PNOVffTWD2W8QF5s2prBQtwN2zadqERcrHpcR7O/+KMI3fcTAmUUhK/iQcQ==", + "requires": { + "@typescript-eslint/experimental-utils": "2.34.0", + "functional-red-black-tree": "^1.0.1", + "regexpp": "^3.0.0", + "tsutils": "^3.17.1" + } + }, + "@typescript-eslint/experimental-utils": { + "version": "2.34.0", + "resolved": "https://registry.npmjs.org/@typescript-eslint/experimental-utils/-/experimental-utils-2.34.0.tgz", + "integrity": "sha512-eS6FTkq+wuMJ+sgtuNTtcqavWXqsflWcfBnlYhg/nS4aZ1leewkXGbvBhaapn1q6qf4M71bsR1tez5JTRMuqwA==", + "requires": { + "@types/json-schema": "^7.0.3", + "@typescript-eslint/typescript-estree": "2.34.0", + "eslint-scope": "^5.0.0", + "eslint-utils": "^2.0.0" + } + }, + "@typescript-eslint/parser": { + "version": "2.34.0", + "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-2.34.0.tgz", + "integrity": "sha512-03ilO0ucSD0EPTw2X4PntSIRFtDPWjrVq7C3/Z3VQHRC7+13YB55rcJI3Jt+YgeHbjUdJPcPa7b23rXCBokuyA==", + "requires": { + "@types/eslint-visitor-keys": "^1.0.0", + "@typescript-eslint/experimental-utils": "2.34.0", + "@typescript-eslint/typescript-estree": "2.34.0", + "eslint-visitor-keys": "^1.1.0" + } + }, + "@typescript-eslint/typescript-estree": { + "version": "2.34.0", + "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-2.34.0.tgz", + "integrity": "sha512-OMAr+nJWKdlVM9LOqCqh3pQQPwxHAN7Du8DR6dmwCrAmxtiXQnhHJ6tBNtf+cggqfo51SG/FCwnKhXCIM7hnVg==", + "requires": { + "debug": "^4.1.1", + "eslint-visitor-keys": "^1.1.0", + "glob": "^7.1.6", + "is-glob": "^4.0.1", + "lodash": "^4.17.15", + "semver": "^7.3.2", + "tsutils": "^3.17.1" + }, + "dependencies": { + "debug": { + "version": "4.1.1", + "resolved": "https://registry.npmjs.org/debug/-/debug-4.1.1.tgz", + "integrity": "sha512-pYAIzeRo8J6KPEaJ0VWOh5Pzkbw/RetuzehGM7QRRX5he4fPHx2rdKMB256ehJCkX+XRQm16eZLqLNS8RSZXZw==", + "requires": { + "ms": "^2.1.1" + } + }, + "ms": { + "version": "2.1.2", + "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz", + "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==" + }, + "semver": { + "version": "7.3.2", + "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.2.tgz", + "integrity": "sha512-OrOb32TeeambH6UrhtShmF7CRDqhL6/5XpPNp2DuRH6+9QLw/orhp72j87v8Qa1ScDkvrrBNpZcDejAirJmfXQ==" + } + } + }, "acorn": { "version": "5.7.4", "resolved": "https://registry.npmjs.org/acorn/-/acorn-5.7.4.tgz", @@ -15547,8 +15643,7 @@ "regexpp": { "version": "3.1.0", "resolved": "https://registry.npmjs.org/regexpp/-/regexpp-3.1.0.tgz", - "integrity": "sha512-ZOIzd8yVsQQA7j8GCSlPGXwg5PfmA1mrq0JP4nGhh54LaKN3xdai/vHUDu74pKwV8OxseMS65u2NImosQcSD0Q==", - "dev": true + "integrity": "sha512-ZOIzd8yVsQQA7j8GCSlPGXwg5PfmA1mrq0JP4nGhh54LaKN3xdai/vHUDu74pKwV8OxseMS65u2NImosQcSD0Q==" }, "regexpu-core": { "version": "4.7.0", @@ -18136,6 +18231,14 @@ "resolved": "https://registry.npmjs.org/ts-pnp/-/ts-pnp-1.1.6.tgz", "integrity": "sha512-CrG5GqAAzMT7144Cl+UIFP7mz/iIhiy+xQ6GGcnjTezhALT02uPMRw7tgDSESgB5MsfKt55+GPWw4ir1kVtMIQ==" }, + "ts-react-json-table": { + "version": "0.1.2", + "resolved": "https://registry.npmjs.org/ts-react-json-table/-/ts-react-json-table-0.1.2.tgz", + "integrity": "sha512-R04BcrlQ8W0526Riq6HvdNRBgZgAMgQFUcpGXymM4PgC+YWW64gfnTKitS8fimOv+rEbxM0mwvaeohwoSfccHg==", + "requires": { + "react": "^16.8.6" + } + }, "tslib": { "version": "1.11.1", "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.11.1.tgz", @@ -18150,7 +18253,6 @@ "version": "3.17.1", "resolved": "https://registry.npmjs.org/tsutils/-/tsutils-3.17.1.tgz", "integrity": "sha512-kzeQ5B8H3w60nFY2g8cJIuH7JDpsALXySGtwGJ0p2LSjLgay3NdIpqq5SoOBe46bKDW2iq25irHCr8wjomUS2g==", - "dev": true, "requires": { "tslib": "^1.8.1" } @@ -19347,7 +19449,11 @@ "version": "1.2.13", "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-1.2.13.tgz", "integrity": "sha512-oWb1Z6mkHIskLzEJ/XWX0srkpkTQ7vaopMQkyaEIoq0fmtFVxOthb8cCxeT+p3ynTdkk/RZwbgG4brR5BeWECw==", - "optional": true + "optional": true, + "requires": { + "bindings": "^1.5.0", + "nan": "^2.12.1" + } }, "glob-parent": { "version": "3.1.0", @@ -19681,7 +19787,11 @@ "version": "1.2.13", "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-1.2.13.tgz", "integrity": "sha512-oWb1Z6mkHIskLzEJ/XWX0srkpkTQ7vaopMQkyaEIoq0fmtFVxOthb8cCxeT+p3ynTdkk/RZwbgG4brR5BeWECw==", - "optional": true + "optional": true, + "requires": { + "bindings": "^1.5.0", + "nan": "^2.12.1" + } }, "get-caller-file": { "version": "1.0.3", diff --git a/src/webapp/components/DeliveryTable.js b/src/webapp/components/DeliveryTable.js index 341c4e65..8eb78904 100644 --- a/src/webapp/components/DeliveryTable.js +++ b/src/webapp/components/DeliveryTable.js @@ -16,7 +16,19 @@ const useStyles = makeStyles({ const DeliveryTable = ({ rows }) => { const classes = useStyles(); - const sortedRows = rows.sort((rowA, rowB) => rowB.timestamp - rowA.timestamp); + + // sort happens in-place + rows.sort((rowA, rowB) => rowB.timestamp - rowA.timestamp); + + // format data for presentation + const formattedRows = rows.map((row) => { + const timestamp = new Date(row.timestamp * 1000); + + return { + ...row, + timestamp: `${timestamp.toLocaleDateString()}: ${timestamp.toLocaleTimeString()}`, + }; + }); return ( @@ -32,7 +44,7 @@ const DeliveryTable = ({ rows }) => { - {sortedRows.map((row) => ( + {formattedRows.map((row) => ( {row.Code} From b02423c45d11d51e6faed958a8b47e469cb0aae9 Mon Sep 17 00:00:00 2001 From: allthesignals Date: Sat, 18 Jul 2020 14:32:05 -0500 Subject: [PATCH 6/6] Add i18 for table column names --- src/lib/strings/locales/en/webapp.json | 6 +++++- src/webapp/DEVELOPING.md | 8 ++------ src/webapp/components/DeliveryTable.js | 24 ++++++++++++++++++------ 3 files changed, 25 insertions(+), 13 deletions(-) diff --git a/src/lib/strings/locales/en/webapp.json b/src/lib/strings/locales/en/webapp.json index 0d3d3100..c030896b 100644 --- a/src/lib/strings/locales/en/webapp.json +++ b/src/lib/strings/locales/en/webapp.json @@ -29,7 +29,11 @@ "crossStreetSecond": "Cross Street #2", "neighborhoodLabel": "Neighborhood", "neighborhoodError": "If both this and zone are unavailable, double check the map: https://bit.ly/2UrZPkA", - "zone": "{{neighborhood}} Volunteer Zone" + "zone": "{{neighborhood}} Volunteer Zone", + "firstName": "First Name", + "slackLink": "Slack Link", + "timestamp": "Timestamp", + "code": "Code" }, "geoError": { "message": "Error loading. Please try again. If it fails again, let us know in" diff --git a/src/webapp/DEVELOPING.md b/src/webapp/DEVELOPING.md index c88d71ad..d50d3e07 100644 --- a/src/webapp/DEVELOPING.md +++ b/src/webapp/DEVELOPING.md @@ -8,10 +8,6 @@ You can see the app at `localhost:3000`. Some pages will likely require the API. It's easy to run the app, but some features require additional configuration. -### Mapbox API Key +## Environment -Set the env variable before running the command: - -`REACT_APP_MAPBOX_ACCESS_TOKEN={your-free-trial-mapbox-token} npm run local:react` - -If you don't want to get a trial token, someone in #tech might have one. +Starting the app requires a few environment variables. Folks can reach out for access to those variables in #wg_tech. diff --git a/src/webapp/components/DeliveryTable.js b/src/webapp/components/DeliveryTable.js index 8eb78904..026c78a7 100644 --- a/src/webapp/components/DeliveryTable.js +++ b/src/webapp/components/DeliveryTable.js @@ -7,6 +7,7 @@ import TableHead from "@material-ui/core/TableHead"; import TableRow from "@material-ui/core/TableRow"; import Paper from "@material-ui/core/Paper"; import { makeStyles } from "@material-ui/core/styles"; +import { useTranslation } from "react-i18next"; const useStyles = makeStyles({ container: { @@ -15,6 +16,7 @@ const useStyles = makeStyles({ }); const DeliveryTable = ({ rows }) => { + const { t: str } = useTranslation(); const classes = useStyles(); // sort happens in-place @@ -35,12 +37,22 @@ const DeliveryTable = ({ rows }) => { - Code - Cross Street #1 - Cross Street #2 - First Name - Slack Link - Timestamp + {str("webapp:zoneFinder.label.code")} + + {str("webapp:zoneFinder.label.crossStreetFirst")} + + + {str("webapp:zoneFinder.label.crossStreetSecond")} + + + {str("webapp:zoneFinder.label.firstName")} + + + {str("webapp:zoneFinder.label.slackLink")} + + + {str("webapp:zoneFinder.label.timestamp")} +