Untitled

import React, { useState } from 'react';
import { View, Text, TextInput, FlatList, TouchableOpacity, StyleSheet } from 'react-native';

export default function Search() {
  const [doctors, setDoctors] = useState([]);
  const [doctorQuery, setDoctorQuery] = useState(''); 

  
  const searchDoctors = async (name) => {
    try {
      const [adi, soyadi] = name.split(' '); 
      const response = await fetch(`https://hapi.codlook.com/doktorlar?adi=${adi}&soyadi=${soyadi}`);
      if (response.ok) {
        const data = await response.json();
        console.log(data);
        if (data && data.items) {
          const filteredDoctors = data.items.filter(
            (item) =>
              item.adi.toLowerCase().includes(adi) ||
              item.soyadi.toLowerCase().includes(soyadi)
          );
          setDoctors(filteredDoctors);
        } else {
          setDoctors([]);
        }
      } else {
        console.error('API yanıt vermedi');
        setDoctors([]);
      }
    } catch (error) {
      console.error(error);
      setDoctors([]);
    }
  };
  
  
  
  const renderDoctorItem = ({ item }) => {
    if (item && item.adi && item.soyadi && item.doktor_unvani_adi && item.cinsiyet && item.dogum_tarihi) {
      return (
        <TouchableOpacity style={styles.item} onPress={() => alert(`Adı: ${item.adi}\nSoyadı: ${item.soyadi}\nÜnvanı: ${item.doktor_unvani_adi}\nCinsiyeti: ${item.cinsiyet}\nDoğum Tarihi: ${item.dogum_tarihi}`)}>
          <Text style={styles.title}>{`${item.adi} ${item.soyadi}`}</Text>
          <Text>{item.doktor_unvani_adi}</Text>
          <Text>{item.cinsiyet}</Text>
          <Text>{item.dogum_tarihi}</Text>
        </TouchableOpacity>
      );
    }
    throw new Error('Geçersiz Doktor');
  };
  
  
  return (
    <View style={styles.container}>
      <View style={styles.inputContainer}>
        <TextInput
          style={styles.input}
          placeholder="Doktor adı giriniz"
          onChangeText={(text) => {
            setDoctorQuery(text);
          }}
          value={doctorQuery}
        />
        <TouchableOpacity style={styles.button} onPress={() => searchDoctors(doctorQuery)}>
          <Text style={styles.buttonText}>Ara</Text>
        </TouchableOpacity>
      </View>
      <View style={styles.resultsContainer}>
        {doctors.length > 0 ? (
          <View style={styles.resultListContainer}>
            <Text style={styles.resultTitle}>Doktorlar:</Text>
            <FlatList
              data={doctors}
              renderItem={renderDoctorItem}
              keyExtractor={(item) => item.doktor_id.toString()}
            />
          </View>
        ) : (
          <Text style={styles.noResultsText}>Sonuç bulunamadı.</Text>
        )}
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1
  },
  inputContainer: {
    backgroundColor: '#fff',
    borderRadius: 10,
    margin: 10,
    padding: 5,
    flexDirection: 'row',
    alignItems: 'center',
  },
  input: {
    height: 40,
    flex: 1,
  },
  button: {
    backgroundColor: '#f9c2ff',
    padding: 10,
    borderRadius: 5,
    marginLeft: 10,
  },
  buttonText: {
    fontWeight: 'bold',
  },
  resultsContainer: {
    flex: 1,
    marginTop: 10,
  },
  resultListContainer: {
    margin: 10,
  },
  resultTitle: {
    fontSize: 18,
    fontWeight: 'bold',
    marginBottom: 5,
  },
  item: {
    backgroundColor: '#f9c2ff',
    padding: 20,
    marginVertical: 8,
    marginHorizontal: 16,
  },
  title: {
    fontSize: 18,
    fontWeight: 'bold',
  },
  noResultsText: {
    textAlign: 'center',
    fontSize: 18,
    fontWeight: 'bold',
    marginTop: 20,
  },
});