bunu daha güvenli performanslı ve iyi hale getir

import React from "react";
import { translate } from "@/core";
import { useInitialNumToRender } from "@/lib/hooks/useInitialNumToRender";
import { useSession } from "@/core/session/AuthContext";
import { List } from "@/components/util/List";
import { ListMaybePlaceholder } from "@/components/Lists";
import { cleanError } from "@/lib/strings/error";
import { ListRenderItemInfo } from "react-native";
import { useCountryPassports } from "@/api/countries/use-country-passports";
import CountryPassportRow from "@/Scenes/Country/comp/CountryPassportRow";
import { CountryPassportRowFilter } from "@/Scenes/Country/comp/CountryPassportRowFilter";
import { CountryPassports } from "@/api/visa";
type Props = {
  slug: string;
  isActive: boolean;
};

export function CountryPassport({ slug, isActive }: Props) {
  const { session } = useSession();
  const initialNumToRender = useInitialNumToRender();
  const [type, setType] = React.useState("all");

  const { isLoading, isError, error, isFetched, refetch, data } =
    useCountryPassports({
      slug: slug,
      token: session,
      enabled: isActive,
    });

  const renderItem = ({ item }: ListRenderItemInfo<any>) => {
    return <CountryPassportRow item={item} />;
  };

  const filterData = React.useMemo(() => {
    if (!data?.data) return [];

    return data.data.filter((item: CountryPassports) => {
      if (type === "all") return true;
      return item?.type === type;
    });
  }, [data?.data, type]);
  return (
    <>
      {(data?.data?.length ?? 0) < 1 ? (
        <ListMaybePlaceholder
          isLoading={isLoading || !isFetched}
          isError={isError}
          onRetry={refetch}
          emptyType="results"
          emptyMessage={translate("visa.empty")}
          hideBackButton
          errorMessage={cleanError(
            error?.message || translate("errorMessageRetry"),
          )}
        />
      ) : (
        <List
          data={filterData}
          renderItem={renderItem}
          keyExtractor={(item, index) => `${index}-${item?.visa_country?.slug}`}
          desktopFixedHeight
          ListHeaderComponent={() => (
            <CountryPassportRowFilter setType={setType} type={type} />
          )}
          initialNumToRender={initialNumToRender}
          windowSize={11}
        />
      )}
    </>
  );
}

import { View, ViewStyle } from "react-native";
import { PaletteText } from "@/components/ui/PaletteText";
import React from "react";
import { atoms as a, useTheme } from "@/alf";
import { CountryPassports } from "@/api/visa";
import { translate } from "@/core";
import { HighPriorityImage } from "@/components/util/images/HighPriorityImage";
import { notFoundCountryImage } from "@/lib/utils";
import { getColorVisaType, getTranslateVisaType } from "@/lib/emoji";

type Props = {
  item: CountryPassports;
  outerStyle?: ViewStyle;
};

const CountryPassportRow = ({ item, outerStyle }: Props) => {
  const t = useTheme();
  return (
    <View
      style={[
        a.flex_1,
        a.flex_row,
        a.align_center,
        a.px_md,
        a.py_lg,
        a.border_b,
        t.atoms.border_contrast_medium,
        outerStyle,
      ]}
    >
      <View style={[a.flex_1, a.flex_row, a.align_center]}>
        <View style={[a.flex_row, a.align_center, a.gap_md]}>
          <View style={[a.rounded_full, t.atoms.bg_contrast_200]}>
            <HighPriorityImage
              source={{
                uri: item?.visa_country?.flag_svg || notFoundCountryImage,
              }}
              style={[a.rounded_full, { height: 20, width: 20 }]}
            />
          </View>

          <View style={[a.flex_1]}>
            <PaletteText style={[t.atoms.text]} numberOfLines={1}>
              {item?.visa_country?.name}
            </PaletteText>
          </View>
          <View style={[a.flex_row, a.gap_sm, a.align_center]}>
            <PaletteText
              type="sm"
              style={[t.atoms.text_contrast_medium]}
              numberOfLines={1}
            >
              {item?.days
                ? translate("visa.visaFreeDays", { days: item?.days })
                : getTranslateVisaType(item?.type)}
            </PaletteText>
            <View
              style={[
                a.rounded_full,

                {
                  height: 8,
                  width: 8,
                  backgroundColor: getColorVisaType(item?.type),
                },
              ]}
            />
          </View>
        </View>
      </View>
    </View>
  );
};

export default CountryPassportRow;