From 763fe6efa2e7bd399edeb17dc080d04aa07870cf Mon Sep 17 00:00:00 2001 From: leandrofars Date: Wed, 27 Dec 2023 21:48:50 -0300 Subject: [PATCH] feat(frontend): get device per id + init pagination --- frontend/src/pages/devices.js | 134 ++++++++++++++++++++++++++++++++-- 1 file changed, 129 insertions(+), 5 deletions(-) diff --git a/frontend/src/pages/devices.js b/frontend/src/pages/devices.js index 5defbb1..2f9b2bf 100644 --- a/frontend/src/pages/devices.js +++ b/frontend/src/pages/devices.js @@ -1,6 +1,17 @@ import React, { useState, useEffect } from 'react'; import Head from 'next/head'; -import { Box, Container, Unstable_Grid2 as Grid } from '@mui/material'; +import { + Box, + Container, + Unstable_Grid2 as Grid, + Card, + OutlinedInput, + InputAdornment, + SvgIcon, + Stack, + Pagination +} from '@mui/material'; +import MagnifyingGlassIcon from '@heroicons/react/24/solid/MagnifyingGlassIcon'; import { Layout as DashboardLayout } from 'src/layouts/dashboard/layout'; import { OverviewLatestOrders } from 'src/sections/overview/overview-latest-orders'; import { useAuth } from 'src/hooks/use-auth'; @@ -10,6 +21,10 @@ const Page = () => { const router = useRouter() const auth = useAuth(); const [devices, setDevices] = useState([]); + const [deviceFound, setDeviceFound] = useState(false) + const [pages, setPages] = useState(0); + const [page, setPage] = useState(null); + useEffect(() => { @@ -36,13 +51,70 @@ const Page = () => { return response.json() }) .then(json => { - return setDevices(json) + setPages(json.pages + 1) + setPage(json.page) + setDevices(json.devices) + return setDeviceFound(true) }) .catch(error => { return console.error('Error:', error) }); }, [auth.user]); + const handleChangePage = (e) => { + console.log("new page: ", e.target.value) + //TODO: Handle page change + } + + const fetchDevicePerId = async (id) => { + + var myHeaders = new Headers(); + myHeaders.append("Content-Type", "application/json"); + myHeaders.append("Authorization", auth.user.token); + + var requestOptions = { + method: 'GET', + headers: myHeaders, + redirect: 'follow' + } + + if (id == ""){ + fetch(process.env.NEXT_PUBLIC_REST_ENPOINT+'/device', requestOptions) + .then(response => { + if (response.status === 401) + router.push("/auth/login") + return response.json() + }) + .then(json => { + setPages(json.pages + 1) + setPage(json.page) + setDevices(json.devices) + return setDeviceFound(true) + }) + .catch(error => { + return console.error('Error:', error) + }); + } + + let response = await fetch(process.env.NEXT_PUBLIC_REST_ENPOINT+'/device?id='+id, requestOptions) + if (response.status === 401) + router.push("/auth/login") + let json = await response.json() + if (json.device != undefined){ + setDevices({"devices":[ + json.device + ]}) + setPages(1) + setPage(1) + }else{ + setDeviceFound(false) + setDevices([]) + setPages(1) + setPage(1) + } + + } + return ( <> @@ -50,6 +122,7 @@ const Page = () => { Oktopus | TR-369 + { }} > - + + + { + if (e.key === 'Enter') { + console.log("Fetch devices per id: ", e.target.value) + fetchDevicePerId(e.target.value) + } + }} + startAdornment={( + + + + + + )} + sx={{ maxWidth: 500 }} + /> + + {deviceFound ? + : + +

Device Not Found

+ + } + + {pages ? : null} + {/* //TODO: show loading */} + +