[web-ui] Implement thread detail page

.imgbotconfig

@@ -1,5 +1,3 @@
 {
-  "ignoredFiles": [
-    ".github/emojis/*"
-  ]
-}
+  "ignoredFiles": [".github/emojis/*"]
+}

threads-api/src/dynamic-data.ts

@@ -1 +1 @@
-export const LATEST_ANDROID_APP_VERSION = '291.0.0.31.111';
+export const LATEST_ANDROID_APP_VERSION = '291.0.0.31.111';

threads-web-ui/app/[username]/page.tsx

@@ -1,10 +1,12 @@
 import Image from 'next/image';
+import Link from 'next/link';
 import React from 'react';
 import { Thread, ThreadsIcons } from 'react-threads';
-import { ThreadsAPI } from 'threads-api';
+import { Thread as ThreadType, ThreadsAPI, ThreadsUser } from 'threads-api';
+
+const threadsAPI = new ThreadsAPI({ verbose: true });
 
 const UserProfilePage = async ({ params }: { params: { username: string } }) => {
-  const threadsAPI = new ThreadsAPI();
   const username = params.username;
 
   if (!username) {
@@ -16,12 +18,17 @@ const UserProfilePage = async ({ params }: { params: { username: string } }) =>
     return <div>No user with the given username</div>;
   }
 
-  const userInfo: [string, string] = [username, userID];
-
-  const [userProfile, userThreads] = await Promise.all([
-    threadsAPI.getUserProfile(...userInfo),
-    threadsAPI.getUserProfileThreads(...userInfo),
-  ]);
+  let userProfile: ThreadsUser;
+  let userThreads: ThreadType[];
+  try {
+    [userProfile, userThreads] = await Promise.all([
+      threadsAPI.getUserProfile(userID),
+      threadsAPI.getUserProfileThreads(userID),
+    ]);
+  } catch (e) {
+    console.log(e);
+    return <div>Failed to fetch Threads account</div>;
+  }
 
   return (
     <div className="flex flex-col max-w-xl mx-auto my-12 text-[rgb(243,245,247)]">
@@ -59,14 +66,14 @@ const UserProfilePage = async ({ params }: { params: { username: string } }) =>
       <div>
         {userThreads.map((thread, index) => {
           return (
-            <React.Fragment key={thread.id}>
+            <Link key={thread.id} href={`/post/${thread.id}`}>
               <div className="-mb-4">
                 <Thread thread={thread} key={thread.id} />
               </div>
               {index !== userThreads.length - 1 && (
                 <div className="w-full h-[0.5px] bg-[rgba(243,245,247,0.15)]" />
               )}
-            </React.Fragment>
+            </Link>
           );
         })}
       </div>

threads-web-ui/app/post/[threadOrPostID]/page.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import { Thread } from 'react-threads';
+import { ThreadsAPI } from 'threads-api';
+
+const threadsAPI = new ThreadsAPI({ verbose: true });
+
+const ThreadDetailPage = async ({ params }: { params: { threadOrPostID: string } }) => {
+  const threadID = params?.threadOrPostID;
+  let postID: string = '';
+  if (!isNaN(parseInt(threadID, 10))) {
+    postID = threadID;
+  } else {
+    postID = threadsAPI.getPostIDfromThreadID(threadID);
+  }
+  if (!postID) {
+    return <div>Post ID not found with provided Thread ID</div>;
+  }
+  const thread = await threadsAPI.getThreads(postID);
+
+  return (
+    <div className="w-full flex items-center justify-center py-[36px] min-h-screen">
+      <main className="flex flex-col w-full max-w-xl mx-auto">
+        {!!thread.containing_thread ? (
+          <Thread thread={thread.containing_thread} />
+        ) : (
+          <div className="w-full h-[120px] rounded-[8px] animate-pulse bg-[rgba(243,245,247,0.05)]" />
+        )}
+
+        {thread.reply_threads?.map((thread) => (
+          <Thread key={thread.id} thread={thread} />
+        ))}
+      </main>
+    </div>
+  );
+};
+
+export default ThreadDetailPage;

threads-web-ui/components.json

@@ -13,4 +13,4 @@
     "components": "@/components",
     "utils": "@/lib/utils"
   }
-}
+}