Skip to content

Commit

Permalink
Feat(Favorite-Doctor) add filter functionality,to allow user filter h…
Browse files Browse the repository at this point in the history 
…is search based on category and rating
  • Loading branch information
@23nosurrend
23nosurrend committed May 20, 2024
1 parent 4267359 commit ac6381c
Show file tree
Hide file tree
Showing 6 changed files with 477 additions and 5 deletions.
19 changes: 17 additions & 2 deletions app/(app)/ActionMenu/FavoriteDoctorScreen.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@ import SearchComponent from '@/components/SearchComponent';
import FoundDoctorCount from '@/components/FoundDoctorCount';
import NofoundComponent from '@/components/NofoundComponent';
import RemovefavoritePopup from '@/components/RemovefavoritePopup';
import FilterPopup from '@/components/FilterSearchComponent';
import NotFoundScreen from '@/app/+not-found';


Expand Down Expand Up @@ -64,7 +65,8 @@ function DoctorScreen() {
const [searchTerm, setSearchTerm] = useState<string>('')
const [selectedCategory, setSelectedCategory] = useState(data.categories[0])
const [showpopUp, setShowPopup] = useState(false)
const [selectedDoctor,setSelectedDoctor]=useState()
const [selectedDoctor, setSelectedDoctor] = useState()
const [showFilter,setShowfilter]=useState(false)

const handleSearchPressed = () => {
setShowSearch(true)
Expand All @@ -77,6 +79,9 @@ function DoctorScreen() {
setSelectedCategory(category),
setSearchTerm('')
}
const handleFilter = () => {
setShowfilter(true)
}
const handleRemove = (doctor:any) => {
setSelectedDoctor(doctor)

Expand All @@ -99,7 +104,8 @@ function DoctorScreen() {
) : (

<SearchComponent
onSearchSubmit={handleSearchSubmit}
onSearchSubmit={handleSearchSubmit}
filterAction={handleFilter}


/>
Expand Down Expand Up @@ -188,6 +194,15 @@ function DoctorScreen() {


/>
<FilterPopup
cancel={()=>setShowfilter(false)}
visible={showFilter}
onClose={() => setShowfilter(false)}



/>



</SafeAreaView>
Expand Down
4 changes: 4 additions & 0 deletions assets/icons/blueStar.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
export const blueStar=`<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M11.9456 9.54675C11.7729 9.71408 11.6936 9.95608 11.7329 10.1934L12.3256 13.4734C12.3756 13.7514 12.2583 14.0327 12.0256 14.1934C11.7976 14.3601 11.4943 14.3801 11.2456 14.2467L8.29292 12.7067C8.19026 12.6521 8.07626 12.6227 7.95959 12.6194H7.77892C7.71626 12.6287 7.65493 12.6487 7.59893 12.6794L4.64559 14.2267C4.49959 14.3001 4.33426 14.3261 4.17226 14.3001C3.77759 14.2254 3.51426 13.8494 3.57893 13.4527L4.17226 10.1727C4.21159 9.93341 4.13226 9.69008 3.95959 9.52008L1.55226 7.18675C1.35093 6.99141 1.28093 6.69808 1.37293 6.43341C1.46226 6.16941 1.69026 5.97675 1.96559 5.93341L5.27892 5.45275C5.53093 5.42675 5.75226 5.27341 5.86559 5.04675L7.32559 2.05341C7.36026 1.98675 7.40493 1.92541 7.45893 1.87341L7.51892 1.82675C7.55026 1.79208 7.58626 1.76341 7.62626 1.74008L7.69893 1.71341L7.81226 1.66675H8.09293C8.34359 1.69275 8.56426 1.84275 8.67959 2.06675L10.1589 5.04675C10.2656 5.26475 10.4729 5.41608 10.7123 5.45275L14.0256 5.93341C14.3056 5.97341 14.5396 6.16675 14.6323 6.43341C14.7196 6.70075 14.6443 6.99408 14.4389 7.18675L11.9456 9.54675Z" fill="#246BFD"/>
</svg>
`
4 changes: 4 additions & 0 deletions assets/icons/whiteStar.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
export const whiteStar=`<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M11.9456 9.54675C11.7729 9.71408 11.6936 9.95608 11.7329 10.1934L12.3256 13.4734C12.3756 13.7514 12.2583 14.0327 12.0256 14.1934C11.7976 14.3601 11.4943 14.3801 11.2456 14.2467L8.29292 12.7067C8.19026 12.6521 8.07626 12.6227 7.95959 12.6194H7.77892C7.71626 12.6287 7.65493 12.6487 7.59893 12.6794L4.64559 14.2267C4.49959 14.3001 4.33426 14.3261 4.17226 14.3001C3.77759 14.2254 3.51426 13.8494 3.57893 13.4527L4.17226 10.1727C4.21159 9.93341 4.13226 9.69008 3.95959 9.52008L1.55226 7.18675C1.35093 6.99141 1.28093 6.69808 1.37293 6.43341C1.46226 6.16941 1.69026 5.97675 1.96559 5.93341L5.27892 5.45275C5.53093 5.42675 5.75226 5.27341 5.86559 5.04675L7.32559 2.05341C7.36026 1.98675 7.40493 1.92541 7.45893 1.87341L7.51892 1.82675C7.55026 1.79208 7.58626 1.76341 7.62626 1.74008L7.69893 1.71341L7.81226 1.66675H8.09293C8.34359 1.69275 8.56426 1.84275 8.67959 2.06675L10.1589 5.04675C10.2656 5.26475 10.4729 5.41608 10.7123 5.45275L14.0256 5.93341C14.3056 5.97341 14.5396 6.16675 14.6323 6.43341C14.7196 6.70075 14.6443 6.99408 14.4389 7.18675L11.9456 9.54675Z" fill="white"/>
</svg>
`
316 changes: 316 additions & 0 deletions components/FilterSearchComponent.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,316 @@
import React,{ReactElement, useState,useRef,useEffect} from 'react';
import { StyleSheet, Text, Image, View,Animated, TouchableHighlight, SafeAreaView,ScrollView,Button, Alert, Platform, StatusBar, Dimensions,TextInput, Pressable,ImageURISource} from 'react-native'
import Typography from '@/constants/Typography';
import { SvgXml } from "react-native-svg"
import { blueheart } from '@/assets/icons/blueHeart';
import { star } from '@/assets/icons/star';
import Removebtn from './Removebtn';
import data from "../app/doctors.json"
import { overlay } from 'react-native-paper';
import DoctorComponent from './DoctorComponent';
import Ratebtn from './Ratebtn';
import { Rating } from 'react-native-elements';


interface iconMappingProp{
[key :string]:ReactElement
}


interface RemovefavoritepopProps{
visible: boolean,
onClose: () => void,
cancel: () => void,
}
export const iconMapping:iconMappingProp = {
heart: <SvgXml xml={blueheart} />,
star: <SvgXml xml={star} />,
}



function FilterPopup({ visible, onClose, cancel, }: RemovefavoritepopProps) {
const [selectedCategory, setSelectedCategory] = useState(data.categories[0])
const [showpopUp, setShowPopup] = useState(false)
const [selectedDoctor, setSelectedDoctor] = useState()
const [selectedRating, setSelectedRating] = useState("All")
const handleSelectedRating = (Rating: string) => {
setSelectedRating(Rating)
}
const handleCategoryChange = (category:any) => {
setSelectedCategory(category)
}

const translateY = useRef(new Animated.Value(0)).current
useEffect(() => {
if (visible) {
Animated.timing(translateY, {
toValue: -1,
duration: 300,
useNativeDriver:true
}).start()
} else {
Animated.timing(translateY, {
toValue: 1,
duration: 300,
useNativeDriver:true
}).start()
}
}, [visible])
if(!visible) return null
return (
<SafeAreaView style={styles.overlay}>
<Animated.View style={[styles.outer,{ transform: [{ translateY: translateY.interpolate({ inputRange: [-1, 1], outputRange: [0, 300] }) }] }]}>
<View style={styles.inner}>
<View style={styles.intro}><Text style={styles.introText}>Filter</Text></View>
<View style={styles.horizontal}></View>
<View style={styles.displayComponent}>
<View style={styles.specialityView}>
<View style={styles.titleView}><Text style={styles.title}>Speciality</Text></View>
<View style={styles.categoryBtnView}>
<ScrollView horizontal={true} showsHorizontalScrollIndicator={false} style={styles.categoryScroll}
contentContainerStyle={{
flexDirection: "row",
justifyContent: "space-between",
alignItems:'center'

}}>

{data.categories.map((category:any, index:any) =>
<Pressable key={index} onPress={() => handleCategoryChange(category)} style={[styles.categoryBtn,
selectedCategory === category ? styles.firstCategoryBtn : {},
]}>

<Text style={[
styles.categoryBtnText,
selectedCategory === category ? styles.firstCategoryBtnText : {},
]}>{category.name}</Text>

</Pressable>
)}
</ScrollView>

</View>
<View style={styles.rateView}>
<View style={styles.titleView}><Text style={styles.title}>Rating</Text></View>
<View style={styles.categoryBtnView}>
<ScrollView horizontal={true} showsHorizontalScrollIndicator={false} style={styles.categoryScroll}
contentContainerStyle={{
flexDirection: "row",
justifyContent: "center",
alignItems:"center"
}}
>
{["All", "2", "3", "4", "5"].map((Rating, index) => (

<Ratebtn
key={index}
text={Rating}
isSelected={selectedRating === Rating}
selectedAction={()=>handleSelectedRating(Rating)}


/>
))}



</ScrollView>
</View>

</View>

</View>


</View>
<View style={styles.horizontal}></View>
<View style={styles.btnView}>
<Removebtn
action={cancel}
backColor="#E9F0FF"
text="Reset"
textColor="#246BFD"

/>
<Removebtn
action={() => console.log("remove")}
backColor='#246BFD'
text="Apply"
textColor="white"




/>
</View>

</View>


</Animated.View>
</SafeAreaView>
);
}

export default FilterPopup;

const styles = StyleSheet.create({
overlay: {
position: "absolute",
width: "100%",
height: "100%",
backgroundColor: 'rgba(80, 85, 94, 0.8)',
justifyContent: 'flex-end',
zIndex: 1000,

},
outer: {
width: "100%",
height: "45%",
zIndex:1000,
backgroundColor: 'white',
borderTopLeftRadius: 30,
borderTopRightRadius: 30,
shadowColor: '#000',
shadowOffset: { width: 0, height: -2 },
shadowOpacity: 0.3,
shadowRadius: 10,
elevation: 5,
display: "flex",
flexDirection: "row",
justifyContent: "center",
},
intro: {
width: "100%",
height: 40,
marginBottom:"5%",
marginTop:"5%",
display: "flex",
flexDirection: "row",
justifyContent: "center",
alignItems: 'center',
},
introText: {
color: "#212121",
fontWeight: "bold",
fontSize:20
},
inner: {
width: "90%",
backgroundColor:"white"
},
btn: {
height: 50,
width:100,
display: "flex",
justifyContent: "center",
alignItems: "center",
paddingHorizontal:20

},
titleView: {
marginBottom:10

},
rateView: {


},
btnInnerView: {
display: "flex",
flexDirection: "row",
justifyContent: "center",
alignItems: "center",
width:"80%"

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

},
rateTextView: {

},
rateText: {

},
title: {
color: "#212121",
fontWeight: "500",
fontSize:18

},
scrollView: {

},
specialityView: {

},
displayComponent: {

},
btnView: {
display: "flex",
flexDirection: "row",
justifyContent: "space-between",
alignItems:'center'
},
componentView: {
backgroundColor:"#FDFDFD",
marginBottom: "5%",
width: "100%",
height: 150,
borderRadius:20,
display: "flex",
flexDirection: 'row',
justifyContent: "center",
alignItems: "center",
zIndex:10000
},
horizontal: {
width: "100%",
borderWidth: 1,
borderColor:"#EEEEEE",
marginBottom: "6%",
backgroundColor:"#EEEEEE"
},
categoryScroll: {

},
categoryBtnView: {
display:"flex",
flexDirection: "row",
alignItems: 'center',
marginBottom: "5%",
backgroundColor: "white",
},
categoryBtn: {
borderWidth: 2,
borderColor: "#246BFD",
height: 40,
paddingHorizontal: 20,
paddingVertical:7,
borderRadius: 20,
display: "flex",
flexDirection: "row",
justifyContent: "center",
alignItems: "center",
marginRight: 8,
marginLeft:10
},
firstCategoryBtn: {
backgroundColor: "#246BFD"
},
firstCategoryBtnText: {
color:"white"
},
categoryBtnText: {
color: "#246BFD",
fontSize:16
}

})
Loading

0 comments on commit ac6381c

Please sign in to comment.