fix: import hook

src/pages/MyTicket/index.tsx

@@ -1,59 +1,17 @@
-import { useEffect, useState } from 'react';
-import { useNavigate, useParams } from 'react-router-dom';
-
-import { format } from 'date-fns';
-import { ClienteMetadata } from 'types/IContext';
+import { SpinnerCircular } from 'spinners-react';
 
 import { Header } from 'components/Header';
 import { Ticket } from 'components/Ticket';
 
 import { useTheme } from 'contexts/Theme';
-import { useUser } from 'contexts/User';
 
-import { getHorarioSelecionado } from 'services/get/horarioMarcado';
+import { useTicket } from 'hooks/useTicket';
 
 import styles from './MyTicket.module.scss';
 
 export function MyTicket() {
-  const navigate = useNavigate();
-  const params = useParams();
-  const { selectHours, selectDay, setSelectHours, setSelectDay } = useUser();
   const { theme } = useTheme();
-
-  const [cliente, setCliente] = useState<ClienteMetadata>();
-
-  const dayFormatted = format(selectDay, 'yyyy-MM-dd');
-
-  async function buscaCliente() {
-    const { data, error, status } = await getHorarioSelecionado(params?.id || '', dayFormatted, selectHours);
-
-    if (error) {
-      navigate('/');
-      switch (status) {
-        default:
-          return;
-      }
-    }
-
-    if (!data) return;
-    if (!data[0].j) return;
-    if (!data[0].j[0]) return;
-
-    if (data[0].j === null) {
-      return;
-    }
-
-    setCliente(data[0].j[0]);
-  }
-
-  useEffect(() => {
-    buscaCliente();
-  }, []);
-
-  useEffect(() => {
-    setSelectHours('');
-    setSelectDay(new Date());
-  }, [params.id]);
+  const { loading, cliente } = useTicket();
 
   return (
     <>
@@ -62,7 +20,7 @@ export function MyTicket() {
 
         <div className={styles.container}>
           <h2>Apresente esse ticket para o seu barbeiro</h2>
-          <Ticket cliente={cliente} />
+          {loading ? <SpinnerCircular color="#ff9000" size={64} /> : <Ticket cliente={cliente} />}
         </div>
       </div>
     </>