From a22a91af7fe32cdddbd1ebaffd38d07aa5f55cca Mon Sep 17 00:00:00 2001
From: Claeb101 <calebarulandu@gmail.com>
Date: Sun, 5 Mar 2023 06:21:07 -0500
Subject: [PATCH] finished
---
app/public/icons/popout.svg | 6 ++
app/src/pages/index.tsx | 126 ++++++++++++++++++++++++++++++++----
2 files changed, 118 insertions(+), 14 deletions(-)
create mode 100644 app/public/icons/popout.svg
diff --git a/app/public/icons/popout.svg b/app/public/icons/popout.svg
new file mode 100644
index 0000000..e70de62
--- /dev/null
+++ b/app/public/icons/popout.svg
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 36 36" version="1.1" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+ <title>pop-out-line</title>
+ <path class="clr-i-outline clr-i-outline-path-1" d="M27,33H5a2,2,0,0,1-2-2V9A2,2,0,0,1,5,7H15V9H5V31H27V21h2V31A2,2,0,0,1,27,33Z"></path><path class="clr-i-outline clr-i-outline-path-2" d="M18,3a1,1,0,0,0,0,2H29.59L15.74,18.85a1,1,0,1,0,1.41,1.41L31,6.41V18a1,1,0,0,0,2,0V3Z"></path>
+ <rect x="0" y="0" width="36" height="36" fill-opacity="0"/>
+</svg>
\ No newline at end of file
diff --git a/app/src/pages/index.tsx b/app/src/pages/index.tsx
index 030863b..44b6717 100644
--- a/app/src/pages/index.tsx
+++ b/app/src/pages/index.tsx
@@ -12,11 +12,24 @@ import OutlineButton from "@/components/OutlineButton";
import { useToasts } from "@/components/ToastProvider";
import { useSession } from 'next-auth/react'
+const Session = ({ data, onClick = () => { }, ...props }) => {
+ return (
+ <div className="relative w-fit bg-white bg-opacity-5 p-6 m-2">
+ <button className={`absolute right-2 top-1 w-fit text-pink transition-all ease-in-out`} onClick={onClick}>{"->"}</button>
+ <p>Caller Phone: {data.callerPhone}</p>
+ <p>Started At: {data.startedAt}</p>
+ </div>
+ );
+}
+
const Home: NextPage<any> = ({ officers }) => {
const { toastDispatch } = useToasts();
const [input, setInput] = useState({
phone: '',
})
+ const [sessions, setSessions] = useState([])
+ const [focusSession, setFocusSession] = useState(null)
+
const { data: session } = useSession()
const submit = async () => {
const operator = await fetch(process.env.NEXT_PUBLIC_API_URL + '/operator/update', {
@@ -33,30 +46,115 @@ const Home: NextPage<any> = ({ officers }) => {
notify(toastDispatch, "", "Updated Phone: " + input.phone, ToastType.SUCCESS)
}
+ const popOut = async (session) => {
+ const messages = await (await fetch(process.env.NEXT_PUBLIC_API_URL + '/session/message/?sessionId=' + session.id, {
+ method: 'GET',
+ headers: {
+ 'Content-Type': 'application/json'
+ },
+ })).json()
+
+ const summary = await (await fetch(process.env.NEXT_PUBLIC_API_URL + '/session/summary/?sessionId=' + session.id, {
+ method: 'GET',
+ headers: {
+ 'Content-Type': 'application/json'
+ },
+ })).json()
+
+ session.messages = messages.messages;
+ session.summary = summary.summary;
+ console.log(session)
+
+ setFocusSession(session)
+ }
+
+ const transfer = async () => {
+ console.log(session['token'].sub)
+ const res = await (await fetch(process.env.NEXT_PUBLIC_API_URL + '/session/transfer/?sessionId=' + focusSession.id, {
+ method: 'GET',
+ headers: {
+ 'Content-Type': 'application/json',
+ 'Authorization': `Bearer ${session['token'].sub}`
+ },
+ })).json()
+ await closePop()
+ }
+
+ const closePop = async () => {
+ setFocusSession(null)
+ }
+
+ useEffect(() => {
+ const interval = setInterval(async () => {
+ const fetcher = async () => {
+ const s = await (await fetch(process.env.NEXT_PUBLIC_API_URL + '/session?open=true', {
+ method: 'GET',
+ headers: {
+ 'Content-Type': 'application/json'
+ }
+ })).json()
+
+ setSessions(s.sessions)
+ }
+ await fetcher()
+ }, 2000)
+
+ return () => clearInterval(interval)
+ }, [])
+
return (
<Layout>
- <div className="py-16 sm:py-24 ">
+ <div className="relative h-screen py-16 sm:py-24 px-4 sm:px-12 lg:px-24">
{
session ?
- <div className='w-fit bg-white bg-opacity-5 rounded-md p-4 text-center mx-auto'>
- <h1 className="text-white text-2xl font-extrabold">Hey {session.user.name.split(' ')[0]}!</h1>
- <p className="text-white text-xl font-light mt-2"> Can you give us your number real quick?</p>
-
- <div className='w-fit mt-4 mx-auto flex justify-start flex-wrap'>
- <div className='w-72 mr-4'>
- <InputField name="Phone Number" id="phone" value={input.phone} onChange={(e) => handleInputChange(e, input, setInput)} className="w-full" />
+ <>
+ {focusSession ?
+ <div className="absolute w-fit z-10 text-white bg-black bg-opacity-80 p-8 rounded-sm left-0 right-0 mx-auto">
+ <button className={`absolute right-2 top-1 w-fit text-pink transition-all ease-in-out font-bold`} onClick={closePop}>{"X"}</button>
+ <div className="flex items-center ">
+ <h2 className="w-fit text-3xl font-extrabold">Caller: {focusSession.callerPhone} | {focusSession.startedAt}</h2>
+ <OutlineButton name="Transfer" onClick={transfer} className="ml-8" />
+ </div>
+ <p className="my-4 text-white"><span className="text-pink font-bold">Summary: </span>{focusSession.summary}</p>
+ {focusSession.messages.map(msg => {
+ return (
+ <div key={msg.id}>
+ <p className="text-white"><span className={`${msg.role == "USER" ? "text-green-300" : "text-blue-300"} font-bold`}>{msg.role}: </span>{msg.content}</p>
+ <p></p>
+ </div>
+ );
+ })}
</div>
- <div className='mt-4 flex items-center justify-center'>
- <OutlineButton name="Register" onClick={submit} />
+ : null
+ }
+ <div className={`${focusSession ? 'blur-sm' : 'blur-0'} transition-all`}>
+ <div className='w-fit bg-white bg-opacity-5 rounded-md p-4 text-center mx-auto'>
+ <h2 className="text-white text-2xl font-extrabold">Hey {session.user.name.split(' ')[0]}!</h2>
+ <p className="text-white text-xl font-light mt-2"> Can you give us your number real quick?</p>
+
+ <div className='w-fit mt-4 mx-auto flex justify-start flex-wrap'>
+ <div className='w-72 mr-4'>
+ <InputField name="Phone Number" id="phone" value={input.phone} onChange={(e) => handleInputChange(e, input, setInput)} className="w-full" />
+ </div>
+ <div className='mt-4 flex items-center justify-center'>
+ <OutlineButton name="Register" onClick={submit} />
+ </div>
+ </div>
+ </div>
+ <div className="mt-16 text-white text-center p-4">
+ <h2 className="text-2xl font-extrabold">Active Calls</h2>
+ <div className="flex justify-center flex-wrap">
+ {sessions.map(session =>
+ <Session data={session} key={session.id} onClick={() => popOut(session)} />
+ )}
+ </div>
</div>
</div>
- </div>
+
+ </>
: null
}
-
-
</div>
-
</Layout>
);
};