Nessa aula nós vamos estar fazendo a utilização do productList, fazendo já a sua refatoração também.

Nós vamos começar tirando ele de dentro de “home” e colocar ele em “common”, para que a gente possa usar ele tanto na home quanto em Search (Atualizar o import dentro de home caso não atualize automaticamente)

Vamos também estar mudando o nome da pasta para “ProductList” e criar uma pasta dentro dela chamada “ProductCard” e criaremos os arquivos padrão

Podemos agora recortar tudo que está dentro do styled.ts da pasta ProductList e colocar no styled.ts da pasta ProductCard

import styled from "styled-components/native";

export const Container = styled.TouchableOpacity`
  width: 90%;
  margin: 10px auto;
  flex-direction: row;
`;

export const ProductImage = styled.Image`
  width: 120px;
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
`;

export const ProductInfoContainer = styled.View`
  flex: 1;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
  border: 1px solid ${({ theme }) => theme.colors.borderColor};
  padding: 10px;
`;

export const ProductPrice = styled.Text`
  font-size: 12px;
  color: ${({ theme }) => theme.colors.secondaryText};
  margin-bottom: 10px;
`;

export const ProductTitle = styled.Text`
  font-size: 14px;
  color: ${({ theme }) => theme.colors.primaryText};
  font-weight: bold;
`;

export const InfoLikeContainer = styled.View`
  flex-direction: row;
  justify-content: space-between;
  margin-top: 22px;
`;

export const SellerInfoContainer = styled.View``;

export const PublishedText = styled.Text`
  font-size: 10px;
  color: ${({ theme }) => theme.colors.secondaryText};
`;

export const SellerName = styled.Text`
  font-size: 14px;
  font-weight: bold;
  color: ${({ theme }) => theme.colors.primaryText};
`;

export const LikeButton = styled.TouchableOpacity``;

export const LikeImage = styled.Image.attrs({
  resizeMode: "contain",
})`
  width: 30px;
`;

Agora, a gente pode usar o que a gente criou lá aqui dentro do index.tsx

import React from "react";
import {
  Container,
  InfoLikeContainer,
  LikeButton,
  LikeImage,
  ProductImage,
  ProductInfoContainer,
  ProductPrice,
  ProductTitle,
  PublishedText,
  SellerInfoContainer,
  SellerName,
} from "./styled";
import { Alert } from "react-native";

const likeImage = require("../../../../../assets/icons/like.png");
const likedImage = require("../../../../../assets/icons/liked.png");

const ProductCard = () => {
  return (
    <Container
      activeOpacity={0.85}
      onPress={() => {
        handleNavProduct();
      }}
    >
      <ProductImage source={{ uri: data.productImage }} />
      <ProductInfoContainer>
        <ProductPrice>R$ {data.price}</ProductPrice>
        <ProductTitle numberOfLines={2}>{data.name}</ProductTitle>
        <InfoLikeContainer>
          <SellerInfoContainer>
            <PublishedText>
              Publicado em {data.publishedData} por:
            </PublishedText>
            <SellerName>{data.SellerName}</SellerName>
          </SellerInfoContainer>
          <LikeButton
            onPress={() => Alert.alert("Liked")}
            activeOpacity={0.85}
          >
            {!data.liked ? (
              <LikeImage source={likeImage} />
            ) : (
              <LikeImage source={likedImage} />
            )}
          </LikeButton>
        </InfoLikeContainer>
      </ProductInfoContainer>
    </Container>
  );
};

export default ProductCard;

Agora, a gente vai colocar para receber por props as informações do data. Por enquanto que ainda temos o data fictício, vamos chamar de data, porém depois a gente vai alterar para o nome fazer sentido

import { ItemProps } from "..";

export interface DataProps {
  data: ItemProps;
}

const ProductCard = (data: DataProps) => {
  return (
    <Container
      activeOpacity={0.85}
      onPress={() => {
        handleNavProduct();
      }}
    >

Vamos também copiar a função que nós leva até o produto

const ProductCard = (data: ItemProps) => {
  const navigation = useNavigation<PropsStack>();

  const handleNavProduct = () => {
    navigation.navigate("Home");
  };

  return (
    <Container
      activeOpacity={0.85}
      onPress={() => {
        handleNavProduct();
      }}
    >

Agora nós resta usar esse card lá no productList esse card, que vai ficar no lugar do item que temos.

import React from "react";
import { FlatList, ListRenderItem } from "react-native";
import ProductCard from "./ProductCard";

export interface ItemProps {
  id: string;
  productImage: string;
  price: string;
  name: string;
  publishedData: string;
  SellerName: string;
  liked: boolean;
}

const Data = [
];

const ProductList = () => {
  const renderItem: ListRenderItem<ItemProps> = ({ item }) => (
    <ProductCard data={item} />
  );

  return (
    <FlatList
      data={Data}
      keyExtractor={(item: ItemProps) => item.id}
      renderItem={renderItem}
      showsVerticalScrollIndicator={false}
      contentContainerStyle={{ paddingBottom: 80 }}
    />
  );
};

export default ProductList;

Agora a gente tem ele refatorado, que vai ficar melhor de usarmos quando a gente tiver com dados reais. Nós vamos agora passar para a tela de search.

const Search = ({ route }: Props) => {
  return (
    <Container>
      <Header />
      <ProductList />
      <NavBar />
    </Container>
  );
};

Temos então a tela de search completa. nós podemos ajustar o routes e deixar na ordem que ficará

const Routes = () => {
  return (
    <NavigationContainer>
      <Stack.Navigator
        screenOptions={{
          headerShown: false,
        }}
      >
        <Stack.Screen name="Home" component={Home} />
        <Stack.Screen name="Search" component={Search} />
        <Stack.Screen name="Login" component={Login} />
        <Stack.Screen name="Register" component={Register} />
      </Stack.Navigator>
    </NavigationContainer>
  );
};