diff --git a/.gitignore b/.gitignore index 4d29575..a38bedb 100644 --- a/.gitignore +++ b/.gitignore @@ -4,6 +4,7 @@ /node_modules /.pnp .pnp.js +.vscode # testing /coverage diff --git a/package.json b/package.json index 4eaef4a..33779f1 100644 --- a/package.json +++ b/package.json @@ -7,13 +7,14 @@ "@rocketseat/unform": "^1.6.2", "axios": "^0.19.2", "date-fns": "^2.0.0-beta.5", - "date-fns-tz": "^1.0.7", + "date-fns-tz": "^1.0.10", "history": "^4.10.1", "immer": "^6.0.2", "polished": "^3.5.1", "prop-types": "^15.7.2", "react": "^16.8.6", "react-dom": "^16.8.6", + "react-hooks": "^1.0.1", "react-icons": "^3.9.0", "react-perfect-scrollbar": "^1.5.8", "react-redux": "^7.2.0", diff --git a/src/pages/Dashboard/index.js b/src/pages/Dashboard/index.js index 56a2f73..de834ac 100644 --- a/src/pages/Dashboard/index.js +++ b/src/pages/Dashboard/index.js @@ -1,9 +1,89 @@ -import React from 'react'; +import React, { useState, useMemo, useEffect } from 'react'; +import { MdChevronLeft, MdChevronRight } from 'react-icons/md'; +import { + format, + subDays, + addDays, + setHours, + setMinutes, + setSeconds, + isBefore, + isEqual, + parseISO, +} from 'date-fns'; +import { utcToZonedTime } from 'date-fns-tz'; +import pt from 'date-fns/locale/pt-BR'; +import { Container, Time } from './styles'; import api from '~/services/api'; -// import { Container } from './styles'; +const range = [8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20]; export default function Dashboard() { - api.get('appointments'); - return

Dashboard

; + const [schedule, setSchedule] = useState([]); + const [date, setDate] = useState(new Date()); + + const dateFormatted = useMemo( + () => format(date, "d 'de' MMMM", { locale: pt }), + [date] + ); + + useEffect(() => { + async function loadSchedule() { + const response = await api.get('schedule', { + params: { date }, + }); + + const timezone = Intl.DateTimeFormat().resolvedOptions().timeZone; + + const data = range.map(hour => { + const checkDate = setSeconds(setMinutes(setHours(date, hour), 0), 0); + const compareDate = utcToZonedTime(checkDate, timezone); + + return { + time: `${hour}:00h`, + past: isBefore(compareDate, new Date()), + appointment: response.data.find(a => + isEqual(parseISO(a.date), compareDate) + ), + }; + }); + + setSchedule(data); + } + + loadSchedule(); + }, [date]); + + function handlePrevDay() { + setDate(subDays(date, 1)); + } + + function handleNextDay() { + setDate(addDays(date, 1)); + } + + return ( + +
+ + {dateFormatted} + +
+ + + + ); } diff --git a/src/pages/Dashboard/indexbc b/src/pages/Dashboard/indexbc new file mode 100644 index 0000000..dfb7f4e --- /dev/null +++ b/src/pages/Dashboard/indexbc @@ -0,0 +1,92 @@ +import React, { useState, useMemo, useEffect } from 'react'; +import { + format, + subDays, + addDays, + setHours, + setMinutes, + setSeconds, + isBefore, + isEqual, + parseISO, +} from 'date-fns'; +import pt from 'date-fns/locale/pt'; +import { utcToZonedTime } from 'date-fns-tz'; +import { MdChevronLeft, MdChevronRight } from 'react-icons/md'; +import api from '~/services/api'; + +import { Container, Time } from './styles'; + +const range = [8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20]; + +export default function Dashboard() { + const [schedule, setSchedule] = useState([]); + const [date, setDate] = useState(new Date()); + + const dateFormatted = useMemo( + () => format(date, "d 'de' MMMM", { locale: pt }), + [date] + ); + + useEffect(() => { + async function loadSchedule() { + const response = await api.get('schedules', { + params: { date }, + }); + + const timezone = Intl.DateTimeFormat().resolvedOptions().timeZone; + + const data = range.map(hour => { + const checkDate = setSeconds(setMinutes(setHours(date, hour), 0), 0); + const compareDate = utcToZonedTime(checkDate, timezone); + + return { + time: `${hour}:00h`, + past: isBefore(compareDate, new Date()), + appointment: response.data.find(a => + isEqual(setSeconds(setMinutes(parseISO(a.date), 0), 0), compareDate) + ), + }; + }); + + console.log(data); + + setSchedule(data); + } + + loadSchedule(); + }, [date]); + + function handlePrevDay() { + setDate(subDays(date, 1)); + } + + function handleNextDay() { + setDate(addDays(date, 1)); + } + + return ( + +
+ + {dateFormatted} + +
+ + + + ); +} diff --git a/src/pages/Dashboard/styles.js b/src/pages/Dashboard/styles.js new file mode 100644 index 0000000..e07a36c --- /dev/null +++ b/src/pages/Dashboard/styles.js @@ -0,0 +1,54 @@ +import styled from 'styled-components'; + +export const Container = styled.div` + max-width: 600px; + margin: 50px auto; + + display: flex; + flex-direction: column; + + header { + display: flex; + align-self: center; + align-items: center; + + button { + border: 0; + background: none; + } + + strong { + color: #fff; + font-size: 24px; + margin: 0 15px; + } + } + + ul { + display: grid; + grid-template-columns: repeat(2, 1fr); + grid-gap: 15px; + margin-top: 30px; + } +`; + +export const Time = styled.li` + padding: 20px; + border-radius: 4px; + background: #fff; + + opacity: ${props => (props.past ? 0.6 : 1)}; + + strong { + display: block; + color: ${props => (props.available ? '#999' : '#7159c1')}; + font-size: 20px; + font-weight: normal; + } + + span { + display: block; + margin-top: 3px; + color: ${props => (props.available ? '#666' : '#7159c1')}; + } +`; diff --git a/yarn.lock b/yarn.lock index 57526fb..10968cc 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3468,7 +3468,7 @@ data-urls@^1.0.0, data-urls@^1.1.0: whatwg-mimetype "^2.2.0" whatwg-url "^7.0.0" -date-fns-tz@^1.0.7: +date-fns-tz@^1.0.10: version "1.0.10" resolved "https://registry.yarnpkg.com/date-fns-tz/-/date-fns-tz-1.0.10.tgz#30fef0038f80534fddd8e133a6b8ca55ba313748" integrity sha512-cHQAz0/9uDABaUNDM80Mj1FL4ODlxs1xEY4b0DQuAooO2UdNKvDkNbV8ogLnxLbv02Ru1HXFcot0pVvDRBgptg== @@ -8697,6 +8697,11 @@ react-error-overlay@^6.0.3: resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-6.0.7.tgz#1dcfb459ab671d53f660a991513cb2f0a0553108" integrity sha512-TAv1KJFh3RhqxNvhzxj6LeT5NWklP6rDr2a0jaTfsZ5wSZWHOGeqQyejUp3xxLfPt2UpyJEcVQB/zyPcmonNFA== +react-hooks@^1.0.1: + version "1.0.1" + resolved "https://registry.yarnpkg.com/react-hooks/-/react-hooks-1.0.1.tgz#e62197c38cd8d0703060f791234f7f4698aa7c44" + integrity sha1-5iGXw4zY0HAwYPeRI09/RpiqfEQ= + react-icons@^3.9.0: version "3.9.0" resolved "https://registry.yarnpkg.com/react-icons/-/react-icons-3.9.0.tgz#89a00f20a0e02e6bfd899977eaf46eb4624239d5"