Galaxies-my-app/app/people/index.tsx

import ListEmptyComponent from "@/components/ListEmptyComponent";
import PersonItem from "@/components/PersonItem";
import { COLORS } from "@/constants/colors";
import { Person } from "@/types/person";
import React, { useEffect, useState } from "react";
import {
  ActivityIndicator,
  Button,
  FlatList,
  RefreshControl,
  StyleSheet,
  TextInput,
  View,
} from "react-native";

interface ApiResponse {
  results: Person[];
  next: string | null;
  result?: Person[];
}
const Page = () => {
  const [people, setPeople] = useState<Person[]>([]);
  const [refreshing, setRefreshing] = useState(false);
  const [loading, setLoading] = useState(true);
  const [searchQuery, setSearchQuery] = useState("");
  const [nextPage, setNextPage] = useState<string | null>(null);
  const [loadingMore, setLoadingMore] = useState(false);

  const fetchPeople = async (query: string = "", url: string | null = null) => {
    setLoading(true);
    try {
      let apiUrl = url || `https://swapi.dev/api/people`;
      if (query) {
        apiUrl = `https://swapi.tech/api/people/?name=${query}`;
      }

      const response = await fetch(apiUrl);
      const data: ApiResponse = await response.json();

      if (query && data.result) {
        const transformedResults = data.result.map((item: any) => ({
          name: item.properties.name,
          birth_year: item.properties.birth_year,
          gender: item.properties.gender,
          url: item.properties.url,
        }));
        setPeople(transformedResults);
      } else {
        setPeople((prevPeople) =>
          url ? [...prevPeople, ...data.results] : data.results,
        );
      }
      setNextPage(data.next);
    } catch (error) {
      console.error("Error fetching people:", error);
    } finally {
      setRefreshing(false);
      setLoading(false);
      setLoadingMore(false);
    }
  };

  useEffect(() => {
    fetchPeople();
  }, []);

  const onRefresh = () => {
    setRefreshing(true);
    fetchPeople(searchQuery);
  };

  const handleSearch = () => {
    fetchPeople(searchQuery);
  };

  const handleLoadMore = () => {
    if (nextPage && !loadingMore) {
      setLoadingMore(true);
      fetchPeople(searchQuery, nextPage);
    }
  };

  const renderFooter = () => {
    if (!loadingMore) return null;
    return (
      <View style={styles.footerLoader}>
        <ActivityIndicator size="small" color="#FFE81F" />
      </View>
    );
  };

  return (
    <View style={styles.container}>
      <View style={styles.searchContainer}>
        <TextInput
          style={styles.searchBar}
          placeholder="Search characters..."
          placeholderTextColor={COLORS.inactive}
          value={searchQuery}
          onChangeText={setSearchQuery}
        />
        <Button title="Search" onPress={handleSearch} color={COLORS.text} />
      </View>
      <FlatList
        data={people}
        renderItem={({ item }) => <PersonItem item={item} />}
        keyExtractor={(item) => item.url}
        refreshControl={
          <RefreshControl
            refreshing={refreshing}
            onRefresh={onRefresh}
            tintColor={COLORS.text}
          />
        }
        ListEmptyComponent={
          <ListEmptyComponent
            loading={loading}
            message={
              searchQuery
                ? "No matching characters found"
                : "No characters found"
            }
          />
        }
        onEndReached={handleLoadMore}
        onEndReachedThreshold={0.1}
        ListFooterComponent={renderFooter}
      />
    </View>
  );
};

export default Page;

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: COLORS.containerBackground,
  },
  searchContainer: {
    flexDirection: "row",
    alignItems: "center",
    padding: 10,
  },
  searchBar: {
    flex: 1,
    backgroundColor: COLORS.itemBackground,
    color: COLORS.text,
    padding: 10,
    marginRight: 10,
    borderRadius: 5,
    fontSize: 16,
  },
  footerLoader: {
    alignItems: "center",
    paddingVertical: 20,
  },
});