shellphone.app/app/features/phone-calls/components/phone-calls-list.tsx

import { Link } from "@remix-run/react";
import { useLoaderData } from "superjson-remix";
import { HiPhoneMissedCall, HiPhoneIncoming, HiPhoneOutgoing } from "react-icons/hi";
import clsx from "clsx";
import { Direction, CallStatus } from "@prisma/client";

import PhoneInitLoader from "~/features/core/components/phone-init-loader";
import EmptyCalls from "../components/empty-calls";
import { formatRelativeDate } from "~/features/core/helpers/date-formatter";
import type { PhoneCallsLoaderData } from "~/features/phone-calls/loaders/calls";

export default function PhoneCallsList() {
	const { hasOngoingSubscription, isFetchingCalls, phoneCalls } = useLoaderData<PhoneCallsLoaderData>();

	if (!hasOngoingSubscription) {
		if (!phoneCalls || phoneCalls.length === 0) {
			return null;
		}
	} else {
		if (isFetchingCalls || !phoneCalls) {
			return <PhoneInitLoader />;
		}

		if (phoneCalls.length === 0) {
			return hasOngoingSubscription ? <EmptyCalls /> : null;
		}
	}

	return (
		<ul className="divide-y">
			{phoneCalls.map((phoneCall) => {
				const isOutboundCall = phoneCall.direction === Direction.Outbound;
				const isInboundCall = phoneCall.direction === Direction.Inbound;
				const isMissedCall = isInboundCall && phoneCall.status === CallStatus.NoAnswer;
				const formattedRecipient = isOutboundCall
					? phoneCall.toMeta.formattedPhoneNumber
					: phoneCall.fromMeta.formattedPhoneNumber;
				const recipient = phoneCall.recipient;

				return (
					<li key={phoneCall.id} className="py-2 px-4 hover:bg-gray-200 hover:bg-opacity-50">
						<Link to={`/outgoing-call/${recipient}`} className="flex flex-row">
							<div className="h-4 w-4 mt-1">
								{isOutboundCall ? <HiPhoneOutgoing className="text-[#C4C4C6]" /> : null}
								{isInboundCall && !isMissedCall ? <HiPhoneIncoming className="text-[#C4C4C6]" /> : null}
								{isInboundCall && isMissedCall ? (
									<HiPhoneMissedCall className="text-[#C4C4C6]" />
								) : null}
							</div>

							<div className="flex flex-col items-start justify-center ml-4">
								<span className={clsx("font-medium", isMissedCall && "text-[#FF362A]")}>
									{formattedRecipient}
								</span>
								<span className="text-[#89898C] text-sm">
									{isOutboundCall ? phoneCall.toMeta.country : phoneCall.fromMeta.country}
								</span>
							</div>

							<span className="text-[#89898C] text-sm self-center ml-auto">
								{formatRelativeDate(new Date(phoneCall.createdAt))}
							</span>
						</Link>
					</li>
				);
			})}
		</ul>
	);
}