Skip to content

Commit

Permalink
integracao com a API #32
Browse files Browse the repository at this point in the history
  • Loading branch information
@M3L4O
M3L4O committed Mar 28, 2023
1 parent f4f47b0 commit 5633234
Show file tree
Hide file tree
Showing 3 changed files with 127 additions and 3,159 deletions.
1 change: 1 addition & 0 deletions src/entrypoints/web/wise-builder/pages/cadastrar-componente.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -207,6 +207,7 @@ function CadastroComp({ componente, editar }: Props) {
isClosable: true,
});
});
router.push("/listar-componente");
};

return (
Expand Down
269 changes: 126 additions & 143 deletions src/entrypoints/web/wise-builder/pages/resultados-busca.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import { useEffect, useState } from "react";
import {
Box,
Button,
Checkbox,
Divider,
Flex,
Expand All @@ -9,179 +10,161 @@ import {
Heading,
HStack,
Icon,
Input,
ListIcon,
Stack,
Text,
useColorModeValue,
} from "@chakra-ui/react";
import { FiFilter } from "react-icons/fi";
import { useRouter } from "next/router";
import { AddIcon, CheckCircleIcon, HamburgerIcon } from "@chakra-ui/icons";
import CardProduto from "../src/components/Card/card-produto";
import { Componente } from "../src/types/componente";
import { mockComponent } from "react-dom/test-utils";

/* async function getItems() {
const response = await fetch('https://sua-api.com/items');
const data = await response.json();
return data;
}
function ItemList() {
const [items, setItems] = useState([]);
useEffect(() => {
async function fetchData() {
const data = await getItems();
setItems(data);
}
fetchData();
}, []); */

const mockItems = [
{
id: "1",
type: "Placa de Vídeo",
manufacturer: "Zotac",
model: "3070",
price: 100,
link:
"https://www.kabum.com.br/produto/377636/placa-de-video-rtx-3070-msi-ventus-3x-plus-nvidia-geforce-8gb-gddr6-lhr-dlss-ray-tracing-geforce-rtx-3070-ventus-3x-plus-8g-oc-lhr",
},
{
id: "2",
type: "Placa de Vídeo",
manufacturer: "Asus",
model: "1060",
price: 200,
},
{
id: "3",
type: "Fonte",
manufacturer: "Asus",
model: "Pylon",
price: 500,
},
{
id: "4",
type: "Fonte",
manufacturer: "Asus",
model: "Pylon",
price: 500,
},
{
id: "6",
type: "Fonte",
manufacturer: "Asus",
model: "Pylon",
price: 500,
},
{
id: "7",
type: "Fonte",
manufacturer: "Asus",
model: "Pylon",
price: 500,
},
];

function ResultadosBusca() {
const router = useRouter();

const [components, setComponents] = useState([]);
const [checkedItems, setCheckedItems] = useState([false, false]);

async function search(name: string) {
const [busca, setBusca] = useState<string>("");

function handleClick() {
router.push({ pathname: "/resultados-busca", query: { name: busca } });
search();
}

async function search() {
const query = new URLSearchParams(window.location.search);
const name = query.get("name");
const apiEndpoint = "http://127.0.0.1:5000/api/v1/search?name=" + name;
const response = await fetch(apiEndpoint);
const data = await response.json();
console.log(data.slice(0, 0 + 4));

setComponents(data);
}

useEffect(() => {
const query = new URLSearchParams(window.location.search);
const name = query.get("name");
search(name);
search();
}, []);

const allChecked = checkedItems.every(Boolean);
const isIndeterminate = checkedItems.some(Boolean) && !allChecked;

return (
<Grid
h="md"
templateRows="repeat(3, 1fr)"
templateColumns="repeat(4, 1fr)"
gap={3}
bg={useColorModeValue("gray.50", "gray.800")}
>
<GridItem rowSpan={2} colSpan={1} margin={3}>
<Heading as="h4" size="sd" mb={4}>
Sua pesquisa:
</Heading>
<HStack mb={3}>
<FiFilter />
<Heading as="h4" size="md">
Filtrar:
</Heading>
</HStack>
<Flex
bg={useColorModeValue("white", "gray.700")}
rounded={"xl"}
boxShadow={"lg"}
<Box position={"relative"} bg={useColorModeValue("gray.50", "gray.800")}>
<Stack
flex={{ base: 2, md: 0 }}
mt={2}
mr={2}
justify={"center"}
direction={"row"}
spacing={6}
>
<Input
placeholder="Qual componente está buscando?"
onChange={(event) =>
setBusca(event.target.value)}
bg={"gray.100"}
ml={10}
border={0}
color={"gray.500"}
_placeholder={{
color: "gray.500",
}}
/>
<Button
fontFamily={"heading"}
mt={8}
mr={8}
bgGradient="linear(to-r, red.400,pink.400)"
color={"white"}
onClick={() =>
handleClick()}
_hover={{
bgGradient: "linear(to-r, red.400,pink.400)",
}}
>
<Stack margin={3}>
<Text>
Tipo de Componente
</Text>
<Stack pl={6} mt={1} spacing={1}>
<Checkbox
isChecked={checkedItems[0]}
onChange={(e) =>
setCheckedItems([e.target.checked, checkedItems[1]])}
>
Placa de vídeo
</Checkbox>
<Checkbox
isChecked={checkedItems[1]}
onChange={(e) =>
setCheckedItems([checkedItems[0], e.target.checked])}
>
Placa mãe
</Checkbox>
</Stack>
<Text>
Marcas
</Text>
<Stack pl={6} mt={1} spacing={1}>
<Checkbox
isChecked={checkedItems[0]}
onChange={(e) =>
setCheckedItems([e.target.checked, checkedItems[1]])}
>
Asus
</Checkbox>
<Checkbox
isChecked={checkedItems[1]}
onChange={(e) =>
setCheckedItems([checkedItems[0], e.target.checked])}
>
MSI
</Checkbox>
<Checkbox
isChecked={checkedItems[1]}
onChange={(e) =>
setCheckedItems([checkedItems[0], e.target.checked])}
>
ZOTAC
</Checkbox>
Buscar
</Button>
</Stack>
<Grid
h="md"
templateRows="repeat(3, 1fr)"
templateColumns="repeat(4, 1fr)"
gap={3}
bg={useColorModeValue("gray.50", "gray.800")}
>
<GridItem rowSpan={2} colSpan={1} margin={3}>
<Heading as="h4" size="sd" mb={4}>
Sua pesquisa:
</Heading>
<HStack mb={3}>
<FiFilter />
<Heading as="h4" size="md">
Filtrar:
</Heading>
</HStack>
<Flex
bg={useColorModeValue("white", "gray.700")}
rounded={"xl"}
boxShadow={"lg"}
>
<Stack margin={3}>
<Text>
Tipo de Componente
</Text>
<Stack pl={6} mt={1} spacing={1}>
<Checkbox
isChecked={checkedItems[0]}
onChange={(e) =>
setCheckedItems([e.target.checked, checkedItems[1]])}
>
Placa de vídeo
</Checkbox>
<Checkbox
isChecked={checkedItems[1]}
onChange={(e) =>
setCheckedItems([checkedItems[0], e.target.checked])}
>
Placa mãe
</Checkbox>
</Stack>
<Text>
Marcas
</Text>
<Stack pl={6} mt={1} spacing={1}>
<Checkbox
isChecked={checkedItems[0]}
onChange={(e) =>
setCheckedItems([e.target.checked, checkedItems[1]])}
>
Asus
</Checkbox>
<Checkbox
isChecked={checkedItems[1]}
onChange={(e) =>
setCheckedItems([checkedItems[0], e.target.checked])}
>
MSI
</Checkbox>
<Checkbox
isChecked={checkedItems[1]}
onChange={(e) =>
setCheckedItems([checkedItems[0], e.target.checked])}
>
ZOTAC
</Checkbox>
</Stack>
</Stack>
</Stack>
</Flex>
</GridItem>
<GridItem rowSpan={20} colSpan={3} margin={3}>
<CardProduto item={components} />
</GridItem>
</Grid>
</Flex>
</GridItem>
<GridItem rowSpan={20} colSpan={3} margin={3}>
<CardProduto item={components} />
</GridItem>
</Grid>
</Box>
);
}

Expand Down
Loading

0 comments on commit 5633234

Please sign in to comment.