Format assignments dates

package-lock.json

@@ -15,6 +15,7 @@
         "@testing-library/jest-dom": "^5.16.4",
         "@testing-library/react": "^13.2.0",
         "@testing-library/user-event": "^13.5.0",
+        "dayjs": "^1.11.3",
         "react": "^18.1.0",
         "react-dom": "^18.1.0",
         "react-router-dom": "^6.3.0",
@@ -6010,6 +6011,11 @@
         "node": ">=10"
       }
     },
+    "node_modules/dayjs": {
+      "version": "1.11.3",
+      "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.3.tgz",
+      "integrity": "sha512-xxwlswWOlGhzgQ4TKzASQkUhqERI3egRNqgV4ScR8wlANA/A9tZ7miXa44vTTKEq5l7vWoL5G57bG3zA+Kow0A=="
+    },
     "node_modules/debug": {
       "version": "4.3.4",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
@@ -19307,6 +19313,11 @@
         "whatwg-url": "^8.0.0"
       }
     },
+    "dayjs": {
+      "version": "1.11.3",
+      "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.3.tgz",
+      "integrity": "sha512-xxwlswWOlGhzgQ4TKzASQkUhqERI3egRNqgV4ScR8wlANA/A9tZ7miXa44vTTKEq5l7vWoL5G57bG3zA+Kow0A=="
+    },
     "debug": {
       "version": "4.3.4",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",

package.json

@@ -10,6 +10,7 @@
     "@testing-library/jest-dom": "^5.16.4",
     "@testing-library/react": "^13.2.0",
     "@testing-library/user-event": "^13.5.0",
+    "dayjs": "^1.11.3",
     "react": "^18.1.0",
     "react-dom": "^18.1.0",
     "react-router-dom": "^6.3.0",

src/components/AssignmentCard.js

@@ -7,6 +7,9 @@ import {
   Tooltip,
   Divider,
 } from '@mui/material';
+import dayjs from 'dayjs';
+
+import { capitalizeFirstLetter } from '../utils/capitalizeFirstLetter';
 
 function AssignmentCard({ title, classrooms, dueDate, scores, layoutType }) {
   switch (layoutType) {
@@ -57,7 +60,10 @@ function AssignmentCard({ title, classrooms, dueDate, scores, layoutType }) {
                   variant="p"
                   component="div"
                 >
-                  <strong>Data de entrega: </strong> {dueDate}
+                  <strong>Data de entrega: </strong>{' '}
+                  {capitalizeFirstLetter(
+                    dayjs(dueDate).format('dddd, DD/MM | HH:mm[h]')
+                  )}
                 </Typography>
                 <Typography variant="p" component="div">
                   <strong>Valor: </strong>
@@ -115,7 +121,10 @@ function AssignmentCard({ title, classrooms, dueDate, scores, layoutType }) {
                   variant="p"
                   component="div"
                 >
-                  <strong>Data de entrega: </strong> {dueDate}
+                  <strong>Data de entrega: </strong>
+                  {capitalizeFirstLetter(
+                    dayjs(dueDate).format('dddd, DD/MM | HH:mm[h]')
+                  )}
                 </Typography>
                 <Typography variant="p" component="div">
                   <strong>Valor: </strong>

src/context/user.js

@@ -81,7 +81,7 @@ const getClassrooms = userId =>
   });
 
 const getAssignments = userId =>
-  sleep(3000).then(() => {
+  sleep(4000).then(() => {
     console.log('userId: ' + userId);
     return {
       data: [
@@ -89,7 +89,7 @@ const getAssignments = userId =>
           id: '5435',
           title:
             'Prova 1 - Armazenamento de Dados. Python em CD. Armazenamento Analítico',
-          dueDate: '2022-07-01',
+          dueDate: '2022-07-01 23:59',
           scores: [
             {
               classroomId: '321',
@@ -115,7 +115,7 @@ const getAssignments = userId =>
         {
           id: '1234',
           title: 'Trabalho NoSQL',
-          dueDate: '2022-06-29',
+          dueDate: '2022-06-29 22:00',
           scores: [
             {
               classroomId: '666',
@@ -141,7 +141,7 @@ const getAssignments = userId =>
         {
           id: '1234',
           title: 'Atividade 2 - Estudo de caso Sapiens Informática',
-          dueDate: '2022-06-25',
+          dueDate: '2022-06-25 23:59',
           scores: [
             {
               classroomId: '123',
@@ -172,7 +172,7 @@ const getAssignments = userId =>
           id: '3671',
           title:
             'AA08 - Atividade de Aprendizagem 08 - Componentes de rateio de custos',
-          dueDate: '2022-07-23',
+          dueDate: '2022-07-23 10:00',
           scores: [
             {
               classroomId: '765',

src/index.js

@@ -1,5 +1,7 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
+import 'dayjs/locale/pt-br'; // carregar sob demanda
+import dayjs from 'dayjs';
 
 import { BrowserRouter } from 'react-router-dom';
 import { createTheme } from '@mui/material';
@@ -11,6 +13,8 @@ import AppProviders from './context';
 
 import './index.css';
 
+dayjs.locale('pt-br');
+
 const theme = createTheme({
   palette: {
     primary: {

src/utils/capitalizeFirstLetter.js

@@ -0,0 +1,5 @@
+const capitalizeFirstLetter = string => {
+  return string.charAt(0).toUpperCase() + string.slice(1);
+};
+
+export { capitalizeFirstLetter };