Skip to content

Commit

Permalink
Feat(Favorite-Doctor) add search functionality , which shows number o…
Browse files Browse the repository at this point in the history
…f founds, and new notification when you search do not match
  • Loading branch information
23nosurrend committed May 17, 2024
1 parent 49aa0d0 commit 2c69035
Show file tree
Hide file tree
Showing 6 changed files with 250 additions and 25 deletions.
67 changes: 42 additions & 25 deletions app/(app)/ActionMenu/FavoriteDoctorScreen.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,9 @@ import { leftArrow } from '@/assets/icons/left';
import data from "../../doctors.json"
import HeaderComponent from '@/components/HeaderComponent';
import SearchComponent from '@/components/SearchComponent';
import FoundDoctorCount from '@/components/FoundDoctorCount';
import NofoundComponent from '@/components/NofoundComponent';
import NotFoundScreen from '@/app/+not-found';


interface imageMapProp{
Expand Down Expand Up @@ -82,21 +85,18 @@ function DoctorScreen() {
!showSearch ? (
<HeaderComponent
onSearchPressed={handleSearchPressed}
headerText="Notification"
headerText="Top Doctor"

/>
) : (

<SearchComponent
onSearchSubmit={handleSearchSubmit}
<SearchComponent
onSearchSubmit={handleSearchSubmit}


/>
/>
)
}



</View>
<View style={styles.categoryBtnView}>
<ScrollView horizontal={true} showsHorizontalScrollIndicator={false} style={styles.categoryScroll}
Expand All @@ -114,9 +114,13 @@ function DoctorScreen() {

</Pressable>
)}


</ScrollView>

</View>
<View style={styles.foundDoctorView}>
{showSearch && (
<FoundDoctorCount count={filteredDoctors.length } />
)}
</View>
<View>
<ScrollView
Expand All @@ -128,25 +132,31 @@ function DoctorScreen() {
paddingBottom: 150,
paddingTop:20
}}
>
{filteredDoctors.map((doctor:any,index:any) =>
>
{filteredDoctors.length > 0 ? (

filteredDoctors.map((doctor: any, index: any) =>

<View key={index } style={styles.componentView}>
<DoctorComponent
<View key={index} style={styles.componentView}>
<DoctorComponent

imageSource={imageMap[doctor.imageSource]}
name={doctor.name}
iconComponent={iconMapping[doctor.iconComponent]}
professionalTitle={doctor.professionalTitle}
hospital={doctor.hospital}
star={iconMapping[doctor.star]}
review={doctor.review}
rate={doctor.rate}
imageSource={imageMap[doctor.imageSource]}
name={doctor.name}
iconComponent={iconMapping[doctor.iconComponent]}
professionalTitle={doctor.professionalTitle}
hospital={doctor.hospital}
star={iconMapping[doctor.star]}
review={doctor.review}
rate={doctor.rate}

/>
</View>
/>
</View>

)}
)

) : (
<NofoundComponent/>
)}



Expand Down Expand Up @@ -186,6 +196,13 @@ const styles = StyleSheet.create({
marginTop: "8%",
backgroundColor:"white"
},
foundDoctorView: {
width: "100%",
display: "flex",
flexDirection: 'row',
justifyContent: "center",
alignItems: "center"
},
searchComponent: {

},
Expand All @@ -211,7 +228,7 @@ const styles = StyleSheet.create({
flexDirection: "row",
alignItems: 'center',
marginBottom: "5%",
backgroundColor:"white"
backgroundColor: "white",
},
categoryBtn: {
borderWidth: 2,
Expand Down
7 changes: 7 additions & 0 deletions assets/icons/Defaulticon.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
export const defaultIcon=`<svg width="18" height="16" viewBox="0 0 18 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M13.0333 14.8035V3.45532" stroke="#246BFD" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M16.4311 11.3901L13.0329 14.804L9.63477 11.3901" stroke="#246BFD" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M4.75984 1.19409V12.5422" stroke="#246BFD" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M1.36133 4.60749L4.75948 1.1936L8.15762 4.60749" stroke="#246BFD" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
`
Binary file added assets/images/Doctors/notFound.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
99 changes: 99 additions & 0 deletions components/FoundDoctorCount.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,99 @@
import React,{ReactElement, useState} from 'react';
import { StyleSheet, Text, Image, View, TouchableHighlight, SafeAreaView, Button, Alert, Platform, StatusBar, Dimensions,TextInput, Pressable,ImageURISource} from 'react-native'
import Typography from '@/constants/Typography';
import { SvgXml } from "react-native-svg"
import { defaultIcon } from '@/assets/icons/Defaulticon';

interface foundDoctorProps{
count: number,

}

function FoundDoctorCount({ count }: foundDoctorProps) {
const foundText=count===0 ?"0 found":`${count} founds`
return (
<View style={styles.outer}>
<View style={styles.leftView}>
<View style={styles.countView}>
<Text style={styles.countText} >{foundText}</Text>

</View>

</View>
<View style={styles.RightView}>
<View style={styles.defaultView}>
<Text style={styles.defaultText}>Default</Text>

</View>
<Pressable style={styles.iconView}>
<SvgXml xml={defaultIcon} />

</Pressable>

</View>

</View>
);
}

export default FoundDoctorCount;
const styles = StyleSheet.create({
outer: {
width: "95%",
height: 30,
borderRadius: 10,
zIndex: 1000,
display: "flex",
flexDirection: "row",
justifyContent: "space-between",
alignItems:"center"

},
leftView: {
display: "flex",
flexDirection: "row",
justifyContent: "space-between",
alignItems:"center"

},
RightView: {
display: "flex",
flexDirection: "row",
justifyContent: "space-between",
alignItems: "center",
width: "24%",
},
countView: {


},
countText: {
color: "#212121",
fontWeight: "bold",
fontSize:16

},
foundView: {

},
foundText: {

},
defaultView: {

},
defaultText: {
color: "#246BFD",
fontWeight: "bold",
fontSize:16

},
iconView: {
display: "flex",
flexDirection: "row",
justifyContent: "center",
alignItems: "center",

}

})
101 changes: 101 additions & 0 deletions components/NofoundComponent.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,101 @@
import React,{ReactElement, useState} from 'react';
import { StyleSheet, Text, Image, View, TouchableHighlight, SafeAreaView, Button, Alert, Platform, StatusBar, Dimensions,TextInput, Pressable,ImageURISource} from 'react-native'
import Typography from '@/constants/Typography';
import { SvgXml } from "react-native-svg"

function NofoundComponent() {
return (
<View style={styles.parent}>
<View style={styles.outer}>
<View style={styles.imageView}>
<Image source={require("../assets/images/Doctors/notFound.png") } />

</View>
<View style={styles.NotFound}>
<Text style={styles.NotFoundText}>Not Found</Text>

</View>
<View style={styles.paragraph}>
<View style={styles.sentenceView}><Text style={styles.sentenceText}>Sorry, the keyword you entered can not be</Text></View>
<View style={styles.sentenceView}><Text style={styles.sentenceText}>found, please try again or search with </Text></View>
<View style={styles.sentenceView}><Text style={styles.sentenceText}>another keyword</Text></View>

</View>

</View>
</View>
);
}

export default NofoundComponent;
const styles = StyleSheet.create({
parent: {
width:"95%",
height:500,
borderRadius: 10,
zIndex: 1000,
display: "flex",
justifyContent: "center",
alignItems: "center",
borderColor:"black"


},

outer: {
width: "95%",
height:"75%",
borderRadius: 10,
zIndex: 1000,
display: "flex",
justifyContent: "space-between",
alignItems: "center",
borderColor:"red"



},
imageView: {
width:"100%",
display: "flex",
flexDirection: "row",
justifyContent: "center",
alignItems:"center"
},
NotFound: {
display: "flex",
flexDirection: "row",
justifyContent: "center",
alignItems: "center",
width:"100%"


},
NotFoundText: {
color: "#212121",
fontWeight: "bold",
fontSize:18

},
paragraph: {
display: "flex",
justifyContent: "center",
alignItems: "center",
width:"100%"

},
sentenceView: {
display: "flex",
flexDirection: "row",
justifyContent: "center",
alignItems: "center",
width:"100%"

},
sentenceText: {
color: "#212121",
fontSize: 16,
fontWeight:"300"

}
})
1 change: 1 addition & 0 deletions components/SearchComponent.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -80,6 +80,7 @@ const styles = StyleSheet.create({
flexDirection:"row",
justifyContent: "flex-start",
alignItems: "center",
backgroundColor:"white"
},
searchView: {
height: "100%",
Expand Down

0 comments on commit 2c69035

Please sign in to comment.