Fix datetime translations

apps/web/public/locales/en.json

@@ -292,6 +292,7 @@
   "Edit Menu": "Edit Menu",
   "Edit Profile": "Edit Profile",
   "Edit welcome message": "Edit welcome message",
+  "Edited": "Edited",
   "Editing Group Menu": "Editing Group Menu",
   "Email": "Email",
   "Email address is not in a valid format": "Email address is not in a valid format",
@@ -655,6 +656,7 @@
   "Post from": "Post from",
   "Post from child group": "Post from child group",
   "Post in": "Post in",
+  "Posted": "Posted",
   "Posted In:": "Posted In:",
   "Posting...": "Posting...",
   "Posts": "Posts",
@@ -1116,6 +1118,7 @@
   "new comments on posts you're following?": "new comments on posts you're following?",
   "new markets": "new markets",
   "no more than {{maxTags}} allowed": "no more than {{maxTags}} allowed",
+  "now": "now",
   "nutrient density": "nutrient density",
   "of": "of",
   "offer": "Offer",

apps/web/public/locales/es.json

@@ -291,6 +291,7 @@
   "Edit Menu": "Editar menú",
   "Edit Profile": "Editar perfil",
   "Edit welcome message": "Editar mensaje de bienvenida",
+  "Edited": "Editado",
   "Editing Group Menu": "Menú del grupo de edición",
   "Email": "Correo electrónico",
   "Email address is not in a valid format": "La dirección de correo electrónico no tiene un formato válido",
@@ -661,6 +662,7 @@
   "Post from": "Publicacion de",
   "Post from child group": "Publicacion de subgrupo",
   "Post in": "Publica en",
+  "Posted": "Publicado",
   "Posted In:": "Publicado en:",
   "Posting...": "Publicando...",
   "Posts": "Publicaciones",
@@ -822,7 +824,7 @@
   "Start typing to add a topic": "Comienza a escribir para agregar un tema",
   "Start typing to find/create a topic to add": "Comience a escribir para encontrar/crear un tema para agregar",
   "Started: {{from}}": "Empezó desde: {{from}}",
-  "Starts: {{from}}": "Comienza: {{desde}}",
+  "Starts: {{from}}": "Comienza desde: {{from}}",
   "Stay connected, organized, and engaged with your group.": "Manténte conectado, organizado y comprometido con tu grupo.",
   "Stream": "Flujo",
   "Subgroups": "Subgrupos",
@@ -1116,6 +1118,7 @@
   "new comments on posts you're following?": "¿nuevos comentarios en las publicaciones que estás siguiendo?",
   "new markets": "nuevos mercados",
   "no more than {{maxTags}} allowed": "no más de {{maxTags}} permitido",
+  "now": "ahora",
   "nutrient density": "densidad de nutrientes",
   "of": "de",
   "offer": "Oferta",

apps/web/src/components/PostBigGridItem/PostBigGridItem.js

@@ -24,10 +24,12 @@ export default function PostBigGridItem ({
   expanded
 }) {
   const {
+    id,
     title,
     details,
     creator,
-    createdTimestamp,
+    createdTimestampForBigGrd,
+    exactCreatedTimestamp,
     attachments
   } = post
   const { t } = useTranslation()
@@ -156,8 +158,8 @@ export default function PostBigGridItem ({
                 <Avatar avatarUrl={creator.avatarUrl} url={creatorUrl} className={classes.avatar} tiny />
                 {creator.name}
               </div>
-              <div className={classes.timestamp}>
-                {createdTimestamp}
+              <div className={classes.timestamp} data-tooltip-id={`dateTip-${post.id}`} data-tooltip-content={exactCreatedTimestamp}>
+                {createdTimestampForBigGrd}
               </div>
             </div>
           </div>
@@ -171,6 +173,11 @@ export default function PostBigGridItem ({
           </div>
         </div>
       </div>
+      <Tooltip
+        delay={550}
+        id={`dateTip-${id}`}
+        position='left'
+      />
     </div>
   )
 }

apps/web/src/components/PostCard/ChatCard/ChatCard.js

@@ -9,6 +9,7 @@ import HyloHTML from 'components/HyloHTML'
 import RoundImage from 'components/RoundImage'
 
 import classes from './ChatCard.module.scss'
+import { getLocaleAsString } from 'components/Calendar/calendar-util'
 
 export default function ChatCard ({
   expanded,
@@ -32,7 +33,7 @@ export default function ChatCard ({
               {!slug && <span>in&nbsp; <span className={classes.groupName}>{firstGroup}</span></span>}
             </div>
           </Highlight>
-          <span className={classes.date}>{DateTime.fromISO(post.createdAt).toFormat('yyyy t')}</span>
+          <span className={classes.date}>{DateTime.fromISO(post.createdAt).setLocale(getLocaleAsString()).toFormat('yyyy t')}</span>
         </div>
         <CardImageAttachments attachments={post.attachments} linked className={classes.postImages} />
         <CardFileAttachments attachments={post.attachments} className={classes.postFiles} />

apps/web/src/components/PostCard/EventDate/EventDate.js

@@ -1,10 +1,11 @@
 import React from 'react'
 import { DateTime } from 'luxon'
 import classes from './EventDate.module.scss'
+import { getLocaleAsString } from 'components/Calendar/calendar-util'
 
 export default function EventDate ({ startTime }) {
   if (!startTime) return null
-  const start = DateTime.fromISO(startTime)
+  const start = DateTime.fromISO(startTime).setLocale(getLocaleAsString())
   return (
     <div className={classes.eventDate}>
       <span className={classes.month}>{start.toFormat('MMM')}</span>

apps/web/src/components/PostGridItem/PostGridItem.js

@@ -18,10 +18,12 @@ export default function PostGridItem ({
   expanded
 }) {
   const {
+    id,
     title,
     details,
     creator,
     createdTimestampForGrid,
+    exactCreatedTimestamp,
     attachments
   } = post
 
@@ -83,13 +85,18 @@ export default function PostGridItem ({
               <Avatar avatarUrl={creator.avatarUrl} url={creatorUrl} className={classes.avatar} tiny />
               {creator.name}
             </div>
-            <span className={classes.timestamp}>
+            <span className={classes.timestamp} data-tooltip-id={`dateTip-${post.id}`} data-tooltip-content={exactCreatedTimestamp}>
               {createdTimestampForGrid}
             </span>
           </div>
         </div>
         <div className='absolute bottom-0 left-0 right-0 h-full bg-gradient-to-t from-background to-transparent' />
       </div>
+      <Tooltip
+        delay={550}
+        id={`dateTip-${id}`}
+        position='left'
+      />
     </div>
   )
 }

apps/web/src/components/PostListRow/PostListRow.js

@@ -15,7 +15,7 @@ import { cn } from 'util/index'
 import { personUrl, topicUrl } from 'util/navigation'
 
 import classes from './PostListRow.module.scss'
-import { sameDay } from 'components/Calendar/calendar-util'
+import { getLocaleAsString } from 'components/Calendar/calendar-util'
 
 // :SHONK: no idea why React propagates events from child elements but NOT IN OTHER COMPONENTS
 const stopEvent = (e) => e.stopPropagation()
@@ -30,10 +30,12 @@ const PostListRow = (props) => {
   } = props
 
   const {
+    id,
     title,
     details,
     creator,
     createdTimestamp,
+    exactCreatedTimestamp,
     commentersTotal,
     topics
   } = post
@@ -53,13 +55,13 @@ const PostListRow = (props) => {
   const creatorUrl = personUrl(creator.id, routeParams.slug)
   const numOtherCommentors = commentersTotal - 1
   const unread = false
-  const start = typeof post.startTime === 'string'
+  const start = (typeof post.startTime === 'string'
     ? DateTime.fromISO(post.startTime)
-    : DateTime.fromJSDate(post.startTime)
-  const end = typeof post.endTime === 'string'
+    : DateTime.fromJSDate(post.startTime)).setLocale(getLocaleAsString())
+  const end = (typeof post.endTime === 'string'
     ? DateTime.fromISO(post.endTime)
-    : DateTime.fromJSDate(post.endTime)
-  const isSameDay = sameDay(start.toJSDate(), end.toJSDate())
+    : DateTime.fromJSDate(post.endTime)).setLocale(getLocaleAsString())
+  const isSameDay = start.hasSame(end, 'day')
   const isFlagged = post.flaggedGroups && post.flaggedGroups.includes(currentGroupId)
 
   return (
@@ -104,7 +106,7 @@ const PostListRow = (props) => {
               />
             </div>
           )}
-          <div className={cn(classes.timestamp, { [classes.pushToRight]: !childPost })}>
+          <div className={cn(classes.timestamp, { [classes.pushToRight]: !childPost })} data-tooltip-id={`dateTip-${post.id}`} data-tooltip-content={exactCreatedTimestamp}>
             {createdTimestamp}
           </div>
         </div>
@@ -129,6 +131,11 @@ const PostListRow = (props) => {
         delay={550}
         id={`post-tt-${post.id}`}
       />
+      <Tooltip
+        delay={550}
+        id={`dateTip-${id}`}
+        position='left'
+      />
     </div>
   )
 }

apps/web/src/components/Widget/AnnouncementWidget/AnnouncementWidget.js

@@ -7,6 +7,7 @@ import { postUrl } from 'util/navigation'
 import 'slick-carousel/slick/slick.css'
 import 'slick-carousel/slick/slick-theme.css'
 import classes from './AnnouncementWidget.module.scss'
+import { getLocaleAsString } from 'components/Calendar/calendar-util'
 
 const settings = {
   dots: true,
@@ -45,7 +46,7 @@ export default ({ items = [], group, routeParams }) => {
                 <div>
                   <div className={classes.meta}>
                     <span className={classes.author}>{a.author}</span>
-                    <span className={classes.created}>{DateTime.fromJSDate(a.createdAt).toRelative()}</span>
+                    <span className={classes.created}>{DateTime.fromJSDate(a.createdAt).setLocale(getLocaleAsString()).toRelative()}</span>
                   </div>
                   <div className={classes.title}>{a.title}</div>
                 </div>

apps/web/src/components/Widget/EventsWidget/EventsWidget.js

@@ -10,6 +10,7 @@ import { postUrl, createPostUrl } from 'util/navigation'
 import 'slick-carousel/slick/slick.css'
 import 'slick-carousel/slick/slick-theme.css'
 import classes from './EventsWidget.module.scss'
+import { getLocaleAsString } from 'components/Calendar/calendar-util'
 
 const settings = {
   dots: true,
@@ -46,7 +47,7 @@ export default ({ items, group, routeParams, isMember }) => {
           <div className={cn(classes.event, { [classes.narrow]: items.length > 1 })} key={e.id}>
             <Link to={postUrl(e.id, routeParams)} onClickCapture={handleOnItemClick}>
               <div className={classes.content}>
-                <div className={classes.time}>{DateTime.fromJSDate(e.startTime).toFormat('MMM d yyyy')}</div>
+                <div className={classes.time}>{DateTime.fromJSDate(e.startTime).setLocale(getLocaleAsString()).toLocaleString(DateTime.DATE_MED)}</div>
                 <div className={classes.title}>{e.title}</div>
                 <div className={classes.location}>{e.location}</div>
               </div>

apps/web/src/components/Widget/ProjectsWidget/ProjectsWidget.js

@@ -7,6 +7,7 @@ import { postUrl, createPostUrl } from 'util/navigation'
 import RoundImage from '../../RoundImage'
 
 import classes from './ProjectsWidget.module.scss'
+import { getLocaleAsString } from 'components/Calendar/calendar-util'
 
 const { array, bool, object } = PropTypes
 
@@ -27,7 +28,7 @@ class ProjectsWidget extends Component {
             <div className={classes.project}>
               <div className={classes.meta}>
                 <div className={classes.title}>{p.title}</div>
-                <div className={classes.lastActivity}>{DateTime.fromJSDate(p.updatedAt).toRelative()}</div>
+                <div className={classes.lastActivity}>{DateTime.fromJSDate(p.updatedAt).setLocale(getLocaleAsString()).toRelative()}</div>
               </div>
               <div className={classes.createdBy}>
                 <RoundImage url={p.creator.avatarUrl} />

apps/web/src/components/ui/datetimepicker.jsx

@@ -192,10 +192,10 @@ function display12HourValue (hours) {
   }
   return `0${hours % 12}`
 }
-function genMonths (locale) {
+function genMonths () {
   return Array.from({ length: 12 }, (_, i) => ({
     value: i,
-    label: DateTime.fromObject({ year: 2021, month: i + 1 }).toFormat('MMMM', { locale })
+    label: DateTime.fromObject({ year: 2021, month: i + 1 }).setLocale(getLocaleAsString()).toFormat('MMMM')
   }))
 }
 function genYears (yearRange = 50) {
@@ -208,7 +208,7 @@ function genYears (yearRange = 50) {
 // ---------- utils end ----------
 function Calendar ({ className, classNames, showOutsideDays = true, yearRange = 50, ...props }) {
   const MONTHS = React.useMemo(() => {
-    return genMonths(getLocaleAsString())
+    return genMonths()
   }, [])
   const YEARS = React.useMemo(() => genYears(yearRange), [])
   const disableLeftNavigation = () => {
@@ -511,16 +511,13 @@ const DateTimePicker = React.forwardRef(({ locale = getLocaleAsString(), default
     hour12: displayFormat?.hour12 ??
       `D hh:mm${!granularity || granularity === 'second' ? ':ss' : ''} a`
   }
+  const dateFormatted = DateTime.fromJSDate(displayDate).setLocale(getLocaleAsString()).toFormat(hourCycle === 24 ? initHourFormat.hour24 : initHourFormat.hour12)
   return (
     <Popover>
       <PopoverTrigger asChild disabled={disabled}>
         <Button variant='outline' className={cn('w-full justify-start text-left font-normal', !displayDate && 'text-muted-foreground', className)} ref={buttonRef}>
           <CalendarIcon className='mr-2 h-4 w-4' />
-          {displayDate
-            ? (DateTime.fromJSDate(displayDate).toFormat(hourCycle === 24 ? initHourFormat.hour24 : initHourFormat.hour12, {
-                locale: getLocaleAsString()
-              }))
-            : (<span>{placeholder}</span>)}
+          {displayDate ? dateFormatted : <span>{placeholder}</span>}
         </Button>
       </PopoverTrigger>
       <PopoverContent className='w-auto p-0 z-40'>

apps/web/src/i18n.mjs

@@ -34,7 +34,8 @@ i18n
     interpolation: {
       escapeValue: false // not needed for react as it escapes by default
     },
-    defaultNS: false,
+    ns: ['en.json', 'es.json'],
+    defaultNS: 'en.json',
     preload: ['en', 'es']
   })
 

apps/web/src/routes/ChatRoom/ChatPost/ChatPost.js

@@ -35,6 +35,7 @@ import { groupUrl, personUrl } from 'util/navigation'
 import { cn } from 'util/index'
 
 import styles from './ChatPost.module.scss'
+import { getLocaleAsString } from 'components/Calendar/calendar-util'
 
 export default function ChatPost ({
   className,
@@ -269,8 +270,8 @@ export default function ChatPost ({
               <div className={styles.name}>{creator.name}</div>
             </div>
             <div className={styles.date}>
-              {DateTime.fromISO(createdAt).toFormat('t')}
-              {editedAt && <span>&nbsp;({t('edited')} {DateTime.fromISO(editedAt).toFormat('t')})</span>}
+              {DateTime.fromISO(createdAt).setLocale(getLocaleAsString()).toFormat('t')}
+              {editedAt && <span>&nbsp;({t('edited')} {DateTime.fromISO(editedAt).setLocale(getLocaleAsString()).toFormat('t')})</span>}
             </div>
           </div>
         )}

apps/web/src/routes/ChatRoom/ChatRoom.js

@@ -46,6 +46,7 @@ import { groupInviteUrl, groupUrl } from 'util/navigation'
 import isWebView from 'util/webView'
 
 import styles from './ChatRoom.module.scss'
+import { getLocaleAsString } from 'components/Calendar/calendar-util'
 
 // the maximum amount of time in minutes that can pass between messages to still
 // include them under the same avatar and timestamp
@@ -463,7 +464,7 @@ const Footer = ({ context }) => {
 
 const StickyHeader = ({ data, prevData }) => {
   const firstItem = useCurrentlyRenderedData()[0]
-  const createdAt = firstItem?.createdAt ? DateTime.fromISO(firstItem.createdAt) : null
+  const createdAt = firstItem?.createdAt ? DateTime.fromISO(firstItem.createdAt).setLocale(getLocaleAsString()) : null
   const displayDay = createdAt && getDisplayDay(createdAt)
 
   return (
@@ -517,7 +518,7 @@ const ItemContent = ({ data: post, context, prevData, nextData }) => {
   const expanded = context.selectedPostId === post.id
   const firstUnread = context.latestOldPostId === prevData?.id && post.creator.id !== context.currentUser.id
   const previousDay = prevData?.createdAt ? DateTime.fromISO(prevData.createdAt) : DateTime.now()
-  const currentDay = DateTime.fromISO(post.createdAt)
+  const currentDay = DateTime.fromISO(post.createdAt).setLocale(getLocaleAsString())
   const displayDay = prevData?.createdAt && previousDay.hasSame(currentDay, 'day') ? null : getDisplayDay(currentDay)
   const createdTimeDiff = currentDay.diff(previousDay, 'minutes')?.toObject().minutes || 1000
 

apps/web/src/routes/MemberProfile/MemberProfile.js

@@ -54,6 +54,7 @@ import {
 } from 'util/navigation'
 
 import styles from './MemberProfile.module.scss'
+import { getLocaleAsString } from 'components/Calendar/calendar-util'
 
 const GROUPS_DIV_HEIGHT = 200
 
@@ -347,7 +348,7 @@ function Project ({ memberCap, project }) {
     <div className={styles.project} onClick={() => viewPostDetails(project)}>
       <div>
         <div className={styles.title}>{title} </div>
-        <div className={styles.meta}>{creator.name} - {DateTime.fromJSDate(createdAt).toRelative()} </div>
+        <div className={styles.meta}>{creator.name} - {DateTime.fromJSDate(createdAt).setLocale(getLocaleAsString()).toRelative()} </div>
       </div>
       <RoundImageRow className={cn(styles.members, { [styles.membersPlus]: members.items.length > memberCap })} inline imageUrls={members.items.map(m => m.avatarUrl)} cap={memberCap} />
     </div>
@@ -356,12 +357,13 @@ function Project ({ memberCap, project }) {
 
 function Event ({ memberCap, event }) {
   const { location, eventInvitations, startTime, title } = event
+  const start = DateTime.fromJSDate(startTime).setLocale(getLocaleAsString())
   const viewPostDetails = useViewPostDetails()
   return (
     <div className={styles.event} onClick={() => viewPostDetails(event)}>
       <div className={styles.date}>
-        <div className={styles.month}>{DateTime.fromJSDate(startTime).toFormat('MMM')}</div>
-        <div className={styles.day}>{DateTime.fromJSDate(startTime).toFormat('dd')}</div>
+        <div className={styles.month}>{start.toFormat('MMM')}</div>
+        <div className={styles.day}>{start.toFormat('dd')}</div>
       </div>
       <div className={styles.details}>
         <div className={styles.title}>{title}</div>