Reply to thread

Author: DLeyland

README.md

@@ -18,7 +18,7 @@ Now you will need to create an API key for the support portal backend to authent
 - Fill in the description and save the key
 
 ```
-attachment:download,company:read,customer:read,customerGroup:read,customerGroupMembership:read,customerTenantMembership:read,email:read,label:read,labelType:read,note:read,roles:read,serviceLevelAgreement:read,tenant:read,tenant:search,thread:read,tier:read,tierMembership:read,timeline:read,user:read,workspace:read,threadField:read,threadFieldSchema:read,customer:create,customer:edit,thread:create,thread:edit
+attachment:download,company:read,customer:read,customerGroup:read,customerGroupMembership:read,customerTenantMembership:read,email:read,label:read,labelType:read,note:read,roles:read,serviceLevelAgreement:read,tenant:read,tenant:search,thread:read,tier:read,tierMembership:read,timeline:read,user:read,workspace:read,threadField:read,threadFieldSchema:read,customer:create,customer:edit,thread:create,thread:edit,thread:reply
 ```
 
 Once you have your key you can get started:
@@ -29,11 +29,3 @@ PLAIN_API_KEY=<your_key> npm run dev
 ```
 
 Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
-
-## Screenshots
-
- ![View the list of requests](/screenshots/thread-list.png)
-
- ![See the details of a support request](/screenshots/thread-page.png)
-
- ![Create a new support request](/screenshots/new-request.png)

app/api/thread-reply/route.ts

@@ -0,0 +1,22 @@
+import { plainClient } from "@/lib/plainClient";
+import { inspect } from "util";
+
+export async function POST(request: Request) {
+  // In production validation of the request body might be necessary.
+  const body = await request.json();
+
+  const replyRes = await plainClient.replyToThread({textContent: body.message, threadId: body.threadId})
+    if (replyRes.error) {
+        console.error(
+            inspect(replyRes.error, {
+              showHidden: false,
+              depth: null,
+              colors: true,
+            })
+          );
+          return new Response(replyRes.error.message, { status: 500 });
+    }
+
+    console.log('Replied to thread', body.threadId);
+    return new Response("", { status: 200 });
+}

app/globals.css

@@ -12,6 +12,9 @@
 html,
 body {
   max-width: 100vw;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
   overflow-x: hidden;
   font: var(--font);
 }

app/page.module.css

@@ -1,10 +1,10 @@
 .main {
   display: flex;
   flex-direction: column;
+  flex-grow: 1;
   gap: 32px;
   align-items: center;
   padding: 2rem;
-  min-height: 100vh;
 }
 
 .list {

app/thread/[threadId]/page.module.css

@@ -1,13 +1,16 @@
 .main {
   display: flex;
   justify-content: space-between;
-  min-height: 100vh;
+  flex-grow: 1;
   width: 100%;
 }
 
 .timeline {
   padding: 24px;
   flex-grow: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
 }
 
 .threadInfo {

app/thread/[threadId]/page.tsx

@@ -4,6 +4,7 @@ import { getActorFullName } from "@/lib/getActorFullName";
 import { getFormattedDate } from "@/lib/getFormattedDate";
 import { getPriority } from "@/lib/getPriority";
 import { fetchThreadTimelineEntries } from "@/lib/fetchThreadTimelineEntries";
+import { ReplyToThread } from "@/components/replyToThread";
 
 export default async function ThreadPage({
   params,
@@ -85,6 +86,7 @@ export default async function ThreadPage({
               </div>
             );
           })}
+          <ReplyToThread />
         </div>
 
         <div className={styles.threadInfo}>

components/button.tsx

@@ -4,11 +4,12 @@ interface ButtonProps {
   label: string;
   isLoading?: boolean;
   isDisabled?: boolean;
+  onClick?: () => void;
 }
 
 export function Button(props: ButtonProps) {
   return (
-    <button type="submit" className={styles.button} disabled={props.isDisabled}>
+    <button type="submit" className={styles.button} disabled={props.isDisabled} onClick={props.onClick}>
       {props.isLoading && <span className={styles.spinner} />}
       <span style={{ opacity: props.isLoading ? 0 : 1 }}>{props.label}</span>
     </button>

components/replyToThread.module.css

@@ -0,0 +1,18 @@
+.root {
+    display: flex;
+    justify-content: center;
+}
+
+.container {
+    display: flex;
+    /* align-items: center; */
+    /* justify-content: center; */
+    gap: 8px;
+    width: 100%;
+}
+
+.button {
+    flex-grow: 0;
+    display: flex;
+    flex-direction: column-reverse
+}

components/replyToThread.tsx

@@ -0,0 +1,43 @@
+"use client";
+
+import { useCallback, useState } from "react";
+import { Textarea } from "./textArea";
+import { Button } from "./button";
+import toast from "react-hot-toast";
+import { useParams, useRouter } from "next/navigation";
+import styles from "./replyToThread.module.css";
+
+export function ReplyToThread() {
+  const [message, setMessage] = useState("");
+  const router = useRouter();
+  const params = useParams<{threadId: string}>();
+
+  const sendReply = useCallback(async () => {
+    try {
+      const result = await fetch("/api/thread-reply/", {
+        method: "POST",
+        body: JSON.stringify({ message, threadId: params.threadId}),
+      });
+      if (result.ok) {
+        toast.success("Reply sent");
+        router.push("/");
+      } else {
+        toast.error("Oops");
+      }
+    } catch (error) {
+      console.error(error);
+      toast.error("Oops");
+    }
+  }, [message, params.threadId, router]);
+
+  return (
+    <div className={styles.root}>
+      <div className={styles.container}>
+        <Textarea value={message} onChange={setMessage} placeholder="" />
+        <div className={styles.button}>
+          <Button label="Reply" onClick={sendReply} />
+        </div>
+      </div>
+    </div>
+  );
+}