mokhtar/shellphone.app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

call recipient from phone calls history

Browse Source
This commit is contained in:
m5r 2021-12-06 22:58:18 +01:00
parent 3a89eefc8e
commit 9275d4499b
1 changed files with 29 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
app/phone-calls/components/phone-calls-list.tsx
View File

@ -1,4 +1,5 @@
import { useEffect } from "react"; import { useEffect } from "react";
import { Link, Routes } from "blitz";
import { HiPhoneMissedCall, HiPhoneIncoming, HiPhoneOutgoing } from "react-icons/hi"; import { HiPhoneMissedCall, HiPhoneIncoming, HiPhoneOutgoing } from "react-icons/hi";
import clsx from "clsx"; import clsx from "clsx";
@ -34,27 +35,39 @@ export default function PhoneCallsList() {
const isOutboundCall = phoneCall.direction === Direction.Outbound; const isOutboundCall = phoneCall.direction === Direction.Outbound;
const isInboundCall = phoneCall.direction === Direction.Inbound; const isInboundCall = phoneCall.direction === Direction.Inbound;
const isMissedCall = isInboundCall && phoneCall.status === CallStatus.NoAnswer; const isMissedCall = isInboundCall && phoneCall.status === CallStatus.NoAnswer;
const recipient = isOutboundCall const formattedRecipient = isOutboundCall
? phoneCall.toMeta.formattedPhoneNumber ? phoneCall.toMeta.formattedPhoneNumber
: phoneCall.fromMeta.formattedPhoneNumber; : phoneCall.fromMeta.formattedPhoneNumber;
const recipient = isOutboundCall ? phoneCall.to : phoneCall.from;
return ( return (
<li key={phoneCall.id} className="flex flex-row py-2 px-4 ml-12"> <li key={phoneCall.id} className="py-2 px-4 hover:bg-gray-200 hover:bg-opacity-50">
<div className="h-4 w-4 mt-1 -ml-12"> <Link href={Routes.OutgoingCall({ recipient })}>
{isOutboundCall ? <HiPhoneOutgoing className="text-[#C4C4C6]" /> : null} <a className="flex flex-row">
{isInboundCall && !isMissedCall ? <HiPhoneIncoming className="text-[#C4C4C6]" /> : null} <div className="h-4 w-4 mt-1">
{isInboundCall && isMissedCall ? <HiPhoneMissedCall className="text-[#C4C4C6]" /> : null} {isOutboundCall ? <HiPhoneOutgoing className="text-[#C4C4C6]" /> : null}
</div> {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"> <div className="flex flex-col items-start justify-center ml-4">
<span className={clsx("font-medium", isMissedCall && "text-[#FF362A]")}>{recipient}</span> <span className={clsx("font-medium", isMissedCall && "text-[#FF362A]")}>
<span className="text-[#89898C] text-sm"> {formattedRecipient}
{isOutboundCall ? phoneCall.toMeta.country : phoneCall.fromMeta.country} </span>
</span> <span className="text-[#89898C] text-sm">
</div> {isOutboundCall ? phoneCall.toMeta.country : phoneCall.fromMeta.country}
</span>
</div>
<span className="text-[#89898C] text-sm self-center ml-auto"> <span className="text-[#89898C] text-sm self-center ml-auto">
{formatRelativeDate(new Date(phoneCall.createdAt))} {formatRelativeDate(new Date(phoneCall.createdAt))}
</span> </span>
</a>
</Link>
</li> </li>
); );
})} })}