Moved request to useCalls

ConnieML · Mar 10, 2024 · 5d7a28f · 5d7a28f
1 parent 4d6ee29
commit 5d7a28f
Show file tree

Hide file tree

Showing 7 changed files with 116 additions and 199 deletions.
diff --git a/src/app/api/reservations/route.ts b/src/app/api/reservations/route.ts
@@ -7,6 +7,7 @@ const authToken = process.env.TWILIO_AUTH_TOKEN;
 
 const client = require('twilio')(accountSid, authToken);
 
+// TODO: Update to follow proper REST api standards.
 // get all reservations assigned to a worker, and the task associated with each reservation
 export async function GET(req: NextRequest) {
     const workerSid = req.nextUrl.searchParams.get('workerSid');
@@ -39,9 +40,9 @@ export async function GET(req: NextRequest) {
     }
 }
 
+// TODO: Update to follow proper REST api standards.
 // Update reservation status
 export async function POST(req: NextRequest) {
-
     try {
         const task = req.nextUrl.searchParams.get('taskSid');
         const status = req.nextUrl.searchParams.get('status');

diff --git a/src/app/api/tasks/route.ts b/src/app/api/tasks/route.ts
@@ -7,6 +7,7 @@ const authToken = process.env.TWILIO_AUTH_TOKEN;
 const workspaceSid = process.env.TWILIO_WORKSPACE_SID || '';
 const client = require('twilio')(accountSid, authToken);
 
+// TODO: Update to follow proper REST api standards.
 // Dequeue a reservation to connect the call
 export async function POST(req: NextRequest) {
     try {

diff --git a/src/app/dashboard/tasks/page.tsx b/src/app/dashboard/tasks/page.tsx
@@ -1,56 +1,27 @@
 "use client"
 
-import { useState, useEffect, useCallback } from 'react';
+import { useState, useEffect, useCallback, useContext } from 'react';
 import { useSession } from "next-auth/react";
 import { Button } from '../../../components/ui/button';
 import React from 'react';
 import { formatPhoneNumber, formatTimeWithUnits } from '../../../lib/utils';
-
+import CallsContext from '@/contexts/CallsContext';
 
 export default function Tasks() {
-  const [tasks, setTasks] = useState([]);
-  const [activeTasks, setActiveTasks] = useState([]);
-  const { data: session } = useSession();
-
-  const fetchTasks = useCallback(() => {
-    fetch('/api/reservations?workerSid=' + session?.employeeNumber)
-      .then(response => response.json())
-      .then(data => {
-        setTasks(data);
-        setActiveTasks(data.filter((task: any) => task.reservation.reservationStatus === 'accepted' || task.reservation.reservationStatus === 'pending'));
-      });
-  }, [session]);
-
-  const updateReservation = (reservation: any, status: string) => {
-    try {
-      fetch(`/api/reservations?taskSid=${reservation.taskSid}&status=${status}&reservationSid=${reservation.sid}`, {
-        method: 'POST'
-      })
-    } catch (error) {
-      console.error("Error updating reservation", error)
-    }
-    fetchTasks()
-  }
-
-  const dequeueTask = (task: any, number: string) => {
-    try {
-      fetch(`/api/tasks?taskSid=${task.reservation.taskSid}&reservationSid=${task.reservation.sid}&number=${number}`, {
-        method: 'POST'
-      })
-    } catch (error) {
-      console.error("Error dequeing reservation", error)
-    }
-    fetchTasks()
-  }
-
-  useEffect(() => {
-    // Fetch tasks immediately and then every 2 seconds
-    fetchTasks();
-    const intervalId = setInterval(fetchTasks, 2000);
 
-    // Clear interval on component unmount
-    return () => clearInterval(intervalId);
-  }, [fetchTasks]);
+  const {
+    inCall,
+    number,
+    makeCall,
+    setNumber,
+    endCall,
+    incomingCall,
+    acceptCall,
+    rejectCall,
+    activeTasks,
+    updateReservation,
+    dequeueTask
+  } = useContext(CallsContext);
 
   return (
     <main>

diff --git a/src/components/appbar/NotificationsCard.tsx b/src/components/appbar/NotificationsCard.tsx
@@ -1,40 +1,19 @@
 import React, { useCallback, useEffect } from "react";
 import { formatPhoneNumber, formatTimeWithUnits } from "../../lib/utils";
-import { useSession } from "next-auth/react";
 import { MessageSquare, PhoneIncoming } from "lucide-react";
 
 
 interface NotificationsCardProps {
   activeTasks: any;
-  setActiveTasks: (tasks: any) => void;
 }
 
-export default function NotificationsCard({ activeTasks, setActiveTasks }: NotificationsCardProps) {
-  const { data: session } = useSession();
-
-  const fetchTasks = useCallback(() => {
-    fetch('/api/reservations?workerSid=' + session?.employeeNumber)
-      .then(response => response.json())
-      .then(data => {
-        setActiveTasks(data.filter((task: any) => task.reservation.reservationStatus === 'accepted' || task.reservation.reservationStatus === 'pending'));
-      });
-  }, [session, setActiveTasks]);
-
-  useEffect(() => {
-    // Fetch tasks immediately and then every 2 seconds
-    fetchTasks();
-    const intervalId = setInterval(fetchTasks, 2000);
-
-    // Clear interval on component unmount
-    return () => clearInterval(intervalId);
-  }, [fetchTasks]);
+export default function NotificationsCard({ activeTasks }: NotificationsCardProps) {
 
   return (
-
     <div>
-      <h1 className="text-lg">Notifications</h1>
-      {activeTasks && Array.isArray(activeTasks) && activeTasks
-        .map((task: any) => (
+      <h2>Notifications</h2>
+      {activeTasks?.length > 0 ? (
+        activeTasks.map((task: any) => (
           <div key={task.task.sid} className="border-t border-gray-300 w-full p-1 flex items-center">
             <div className="mr-3">
               {task.task.taskChannelUniqueName === 'voice' ? <PhoneIncoming /> : <MessageSquare />}
@@ -54,7 +33,10 @@ export default function NotificationsCard({ activeTasks, setActiveTasks }: Notif
               <h3 className="text-sm font-light">{formatTimeWithUnits(task.task.age)}</h3>
             </div>
           </div>
-        ))}
+        ))
+      ) : (
+        <p className="text-sm italic mt-2">No Notifications</p>
+        )}
     </div>
   )
 }
diff --git a/src/components/appbar/index.tsx b/src/components/appbar/index.tsx
@@ -65,11 +65,11 @@ export default function Appbar({
     endCall,
     incomingCall,
     acceptCall,
-    rejectCall
+    rejectCall,
+    activeTasks
   } = useContext(CallsContext);
 
   // TODO: move this to useCalls hook
-  const [activeTasks, setActiveTasks] = useState([]);
 
   return (
     <Menubar
@@ -79,7 +79,7 @@ export default function Appbar({
         <Logo />
       </Link>
       <div className="flex space-x-8">
-        {/* TODO replace with Availability status toggle component */}
+        {/* TODO : Link status component? I dont think it was linked */}
         <div className="self-center">
           <ClientOnly>
             <AgentStatus />
@@ -115,14 +115,13 @@ export default function Appbar({
           <Popover>
             <PopoverTrigger asChild>
               <Button variant="ghost" size="icon">
-                {activeTasks.length > 0 ? <BellDot color="#08B3E5" /> :
+                {activeTasks?.length > 0 ? <BellDot color="#08B3E5" /> :
                   <Bell color="#D3D3D3" />}
               </Button>
             </PopoverTrigger>
             <PopoverContent align="end">
               <NotificationsCard
                 activeTasks={activeTasks}
-                setActiveTasks={setActiveTasks}
               />
             </PopoverContent>
           </Popover>

diff --git a/src/contexts/CallsContext.tsx b/src/contexts/CallsContext.tsx
@@ -9,9 +9,11 @@ export type CallsContextType = {
     incomingCall: boolean;
     acceptCall: () => void;
     rejectCall: () => void;
+    updateReservation: (reservation: any, status: string) => void;
+    activeTasks: any[];
+    dequeueTask: (task: any, number: string) => void;
   };
 
-// const CallsContext = React.createContext<Partial<CallsContextType>>({});
 
 const CallsContext = React.createContext<CallsContextType>({
   inCall: false,
@@ -22,6 +24,9 @@ const CallsContext = React.createContext<CallsContextType>({
   incomingCall: false,
   acceptCall: () => {},
   rejectCall: () => {},
+  updateReservation: () => {},
+  activeTasks: [],
+  dequeueTask: () => {}
 });
 
 export default CallsContext;