From c672a3326526714361271e8357ded5f5047154df Mon Sep 17 00:00:00 2001 From: 23nosurrend Date: Mon, 20 May 2024 09:19:02 +0200 Subject: [PATCH] Feat(Favorite Doctor) add functionality to help user remove a certain doctor from favorite --- app/(app)/ActionMenu/FavoriteDoctorScreen.tsx | 32 ++- components/DoctorComponent.tsx | 9 +- components/Removebtn.tsx | 41 ++++ components/RemovefavoritePopup.tsx | 193 ++++++++++++++++++ data.json | 1 + 5 files changed, 262 insertions(+), 14 deletions(-) create mode 100644 components/Removebtn.tsx create mode 100644 components/RemovefavoritePopup.tsx diff --git a/app/(app)/ActionMenu/FavoriteDoctorScreen.tsx b/app/(app)/ActionMenu/FavoriteDoctorScreen.tsx index ad341a77..8a68ad4d 100644 --- a/app/(app)/ActionMenu/FavoriteDoctorScreen.tsx +++ b/app/(app)/ActionMenu/FavoriteDoctorScreen.tsx @@ -16,6 +16,7 @@ import HeaderComponent from '@/components/HeaderComponent'; import SearchComponent from '@/components/SearchComponent'; import FoundDoctorCount from '@/components/FoundDoctorCount'; import NofoundComponent from '@/components/NofoundComponent'; +import RemovefavoritePopup from '@/components/RemovefavoritePopup'; import NotFoundScreen from '@/app/+not-found'; @@ -62,6 +63,8 @@ function DoctorScreen() { const [showSearch, setShowSearch] = useState(false) const [searchTerm, setSearchTerm] = useState('') const [selectedCategory, setSelectedCategory] = useState(data.categories[0]) + const [showpopUp, setShowPopup] = useState(false) + const [selectedDoctor,setSelectedDoctor]=useState() const handleSearchPressed = () => { setShowSearch(true) @@ -74,6 +77,11 @@ function DoctorScreen() { setSelectedCategory(category), setSearchTerm('') } + const handleRemove = (doctor:any) => { + setSelectedDoctor(doctor) + + setShowPopup(true) + } const filteredDoctors=searchTerm.length>0 ? selectedCategory.Doctors.filter(doctor=>doctor.name.toLowerCase().includes(searchTerm)):selectedCategory.Doctors return ( @@ -153,6 +161,7 @@ function DoctorScreen() { star={iconMapping[doctor.star]} review={doctor.review} rate={doctor.rate} + remove={()=>handleRemove(doctor)} /> @@ -162,17 +171,24 @@ function DoctorScreen() { ) : ( )} - - + - + - - + + setShowPopup(false)} + visible={showpopUp} + onClose={() => setShowPopup(false)} + doctor={selectedDoctor} + + + /> + @@ -183,11 +199,7 @@ export default DoctorScreen; const styles = StyleSheet.create({ container: { - width: "100%", - height:"100%", - display: "flex", - flexDirection: "row", - justifyContent: "center", + flex: 1, backgroundColor: "white", zIndex:1 }, diff --git a/components/DoctorComponent.tsx b/components/DoctorComponent.tsx index cae21e41..ef765dc0 100644 --- a/components/DoctorComponent.tsx +++ b/components/DoctorComponent.tsx @@ -10,9 +10,10 @@ interface DoctorComponentProps{ hospital: string, star: ReactElement, rate: string, - review:string + review: string, + remove:()=>void } -function DoctorComponent({imageSource,name,iconComponent,professionalTitle,hospital,star,rate,review}:DoctorComponentProps) { +function DoctorComponent({imageSource,name,iconComponent,professionalTitle,hospital,star,rate,review,remove}:DoctorComponentProps) { return ( @@ -26,11 +27,11 @@ function DoctorComponent({imageSource,name,iconComponent,professionalTitle,hospi { name} - + { iconComponent} - + diff --git a/components/Removebtn.tsx b/components/Removebtn.tsx new file mode 100644 index 00000000..f0a3bedc --- /dev/null +++ b/components/Removebtn.tsx @@ -0,0 +1,41 @@ +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" + +interface RemovebtnProps{ + text: string, + action: () => void, + backColor: string, + textColor:string + + +} + +function Removebtn({text,action,backColor,textColor}:RemovebtnProps) { + return ( + + {text } + + + ); +} + +export default Removebtn; + +const styles = StyleSheet.create({ + outer: { + width:"45%", + height: 50, + paddingHorizontal: 25, + paddingVertical: 5, + borderRadius: 20, + display: "flex", + flexDirection: "row", + justifyContent:"center", + alignItems:"center" + }, + textSize: { + fontSize:16 + } +}) \ No newline at end of file diff --git a/components/RemovefavoritePopup.tsx b/components/RemovefavoritePopup.tsx new file mode 100644 index 00000000..7e98dbfa --- /dev/null +++ b/components/RemovefavoritePopup.tsx @@ -0,0 +1,193 @@ +import React,{ReactElement, useState,useRef,useEffect} from 'react'; +import { StyleSheet, Text, Image, View,Animated, 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 { blueheart } from '@/assets/icons/blueHeart'; +import { star } from '@/assets/icons/star'; +import Removebtn from './Removebtn'; +import { overlay } from 'react-native-paper'; +import DoctorComponent from './DoctorComponent'; + +interface imageMapProp{ + [key:string]:ReturnType +} +interface iconMappingProp{ + [key :string]:ReactElement +} + + +interface RemovefavoritepopProps{ + visible: boolean, + onClose: () => void, + cancel: () => void, + doctor:any +} +export const iconMapping:iconMappingProp = { + heart: , + star: , +} +const imageMap: imageMapProp = { + 'doctor1.png': require("../assets/images/Doctors/doctor1.png"), + 'doctor2.png': require("../assets/images/Doctors/doctor2.png"), + 'doctor3.png': require("../assets/images/Doctors/doctor3.png"), + 'doctor4.png': require("../assets/images/Doctors/doctor4.png"), + 'doctor5.png':require("../assets/images/Doctors/doctor5.png") + +} + + +function RemovefavoritePopup({ visible, onClose, cancel, doctor }: RemovefavoritepopProps) { + const [showpopUp, setShowPopup] = useState(false) + const [selectedDoctor,setSelectedDoctor]=useState() + const handleRemove = (doctor:any) => { + setSelectedDoctor(doctor) + + setShowPopup(true) + } + 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 ( + + + + Remove From Favorites? + + + + + handleRemove(doctor)} + + /> + + + + + console.log("remove")} + backColor='#246BFD' + text="Yes,Remove" + textColor="white" + + + + + /> + + + + + + + + ); +} + +export default RemovefavoritePopup; + +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: "40%", + zIndex:1000, + backgroundColor: '#FAFAFA', + borderTopLeftRadius: 20, + borderTopRightRadius: 20, + 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:"#FAFAFA" + }, + 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" + } + +}) \ No newline at end of file diff --git a/data.json b/data.json index 2611d418..36b18340 100644 --- a/data.json +++ b/data.json @@ -30,6 +30,7 @@ "sentenceTwo": "Alan Watson on December 24, 2024, 13:00 p.m. 80% of the", "sentenceThree": "funds will be returned to your account.", "btnVisibility": "none" + }, { "IconComponent": "service",