Add dashboard styles and logic - End

package.json

@@ -9,6 +9,7 @@
     "@testing-library/user-event": "^7.1.2",
     "axios": "^0.19.2",
     "date-fns": "^2.14.0",
+    "date-fns-tz": "^1.0.10",
     "history": "^4.10.1",
     "immer": "^7.0.0",
     "polished": "^3.6.4",

src/components/Header/index.js

@@ -1,28 +1,33 @@
 import React from 'react'
-import { Link } from 'react-router-dom'
+import { useSelector } from 'react-redux'
 
+import { Link } from 'react-router-dom'
 import { Container, Content, Profile } from './styles'
 
 import Notifications from '~/components/Notifications'
 import logo from '~/assets/logo-header.svg'
 
 export default function Header() {
+  const profile = useSelector((state) => state.user.profile)
   return (
     <Container>
       <Content>
         <nav>
           <img src={logo} alt="Logo" />
-          <Link to="/dashboar">DASHBOARD</Link>
+          <Link to="/dashboard">DASHBOARD</Link>
         </nav>
         <aside>
           <Notifications />
           <Profile>
             <div>
-              <strong>Emerson Oliveira</strong>
+              <strong>{profile.name}</strong>
               <Link to="/profile">Meuperfil</Link>
             </div>
             <img
-              src="https://api.adorable.io/avatars/50/abott@adorable.png"
+              src={
+                profile.avatar.url ||
+                'https://api.adorable.io/avatars/50/abott@adorable.png'
+              }
               alt="Avatar"
             />
           </Profile>

src/components/Header/styles.js

@@ -58,6 +58,7 @@ export const Profile = styled.div`
   }
 
   img {
+    width: 32px;
     height: 32px;
     border-radius: 50%;
   }

src/pages/Dashboard/index.js

@@ -1,9 +1,97 @@
-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'
+import { Container, Time } from './styles'
 import api from '~/services/api'
 
-// import { Container } from './styles';
+const range = [15, 16, 17, 18, 19, 20, 21, 22, 23, 24]
 
 export default function Dashboard() {
-  api.get('appointments')
-  return <div>Dashboard</div>
+  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)
+
+        response.data.find(
+          (a) => (
+            console.tron.log(isEqual(parseISO(a.date), compareDate)),
+            console.tron.log(parseISO(a.date)),
+            console.tron.log(compareDate)
+          )
+        )
+
+        return {
+          time: `${hour}:00h`,
+          past: isBefore(compareDate, new Date()),
+          appointment: response.data.find(
+            (a) => parseISO(a.date).toString() === compareDate.toString()
+          ),
+        }
+      })
+
+      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 ? '#999' : '#666')};
+  }
+`

src/pages/Profile/index.js

@@ -2,6 +2,7 @@ import React from 'react'
 import { useDispatch, useSelector } from 'react-redux'
 import { Form, Input } from '@rocketseat/unform'
 
+import { signOut } from '~/store/modules/auth/actions'
 import { updateProfileRequest } from '~/store/modules/user/actions'
 
 import AvatarInput from './AvatarInput'
@@ -15,6 +16,10 @@ export default function Profile() {
     dispatch(updateProfileRequest(data))
   }
 
+  function handleSignOut() {
+    dispatch(signOut())
+  }
+
   return (
     <Container>
       <Form initialData={profile} onSubmit={handleSubmit}>
@@ -38,7 +43,9 @@ export default function Profile() {
         <button type="submit">Atualizar perfil</button>
       </Form>
 
-      <button type="button">Sairdo GoBarber</button>
+      <button type="button" onClick={handleSignOut}>
+        Sairdo GoBarber
+      </button>
     </Container>
   )
 }

src/store/modules/auth/actions.js

@@ -24,3 +24,9 @@ export function signFailure() {
     type: '@auth/SIGN_FAILURE',
   }
 }
+
+export function signOut() {
+  return {
+    type: '@auth/SIGN_OUT',
+  }
+}

src/store/modules/auth/reducer.js

@@ -23,6 +23,11 @@ export default function auth(state = INITIAL_STATE, action) {
         draft.loading = false
         break
       }
+      case '@auth/SIGN_OUT': {
+        draft.token = null
+        draft.signed = false
+        break
+      }
       default:
     }
   })

src/store/modules/auth/sagas.js

@@ -60,8 +60,13 @@ export function setToken({ payload }) {
   }
 }
 
+export function signOut() {
+  history.push('/')
+}
+
 export default all([
   takeLatest('persist/REHYDRATE', setToken),
   takeLatest('@auth/SIGN_IN_REQUEST', signIn),
   takeLatest('@auth/SIGN_UP_REQUEST', signUp),
+  takeLatest('@auth/SIGN_OUT', signOut),
 ])

src/store/modules/user/reducer.js

@@ -15,6 +15,10 @@ export default function user(state = INITIAL_STATE, action) {
         draft.profile = action.payload.profile
         break
       }
+      case '@auth/SIGN_OUT': {
+        draft.profile = null
+        break
+      }
       default:
     }
   })

yarn.lock

@@ -3655,6 +3655,11 @@ 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.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==
+
 date-fns@^2.14.0:
   version "2.14.0"
   resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-2.14.0.tgz#359a87a265bb34ef2e38f93ecf63ac453f9bc7ba"