fetching is working out! visualization is now available

app/home/devices/page.tsx

@@ -77,7 +77,6 @@ export default function DEVICES() {
                     )
                 }
             </div>
-            )
         </div>
     )
 }

app/home/metric_types/page.tsx

@@ -16,8 +16,11 @@ const METRIC_TYPES = () => {
             {metricTypes == null ? <div className='font-sans text-2xl'>No metrics to show</div> :
                 <div className="relative overflow-x-auto rounded">
                     <table className="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400">
-                        <thead className="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
+                        <thead className="text-xl text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
                             <tr>
+                                <th scope="col" className="px-6 py-3">
+                                    ID
+                                </th>
                                 <th scope="col" className="px-6 py-3">
                                     Metric
                                 </th>
@@ -28,14 +31,19 @@ const METRIC_TYPES = () => {
                         </thead>
                         <tbody>
                             {metricTypes.map((metricType: Metric, index: number) => (
-                                <tr key={index} className="bg-white border-b dark:bg-gray-800 dark:border-gray-700">
+                                <tr key={index} className="text-center bg-white border-b dark:bg-gray-800 dark:border-gray-700">
                                     <th scope="row" className="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
-                                        {metricType.name}
-                                        ID: {metricType.id}
+                                        {metricType.id}
                                     </th>
+
+                                    <td className="px-6 py-4">
+                                        {metricType.name}
+                                    </td>
+
                                     <td className="px-6 py-4">
                                         {metricType.description}
                                     </td>
+
                                 </tr>
                             ))}
                         </tbody>

app/login/page.tsx

@@ -14,8 +14,8 @@ import { navigate } from './actions';
 const LOGIN = () => {
   const pathname = usePathname()
   const [credentials, setCredentials] = useState({
-    email: '[email protected]',
-    password: 'XWC3I5vbA#hCJ0f'
+    email: '',
+    password: ''
   })
   const [loginError, setLoginError] = useState<string>('')
 
@@ -27,8 +27,11 @@ const LOGIN = () => {
           'accept': '*/*',
         }
       });
-      localStorage.setItem('token', response.data.token);
-      api.defaults.headers.Authorization = `Bearer ${response.data.token}`;
+      const data = JSON.parse(response.data);
+      const token = data.Authorization.split(' ')[1]; // Para separar só o token de `Bearer {token}`
+      localStorage.setItem('token', token);
+      api.defaults.headers.Authorization = token;
+      //api.defaults.headers.Authorization = `${data.Authorization}`;
 
       navigate('/home');
 

lib/shared_fetchers.ts

@@ -1,7 +1,4 @@
 import api from "../app/api";
-import { useRef } from "react";
-import { Metrics } from "@/lib/types";
-import { Device } from "@/lib/types";
 
 export const fetchMetricTypes = async () => {
     try {
@@ -18,7 +15,6 @@ export const fetchMetricTypes = async () => {
             throw new Error(`Erro na requisição: ${response.status}`);
         }
         const metricTypesData = response.data;
-        console.log(metricTypesData);
         return metricTypesData;
     } catch (e: any) {
         console.log(e);
@@ -45,64 +41,49 @@ export const getMetrics = async () => {
 }
 
 export const getMetricsByDeviceId = async (DeviceId: number) => {
-
-    let metricsURL = `${api.defaults.baseURL}/metric/search?device_id=${DeviceId}`;
     try {
-        const token = localStorage.getItem('token');
-        const metrics = await fetch(`${metricsURL}`, {
-            method: 'GET',
-            headers: {
-                'Authorization': `Bearer ${token}`,
+        const metrics = await api.get(`/metric/search?device_id=${DeviceId}`, {
+            headers:
+            {
                 'Content-Type': 'application/json',
                 'accept': '*/*',
             }
         })
-        const metricsData = await metrics.json()
+        const metricsData = await metrics.data
         return metricsData;
     } catch (e: any) {
         console.log(e);
     }
 }
 
 export const getDevices = async () => {
-    const devicesurl = `${api.defaults.baseURL}/device`;
-
     try {
-        const token = localStorage.getItem('token');
-        const response = await fetch(devicesurl, {
-            method: 'GET',
-            headers: {
-                'Authorization': `Bearer ${token}`,
+        const response = await api.get(`/device`, {
+            headers:
+            {
                 'Content-Type': 'application/json',
                 'Accept': '*/*',
             },
         });
-        console.log(response)
-        const devices = await response.json()
+
+        const devices = await response.data
         return devices
     } catch (e: any) {
         console.log(e)
     }
 }
 
 export const fetchLocations = async () => {
-    const locationsUrl = `${api.defaults.baseURL}/location/`;
     try {
-        const token = localStorage.getItem('token');
-        const response = await fetch(locationsUrl, {
-            method: 'GET',
-            headers: {
-                'Authorization': `Bearer ${token}`,
+        const response = await api.get(`/location`, {
+            headers:
+            {
                 'Content-Type': 'application/json',
                 'accept': '*/*',
             },
         });
 
-        if (!response.ok) {
-            throw new Error(`Erro na requisição: ${response.status}`);
-        }
-
-        const locationsData = await response.json();
+        const locationsData = await response.data;
         return locationsData;
     } catch (e: any) {
         console.log(e);