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 "~/routes/__app/calls"; export default function PhoneCallsList() { const { hasOngoingSubscription } = { hasOngoingSubscription: false }; const { phoneCalls } = useLoaderData(); if (!phoneCalls) { return hasOngoingSubscription ? : null; } if (phoneCalls.length === 0) { return hasOngoingSubscription ? : null; } return (
    {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 = isOutboundCall ? phoneCall.to : phoneCall.from; return (
  • {isOutboundCall ? : null} {isInboundCall && !isMissedCall ? : null} {isInboundCall && isMissedCall ? ( ) : null}
    {formattedRecipient} {isOutboundCall ? phoneCall.toMeta.country : phoneCall.fromMeta.country}
    {formatRelativeDate(new Date(phoneCall.createdAt))}
  • ); })}
); }