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

59 lines
1.8 KiB
TypeScript
Raw Normal View History

2021-09-24 23:07:40 +00:00
import { useEffect } from "react";
import { HiPhoneMissedCall, HiPhoneOutgoing } from "react-icons/hi";
2021-09-24 23:07:40 +00:00
import clsx from "clsx";
2021-08-30 20:13:40 +00:00
import { Direction } from "../../../db";
2021-09-24 23:07:40 +00:00
import PhoneInitLoader from "../../core/components/phone-init-loader";
2021-09-24 23:40:11 +00:00
import EmptyCalls from "../components/empty-calls";
import usePhoneCalls from "../hooks/use-phone-calls";
2021-08-30 20:13:40 +00:00
import { formatRelativeDate } from "../../core/helpers/date-formatter";
2021-07-31 14:33:18 +00:00
export default function PhoneCallsList() {
2021-09-24 23:07:40 +00:00
const [phoneCalls, query] = usePhoneCalls();
useEffect(() => {
if (!phoneCalls) {
const pollInterval = setInterval(() => query.refetch(), 1500);
return () => clearInterval(pollInterval);
}
}, [phoneCalls, query]);
if (!phoneCalls) {
return <PhoneInitLoader />;
}
2021-07-31 14:33:18 +00:00
if (phoneCalls.length === 0) {
2021-09-24 23:40:11 +00:00
return <EmptyCalls />;
2021-07-31 14:33:18 +00:00
}
return (
<ul className="divide-y">
{phoneCalls.map((phoneCall) => {
2021-08-30 20:13:40 +00:00
const isOutboundCall = phoneCall.direction === Direction.Outbound;
const isMissedCall = !isOutboundCall && phoneCall.duration === "0"; // TODO
const recipient = isOutboundCall
? phoneCall.toMeta.formattedPhoneNumber
: phoneCall.fromMeta.formattedPhoneNumber;
2021-07-31 14:33:18 +00:00
return (
2021-08-30 20:13:40 +00:00
<li key={phoneCall.id} className="flex flex-row py-2 px-4 ml-12">
<div className="h-4 w-4 mt-1 -ml-12">
{isOutboundCall ? <HiPhoneOutgoing className="text-[#C4C4C6]" /> : null}
2021-08-30 20:13:40 +00:00
</div>
<div className="flex flex-col items-start justify-center ml-4">
<strong className={clsx(isMissedCall && "text-[#FF362A]")}>{recipient}</strong>
<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>
2021-07-31 14:33:18 +00:00
</li>
);
2021-07-31 14:33:18 +00:00
})}
</ul>
);
2021-07-31 14:33:18 +00:00
}