Merge pull request #20 from atlp-rwanda/ft-doctors-messaging

Feature: Doctors messaging first

Author: Adadie

.github/workflows/deploy.yml

@@ -1,4 +1,4 @@
-name: Deployment Pipeline
+name: Deployment Pipeline 
 on:
   push:
     branches:
@@ -10,6 +10,8 @@ jobs:
     steps:
       - uses: actions/checkout@v4
       - uses: superfly/flyctl-actions/setup-flyctl@master
-      - run: flyctl deploy --remote-only
+      - run: flyctl deploy --remote-only --build-arg NEXT_PUBLIC_SUPABASE_URL=$NEXT_PUBLIC_SUPABASE_URL --build-arg NEXT_PUBLIC_SUPABASE_ANON_KEY=$NEXT_PUBLIC_SUPABASE_ANON_KEY
         env:
-          FLY_API_TOKEN: ${{ secrets.FLY_API_TOKEN }}
+          FLY_API_TOKEN: ${{ secrets.FLY_API_TOKEN }}
+          NEXT_PUBLIC_SUPABASE_URL: ${{ secrets.NEXT_PUBLIC_SUPABASE_URL }}
+          NEXT_PUBLIC_SUPABASE_ANON_KEY: ${{ secrets.NEXT_PUBLIC_SUPABASE_ANON_KEY }}

app/dashboard/messages/page.tsx

@@ -3,9 +3,9 @@ import MessagesMain from "@/components/messages/messagesSection";
 import Navbar from "@/components/navbar";
 import { createClient } from "@/utils/supabase/client";
 import { useRouter } from "next/navigation";
-import { useContext, useEffect, useState } from "react";
+import { Suspense, useContext, useEffect, useState } from "react";
 import { AuthContext } from "../layout";
-
+import { useSearchParams } from "next/navigation";
 export interface AppointmentType {
   id: string;
   patient_id: string;
@@ -34,12 +34,13 @@ export interface MessageType {
   };
 }
 
-export default function Messages() {
+function Messages() {
   const router = useRouter();
   const currentUser = useContext(AuthContext);
   const [willRefresh, setwillRefresh] = useState<number>(0);
   const [messages, setMessages] = useState<MessageType[]>([]);
-
+  const searchParams = useSearchParams();
+  const appointmentId = searchParams.get('id');
   const fetchAppointments = async (
     userId: string
   ): Promise<AppointmentType[]> => {
@@ -52,7 +53,19 @@ export default function Messages() {
     if (error) throw error;
     return data;
   };
+  const sendInitialMessage = async (appointmentId: string, doctorId: string) => {
+    const supabase = createClient();
+    const { error } = await supabase
+      .from("messages")
+      .insert({
+        message: "Hello?",
+        type: "message",
+        sender_id: doctorId,
+        appointment_id: appointmentId
+      });
 
+    if (error) throw error;
+  };
   const fetchMessages = async (
     appointmentId: string
   ): Promise<MessageType[]> => {
@@ -66,7 +79,7 @@ export default function Messages() {
       .order("created_at", { ascending: true });
 
     if (error) throw error;
-    console.log(data);
+    // console.log(data);
     return data;
   };
 
@@ -87,7 +100,19 @@ export default function Messages() {
     };
     fetchAllData();
   }, [willRefresh, currentUser]);
-
+useEffect(() => {
+  const writeInitial=async()=>{
+  if (appointmentId) {
+    const currentMessages = await fetchMessages(appointmentId);
+    if (currentMessages.length === 0) {
+      await sendInitialMessage(appointmentId, currentUser?.id!);
+      return;
+      // setMessages(await fetchMessages(appointmentId));
+    }
+  }
+  }
+  writeInitial();
+}, [])
   useEffect(() => {
     const supabase = createClient();
     const createChannel = supabase
@@ -106,16 +131,24 @@ export default function Messages() {
     return () => {
       supabase.removeChannel(createChannel);
     };
-  }, []);
+  }, [router]);
 
   return (
-    <main className="bg-[#246BFD] flex">
-      <div className="my-[30px] w-fit">
-        <Navbar />
-      </div>
-      <div className="w-full h-[100vh]">
-        <MessagesMain messages={messages} />
-      </div>
-    </main>
+      <main className="bg-[#246BFD] flex">
+        <div className="my-[30px] w-fit">
+          <Navbar />
+        </div>
+        <div className="w-full h-[100vh]">
+          <MessagesMain messages={messages} />
+        </div>
+      </main>
+    
   );
 }
+export default function FixedMessages(){
+  return (
+    <Suspense fallback={<p>Loading...</p>}>
+      <Messages />
+    </Suspense>
+  )
+}

components/dashboard/appointments/upcomingAppointments.tsx

@@ -1,14 +1,18 @@
 import { AuthContext } from "@/app/dashboard/layout";
 import Loading from "@/components/Loading";
 import { createClient } from "@/utils/supabase/client";
+import { UUID } from "crypto";
+
 import { useContext, useEffect, useState } from "react";
+import { redirectTo } from "@/utils/supabase/getUser";
 import {
   Appointment,
   AppointmentCalendarContext,
   getAppointmentTime,
   getColorByPackage,
   getDate,
   getPatientName,
+  Patient,
 } from "./helpers";
 
 export default function UpcomingAppointments() {
@@ -19,7 +23,12 @@ export default function UpcomingAppointments() {
     useState<Appointment | null>(null);
   const [updating, setUpdating] = useState(false);
   const [loading, setLoading] = useState(true);
-
+  const getPatientName = (patient: Patient) =>
+    patient.full_name + " " + patient.nickname;
+  const getAppointmentTime = (time: string) => {
+    const [hours, minutes] = time.split(":");
+    return `${hours}:${minutes} ${parseInt(hours) >= 12 ? "PM" : "AM"}`;
+  };
   useEffect(() => {
     if (!currentUser) return;
     const supabase = createClient();
@@ -195,7 +204,7 @@ export default function UpcomingAppointments() {
                     <button className="bg-primary-500 border border-primary-500 text-white px-4 py-0.5 rounded-full hover:bg-primary-700 transition-colors">
                       Reschedule
                     </button>
-                    <button className="bg-primary-500 border border-primary-500 text-white px-4 py-0.5 rounded-full hover:bg-primary-700 transition-colors">
+                    <button onClick={()=>redirectTo(appointment.id)}className="bg-primary-500 border border-primary-500 text-white px-4 py-0.5 rounded-full hover:bg-primary-700 transition-colors">
                       Join
                     </button>
                   </div>

components/messages/messagesSection.tsx

@@ -14,6 +14,7 @@ export default function MessagesMain({ messages }: MessageProps) {
   const [appDate, setAppDate] = useState<string>("");
   const [appTime, setAppTime] = useState<string>("");
   const [isEnded, setIsEnded] = useState<boolean>(false);
+  const [searchTerm, setSearchTerm] = useState<string>("");
   const handleChanges = (
     str: string,
     appId: string,
@@ -83,6 +84,7 @@ export default function MessagesMain({ messages }: MessageProps) {
             <input
               placeholder="Search"
               className="border-[1px] w-full p-2 rounded-xl bg-[#E5E5E5]"
+              onChange={(e) => setSearchTerm(e.target.value.toLowerCase())}
             />
             <div className="absolute right-2 top-1/2 transform -translate-y-1/2">
               <Image
@@ -96,7 +98,8 @@ export default function MessagesMain({ messages }: MessageProps) {
           </div>
         </div>
         <div className="flex-1 justify-between overflow-y-auto px-[30px] py-[20px]">
-          {groupedMessages.map((message) => (
+          {groupedMessages.filter((message)=>message.appointment.patient.full_name.toLowerCase().includes(searchTerm))
+          .map((message) => (
             <button
               key={message.id}
               className="w-full"
@@ -223,7 +226,7 @@ export default function MessagesMain({ messages }: MessageProps) {
           {isEnded ? (
             <div className="flex justify-center p-[30px]">
               <div className="p-2 bg-gray-300 rounded-md w-fit">
-                <p>Session ended</p>
+                <p>Currently you don't have access to this session</p>
               </div>
             </div>
           ) : (

utils/supabase/getUser.ts

@@ -1,6 +1,7 @@
 'use server'
 import { revalidatePath } from "next/cache";
 import { createClient } from "./server";
+import { redirect } from "next/navigation";
 const supabase = createClient();
  export async function getCurrentUser(){
     const {data, error}=  await supabase.auth.getUser();
@@ -15,6 +16,9 @@ export const pathRevalidation=(path:string)=>{
     revalidatePath(`/${path}`);
 
 }
+export const redirectTo=(id:string)=>{
+    redirect(`/dashboard/messages/?id=${id}`);
+}
 // export async function fetchDoctor(userId:string){
 //     const {data, error}= await supabase.from('doctor')
 // }