Criando a estrutura de produtos do usuário

Para colocar os produtos do usuário aqui, é simples, nós vamos dentro de userProfile, e ao invés de passar o Data para o nosso UserAds, passamos o “userInfo.products”
```
<UserAds products={userInfo.products} seller={false} />
```

Agora precisamos ir lá em UserAds ajustar o recebimento

interface ProductProps {
  products: Product[];
  seller: boolean;
}

const UserAds = ({ products, seller }: ProductProps) => {

Agora podemos modificar as coisas dentro do card

const UserAds = ({ products, seller }: ProductProps) => {
  return (
    <Container>
      <TotalAds>
        Você tem {products.length.toString().padStart(2, "0")} anúncios
      </TotalAds>
      {products.length > 0 ? (
        products.map((product) => (
          <Card
            activeOpacity={0.85}
            onPress={() => {
              Alert.alert("Você clicou no produto!");
            }}
            key={product._id}
          >
            <Image
              source={{
                uri: product?.images[0].url,
              }}
            />
            <InfoContainer>
              <PriceTitleContainer>
                <Price>R$ {product.price}</Price>
                <Title numberOfLines={2}>{product.name}</Title>
              </PriceTitleContainer>
              <InfoIconContainer>
                <PublishedText>
                  Publicado em {getDate(product.createdAt)}
                </PublishedText>

                {!seller ? (
                  <IconButton
                    onPress={() => {
                      Alert.alert("Item para ser excluído");
                    }}
                    activeOpacity={0.85}
                  >
                    <Icon source={trashIcon} />
                  </IconButton>
                ) : (
                  <IconButton
                    onPress={() => {
                      Alert.alert("Item para ser excluído");
                    }}
                    activeOpacity={0.85}
                  >
                    <Icon source={hearthIcon} />
                  </IconButton>
                )}
              </InfoIconContainer>
            </InfoContainer>
          </Card>
        ))
      ) : (
        <NoAds>Por enquanto você não criou anúncios</NoAds>
      )}
    </Container>
  );
};

Com isso feito, nós já temos certinho a questão de ver os nossos produtos. Podemos agora criar o serviço de atualizar esses produtos. O método será basicamente o mesmo do de add, tirando que as imagens, temos que mandar separado em outro método

interface UpdateParams {
  _id: string;
  name: string;
  price: string;
  description: string;
  category: string;
  addressId: string;
  published: string;
}

{/* Outros códigos */}

updateProduct: async (params: UpdateParams) => {
  const token = await SecureStore.getItemAsync("onebitshop-token");

  const { _id, name, description, price, category, addressId, published } = params;

  const data = {
    name,
    description,
    price,
    category,
    addressId,
    published
  };

  const res = await api.put(`/products/${_id}`, data, {
    headers: {
      Authorization: `Bearer ${token}`,
    },
  });

  return res;
},

Nós vamos copiar a pasta de AddProduct e renomear tudo para UpdateProduct, pois será basicamente a mesma tela, porém nós vamos modificar coisas fundamentais

Agora podemos ir para routes, e iremos criar a rota de UpdateProduct, para que não fique na mesma rota e faça com que a gente precise modificar todo o app

UpdateProduct: {
  _id: string;
  name: string;
  price: string;
  images: Image[];
  description: string;
  category: string;
  addressId: string;
};

{/* Outros códigos */}

<Stack.Screen name="UpdateProduct" component={UpdateProduct} />

Dessa forma a gente vai ter como enviar as informações para o AddProduct, e caso a gente esteja navegando pela navbar, a gente pode mandar null

Agora no onPress de card nós vamos colocar a nossa navegação

<Card
  activeOpacity={0.85}
  onPress={() => {
    navigation.navigate("UpdateProduct", {
      _id: product._id,
      name: product.name,
      price: product.price,
      images: product.images,
      description: product.description,
      category: product.category,
      addressId: product.address._id,
    });
  }}
  key={product._id}
>

Agora, vamos receber as props nessa nova tela

type Props = NativeStackScreenProps<PropsNavigationStack, "UpdateProduct">;

const UpdateProduct = ({ route }: Props) => {

E agora vamos dar um set nos fields de acordo com o que recebemos deles

useEffect(() => {
  setFields({
    name: route.params.name,
    price: route.params.price,
    description: route.params.description,
    images: route.params.images,
    category: route.params.category,
    addressId: route.params.addressId,
  });

  const convertedImages = route.params.images.map((image: Image) => ({
    assetId: image.filename,
    uri: image.url,
    width: 200,
    height: 200,
  }));

  setImages(convertedImages);
  setCategorie(route.params.category);
}, []);

return (

Agora, iremos fazer uma verificação no endereço para enviar ele

const handleGetAddress = async () => {
  const res = await addressService.getAddress();

  const addressObj = res.data.find(
    (address: Address) => address._id === route.params.addressId
  );

  if (addressObj) {
    setAddressId(`${addressObj.street} Nº${addressObj.number}`);
  }

  const value = res.data.map((address: Address) => {
    return {
      key: address._id,
      value: `${address.street} Nº${address.number}`,
    };
  });

  setAddress(value);
};

<DropDownComponent
  data={Category}
  placeholder={categorie}
  setSelected={setCategorie}
  saveMethod="value"
/>

<DropDownComponent
  data={address}
  placeholder={addressId}
  setSelected={setAddressId}
  saveMethod="key"
/>

Agora com isso feito, nós podemos navegar para cá já com tudo alterado, então a gente já consegue ver todos os campos preenchidos. Vamos agora fazer a atualização no lugar de submiteProduct

Agora nós iremos deixar apenas o parâmetro sem imagem, pois a imagem a gente vai colocar depois

const handleSubmitProduct = async (post: string) => {
  if (
    Object.values(fields).some((value) => !value) ||
    !fields.images.length
  ) {
    Alert.alert("Um dos seus campos não está preenchido");
    return;
  }

  let params = {
		_id: route.params._id,
    ...fields,
    published: post,
  };

  const { status } = await productService.updateProduct(params);

  if (status === 201) {
    Alert.alert("Seu produto foi atualizado com sucesso!");
    navigation.navigate("Home");
  }
};

E agora nós podemos modificar as informações base dos produtos sem mexer nas imagens ainda, inclusive deixando ela pública ou privada de acordo com o que a gente selecionar aqui

Vamos agora começar criando o serviço de deletar o produto

interface DeleteParams {
  _id: string;
}

{/* Outros códigos */}

deleteProduct: async (params: any) => {
  const token = await SecureStore.getItemAsync("onebitshop-token");

  const { _id } = params;

  const res = await api.delete(`/products/${_id}`, {
    headers: {
      Authorization: `Bearer ${token}`,
    },
  });

  return res;
},

E agora vamos criar um handle dentro de userAds para deletar

const handleDeleteProduct = async (_id: string) => {
  const params = {
    _id,
  };

  const res = await productService.deleteProduct(params);

  if (res.status === 204) {
    Alert.alert("Produto deletado com sucesso");
    navigation.navigate("Home");
  }
};

{/* Outros códigos */}

{!seller ? (
  <IconButton
    onPress={() => {
      Alert.alert(
        "Você tem certeza?",
        "Ao fazer isso você deleterá o produto permanentemente.",
        [
          {
            text: "Sim",
            onPress: () => {
              handleDeleteProduct(product._id);
            },
          },
          {
            text: "Não",
          },
        ]
      );
    }}
    activeOpacity={0.85}
  >
    <Icon source={trashIcon} />
  </IconButton>
) : (
  <IconButton
    onPress={() => {
      Alert.alert("Item para ser excluído");
    }}
    activeOpacity={0.85}
  >
    <Icon source={hearthIcon} />
  </IconButton>
)}

Com isso, a gente vai chamar a função enviando o id do produto para o serviço e vamos ser redirecionados para a home em seguida