chore: dashboard page finished

.gitignore

@@ -4,6 +4,7 @@
 /node_modules
 /.pnp
 .pnp.js
+.vscode
 
 # testing
 /coverage

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",

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 <h1>Dashboard</h1>;
+  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 (
+    <Container>
+      <header>
+        <button type="button" onClick={handlePrevDay}>
+          <MdChevronLeft size={36} color="#fff" />
+        </button>
+        <strong>{dateFormatted}</strong>
+        <button type="button" onClick={handleNextDay}>
+          <MdChevronRight size={36} color="#fff" />
+        </button>
+      </header>
+
+      <ul>
+        {schedule.map(time => (
+          <Time key={time.time} past={time.past} available={!time.appointment}>
+            <strong>{time.time}</strong>
+            <span>
+              {time.appointment ? time.appointment.user.name : 'Em aberto'}
+            </span>
+          </Time>
+        ))}
+      </ul>
+    </Container>
+  );
 }

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 (
+    <Container>
+      <header>
+        <button type="button" onClick={handlePrevDay}>
+          <MdChevronLeft size={36} color="#fff" />
+        </button>
+        <strong>{dateFormatted}</strong>
+        <button type="button" onClick={handleNextDay}>
+          <MdChevronRight size={36} color="#fff" />
+        </button>
+      </header>
+
+      <ul>
+        {schedule.map(time => (
+          <Time key={time.time} past={time.past} available={!time.appointment}>
+            <strong>{time.time}</strong>
+            <span>
+              {time.appointment ? time.appointment.user.name : 'Em aberto'}
+            </span>
+          </Time>
+        ))}
+      </ul>
+    </Container>
+  );
+}

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')};
+  }
+`;

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"