Refactor UpcomingPage component and add CallList component

Author: prakharsingh-74

app/(root)/(home)/upcoming/page.tsx

@@ -1,12 +1,13 @@
-import React from 'react'
+import CallList from '@/components/CallList';
 
-const Upcoming = () => {
+const UpcomingPage = () => {
   return (
     <section className="flex size-full flex-col gap-10 text-white">
-       <h1 className="text-3xl font-bold"></h1>
-       upcoming
+      <h1 className="text-3xl font-bold">Upcoming Meeting</h1>
+
+      <CallList type="upcoming" />
     </section>
-  )
-}
+  );
+};
 
-export default Upcoming
+export default UpcomingPage;

app/constants/index.ts

@@ -24,4 +24,12 @@ export const sidebarLinks = [
         route: '/personal-room',
         imgUrl: '/icons/add-personal.svg'
     }
-]
+]
+
+export const avatarImages = [
+    '/images/avatar-1.jpeg',
+    '/images/avatar-2.jpeg',
+    '/images/avatar-3.png',
+    '/images/avatar-4.png',
+    '/images/avatar-5.png',
+];

components/CallList.tsx

@@ -0,0 +1,110 @@
+'use client';
+
+import { Call, CallRecording } from '@stream-io/video-react-sdk';
+
+import Loader from './Loader';
+import { useGetCalls } from '@/hooks/useGetCalls';
+import MeetingCard from './MeetingCard';
+import { useEffect, useState } from 'react';
+import { useRouter } from 'next/navigation';
+
+const CallList = ({ type }: { type: 'ended' | 'upcoming' | 'recordings' }) => {
+  const router = useRouter();
+  const { endedCalls, upcomingCalls, callRecordings, isLoading } =
+    useGetCalls();
+  const [recordings, setRecordings] = useState<CallRecording[]>([]);
+
+  const getCalls = () => {
+    switch (type) {
+      case 'ended':
+        return endedCalls;
+      case 'recordings':
+        return recordings;
+      case 'upcoming':
+        return upcomingCalls;
+      default:
+        return [];
+    }
+  };
+
+  const getNoCallsMessage = () => {
+    switch (type) {
+      case 'ended':
+        return 'No Previous Calls';
+      case 'upcoming':
+        return 'No Upcoming Calls';
+      case 'recordings':
+        return 'No Recordings';
+      default:
+        return '';
+    }
+  };
+
+  useEffect(() => {
+    const fetchRecordings = async () => {
+      const callData = await Promise.all(
+        callRecordings?.map((meeting) => meeting.queryRecordings()) ?? [],
+      );
+
+      const recordings = callData
+        .filter((call) => call.recordings.length > 0)
+        .flatMap((call) => call.recordings);
+
+      setRecordings(recordings);
+    };
+
+    if (type === 'recordings') {
+      fetchRecordings();
+    }
+  }, [type, callRecordings]);
+
+  if (isLoading) return <Loader />;
+
+  const calls = getCalls();
+  const noCallsMessage = getNoCallsMessage();
+
+  return (
+    <div className="grid grid-cols-1 gap-5 xl:grid-cols-2">
+      {calls && calls.length > 0 ? (
+        calls.map((meeting: Call | CallRecording) => (
+          <MeetingCard
+            key={(meeting as Call).id}
+            icon={
+              type === 'ended'
+                ? '/icons/previous.svg'
+                : type === 'upcoming'
+                  ? '/icons/upcoming.svg'
+                  : '/icons/recordings.svg'
+            }
+            title={
+              (meeting as Call).state?.custom?.description ||
+              (meeting as CallRecording).filename?.substring(0, 20) ||
+              'No Description'
+            }
+            date={
+              (meeting as Call).state?.startsAt?.toLocaleString() ||
+              (meeting as CallRecording).start_time?.toLocaleString()
+            }
+            isPreviousMeeting={type === 'ended'}
+            link={
+              type === 'recordings'
+                ? (meeting as CallRecording).url
+                : `${process.env.NEXT_PUBLIC_BASE_URL}/meeting/${(meeting as Call).id}`
+            }
+            buttonIcon1={type === 'recordings' ? '/icons/play.svg' : undefined}
+            buttonText={type === 'recordings' ? 'Play' : 'Start'}
+            handleClick={
+              type === 'recordings'
+                ? () => router.push(`${(meeting as CallRecording).url}`)
+                : () => router.push(`/meeting/${(meeting as Call).id}`)
+            }
+          />
+        ))
+      ) : (
+        <h1 className="text-2xl font-bold text-white">{noCallsMessage}</h1>
+      )}
+    </div>
+  );
+};
+
+export default CallList;

components/MeetingCard.tsx

@@ -0,0 +1,93 @@
+"use client";
+
+import Image from "next/image";
+
+import { cn } from "@/lib/utils";
+import { Button } from "./ui/button";
+import { avatarImages } from "@/app/constants";
+import { useToast } from "./ui/toaster";
+
+interface MeetingCardProps {
+    title: string;
+    date: string;
+    icon: string;
+    isPreviousMeeting?: boolean;
+    buttonIcon1?: string;
+    buttonText?: string;
+    handleClick: () => void;
+    link: string;
+}
+
+const MeetingCard = ({
+    icon,
+    title,
+    date,
+    isPreviousMeeting,
+    buttonIcon1,
+    handleClick,
+    link,
+    buttonText,
+}: MeetingCardProps) => {
+    const { toast } = useToast();
+
+    return (
+        <section className="flex min-h-[258px] w-full flex-col justify-between rounded-[14px] bg-dark-1 px-5 py-8 xl:max-w-[568px]">
+            <article className="flex flex-col gap-5">
+                <Image src={icon} alt="upcoming" width={28} height={28} />
+                <div className="flex justify-between">
+                    <div className="flex flex-col gap-2">
+                        <h1 className="text-2xl font-bold">{title}</h1>
+                        <p className="text-base font-normal">{date}</p>
+                    </div>
+                </div>
+            </article>
+            <article className={cn("flex justify-center relative", {})}>
+                <div className="relative flex w-full max-sm:hidden">
+                    {avatarImages.map((img, index) => (
+                        <Image
+                            key={index}
+                            src={img}
+                            alt="attendees"
+                            width={40}
+                            height={40}
+                            className={cn("rounded-full", { absolute: index > 0 })}
+                            style={{ top: 0, left: index * 28 }}
+                        />
+                    ))}
+                    <div className="flex-center absolute left-[136px] size-10 rounded-full border-[5px] border-dark-3 bg-dark-4">
+                        +5
+                    </div>
+                </div>
+                {!isPreviousMeeting && (
+                    <div className="flex gap-2">
+                        <Button onClick={handleClick} className="rounded bg-blue-1 px-6">
+                            {buttonIcon1 && (
+                                <Image src={buttonIcon1} alt="feature" width={20} height={20} />
+                            )}
+                            &nbsp; {buttonText}
+                        </Button>
+                        <Button
+                            onClick={() => {
+                                navigator.clipboard.writeText(link);
+                                toast({
+                                    title: "Link Copied",
+                                });
+                            }}
+                            className="bg-dark-4 px-6"
+                        >
+                            <Image
+                                src="/icons/copy.svg"
+                                alt="feature"
+                                width={20}
+                                height={20}
+                            />
+                            &nbsp; Copy Link
+                        </Button>
+                    </div>
+                )}
+            </article>
+        </section>
+    );
+};
+
+export default MeetingCard;

components/ui/toaster.tsx

@@ -33,3 +33,5 @@ export function Toaster() {
     </ToastProvider>
   )
 }
+
+export { useToast }

hooks/useGetCalls.ts

@@ -0,0 +1,52 @@
+import { useEffect, useState } from 'react';
+import { useUser } from '@clerk/nextjs';
+import { Call, useStreamVideoClient } from '@stream-io/video-react-sdk';
+
+export const useGetCalls = () => {
+  const { user } = useUser();
+  const client = useStreamVideoClient();
+  const [calls, setCalls] = useState<Call[]>();
+  const [isLoading, setIsLoading] = useState(false);
+
+  useEffect(() => {
+    const loadCalls = async () => {
+      if (!client || !user?.id) return;
+      
+      setIsLoading(true);
+
+      try {
+        // https://getstream.io/video/docs/react/guides/querying-calls/#filters
+        const { calls } = await client.queryCalls({
+          sort: [{ field: 'starts_at', direction: -1 }],
+          filter_conditions: {
+            starts_at: { $exists: true },
+            $or: [
+              { created_by_user_id: user.id },
+              { members: { $in: [user.id] } },
+            ],
+          },
+        });
+
+        setCalls(calls);
+      } catch (error) {
+        console.error(error);
+      } finally {
+        setIsLoading(false);
+      }
+    };
+
+    loadCalls();
+  }, [client, user?.id]);
+
+  const now = new Date();
+
+  const endedCalls = calls?.filter(({ state: { startsAt, endedAt } }: Call) => {
+    return (startsAt && new Date(startsAt) < now) || !!endedAt
+  })
+
+  const upcomingCalls = calls?.filter(({ state: { startsAt } }: Call) => {
+    return startsAt && new Date(startsAt) > now
+  })
+
+  return { endedCalls, upcomingCalls, callRecordings: calls, isLoading }
+};