2021-07-23 09:40:08 +00:00
|
|
|
import type { NextPage } from "next";
|
2021-07-18 15:32:45 +00:00
|
|
|
|
2021-07-21 16:48:49 +00:00
|
|
|
import Layout from "../components/layout";
|
2021-07-23 09:40:08 +00:00
|
|
|
import ConnectedLayout from "../components/connected-layout";
|
|
|
|
import { useAtom } from "jotai";
|
|
|
|
import { phoneCallsAtom } from "../state";
|
2021-07-18 15:32:45 +00:00
|
|
|
|
2021-07-23 09:40:08 +00:00
|
|
|
type Props = {};
|
2021-07-18 15:32:45 +00:00
|
|
|
|
|
|
|
const pageTitle = "Calls";
|
|
|
|
|
2021-07-23 09:40:08 +00:00
|
|
|
const Calls: NextPage<Props> = () => {
|
|
|
|
const phoneCalls = useAtom(phoneCallsAtom)[0] ?? [];
|
2021-07-18 15:32:45 +00:00
|
|
|
|
|
|
|
return (
|
2021-07-23 09:40:08 +00:00
|
|
|
<ConnectedLayout>
|
|
|
|
<Layout title={pageTitle}>
|
|
|
|
<div className="flex flex-col space-y-6 p-6">
|
|
|
|
<p>Calls page</p>
|
|
|
|
<ul className="divide-y">
|
|
|
|
{phoneCalls.map((phoneCall) => {
|
|
|
|
const recipient = phoneCall.direction === "outbound" ? phoneCall.to : phoneCall.from;
|
|
|
|
return (
|
|
|
|
<li key={phoneCall.twilioSid} className="flex flex-row justify-between py-2">
|
|
|
|
<div>{recipient}</div>
|
|
|
|
<div>{new Date(phoneCall.createdAt).toLocaleString("fr-FR")}</div>
|
|
|
|
</li>
|
|
|
|
)
|
|
|
|
})}
|
|
|
|
</ul>
|
|
|
|
</div>
|
|
|
|
</Layout>
|
|
|
|
</ConnectedLayout>
|
2021-07-18 15:32:45 +00:00
|
|
|
);
|
|
|
|
};
|
|
|
|
|
|
|
|
export default Calls;
|