first commit

namodynamic · Aug 15, 2023 · 678095a · 678095a
1 parent fdbc288
commit 678095a
Show file tree

Hide file tree

Showing 75 changed files with 5,754 additions and 202 deletions.
diff --git a/app/(auth)/layout.tsx b/app/(auth)/layout.tsx
@@ -0,0 +1,31 @@
+import React from "react";
+import { Metadata } from "next";
+import { ClerkProvider } from "@clerk/nextjs";
+import { Inter } from "next/font/google";
+
+import "../globals.css";
+
+export const metadata: Metadata = {
+  title: "Threads",
+  description: "A Next.js 13 Meta Threads Application",
+};
+
+const inter = Inter({ subsets: ["latin"] });
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <ClerkProvider>
+      <html lang="en">
+        <body className={`${inter.className} bg-dark-1`}>
+          <div className="w-full flex justify-center items-center min-h-screen">
+            {children}
+          </div>
+        </body>
+      </html>
+    </ClerkProvider>
+  );
+}
diff --git a/app/(auth)/onboarding/page.tsx b/app/(auth)/onboarding/page.tsx
@@ -0,0 +1,36 @@
+import AccountProfile from "@/components/forms/AccountProfile";
+import { currentUser } from "@clerk/nextjs";
+
+async function Page() {
+    const user = await currentUser();
+
+    const userInfo = {};
+
+    const userData = {
+        id: user?.id,
+        objectId: userInfo?._id,
+        username: userInfo?.username || user?.username,
+        name: userInfo?.name || user?.firstName || "",
+        bio: userInfo?.bio || "",
+        image: userInfo?.image || user?.imageUrl,
+    }
+
+  return (
+    <main className="mx-auto flex max-w-3xl flex-col justify-start px-10 py-20">
+      <h1 className="head-text">Onboarding</h1>
+      <p className="mt-2 text-base-regular text-light-2">
+        Complete your profile now to use Threads
+          </p>
+
+          <section className="mt-9 bg-dark-2 p-10">
+              <AccountProfile
+                  user={userData} 
+                  btnTitle="continue"
+              />   
+</section>
+
+    </main>
+  );
+}
+
+export default Page;
diff --git a/app/(auth)/sign-in/[[...sign-in]]/page.tsx b/app/(auth)/sign-in/[[...sign-in]]/page.tsx
@@ -0,0 +1,5 @@
+import { SignIn } from "@clerk/nextjs";
+
+export default function Page() {
+  return <SignIn />;
+}
diff --git a/app/(auth)/sign-up/[[...sign-up]]/page.tsx b/app/(auth)/sign-up/[[...sign-up]]/page.tsx
@@ -0,0 +1,5 @@
+import { SignUp } from "@clerk/nextjs";
+
+export default function Page() {
+  return <SignUp />;
+}
diff --git a/app/(root)/activity/page.tsx b/app/(root)/activity/page.tsx
@@ -0,0 +1,53 @@
+import { fetchUser, getActivity } from "@/lib/actions/user.actions";
+import { currentUser } from "@clerk/nextjs";
+import Image from "next/image";
+import Link from "next/link";
+import { redirect } from "next/navigation";
+
+const Page = async ({ params }: { params: { id: string } }) => {
+  const user = await currentUser();
+  if (!user) return null;
+
+  const userInfo = await fetchUser(user.id);
+  if (!userInfo?.onboarded) redirect("/onboarding");
+
+  // getActivity or notifications
+  const activity = await getActivity(userInfo._id);
+
+  return (
+    <section>
+      <h1 className="head-text mb-10">Activity</h1>
+
+      <section className="mt-10 flex flex-col gap-5">
+        {activity.length > 0 ? (
+          <>
+            {activity.map((activity) => (
+              <Link key={activity._id} href={`/thread/${activity.parentId}`}>
+                <article className="activity-card">
+                  <Image
+                    src={activity.author.image}
+                    alt="Profile Picture"
+                    width={20}
+                    height={20}
+                    className="rounded-full object-cover"
+                  />
+
+                  <p className="!text-small-regular text-light-1">
+                    <span className="mr-1 text-primary-500">
+                      {activity.author.name}
+                    </span>{" "}
+                    replied to your thread
+                  </p>
+                </article>
+              </Link>
+            ))}
+          </>
+        ) : (
+          <p className="!text-base-regular text-light-3">No activity yet</p>
+        )}
+      </section>
+    </section>
+  );
+};
+
+export default Page;
diff --git a/app/(root)/communities/page.tsx b/app/(root)/communities/page.tsx
@@ -0,0 +1,11 @@
+import React from 'react'
+
+const Page = () => {
+  return (
+      <section>
+          <h1 className="head-text">Communities</h1>
+    </section>
+  )
+}
+
+export default Page
diff --git a/app/(root)/create-thread/page.tsx b/app/(root)/create-thread/page.tsx
@@ -0,0 +1,24 @@
+import PostThread from "@/components/forms/PostThread";
+import { fetchUser } from "@/lib/actions/user.actions";
+import { currentUser } from "@clerk/nextjs";
+import { redirect } from "next/navigation";
+
+async function Page() {
+    const user = await currentUser();
+
+    if (!user) return null;
+
+    const userInfo = await fetchUser(user.id);
+
+    if(!userInfo?.onboarded) redirect('/onboarding');
+
+    return (
+        <>
+            <h1 className="head-text">Create Thread</h1>
+
+            <PostThread userId={ userInfo._id} />
+        </>
+    )
+}
+
+export default Page;
diff --git a/app/(root)/layout.tsx b/app/(root)/layout.tsx
@@ -0,0 +1,48 @@
+import React from 'react'
+import { ClerkProvider } from '@clerk/nextjs'
+import type { Metadata } from 'next'
+import { Inter } from 'next/font/google'
+
+import  '../globals.css'
+import Topbar from '@/components/shared/Topbar'
+import LeftSidebar from '@/components/shared/LeftSidebar'
+import RightSidebar from '@/components/shared/RightSidebar'
+import Bottombar from '@/components/shared/Bottombar'
+
+const inter = Inter({ subsets: ['latin'] })
+
+export const metadata: Metadata = {
+  title: "Threads",
+  description: "A Next.js 13 Meta Threads application",
+};
+
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return (
+    <ClerkProvider>
+      <html lang="en">
+      <body className={inter.className}>
+        <Topbar />
+
+        <main className='flex flex-row'>
+            <LeftSidebar />
+
+            <section className="main-container">
+              <div className="w-full max-w-4xl">
+                {children}
+              </div>
+            </section>
+
+          <RightSidebar/>
+        </main>
+
+        <Bottombar />
+      </body>
+    </html>
+  </ClerkProvider>
+  )
+}
diff --git a/app/(root)/page.tsx b/app/(root)/page.tsx
@@ -0,0 +1,36 @@
+import ThreadCard from "@/components/cards/ThreadCard";
+import { fetchPosts } from "@/lib/actions/thread.actions";
+import { currentUser } from "@clerk/nextjs";
+
+export default async function Home() {
+  const result = await fetchPosts(1, 30);
+ const user = await currentUser();
+
+  return (
+    <>
+      <h1 className="head-text text-left">Home</h1>
+
+      <section className="mt-9 flex flex-col gap-10">
+        {result.posts.length === 0 ? (
+          <p className="n0-result">No threads found</p>
+        ) : (
+            <>
+              {result.posts.map((post) => (
+                <ThreadCard
+                  key={post._id}
+                  id={post._id}
+                  currentUserId={user?.id || ""}
+                  parentId={post.parentId}
+                  content={post.text}
+                  author={post.author}
+                  community={post.community}
+                  createdAt={post.createdAt}
+                  comments={post.children}
+                />
+              ))}
+            </>
+        )}
+      </section>
+    </>
+  )
+}
diff --git a/app/(root)/profile/[id]/page.tsx b/app/(root)/profile/[id]/page.tsx
@@ -0,0 +1,73 @@
+import ProfileHeader from "@/components/shared/ProfileHeader";
+import ThreadsTab from "@/components/shared/ThreadsTab";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { profileTabs } from "@/constants";
+import { fetchUser } from "@/lib/actions/user.actions";
+import { currentUser } from "@clerk/nextjs";
+import Image from "next/image";
+import { redirect } from "next/navigation";
+
+const Page = async ({ params }: { params: { id: string } }) => {
+  const user = await currentUser();
+  if (!user) return null;
+
+    const userInfo = await fetchUser(params.id);
+
+
+
+  if (!userInfo?.onboarded) redirect("/onboarding");
+  return (
+    <section>
+      <ProfileHeader
+        accountId={userInfo.id}
+        authUserId={user.id}
+        name={userInfo.name}
+        username={userInfo.username}
+        imgUrl={userInfo.image}
+        bio={userInfo.bio}
+      />
+
+      <div className="mt-9">
+        <Tabs defaultValue="threads" className="w-full">
+          <TabsList className="tab">
+            {profileTabs.map((tab) => (
+              <TabsTrigger key={tab.label} value={tab.value} className="tab">
+                <Image
+                  src={tab.icon}
+                  alt={tab.label}
+                  width={24}
+                  height={24}
+                  className="object-contain"
+                />
+                <p className="max-sm:hidden">{tab.label}</p>
+
+                {tab.label === "Threads" && (
+                  <p className="ml-1 rounded-sm bg-light-4 px-2 py-1 !text-tiny-medium text-light-2">
+                    {userInfo?.threads.length}
+                  </p>
+                )}
+              </TabsTrigger>
+            ))}
+          </TabsList>
+          {profileTabs.map((tab) => (
+            <TabsContent
+              key={`content-${tab.label}`}
+              value={tab.value}
+              className="w-full text-light-1"
+            >
+
+                {/* @ts-ignore */}
+              <ThreadsTab
+                currentUserId={user.id}
+                accountId={userInfo.id}
+                accountType="User"
+              />
+            </TabsContent>
+          ))}
+        </Tabs>
+      </div>
+    </section>
+  );
+};
+
+export default Page;
diff --git a/app/(root)/search/page.tsx b/app/(root)/search/page.tsx
@@ -0,0 +1,54 @@
+import UserCard from "@/components/cards/UserCard";
+import ProfileHeader from "@/components/shared/ProfileHeader";
+import ThreadsTab from "@/components/shared/ThreadsTab";
+import { profileTabs } from "@/constants";
+import { fetchUser, fetchUsers } from "@/lib/actions/user.actions";
+import { currentUser } from "@clerk/nextjs";
+import Image from "next/image";
+import { redirect } from "next/navigation";
+
+const Page = async () => {
+  const user = await currentUser();
+  if (!user) return null;
+
+  const userInfo = await fetchUser(user.id);
+
+  if (!userInfo?.onboarded) redirect("/onboarding");
+
+  // Fetch Users
+  const result = await fetchUsers({
+    userId: user.id,
+    searchString: "",
+    pageNumber: 1,
+    pageSize: 25,
+  });
+
+  return (
+    <section>
+      <h1 className="head-text mb-10">Search</h1>
+
+      {/* Search Bar */}
+
+      <div className="mt-14 flex flex-col gap-9">
+        {result.users.length === 0 ? (
+          <p className="no-result">No Users</p>
+        ) : (
+          <>
+            {result.users.map((person) => (
+              <UserCard
+                key={person.id}
+                id={person.id}
+                name={person.name}
+                username={person.username}
+                imgUrl={person.image}
+                personType="User"
+              />
+            ))}
+          </>
+        )}
+      </div>
+    </section>
+  );
+};
+
+export default Page;