diff --git a/package-lock.json b/package-lock.json index 519c034..e9390b3 100644 --- a/package-lock.json +++ b/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", diff --git a/package.json b/package.json index e8952a9..3dc29fd 100644 --- a/package.json +++ b/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", diff --git a/src/components/AssignmentCard.js b/src/components/AssignmentCard.js index a0addf9..c8443a1 100644 --- a/src/components/AssignmentCard.js +++ b/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" > - Data de entrega: {dueDate} + Data de entrega: {' '} + {capitalizeFirstLetter( + dayjs(dueDate).format('dddd, DD/MM | HH:mm[h]') + )} Valor: @@ -115,7 +121,10 @@ function AssignmentCard({ title, classrooms, dueDate, scores, layoutType }) { variant="p" component="div" > - Data de entrega: {dueDate} + Data de entrega: + {capitalizeFirstLetter( + dayjs(dueDate).format('dddd, DD/MM | HH:mm[h]') + )} Valor: diff --git a/src/context/user.js b/src/context/user.js index dcd8b84..4a97767 100644 --- a/src/context/user.js +++ b/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', diff --git a/src/index.js b/src/index.js index b0b79d3..ce197a4 100644 --- a/src/index.js +++ b/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: { diff --git a/src/utils/capitalizeFirstLetter.js b/src/utils/capitalizeFirstLetter.js new file mode 100644 index 0000000..5a3d62d --- /dev/null +++ b/src/utils/capitalizeFirstLetter.js @@ -0,0 +1,5 @@ +const capitalizeFirstLetter = string => { + return string.charAt(0).toUpperCase() + string.slice(1); +}; + +export { capitalizeFirstLetter };