Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

Filtro usando JavaScript

Achei bom o desafio, fiquei pensando também em como fazer sem precisar usar o Get já que dependendo da complexidade da API fazer uma consulta a cada alteração no input pode deixar o programa lento ou até onerar a API devido a quantidade de requisições. Fiz desse modo: no arquivo servicos>Requisicoes > repositorios.js

import { FlatList, Text, TouchableOpacity } from "react-native";
import estilos from "../../paginas/Repositorios/estilos";

//Consulta valores que já foram retornados pela API
export function VerificaLista({nomeRep, repo, navigation}) {
    const lista = []

    for (const value of repo) {
        if (value.name.includes(nomeRep)) {
            lista.push(value)
        }
    }
    if (lista.length === 0) {
        return <Text style={estilos.textoVazio}>
                Nenhum repositório encontrado
            </Text>   
    }
    else {
        return (
            <FlatList
                data={lista}
                keyExtractor={lista => lista.id}
                renderItem={({item}) => (
                    <TouchableOpacity
                        style={estilos.repositorio}
                        onPress={() => navigation.navigate('InfoRepositorio', {item})}
                    >
                        <Text style={estilos.repositorioNome}>{item.name}</Text>
                        <Text style={estilos.repositorioData}>{item.data}</Text>
                    </TouchableOpacity>
                )}
            />
        )
    }
}

no arquivo paginas>Repositorios> index.js:

import React, { useEffect, useState } from 'react';
import { Text, View, FlatList, TouchableOpacity, TextInput } from 'react-native';
import {useIsFocused} from '@react-navigation/native';
import estilos from './estilos';
import { pegarRepositoriosDoUsuario, VerificaLista } from '../../servicos/Requisicoes/repositorios';


export default function Repositorios({ route, navigation }) {
    const [repo, setRepo] = useState([]);
    const [buscaRepositorio, setBuscaRepositorio] = useState('');
    const estaNaTela = useIsFocused(); //verifica se a tela está em foco

    useEffect(async () => {
        const resultados = await pegarRepositoriosDoUsuario(route.params.id);
        setRepo(resultados);

    }, [estaNaTela]) //executa 1 vez quando a tela está em foco

    return (
        <View style={estilos.container}>
                <Text style={estilos.repositoriosTexto}>{repo.length} repositórios criados</Text>
                {
                    repo?.length > 0  &&
                    <>
                    <TextInput /* busca usuarios */
                    placeholder="Busque por um repositório"
                    autoCapitalize="none"
                    style={estilos.repositorio}
                    value={buscaRepositorio}
                    onChangeText={setBuscaRepositorio}
                    />
                    </>

                }
                <TouchableOpacity 
                    style={estilos.botao}
                    onPress={() => navigation.navigate('CriarRepositorio', {item})}
                >
                    <Text style={estilos.textoBotao}>Adicionar novo repositório</Text>
                </TouchableOpacity>
                {
                    buscaRepositorio.length === 0 &&
                <FlatList 
                    data={repo}
                    style={{width: '100%'}}
                    keyExtractor={repo => repo.id}
                    renderItem={({item}) => (
                        <TouchableOpacity
                            style={estilos.repositorio}
                            onPress={() => navigation.navigate('InfoRepositorio', {item})}
                        >
                            <Text style={estilos.repositorioNome}>{item.name}</Text>
                            <Text style={estilos.repositorioData}>{item.data}</Text>
                        </TouchableOpacity>
                    )}
                />
                }
                {
                    buscaRepositorio.length > 0 &&
                    <VerificaLista 
                    nomeRep={buscaRepositorio}
                    repo={repo}
                    navigation={navigation}
                    />
                }
        </View>
    );
}

imagens mostrando como ficou:

Insira aqui a descrição dessa imagem para ajudar na acessibilidadeInsira aqui a descrição dessa imagem para ajudar na acessibilidade

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

1 resposta
solução!

Fala Gustavo!! Tudo bem?

Ficou muito boa sua implementação, parabéns!!

Realmente a sua lógica de pensamento fez sentido para essa sua situação, visto que nós "carregamos" a lista completa de repositórios no App e exibimos para o usuário, e ai com isso é menos custoso e mais prático fazer a filtragem nessa lista já armazenada. Mas imagine a situação que usuário tem 1000 repositórios, nesse caso iria demorar muito para baixar essa lista completa e ai entra um conceito novo chamado de paginação. Basicamente o aplicativo carrega só os primeiros dados (talvez uns 10 ou um pouco mais) e se o usuário quiser ver mais repositórios ele precisa clicar na nova página de repositórios, por exemplo. Ai nessa situação é bem melhor fazer a consulta para a API, já que ela é mais otimizada para buscar os dados de 1 repositório dentre os 1000, sem contar que no nosso App nós não teremos os dados dos 1000 repositórios. Faz sentido?

Mas para esse projeto a sua forma de busca é válida também! Parabéns e bons estudos!