Work on threads

HACC-2023 · Nov 9, 2023 · 01cd511 · 01cd511
1 parent 808920b
commit 01cd511
Show file tree

Hide file tree

Showing 3 changed files with 61 additions and 14 deletions.
diff --git a/my-app/src/components/Thread.jsx b/my-app/src/components/Thread.jsx
@@ -2,6 +2,7 @@ import { fetcher } from "@/utils/fetcher";
 import useSWR from "swr";
 import Link from "next/link";
 import Loading from "./Loading";
+import { ChatBubbleLeftIcon } from "@heroicons/react/24/outline";
 
 const Thread = ({ thread }) => {
   const { data: event, error } = useSWR(`/api/mongo/event/id/${thread.eventId}`, fetcher);
@@ -11,10 +12,16 @@ const Thread = ({ thread }) => {
   console.log("events data!", event);
   return (
     <Link href={`/thread/${thread._id}`}>
-      <div className="w-96 bg-base-100 shadow-xl p-5 m-2">
+      <div className="max-w-[50rem] bg-base-100 py-4 border-solid border-b border-gray-300 w-full">
         <div>{event.reportedDate.split("T")[0]}</div>
         <div>{event.closestIsland}</div>
-        <div>{thread.messages.length}</div>
+        <div>{event.publicLocationDesc}</div>
+        <div>{event.publicDebrisEnvDesc === 'Other' ? event.publicDebrisEnvAdditionalDesc : event.publicDebrisEnvDesc}</div>
+
+        <div className="flex items-center gap-1 mt-2 text-gray-600">
+          <ChatBubbleLeftIcon height={20}/>
+          {thread.messages.length}
+        </div>
       </div>
     </Link>
   );

diff --git a/my-app/src/pages/thread/[_id].jsx b/my-app/src/pages/thread/[_id].jsx
@@ -4,6 +4,25 @@ import { fetcher } from "@/utils/fetcher";
 import useSWR from "swr";
 import Loading from "@/components/Loading";
 
+const ThreadInfo = ({ thread }) => {
+  const { data: event, error } = useSWR(`/api/mongo/event/id/${thread.eventId}`, fetcher);
+  if (error) return <div>failed to load</div>;
+  if (!event) return <Loading />;
+
+  return (
+    <div className="bg-base-100 py-3">
+      <div>{event.reportedDate.split("T")[0]}</div>
+      <div>{event.closestIsland}</div>
+      <div>{event.publicLocationDesc}</div>
+      <div>
+        {event.publicDebrisEnvDesc === "Other"
+          ? event.publicDebrisEnvAdditionalDesc
+          : event.publicDebrisEnvDesc}
+      </div>
+    </div>
+  );
+};
+
 const ThreadPage = () => {
   const router = useRouter();
   const { data: session } = useSession();
@@ -17,6 +36,12 @@ const ThreadPage = () => {
 
   console.log("thread data!", thread);
 
+  const handleSumit = (e) => {
+    e.preventDefault();
+    console.log("submit");
+    // TODO: make a put request to the thread by pushing the message to the messages array
+  };
+
   const Chat = ({ message }) => {
     return (
       <div>
@@ -33,11 +58,23 @@ const ThreadPage = () => {
     return (
       <div className="w-full min-h-full flex justify-center">
         <div className="min-h-screen p-5 w-full md:max-w-7xl flex flex-col gap-5">
-          <div>{thread.messages.length}</div>
-
-          {thread.messages.map((message) => (
-            <Chat message={message}></Chat>
-          ))}
+          <ThreadInfo thread={thread}></ThreadInfo>
+          <h1 className=" text-xl font-semibold text-gray-800 mb-2">Messages</h1>
+          {thread.messages.length ? (
+            thread.messages.map((message) => <Chat message={message}></Chat>)
+          ) : (
+            <div>There are currently no messages</div>
+          )}
+          <form onSubmit={handleSumit}>
+            <div className="flex gap-4 flex-col md:flex-row w-full">
+              <input
+                type="text"
+                placeholder="Post your message"
+                className="input input-bordered w-full max-w-lg"
+              />
+              <input type="submit" value="Post" className="btn btn-primary max-w-lg" />
+            </div>
+          </form>
         </div>
       </div>
     );

diff --git a/my-app/src/pages/threads/index.jsx b/my-app/src/pages/threads/index.jsx
@@ -28,13 +28,16 @@ const Threads = () => {
   }
 
   return (
-    <>
-      {data.length === 0 ? (
-        <div>There are no threads at this moment</div>
-      ) : (
-        data.map((thread) => <Thread key={thread._id} thread={thread} />)
-      )}
-    </>
+    <div className="mx-32 my-10">
+      <h1 className="text-4xl font-semibold text-gray-800 mb-2">Threads</h1>
+      <div className="shadow-md p-5">
+        {data.length === 0 ? (
+          <div>There are no threads at this moment</div>
+        ) : (
+          data.map((thread) => <Thread key={thread._id} thread={thread} />)
+        )}
+      </div>
+    </div>
   );
 };