Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feat: Add Functionality to Implement Search Filters by Category and Rating #77

Merged
merged 1 commit into from
May 21, 2024
Merged

Feat: Add Functionality to Implement Search Filters by Category and Rating #77

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
19 changes: 17 additions & 2 deletions app/(app)/ActionMenu/FavoriteDoctorScreen.tsx
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Loading