From 3f703176ff3eddd96f2def80a4c9946832ec0c08 Mon Sep 17 00:00:00 2001
From: UMWARI Aime Eudoxie <98123621+aimeudoxie@users.noreply.github.com>
Date: Thu, 18 Jul 2024 09:51:48 +0200
Subject: [PATCH] feature:adding doctor search component
---
app/(app)/ActionMenu/AllDoctorScreen.tsx | 84 ++++++++++++------------
1 file changed, 42 insertions(+), 42 deletions(-)
diff --git a/app/(app)/ActionMenu/AllDoctorScreen.tsx b/app/(app)/ActionMenu/AllDoctorScreen.tsx
index 30791c8..cfe4652 100644
--- a/app/(app)/ActionMenu/AllDoctorScreen.tsx
+++ b/app/(app)/ActionMenu/AllDoctorScreen.tsx
@@ -1,17 +1,11 @@
import React,{ReactElement, useEffect, useState} from 'react';
-import { StyleSheet, Text, Image, View, TouchableHighlight, SafeAreaView, Button, Alert, Platform, Dimensions,TextInput, ScrollView, Pressable} from 'react-native'
-import { Feather } from '@expo/vector-icons';
-import { AntDesign } from '@expo/vector-icons';
-import { Ionicons } from '@expo/vector-icons';
+import { StyleSheet, Text, Image, View, TouchableHighlight, SafeAreaView, Button, Alert, Platform, Dimensions,TextInput, ScrollView, Pressable, ActivityIndicator} from 'react-native'
+
import DoctorComponent from '@/components/DoctorComponent';
-import { FontAwesome } from '@expo/vector-icons';
import { SvgXml } from "react-native-svg"
import { whiteHeart } from '@/assets/icons/whiteHeart';
import { blueheart } from '@/assets/icons/blueHeart';
import { star } from '@/assets/icons/star';
-import { search } from '@/assets/icons/search';
-import { more } from '@/assets/icons/more';
-import { LightleftArrow } from '@/assets/icons/left';
import HeaderComponent from '@/components/HeaderComponent';
import SearchComponent from '@/components/SearchComponent';
import FoundDoctorCount from '@/components/FoundDoctorCount';
@@ -19,11 +13,11 @@ import NofoundComponent from '@/components/NofoundComponent';
import RemovefavoritePopup from '@/components/RemovefavoritePopup';
import FilterPopup from '@/components/FilterSearchComponent';
import { StatusBar } from 'expo-status-bar';
-import NotFoundScreen from '@/app/+not-found';
import { ThemeContext } from '@/ctx/ThemeContext';
import { useContext } from 'react';
import { supabase } from '@/lib/supabase';
import { router } from 'expo-router';
+import { Colors } from '@/constants/Colors';
@@ -53,6 +47,7 @@ export const iconMapping: iconMappingProp = {
star: ,
};
+
function DoctorScreen() {
const [showSearch, setShowSearch] = useState(false);
const [searchTerm, setSearchTerm] = useState("");
@@ -63,7 +58,7 @@ function DoctorScreen() {
const { theme, changeTheme } = useContext(ThemeContext);
const [selectedSpecilization, setSelectedSpecilization] = useState("All")
const [specialization, setSpecialization] = useState([])
- const [isloading, setIsLoading] = useState(false)
+ const [isLoading, setIsLoading] = useState(false)
const [favoriteDoctors,setFavoriteDoctors]=useState([])
const containerStyle =
theme === "dark" ? styles.outerDark : styles.outerLight;
@@ -72,7 +67,6 @@ function DoctorScreen() {
const [loggeduser, setLoggedUser] = useState()
const [profile, setProfile] = useState(null)
const [patient_id,setPatient_id]=useState()
-
useEffect(() => {
const fetchUser = async () => {
@@ -151,7 +145,7 @@ function DoctorScreen() {
fetchData();
}, []);
- console.log("this is retrived specilization:", specialization)
+ //console.log("this is retrived specilization:", specialization)
useEffect(() => {
const fetchFavoritesDoctor = async () => {
if (patient_id) {
@@ -170,12 +164,13 @@ function DoctorScreen() {
fetchFavoritesDoctor()
},[patient_id])
+
const handleSearchPressed = () => {
setShowSearch(true)
}
const handleSearchSubmit = (text: string) => {
- setSearchTerm(text.toLowerCase())
- }
+ setSearchTerm(text.toLowerCase());
+ };
const handleFilter = () => {
setShowfilter(true)
@@ -216,13 +211,14 @@ function DoctorScreen() {
}
};
-
- const filteredDoctors = doctors.filter(doctor => {
- const matchSearchTerm = searchTerm.length > 0 ? doctor.last_name.toLowerCase().includes(searchTerm.toLowerCase())||doctor.first_name.toLowerCase().includes(searchTerm.toLowerCase()) : true
- const matchSpecialization = selectedSpecilization === 'All' || doctor.specialization === selectedSpecilization
- return matchSearchTerm&&matchSpecialization
-
- })
+ const filteredDoctors = doctors.filter((doctor: Doctor) => {
+ const fullName = `${doctor.first_name || ''} ${doctor.last_name || ''}`.toLowerCase();
+ const matchSearchTerm = searchTerm.length > 0
+ ? fullName.includes(searchTerm.toLowerCase())
+ : true;
+ const matchSpecialization = selectedSpecilization === 'All' || doctor.specialization === selectedSpecilization;
+ return matchSearchTerm && matchSpecialization;
+ });
return (
@@ -231,23 +227,17 @@ function DoctorScreen() {
- {
- !showSearch ? (
-
- ) : (
-
-
- )
- }
+ {!showSearch ? (
+
+ ) : (
+
+ )}
+
+ {isLoading ? (
+
+ ) : (
+ <>
{filteredDoctors.length > 0 ? (
filteredDoctors.map((doctor: any, index: number) => {
@@ -301,13 +300,13 @@ function DoctorScreen() {
imageSource={{ uri: doctor.image }}
name={`${doctor.first_name} ${doctor.last_name}`}
iconComponent={favoriteDoctors.includes(doctor.id) ? (
-
+ blueheart &&
) : (
-
+ whiteHeart &&
)}
professionalTitle={doctor.specialization}
hospital={doctor.hospital_name}
- star={}
+ star={ star && }
review={doctor.reviews.length}
rate={doctor.result}
addRemoveFavorite={() => handleIconClick(doctor,doctor.id) }
@@ -322,7 +321,8 @@ function DoctorScreen() {
)}
-
+ >
+ )}