feat: add cliente buscar agendamentos por data

ctrlmais · Apr 5, 2022 · bf4041f · bf4041f
1 parent 3f07840
commit bf4041f
Show file tree

Hide file tree

Showing 2 changed files with 105 additions and 11 deletions.
diff --git a/src/pages/Cliente/Cliente.module.scss b/src/pages/Cliente/Cliente.module.scss
@@ -7,10 +7,60 @@
   font-size: 22px;
 }
 
+.titleContainer {
+  margin-top: 24px;
+  margin-bottom: 24px;
+  font-weight: bold;
+  color: var(--white);
+  margin-left: 12px;
+  font-size: 22px;
+  flex-direction: row;
+  display: flex;
+  align-items: center;
+  width: 90%;
+  justify-content: space-around;
+
+  font-size: 14px;
+}
+
 .containerList {
   display: flex;
   width: 100%;
   align-items: center;
   justify-content: center;
   flex-direction: column;
 }
+
+.button {
+  border: none;
+  background: var(--shape);
+  cursor: pointer;
+  border-radius: 10px;
+  width: 30px;
+  height: 30px;
+  align-items: center;
+  justify-content: center;
+
+  &:hover {
+    filter: brightness(0.6);
+    transition: 0.4s;
+  }
+}
+
+@media screen and (min-width: 839px) {
+  .titleContainer {
+    margin-top: 24px;
+    margin-bottom: 24px;
+    font-weight: bold;
+    color: var(--white);
+    margin-left: 12px;
+    font-size: 22px;
+    flex-direction: row;
+    display: flex;
+    align-items: center;
+    width: 35%;
+    justify-content: space-around;
+
+    font-size: 18px;
+  }
+}
diff --git a/src/pages/Cliente/index.tsx b/src/pages/Cliente/index.tsx
@@ -1,5 +1,8 @@
+import { useEffect, useState } from 'react';
+import { FiArrowLeft, FiArrowRight } from 'react-icons/fi';
 import { useNavigate } from 'react-router-dom';
 
+import { format } from 'date-fns';
 import { ClienteMetadata, UserMetadata } from 'types/IContext';
 
 import { CardBarbeiro } from 'components/CardBarbeiro';
@@ -14,21 +17,62 @@ import styles from './Cliente.module.scss';
 export function Cliente() {
   const navigate = useNavigate();
   const { user } = useAuth();
-  const { setBarbeiro, barbeiros, horariosAgendados } = useUser();
+  const { setBarbeiro, barbeiros, horariosAgendados, buscarAgendamentosData } = useUser();
+
+  const [selectDay, setSelectDay] = useState(new Date());
+
+  function nextDay() {
+    const nextDay = new Date(selectDay);
+    nextDay.setDate(nextDay.getDate() + 1);
+    setSelectDay(nextDay);
+  }
+
+  function previousDay() {
+    const prevDay = new Date(selectDay);
+    prevDay.setDate(prevDay.getDate() - 1);
+    setSelectDay(prevDay);
+  }
+
+  useEffect(() => {
+    const dateFormatted = format(selectDay, 'yyyy-MM-dd');
+
+    buscarAgendamentosData(dateFormatted);
+  }, [selectDay]);
 
   return (
     <>
-      {horariosAgendados.length > 0 && (
-        <>
-          <h2 className={styles.titleHome}>Seus horários agendados para hoje:</h2>
-          <div className={styles.containerHorarios}>
-            {horariosAgendados.map((horario: ClienteMetadata) => (
-              <CardCliente key={horario.id} cliente={horario} />
-            ))}
-          </div>
-        </>
+      <div className={styles.titleContainer}>
+        <button
+          type="button"
+          className={styles.button}
+          onClick={() => {
+            previousDay();
+          }}
+        >
+          <FiArrowLeft color="#fff" size={18} />
+        </button>
+        Seus horários agendados para {format(selectDay, 'dd/MM')}:
+        <button
+          type="button"
+          className={styles.button}
+          onClick={() => {
+            nextDay();
+          }}
+        >
+          <FiArrowRight color="#fff" size={18} />
+        </button>
+      </div>
+      {horariosAgendados.length > 0 ? (
+        <div className={styles.containerHorarios}>
+          {horariosAgendados.map((horario: ClienteMetadata) => (
+            <CardCliente key={horario.id} cliente={horario} />
+          ))}
+        </div>
+      ) : (
+        <div className={styles.containerHorarios}>
+          <h2 className={styles.titleHome}>Você não tem horários agendados para hoje.</h2>
+        </div>
       )}
-
       <h2 className={styles.titleHome}>
         Olá {user?.user_metadata.name}, eu encontrei {barbeiros.length}{' '}
         {barbeiros.length > 1 ? 'barbeiros' : 'barbeiro'} para você!