Skip to content

Commit

Permalink
feature:(messaging appointment implementation)
Browse files Browse the repository at this point in the history
  • Loading branch information
@Emmyfrank
Emmyfrank committed Jul 5, 2024
1 parent 23812ef commit 671ad95
Show file tree
Hide file tree
Showing 9 changed files with 265 additions and 38 deletions.
30 changes: 16 additions & 14 deletions app/Appointments/details.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import { useSafeAreaInsets } from "react-native-safe-area-context";
import { SvgXml } from "react-native-svg";
import { back } from "@/assets/icons/userprofile/icons";
import { NavigationHeader } from "@/components/NavigationHeader";
import { router, useLocalSearchParams, useRouter } from "expo-router";
import { router, useGlobalSearchParams, useLocalSearchParams, useRouter } from "expo-router";
import Touchable from "@/components/common/touchable";
import { heartFilledIcon } from "@/assets/icons/heart";
import { videoIcon, videoIconWhite } from "@/assets/icons/video";
Expand Down Expand Up @@ -58,12 +58,14 @@ const pkgs = {
};

const VideoCallAppointment = ({ route }: any) => {

const insets = useSafeAreaInsets();

const { typecall } = useLocalSearchParams<{
typecall: "Voice call" | "Messaging" | "Video call";
}>();

const appointment = useSelector((state: RootState) => state.appointment.selectedAppointment);
console.log("selected appointment ... here ...", appointment)
return (
<View className={`flex-1 pt-[${insets.top}px] bg-white`}>
<View className="px-6 mt-8">
Expand All @@ -89,20 +91,20 @@ const VideoCallAppointment = ({ route }: any) => {
<View className="bg-white rounded-3xl p-4 mb-6" style={styles.card1}>
<View className="flex-row justify-between w-full">
<Image
source={require("../../assets/doctors/doctor2.png")}
source={{uri:appointment.doctor.image}}
className="w-28 h-28"
/>
<View className="justify-evenly pl-1 w-[60%]">
<Text className="text-[18px] font-[UrbanistBold] text-greyscale-900">
Dr. Maria Foose
{appointment.doctor.name}
</Text>
<View className="border-t border-t-[#EEEEEE] w-full" />
<Text className="font-[UrbanistMedium] text-xs text-greyscale-800">
Dermatologists
{appointment.doctor.role}
</Text>
<Text className="font-[UrbanistMedium] text-xs text-greyscale-800">
{/* <Text className="font-[UrbanistMedium] text-xs text-greyscale-800">
The Venus Hospital in Paris, France
</Text>
</Text> */}
</View>
</View>
</View>
Expand All @@ -112,23 +114,23 @@ const VideoCallAppointment = ({ route }: any) => {
Scheduled Appointment
</Text>
<Text className="text-[16px] font-UrbanistRegular text-greyscale-800 mb-3">
Today, December 22, 2022
{appointment.appointment_date}
</Text>
<Text className="text-[16px] font-UrbanistRegular text-greyscale-800 mb-3">
10:00 - 10:30 AM (30 minutes)
{appointment.appointment_time}
</Text>
</View>
<View className="mb-5 mx-6">
<Text className="text-[20px] font-UrbanistBold text-greyscale-900 mb-4">
Patient Information
</Text>
<Detail title={"Full Name"} text={"Andrew Ainsley"} />
<Detail title={"Gender"} text={"Male"} />
<Detail title={"Age"} text={"27"} />
<Detail title={"Full Name"} text={appointment.patient.full_name} />
<Detail title={"Gender"} text={appointment.patient.gender} />
<Detail title={"Age"} text={appointment.patient.date_of_birth} />
<Detail
title={"Problem"}
title={""}
text={
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor. view more"
appointment.Reason_couse_toUpdated
}
/>
</View>
Expand Down
10 changes: 8 additions & 2 deletions app/Appointments/doctorcard/cardss.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,17 @@
import { getAppointment } from "@/redux/reducers/appointment";
import { router } from "expo-router";
import { Image, StyleSheet, Text, TouchableOpacity, View } from "react-native";
import { useDispatch } from "react-redux";
function Cardscomponent(props: any) {
const appointment = props.appointment;

const dispatch = useDispatch();
const handlePush = () => {
dispatch(getAppointment(appointment))
if (props.action === "Upcoming") {
router.push({
pathname: "/Appointments/details/",
params: { typecall: props.typecall },
params: { typecall: props.typecall, appointment },
});
}
};
Expand All @@ -16,7 +22,7 @@ function Cardscomponent(props: any) {
className="bg-white rounded-3xl px-4 py-4 w-full shadow-md mb-4"
>
<View className="flex-row justify-center items-center border-b-2 border-slate-100 pb-3">
<Image source={{uri:props.imager}} className="w-24 h-24 rounded-xl mr-3" />
<Image source={{uri:appointment.doctor.image}} className="w-24 h-24 rounded-xl mr-3" />
<View className="flex-1">
<Text className="text-xl font-UrbanistBold mb-3">{props.name}</Text>
<View className="flex items-center flex-row mb-3">
Expand Down
21 changes: 17 additions & 4 deletions app/Appointments/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,16 +13,19 @@ import {
import { supabase } from "../supabase";
import Cardcomponent from "./doctorcard/cards";
import Cardscomponent from "./doctorcard/cardss";
import { useDispatch, useSelector } from "react-redux";
import { RootState } from "@/redux/store/store";
import { getAppointments } from "@/redux/reducers/appointment";

function Screen() {
const [upcoming, setUpcoming] = useState(true);
const [cancels, setCancels] = useState(false);
const [complete, setComlpete] = useState(false);
const [notupcome, setNotupcome] = useState(false);
const [isModalVisible, setIsModalVisible] = useState(false);
const[appointmentData, setAppointmentData]=useState<any[]>([]);
const { doctorId } = useLocalSearchParams<{ doctorId: string }>();

const appointments = useSelector((state: RootState) => state.appointment.appointments);
const dispatch = useDispatch();
const handleUpcoming = () => {
setCancels(false);
setUpcoming(true);
Expand Down Expand Up @@ -69,14 +72,23 @@ const{data, error}=await supabase
role,
image,
hospital
),
patient(
id,
email,
phone,
full_name,
nickname,
date_of_birth,
gender
)
`)
.eq("patient_id", userId);

if(error){
console.log("Error occured while fetching appointments", error)
}else{
setAppointmentData(data);
dispatch(getAppointments(data))
console.log("fetched data:");
setTimeout(()=>{
router.push("/(tabs)/appointment")
Expand Down Expand Up @@ -275,9 +287,10 @@ const getPackageIcon = (typecall:any) => {
)} */}
{upcoming && (
<View style={styles.content}>
{appointmentData.map((appointment:any, index:any) => (
{appointments.map((appointment:any, index:any) => (
<Cardscomponent
key={index}
appointment={appointment}
name={appointment.doctor.name}
imager={appointment.doctor.image}
typecall={appointment.package}
Expand Down
105 changes: 90 additions & 15 deletions app/messagingAppointment/messaging.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,8 @@ import { NavigationHeader } from "@/components/NavigationHeader";
import { ChatInput } from "@/components/chatInput";
import Chat from "@/components/chats/chat";
import Recording from "@/components/recording";
import { router } from "expo-router";
import moment from "moment";
import { router, useGlobalSearchParams } from "expo-router";
import {
Image,
KeyboardAvoidingView,
Expand All @@ -19,25 +20,87 @@ import {

import { useEffect, useState } from "react";
import { SvgXml } from "react-native-svg";
import { useDispatch, useSelector } from "react-redux";
import { RootState } from "@/redux/store/store";
import { supabase } from "../supabase";
import { getMessages } from "@/redux/reducers/appointment";
export default function messagingAppointment() {
const [visible, setVisible] = useState(false);
const [isSession, setIsSession] = useState(true);

const [textMessage, setTextMessage] = useState("")
const [userId, setUserId] = useState("")
const appointment = useSelector((state: RootState) => state.appointment.selectedAppointment);
const messages = useSelector((state: RootState) => state.appointment.messages);
const dispatch = useDispatch();
const toggleModal = () => {
setVisible(!visible);
};

const fetchMessages=async()=>{
try{
const { data: userData, error: userError } = await supabase.auth.getUser();
if (userError) throw userError;
setUserId(userData?.user?.id);
const{data, error}=await supabase
.from("messages")
.select(`
*
`)
.eq("appointment_id", appointment.id);

if(error){
console.log("Error occured while fetching appointments", error)
}else{
console.log("messages",data)
dispatch(getMessages(data))
}}
catch(error){
console.log(error);
}
}


const channels = supabase.channel('custom-all-channel')
.on(
'postgres_changes',
{ event: '*', schema: 'public', table: 'messages' },
(payload) => {
console.log('Change received!', payload)
dispatch(getMessages([...messages,payload.new]))
}
)
.subscribe()


useEffect(() => {
const timer = setTimeout(() => {
setIsSession(false);
setTimeout(() => {
router.push("/Appointments/voice-call/session-ended");
}, 2000);
}, 6000);
return () => clearTimeout(timer);
}, []);
fetchMessages()
}, [dispatch]);

const handleSendMessage =async ()=>{
console.log(textMessage)
console.log("id",userId)
console.log("appointment",appointment.id)


const { data, error } = await supabase
.from('messages')
.insert([
{ message:textMessage, sender_id: userId,appointment_id:appointment.id,type:"message" },
])
.select()

if(data){
console.log('data inserted well')
}else{
console.log('data note inserted well',error)
}
}



return (
<View className="flex-1 bg-white py-10 px-6">
<NavigationHeader title={"Dr. Drake Boeson"} onBack={router.back}>
<NavigationHeader title={appointment.doctor.name} onBack={router.back}>
<TouchableOpacity>
<Image
source={require("@/assets/icons/search.png")}
Expand Down Expand Up @@ -78,14 +141,14 @@ export default function messagingAppointment() {
<ScrollView
showsVerticalScrollIndicator={false}
className="flex-1 mb-4">
<View className="flex-row justify-center items-center my-3">
{/* <View className="flex-row justify-center items-center my-3">
<View className="bg-[#75757512] justify-center items-center rounded-lg px-6 py-1.5">
<Text className="text-sm text-[#757575] font-UrbanistSemiBold">
Today
</Text>
</View>
</View>

</View> */}
{/*
<Chat
direction="end"
message="Hi, good afternoon Dr. Drake ... 😄😄😄"
Expand Down Expand Up @@ -162,12 +225,24 @@ export default function messagingAppointment() {
message="My pleasure. All the best for you Andrew! 🔥🔥"
time="9:42 AM"
color="lightgrey"
/> */}
{
messages&&messages.map((message:any, index:any) => (
<Chat
key={index}
direction={message.sender_id===userId?"end":"start"}
message={message.message}
time={moment(`${message.created_at}`).calendar()}
color={message.sender_id===userId?"lightblue":"lightgrey"}
/>
))
}

</ScrollView>
{isSession && (
<View className="flex-row justify-center items-center gap-2">
<View className="flex-1">
<ChatInput autoFocus={true} />
<ChatInput onChangeText={(text)=>setTextMessage(text)} onKeyPress={()=>handleSendMessage()} autoFocus={true} />
</View>
<Recording />
</View>
Expand Down
Loading

0 comments on commit 671ad95

Please sign in to comment.