Skip to content

Commit f676156

Browse files
NkbtemmyNkbtemmy
authored
Merge pull request #183 from atlp-rwanda/fix-doctors-screen
Add Functional Specialization Buttons
2 parents 34ce842 + 4b0c6f7 commit f676156

File tree

7 files changed

+3009
-3721
lines changed

7 files changed

+3009
-3721
lines changed

Diff for: ‎app/(app)/ActionMenu/AllDoctorScreen.tsx

+24-15
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,6 @@ import { star } from '@/assets/icons/star';
1111
import { search } from '@/assets/icons/search';
1212
import { more } from '@/assets/icons/more';
1313
import { leftArrow } from '@/assets/icons/left';
14-
import data from "../../doctors.json"
1514
import HeaderComponent from '@/components/HeaderComponent';
1615
import SearchComponent from '@/components/SearchComponent';
1716
import FoundDoctorCount from '@/components/FoundDoctorCount';
@@ -46,10 +45,6 @@ interface Doctor{
4645
specialization: string,
4746
about:string
4847
}
49-
interface categoryProp {
50-
name: string;
51-
Doctors: Doctor[];
52-
}
5348

5449
export const iconMapping: iconMappingProp = {
5550
heart: <SvgXml xml={WhiteHeart} />,
@@ -59,12 +54,13 @@ export const iconMapping: iconMappingProp = {
5954
function DoctorScreen() {
6055
const [showSearch, setShowSearch] = useState<boolean>(false);
6156
const [searchTerm, setSearchTerm] = useState<string>("");
62-
const [selectedCategory, setSelectedCategory] = useState(data.categories[0]);
6357
const [showpopUp, setShowPopup] = useState(false);
6458
const [selectedDoctor, setSelectedDoctor] = useState();
6559
const [showFilter, setShowfilter] = useState(false);
6660
const [doctors, setDoctors] = useState<Doctor[]>([]);
6761
const { theme, changeTheme } = useContext(ThemeContext);
62+
const [selectedSpecilization, setSelectedSpecilization] = useState<string>("All")
63+
const [specialization,setSpecialization]=useState<string[]>([])
6864
const containerStyle =
6965
theme === "dark" ? styles.outerDark : styles.outerLight;
7066
const scrollbackColor =
@@ -80,12 +76,14 @@ function DoctorScreen() {
8076
}
8177
setDoctors(data);
8278

83-
// console.log("Fetched data:", data);
79+
80+
const uniqueSpecialization = Array.from(new Set(data.map((doctor: Doctor) => doctor.specialization)))
81+
setSpecialization(["All",...uniqueSpecialization])
8482
}
8583

8684
fetchData();
8785
}, []);
88-
86+
console.log("this is retrived specilization:",specialization)
8987
const handleSearchPressed = () => {
9088
setShowSearch(true)
9189
}
@@ -100,9 +98,20 @@ function DoctorScreen() {
10098
setSelectedDoctor(doctor)
10199

102100
setShowPopup(true)
103-
}
101+
}
102+
const handleSpecializationChange = (specialization: string) => {
103+
setSelectedSpecilization(specialization)
104+
setSearchTerm('')
105+
106+
}
107+
const filteredDoctors = doctors.filter(doctor => {
108+
const matchSearchTerm = searchTerm.length > 0 ? doctor.last_name.toLowerCase().includes(searchTerm.toLowerCase())||doctor.first_name.toLowerCase().includes(searchTerm.toLowerCase()) : true
109+
const matchSpecialization = selectedSpecilization === 'All' || doctor.specialization === selectedSpecilization
110+
return matchSearchTerm&&matchSpecialization
111+
112+
})
113+
104114

105-
const filteredDoctors=searchTerm.length>0 ? doctors.filter(doctor=>doctor.last_name.toLowerCase().includes(searchTerm)):doctors
106115
return (
107116
<SafeAreaView style={[styles.container, containerStyle]}>
108117
<StatusBar style={theme === "dark" ? "light" : "dark"} />
@@ -136,15 +145,15 @@ function DoctorScreen() {
136145

137146
}}>
138147

139-
{data.categories.map((category, index) =>
140-
<Pressable key={index} style={[styles.categoryBtn,
141-
selectedCategory === category ? styles.firstCategoryBtn : {},
148+
{specialization.map((specialization, index) =>
149+
<Pressable key={index} onPress={()=>handleSpecializationChange(specialization)} style={[styles.categoryBtn,
150+
selectedSpecilization === specialization ? styles.firstCategoryBtn : {},
142151
]}>
143152

144153
<Text style={[
145154
styles.categoryBtnText,
146-
selectedCategory === category ? styles.firstCategoryBtnText : {},
147-
]}>{category.name}</Text>
155+
selectedSpecilization === specialization ? styles.firstCategoryBtnText : {},
156+
]}>{specialization}</Text>
148157

149158
</Pressable>
150159
)}

Diff for: ‎app/(app)/ActionMenu/FavoriteDoctorScreen.tsx

+21-6
Original file line numberDiff line numberDiff line change
@@ -78,6 +78,8 @@ function DoctorScreen() {
7878
const [showFilter, setShowfilter] = useState(false)
7979
const [doctors,setDoctors]=useState<Doctor[]>([])
8080
const { theme, changeTheme } = useContext(ThemeContext)
81+
const [selectedSpecilization, setSelectedSpecilization] = useState<string>("All")
82+
const [specialization,setSpecialization]=useState<string[]>([])
8183
const containerStyle = theme === "dark" ? styles.outerDark : styles.outerLight
8284
const scrollbackColor = theme === "dark" ? styles.scrollDark : styles.scrollLight
8385

@@ -90,6 +92,8 @@ function DoctorScreen() {
9092
return;
9193
}
9294
setDoctors(data)
95+
const uniqueSpecialization = Array.from(new Set(data.map((doctor: Doctor) => doctor.specialization)))
96+
setSpecialization(["All",...uniqueSpecialization])
9397

9498
}
9599

@@ -111,8 +115,19 @@ fetchData();
111115

112116
setShowPopup(true)
113117
}
118+
const handleSpecializationChange = (specialization: string) => {
119+
setSelectedSpecilization(specialization)
120+
setSearchTerm('')
121+
122+
}
123+
const filteredDoctors = doctors.filter(doctor => {
124+
const matchSearchTerm = searchTerm.length > 0 ? doctor.last_name.toLowerCase().includes(searchTerm.toLowerCase())||doctor.first_name.toLowerCase().includes(searchTerm.toLowerCase()) : true
125+
const matchSpecialization = selectedSpecilization === 'All' || doctor.specialization === selectedSpecilization
126+
return matchSearchTerm&&matchSpecialization
127+
128+
})
114129

115-
const filteredDoctors=searchTerm.length>0 ? doctors.filter(doctor=>doctor.last_name.toLowerCase().includes(searchTerm)):doctors
130+
116131
return (
117132
<SafeAreaView style={[styles.container, containerStyle]}>
118133
<StatusBar style={theme === "dark" ? "light" : "dark"} />
@@ -146,15 +161,15 @@ fetchData();
146161

147162
}}>
148163

149-
{data.categories.map((category, index) =>
150-
<Pressable key={index} style={[styles.categoryBtn,
151-
selectedCategory === category ? styles.firstCategoryBtn : {},
164+
{specialization.map((specialization, index) =>
165+
<Pressable key={index} onPress={()=>handleSpecializationChange(specialization)} style={[styles.categoryBtn,
166+
selectedSpecilization === specialization ? styles.firstCategoryBtn : {},
152167
]}>
153168

154169
<Text style={[
155170
styles.categoryBtnText,
156-
selectedCategory === category ? styles.firstCategoryBtnText : {},
157-
]}>{category.name}</Text>
171+
selectedSpecilization === specialization ? styles.firstCategoryBtnText : {},
172+
]}>{specialization}</Text>
158173

159174
</Pressable>
160175
)}

Diff for: ‎app/(app)/ActionMenu/index.tsx

+60-99
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import {
77
ImageBackground,
88
ScrollView,
99
FlatList,
10+
Pressable
1011
} from "react-native";
1112
import React, { useContext, useEffect, useState } from "react";
1213
import { useFonts as useFontsExpo } from "expo-font";
@@ -56,6 +57,8 @@ export default function Index() {
5657
const { authType, imageUrl: otherAuthImageUrl } = useAuth();
5758
const [showpopUp, setShowPopup] = useState(false);
5859
const [selectedDoctor, setSelectedDoctor] = useState();
60+
const [selectedSpecilization, setSelectedSpecilization] = useState<string>("All")
61+
const [specialization,setSpecialization]=useState<string[]>([])
5962

6063
const [fontsLoaded] = useFontsExpo({
6164
"Urbanist-regular": require("@/assets/fonts/Urbanist-Regular.ttf"),
@@ -95,7 +98,10 @@ export default function Index() {
9598
}
9699
setIsLoading(true);
97100
setDoctors(data);
101+
const uniqueSpecialization = Array.from(new Set(data.map((doctor: Doctor) => doctor.specialization)))
102+
setSpecialization(["All",...uniqueSpecialization])
98103
}
104+
99105
fetchData();
100106
}, [doctors]);
101107

@@ -131,17 +137,21 @@ export default function Index() {
131137
setShowPopup(true)
132138
}
133139

140+
const handleSpecializationChange = (specialization: string) => {
141+
setSelectedSpecilization(specialization)
142+
setSearchTerm('')
143+
144+
}
145+
const filteredDoctors = doctors.filter(doctor => {
146+
const matchSearchTerm = searchTerm.length > 0 ? doctor.last_name.toLowerCase().includes(searchTerm.toLowerCase())||doctor.first_name.toLowerCase().includes(searchTerm.toLowerCase()) : true
147+
const matchSpecialization = selectedSpecilization === 'All' || doctor.specialization === selectedSpecilization
148+
return matchSearchTerm&&matchSpecialization
134149

150+
})
135151
if (!fontsLoaded) {
136152
return null;
137153
}
138-
const filteredDoctors =
139-
searchTerm.length > 0
140-
? doctors.filter((doctor) =>
141-
doctor.last_name.toLowerCase().includes(searchTerm)
142-
)
143-
: doctors;
144-
154+
145155
return (
146156
<View
147157
style={{
@@ -461,98 +471,18 @@ export default function Index() {
461471
}}
462472
>
463473
<ScrollView horizontal showsHorizontalScrollIndicator={false}>
464-
<View
465-
style={{
466-
backgroundColor: "#246BFD",
467-
padding: 5,
468-
paddingHorizontal: 10,
469-
borderRadius: 20,
470-
justifyContent: "center",
471-
width: 65,
472-
height: 34,
473-
alignItems: "center",
474-
}}
475-
>
476-
<Text style={{ fontFamily: "Urbanist-regular", color: "white" }}>
477-
All
478-
</Text>
479-
</View>
480-
<View
481-
style={{
482-
backgroundColor: theme === "dark" ? "#181A20" : "#ffffff",
483-
marginLeft: 10,
484-
padding: 5,
485-
paddingHorizontal: 10,
486-
borderColor: "#246BFD",
487-
borderWidth: 2,
488-
borderRadius: 20,
489-
height: 34,
490-
alignItems: "center",
491-
}}
492-
>
493-
<Text
494-
style={{ fontFamily: "Urbanist-regular", color: "#246BFD" }}
495-
>
496-
General
497-
</Text>
498-
</View>
499-
<View
500-
style={{
501-
backgroundColor: theme === "dark" ? "#181A20" : "#ffffff",
502-
marginLeft: 10,
503-
padding: 5,
504-
paddingHorizontal: 10,
505-
borderColor: "#246BFD",
506-
borderWidth: 2,
507-
borderRadius: 20,
508-
height: 34,
509-
alignItems: "center",
510-
}}
511-
>
512-
<Text
513-
style={{ fontFamily: "Urbanist-regular", color: "#246BFD" }}
514-
>
515-
Dentist
516-
</Text>
517-
</View>
518-
<View
519-
style={{
520-
backgroundColor: theme === "dark" ? "#181A20" : "#ffffff",
521-
marginLeft: 10,
522-
padding: 5,
523-
paddingHorizontal: 10,
524-
borderColor: "#246BFD",
525-
borderWidth: 2,
526-
borderRadius: 20,
527-
height: 34,
528-
alignItems: "center",
529-
}}
530-
>
531-
<Text
532-
style={{ fontFamily: "Urbanist-regular", color: "#246BFD" }}
533-
>
534-
Nutritionist
535-
</Text>
536-
</View>
537-
<View
538-
style={{
539-
backgroundColor: theme === "dark" ? "#181A20" : "#ffffff",
540-
marginLeft: 10,
541-
padding: 5,
542-
paddingHorizontal: 10,
543-
borderColor: "#246BFD",
544-
borderWidth: 2,
545-
borderRadius: 20,
546-
height: 34,
547-
alignItems: "center",
548-
}}
549-
>
550-
<Text
551-
style={{ fontFamily: "Urbanist-regular", color: "#246BFD" }}
552-
>
553-
Neurologist
554-
</Text>
555-
</View>
474+
{specialization.map((specialization, index) =>
475+
<Pressable key={index} onPress={()=>handleSpecializationChange(specialization)} style={[styles.categoryBtn,
476+
selectedSpecilization === specialization ? styles.firstCategoryBtn : {},
477+
]}>
478+
479+
<Text style={[
480+
styles.categoryBtnText,
481+
selectedSpecilization === specialization ? styles.firstCategoryBtnText : {},
482+
]}>{specialization}</Text>
483+
484+
</Pressable>
485+
)}
556486
</ScrollView>
557487
</View>
558488

@@ -761,4 +691,35 @@ const styles = StyleSheet.create({
761691
marginLeft: "5%",
762692
marginTop: "6%",
763693
},
694+
categoryBtnView: {
695+
display: "flex",
696+
flexDirection: "row",
697+
alignItems: "center",
698+
marginBottom: "5%",
699+
backgroundColor: "white",
700+
},
701+
categoryBtn: {
702+
borderWidth: 2,
703+
borderColor: "#246BFD",
704+
height: 40,
705+
paddingHorizontal: 20,
706+
paddingVertical: 7,
707+
borderRadius: 20,
708+
display: "flex",
709+
flexDirection: "row",
710+
justifyContent: "center",
711+
alignItems: "center",
712+
marginRight: 8,
713+
marginLeft: 10,
714+
},
715+
firstCategoryBtn: {
716+
backgroundColor: "#246BFD",
717+
},
718+
firstCategoryBtnText: {
719+
color: "white",
720+
},
721+
categoryBtnText: {
722+
color: "#246BFD",
723+
fontSize: 16,
724+
},
764725
});

Diff for: ‎app/(app)/Appointments/ReschedualAppointment/rescheduleDate.tsx

+1-3
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ import Animated, {
2828
import Chips from "@/components/UI/ChipsComponent";
2929
export default function RescheduleAppointment() {
3030
const { theme, changeTheme } = useContext(ThemeContext);
31-
const [selectedTime, setSelectedTime] = useState(null);
31+
const [selectedTime, setSelectedTime] = useState("");
3232
const [selectedDate, setSelectedDate] = useState("");
3333
const modal = useModal();
3434

@@ -37,8 +37,6 @@ export default function RescheduleAppointment() {
3737
console.log(time);
3838
};
3939
console.log(selectedTime);
40-
// documentation : https://hosseinshabani.github.io/react-native-modern-datepicker/?ref=retool-blog
41-
// Function to generate time slots from 9:00 AM to 15:00 PM
4240
const generateTimeSlots = () => {
4341
const timeSlots = [];
4442
for (let hour = 9; hour <= 14; hour++) {

0 commit comments

Comments
 (0)