fix: format date and message using intl

vtexdocs · Jan 31, 2024 · b85af78 · b85af78
1 parent 1823721
commit b85af78
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 7 deletions.
diff --git a/src/messages/en.json b/src/messages/en.json
@@ -246,5 +246,7 @@
   "known_issues_sort.label": "Sort by:",
   "known_issues_sort.recently_updated": "Recently updated",
   "known_issues_sort.newest": "Newest",
-  "known_issues_result.empty": "No matching results. Try other filters."
+  "known_issues_result.empty": "No matching results. Try other filters.",
+  "known_issues_date.created": "Created at",
+  "known_issues_date.updated": "Updated at"
 }
diff --git a/src/messages/es.json b/src/messages/es.json
@@ -252,5 +252,7 @@
   "known_issues_sort.label": "Ordenar por:",
   "known_issues_sort.recently_updated": "Recientemente actualizados",
   "known_issues_sort.newest": "Más nuevos",
-  "known_issues_result.empty": "Ningún resultado coincidente. Pruebe con otros filtros."
+  "known_issues_result.empty": "Ningún resultado coincidente. Pruebe con otros filtros.",
+  "known_issues_date.created": "Creado en",
+  "known_issues_date.updated": "Actualizado en"
 }
diff --git a/src/messages/pt.json b/src/messages/pt.json
@@ -267,5 +267,7 @@
   "known_issues_sort.label": "Ordenar por:",
   "known_issues_sort.recently_updated": "Recentemente atualizado",
   "known_issues_sort.newest": "Mais novos",
-  "known_issues_result.empty": "Nenhum resultado correspondente. Tente outros filtros."
+  "known_issues_result.empty": "Nenhum resultado correspondente. Tente outros filtros.",
+  "known_issues_date.created": "Criado em",
+  "known_issues_date.updated": "Atualizado em"
 }
diff --git a/src/pages/known-issues/[slug].tsx b/src/pages/known-issues/[slug].tsx
@@ -115,11 +115,27 @@ const KnownIssuePage: NextPage<Props> = ({
                       <Tag>{serialized.frontmatter?.kiStatus}</Tag>
                     </Flex>
                     <Text sx={styles.dates}>
-                      <em>Criado em </em>
-                      {serialized.frontmatter?.createdAt}
+                      <em>
+                        {intl.formatMessage({
+                          id: 'known_issues_date.created',
+                        })}{' '}
+                      </em>
+                      {serialized.frontmatter?.createdAt
+                        ? intl.formatDate(
+                            new Date(serialized.frontmatter?.createdAt)
+                          )
+                        : ''}
                       {' • '}
-                      <em>Atualizado em </em>
-                      {serialized.frontmatter?.updatedAt}
+                      <em>
+                        {intl.formatMessage({
+                          id: 'known_issues_date.updated',
+                        })}{' '}
+                      </em>
+                      {serialized.frontmatter?.updatedAt
+                        ? intl.formatDate(
+                            new Date(serialized.frontmatter?.updatedAt)
+                          )
+                        : ''}
                     </Text>
                   </Flex>
                 </header>