I18n spanish 450

packages/common/src/i18n/en.json

@@ -17,7 +17,16 @@
     "less": "Less",
     "comments": "Comments",
     "send": "Send",
-    "back": "Back"
+    "back": "Back",
+    "weekdays": {
+      "sunday": "Sunday",
+      "monday": "Monday",
+      "tuesday": "Tuesday",
+      "wednesday": "Wednesday",
+      "thursday": "Thursday",
+      "friday": "Friday",
+      "saturday": "Saturday"
+    }
   },
   "hotlines": {
     "nationalSuicidePreventionLifeline": {
@@ -73,6 +82,13 @@
       "description": "Every day thousands of people across North America turn to 2-1-1 for information and support—whether financial, domestic, health or disaster-related. 2-1-1 is a free, confidential referral and information helpline and website that connects people from all communities and of all ages to the essential health and human services they need, 24 hours a day, seven days a week."
     }
   },
+  "map": {
+    "directions": "Directions",
+    "directionsByBus": "Directions by bus",
+    "directionsByBicycle": "Directions by bicycle",
+    "directionsByCar": "Directions by car",
+    "directionsByWalking": "Directions by walking"
+  },
   "notFound": {
     "pageTitle": "Page not Found",
     "message": "Whoops! We're having trouble finding that page.",
@@ -90,6 +106,14 @@
     "problemSendingFeedback": "There was a problem sending your feedback. Please try again.",
     "submissionSuccess": "The problem has been submitted and will be reviewed. Thank you for your feedback!"
   },
+  "resource": {
+    "address": "Address",
+    "phoneNumber": "Phone Number",
+    "website": "Website",
+    "hoursOfOperation": "Hours of Operation",
+    "reportAProblem": "Report a Problem",
+    "services": "Services"
+  },
   "searchInput": {
     "placeholder": "Search - What are your needs today?"
   },

packages/common/src/i18n/es.json

@@ -17,7 +17,16 @@
     "less": "Menos",
     "comments": "Comentarios",
     "send": "Enviar",
-    "back": "Regresar"
+    "back": "Regresar",
+    "weekdays": {
+      "sunday": "Domingo",
+      "monday": "Lunes",
+      "tuesday": "Martes",
+      "wednesday": "Miércoles",
+      "thursday": "Jueves",
+      "friday": "Viernes",
+      "saturday": "Sábado"
+    }
   },
   "hotlines": {
     "nationalSuicidePreventionLifeline": {
@@ -73,6 +82,13 @@
       "description": "Todos los días, miles de personas en América del Norte recurren al 2-1-1 para obtener información y apoyo, ya sea financiero, doméstico, de salud o relacionado con desastres. 2-1-1 es una línea de ayuda y un sitio web gratuito y confidencial de referencia e información que conecta a personas de todas las comunidades y de todas las edades con cualquier servicio esencial humano o de salud que necesiten, las 24 horas del día, los siete días de la semana."
     }
   },
+  "map": {
+    "directions": "Direcciones",
+    "directionsByBus": "Direcciones via bus",
+    "directionsByBicycle": "Direcciones via bicicleta",
+    "directionsByCar": "Direcciones via carro",
+    "directionsByWalking": "Direcciones a pie"
+  },
   "notFound": {
     "pageTitle": "Página no Encontrada",
     "message": "¡Uy! Disculpa tenemos un inconveniente encontrando esta pagina.",
@@ -90,6 +106,14 @@
     "problemSendingFeedback": "Hubo un problema al enviar sus comentarios. Inténtalo de nuevo.",
     "submissionSuccess": "El problema ha sido enviado y será revisado. ¡Gracias por tus comentarios!"
   },
+  "resource": {
+    "address": "Dirección",
+    "phoneNumber": "Número de Teléfono",
+    "website": "Sitio Web",
+    "hoursOfOperation": "Horas de Operación",
+    "reportAProblem": "Reportar un Problema",
+    "services": "Servicios"
+  },
   "searchInput": {
     "placeholder": "Busqueda - ¿Que necesitas hoy?"
   },

packages/web/src/components/Map.tsx

@@ -15,6 +15,7 @@ import Snackbar from "@material-ui/core/Snackbar";
 import { TResource } from "@upswyng/types";
 import { colors } from "@upswyng/common";
 import makeStyles from "@material-ui/core/styles/makeStyles";
+import { useTranslation } from "react-i18next";
 
 const boulderCoordinates = {
   lat: 40.0156852,
@@ -75,6 +76,7 @@ interface Props {
 
 const Map = ({ address, name, latitude, longitude }: Props) => {
   const classes = useStyles();
+  const { t } = useTranslation(["map"]);
   const [googleMap, setGoogleMap] = useState<any | null>(null);
   const [googleMaps, setGoogleMaps] = useState<any | null>(null);
   const [isFetchingGoogleMaps, setIsFetchingGoogleMaps] = useState<boolean>(
@@ -287,6 +289,7 @@ const Map = ({ address, name, latitude, longitude }: Props) => {
           <IconButton
             onClick={() => handleDirectionButtonClick("TRANSIT")}
             color={travelMode === "TRANSIT" ? "primary" : "default"}
+            title={t("directionsByBus")}
           >
             {BusIcon}
           </IconButton>
@@ -296,6 +299,7 @@ const Map = ({ address, name, latitude, longitude }: Props) => {
           <IconButton
             onClick={() => handleDirectionButtonClick("BICYCLING")}
             color={travelMode === "BICYCLING" ? "primary" : "default"}
+            title={t("directionsByBicycle")}
           >
             {BikeIcon}
           </IconButton>
@@ -305,6 +309,7 @@ const Map = ({ address, name, latitude, longitude }: Props) => {
           <IconButton
             onClick={() => handleDirectionButtonClick("DRIVING")}
             color={travelMode === "DRIVING" ? "primary" : "default"}
+            title={t("directionsByCar")}
           >
             {CarIcon}
           </IconButton>
@@ -314,6 +319,7 @@ const Map = ({ address, name, latitude, longitude }: Props) => {
           <IconButton
             onClick={() => handleDirectionButtonClick("WALKING")}
             color={travelMode === "WALKING" ? "primary" : "default"}
+            title={t("directionsByWalking")}
           >
             {WalkIcon}
           </IconButton>

packages/web/src/components/Resource.tsx

@@ -31,6 +31,7 @@ import { useHistory } from "react-router";
 import { useLastLocation } from "react-router-last-location";
 import { useParams } from "react-router-dom";
 import useResources from "./useResources";
+import { useTranslation } from "react-i18next";
 
 const useListIconStyles = makeStyles((theme: Theme) => ({
   root: {
@@ -69,6 +70,7 @@ export const Resource = () => {
   const listIconClasses = useListIconStyles({});
   const history = useHistory();
   const lastLocation = useLastLocation();
+  const { t } = useTranslation(["resource"]);
 
   if (status === "loading") {
     return <LoadingSpinner />;
@@ -111,11 +113,11 @@ export const Resource = () => {
         {resource.address && (
           <ListItem component="div">
             <ListItemIcon classes={listIconClasses}>
-              <LocationOnIcon />
+              <LocationOnIcon titleAccess={t("address")} />
             </ListItemIcon>
             <ListItemText>
               <Typography component="h2" variant="srOnly">
-                Address
+                {t("address")}
               </Typography>
               {resource.address.address1},{" "}
               {resource.address.address2 && <>{resource.address.address2}, </>}
@@ -127,11 +129,11 @@ export const Resource = () => {
         {resource.phone && (
           <ListItem component="div">
             <ListItemIcon classes={listIconClasses}>
-              <PhoneIcon />
+              <PhoneIcon titleAccess={t("phoneNumber")} />
             </ListItemIcon>
             <ListItemText>
               <Typography component="h2" variant="srOnly">
-                Phone
+                {t("phoneNumber")}
               </Typography>
               {resource.phone}
             </ListItemText>
@@ -140,11 +142,11 @@ export const Resource = () => {
         {resource.website && (
           <ListItem component="div">
             <ListItemIcon classes={listIconClasses}>
-              <PublicIcon />
+              <PublicIcon titleAccess={t("website")} />
             </ListItemIcon>
             <ListItemText>
               <Typography component="h2" variant="srOnly">
-                Website
+                {t("website")}
               </Typography>
               <Typography noWrap={true} color="primary">
                 <Link
@@ -162,18 +164,18 @@ export const Resource = () => {
         {!!resource.schedule._items.length && (
           <ListItem component="div">
             <ListItemIcon classes={listIconClasses}>
-              <ScheduleIcon />
+              <ScheduleIcon titleAccess={t("hoursOfOperation")} />
             </ListItemIcon>
             <ListItemText>
               <Typography component="h2" variant="srOnly">
-                Schedule
+                {t("hoursOfOperation")}
               </Typography>
               <Schedule schedule={resource.schedule} />
             </ListItemText>
           </ListItem>
         )}
         <ListItem component="div">
-          <Typography variant="srOnly">Services</Typography>
+          <Typography variant="srOnly">{t("services")}</Typography>
           <Services resource={resource} />
         </ListItem>
       </List>
@@ -191,7 +193,7 @@ export const Resource = () => {
         startIcon={<ReportProblemIcon color="secondary" />}
         to={`/report-issue/${resourceId}`}
       >
-        Report a Problem
+        {t("reportAProblem")}
       </Button>
       <FavoriteResourceFAB resourceId={resourceId} />
     </Container>

packages/web/src/components/WeeklySchedule.tsx

@@ -3,6 +3,7 @@ import { RRule } from "rrule";
 import React from "react";
 import { TScheduleItem } from "@upswyng/common";
 import Typography from "@material-ui/core/Typography";
+import { useTranslation } from "react-i18next";
 
 export const days = {
   sunday: "SU",
@@ -14,11 +15,9 @@ export const days = {
   saturday: "SA",
 };
 
-function capitalize(x: string): string {
-  return x.charAt(0).toUpperCase() + x.slice(1);
-}
-
 const WeeklySchedule = ({ items }: { items: TScheduleItem[] }) => {
+  const { t } = useTranslation(["glossary"]);
+
   const dayItemsMap = Object.entries(days).map(([label, key]) => {
     return {
       day: label,
@@ -39,7 +38,7 @@ const WeeklySchedule = ({ items }: { items: TScheduleItem[] }) => {
             <Grid container spacing={6}>
               <Grid item xs={6}>
                 <Typography component="h3" variant="subtitle1">
-                  {capitalize(x.day)}:
+                  {t("weekdays." + x.day)}:
                 </Typography>
               </Grid>
               <Grid item xs={6}>