Add i18 for table column names

crownheightsaid · Jul 18, 2020 · 2d7cace · 2d7cace
1 parent 93242b0
commit 2d7cace
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 13 deletions.
diff --git 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
@@ -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
@@ -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 }) => {
       <Table aria-label="simple table">
         <TableHead>
           <TableRow>
-            <TableCell>Code</TableCell>
-            <TableCell align="right">Cross Street #1</TableCell>
-            <TableCell align="right">Cross Street #2</TableCell>
-            <TableCell align="right">First Name</TableCell>
-            <TableCell align="right">Slack Link</TableCell>
-            <TableCell align="right">Timestamp</TableCell>
+            <TableCell>{str("webapp:zoneFinder.label.code")}</TableCell>
+            <TableCell align="right">
+              {str("webapp:zoneFinder.label.crossStreetFirst")}
+            </TableCell>
+            <TableCell align="right">
+              {str("webapp:zoneFinder.label.crossStreetSecond")}
+            </TableCell>
+            <TableCell align="right">
+              {str("webapp:zoneFinder.label.firstName")}
+            </TableCell>
+            <TableCell align="right">
+              {str("webapp:zoneFinder.label.slackLink")}
+            </TableCell>
+            <TableCell align="right">
+              {str("webapp:zoneFinder.label.timestamp")}
+            </TableCell>
           </TableRow>
         </TableHead>
         <TableBody>