From 9275d4499b61a282c46f3e73ac55a8f4b9320eda Mon Sep 17 00:00:00 2001
From: m5r <mokht@rmi.al>
Date: Mon, 6 Dec 2021 22:58:18 +0100
Subject: [PATCH] call recipient from phone calls history

---
 .../components/phone-calls-list.tsx           | 45 ++++++++++++-------
 1 file changed, 29 insertions(+), 16 deletions(-)

diff --git a/app/phone-calls/components/phone-calls-list.tsx b/app/phone-calls/components/phone-calls-list.tsx
index b967e10..539979e 100644
--- a/app/phone-calls/components/phone-calls-list.tsx
+++ b/app/phone-calls/components/phone-calls-list.tsx
@@ -1,4 +1,5 @@
 import { useEffect } from "react";
+import { Link, Routes } from "blitz";
 import { HiPhoneMissedCall, HiPhoneIncoming, HiPhoneOutgoing } from "react-icons/hi";
 import clsx from "clsx";
 
@@ -34,27 +35,39 @@ export default function PhoneCallsList() {
 				const isOutboundCall = phoneCall.direction === Direction.Outbound;
 				const isInboundCall = phoneCall.direction === Direction.Inbound;
 				const isMissedCall = isInboundCall && phoneCall.status === CallStatus.NoAnswer;
-				const recipient = isOutboundCall
+				const formattedRecipient = isOutboundCall
 					? phoneCall.toMeta.formattedPhoneNumber
 					: phoneCall.fromMeta.formattedPhoneNumber;
+				const recipient = isOutboundCall ? phoneCall.to : phoneCall.from;
+
 				return (
-					<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}
-							{isInboundCall && !isMissedCall ? <HiPhoneIncoming className="text-[#C4C4C6]" /> : null}
-							{isInboundCall && isMissedCall ? <HiPhoneMissedCall className="text-[#C4C4C6]" /> : null}
-						</div>
+					<li key={phoneCall.id} className="py-2 px-4 hover:bg-gray-200 hover:bg-opacity-50">
+						<Link href={Routes.OutgoingCall({ recipient })}>
+							<a 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]")}>{recipient}</span>
-							<span className="text-[#89898C] text-sm">
-								{isOutboundCall ? phoneCall.toMeta.country : phoneCall.fromMeta.country}
-							</span>
-						</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>
+								<span className="text-[#89898C] text-sm self-center ml-auto">
+									{formatRelativeDate(new Date(phoneCall.createdAt))}
+								</span>
+							</a>
+						</Link>
 					</li>
 				);
 			})}