reorganize files

apps/web/src/apis/getMessages.ts

@@ -0,0 +1,41 @@
+import { db, selectUuid, sql } from '@member-protocol/db/node'
+import { Attachment } from '@/src/components/message/MessageContent'
+
+const getMessages = async (postId: string) => {
+  return await db
+    .selectFrom('messages')
+    .leftJoin('attachments', 'attachments.messageId', 'messages.snowflakeId')
+    .innerJoin('users', 'users.snowflakeId', 'messages.userId')
+    .select([
+      selectUuid('messages.id').as('id'),
+      'messages.snowflakeId',
+      'messages.content',
+      'messages.createdAt',
+      selectUuid('users.id').as('authorId'),
+      'users.avatarUrl as authorAvatarUrl',
+      'users.username as authorUsername',
+      'users.isPublic as userIsPublic',
+      'users.isModerator as userIsModerator',
+      sql<Attachment[]>`
+        if(
+          count(attachments.id) > 0,
+          json_arrayagg(
+            json_object(
+              'id', ${selectUuid('attachments.id')},
+              'url', attachments.url,
+              'name', attachments.name,
+              'contentType', attachments.contentType
+            )
+          ),
+          json_array()
+        )
+      `.as('attachments'),
+    ])
+    .where('postId', '=', postId)
+    .where('messages.snowflakeId', '!=', postId)
+    .groupBy('messages.id')
+    .orderBy('messages.createdAt', 'asc')
+    .execute()
+}
+
+export default getMessages

apps/web/src/apis/getPost.ts

@@ -0,0 +1,29 @@
+import { db, selectUuid } from '@member-protocol/db/node'
+
+const getPost = async (snowflakeId: string) => {
+  return await db
+    .selectFrom('posts')
+    .innerJoin('users', 'users.snowflakeId', 'posts.userId')
+    .innerJoin('channels', 'channels.snowflakeId', 'posts.channelId')
+    .select([
+      selectUuid('posts.id').as('id'),
+      'posts.snowflakeId',
+      'posts.title',
+      'posts.createdAt',
+      'posts.answerId',
+      'users.username',
+      'users.isPublic as userIsPublic',
+      'users.avatarUrl as userAvatar',
+      'channels.name as channelName',
+      (eb) =>
+        eb
+          .selectFrom('messages')
+          .select(eb.fn.countAll<number>().as('count'))
+          .where('messages.postId', '=', eb.ref('posts.snowflakeId'))
+          .as('messagesCount'),
+    ])
+    .where('posts.snowflakeId', '=', snowflakeId)
+    .executeTakeFirst()
+}
+
+export default getPost

apps/web/src/apis/getPostMessage.ts

@@ -0,0 +1,40 @@
+import { db, selectUuid, sql } from '@member-protocol/db/node'
+import { Attachment } from '@/src/components/message/MessageContent'
+
+const getPostMessage = async (postId: string) => {
+  return await db
+    .selectFrom('messages')
+    .leftJoin('attachments', 'attachments.messageId', 'messages.snowflakeId')
+    .innerJoin('users', 'users.snowflakeId', 'messages.userId')
+    .select([
+      selectUuid('messages.id').as('id'),
+      'messages.content',
+      'messages.createdAt',
+      selectUuid('users.id').as('authorId'),
+      'users.avatarUrl as authorAvatarUrl',
+      'users.username as authorUsername',
+      'users.isPublic as userIsPublic',
+      'users.isModerator as userIsModerator',
+      sql<Attachment[]>`
+        if(
+          count(attachments.id) > 0,
+          json_arrayagg(
+            json_object(
+              'id', ${selectUuid('attachments.id')},
+              'url', attachments.url,
+              'name', attachments.name,
+              'contentType', attachments.contentType
+            )
+          ),
+          json_array()
+        )
+      `.as('attachments'),
+    ])
+    .where('messages.postId', '=', postId)
+    .where('messages.snowflakeId', '=', postId)
+    .groupBy('messages.id')
+    .orderBy('messages.createdAt', 'asc')
+    .executeTakeFirst()
+}
+
+export default getPostMessage

apps/web/src/app/(home)/layout.tsx

@@ -1,59 +1,14 @@
-import { LayoutWithSidebar } from '@/src/components/layoutWithSidebar'
-import Balancer from 'react-wrap-balancer'
-import discordImage from '@/discord.png'
-import Image from 'next/image'
+import HomeHeader from '@/src/components/header/HomeHeader'
+import { LayoutWithSidebar } from '@/src/components/sidebar/LayoutWithSidebar'
+
 import { ReactNode } from 'react'
 
 type HomeLayoutProps = { children: ReactNode }
 
 export default function HomeLayout({ children }: HomeLayoutProps) {
   return (
     <>
-      <div className="relative py-16 border-b border-neutral-800 bg-gradient-to-t from-neutral-900 to-neutral-800 overflow-hidden">
-        <div className="container max-w-7xl mx-auto flex items-center">
-          <div className="flex-1 flex flex-col px-4 space-y-4 z-10 text-center lg:text-left">
-            <h2 className="font-semibold text-5xl lg:max-w-2xl leading-[1.1]">
-              <Balancer ratio={0.75}>
-                The Next.js Discord server indexed in the web
-              </Balancer>
-            </h2>
-            <a
-              href="https://nextjs.org/discord"
-              target="_blank"
-              rel="noopener"
-              className="mx-auto text-xl text-white w-fit hover:opacity-80 hover:no-underline transition-opacity lg:mx-0"
-            >
-              Join the server ➔
-            </a>
-          </div>
-
-          <div
-            className="hidden lg:flex absolute top-0 bottom-0 left-1/2"
-            style={{
-              WebkitMaskImage:
-                'linear-gradient(to bottom, rgba(0, 0, 0, 1.0) 50%, transparent 100%)',
-              maskImage:
-                'linear-gradient(to top, rgba(0, 0, 0, 1.0) 0%, transparent 100%)',
-            }}
-          >
-            <div>
-              <Image
-                src={discordImage}
-                alt=""
-                quality={90}
-                className="block relative -top-11 -skew-x-3 opacity-90 "
-                style={{
-                  WebkitMaskImage:
-                    'linear-gradient(to right, transparent 0%, rgba(0, 0, 0, 1.0) 20%, rgba(0, 0, 0, 1.0) 80%, transparent 100%)',
-                  maskImage:
-                    'linear-gradient(to top, rgba(0, 0, 0, 1.0) 0%, transparent 100%)',
-                }}
-              />
-            </div>
-          </div>
-        </div>
-      </div>
-
+      <HomeHeader />
       <LayoutWithSidebar>{children}</LayoutWithSidebar>
     </>
   )

apps/web/src/app/(home)/page.tsx

@@ -1,4 +1,4 @@
-import { PostsList } from '@/src/components/postsList'
+import { PostsList } from '@/src/components/post/PostsList'
 
 export const dynamic = 'error'
 export const revalidate = 60

apps/web/src/app/(home)/page/[page]/page.tsx

@@ -1,7 +1,7 @@
 import { notFound } from 'next/navigation'
 import { Metadata } from 'next'
 import { getBaseUrl } from '@/src/utils/urls'
-import { PostsList } from '@/src/components/postsList'
+import { PostsList } from '@/src/components/post/PostsList'
 
 // This page is probably temporary, it doesn't benefit SEO so
 // it's probably a good idea to replace it with an infinite scroll

apps/web/src/app/layout.tsx

@@ -3,9 +3,6 @@ import { Inter } from 'next/font/google'
 import { Analytics } from '@vercel/analytics/react'
 
 import './globals.css'
-import { GitHubIcon } from '@/src/components/icons/github'
-import { NextIcon } from '@/src/components/icons/next'
-import { DiscordIcon } from '@/src/components/icons/discord'
 import { Metadata } from 'next'
 import { getBaseUrl } from '@/src/utils/urls'
 import Providers from '@/src/app/providers'
@@ -48,50 +45,7 @@ const RootLayout = ({ children }: RootLayoutProps) => {
   return (
     <html lang="en" className={`${inter.className} dark`}>
       <body className="bg-neutral-50 dark:bg-neutral-900 text-slate-900 dark:text-white">
-        <header className="border-b border-neutral-700">
-          <div className="container max-w-7xl flex mx-auto px-4 py-6 justify-between items-center">
-            <h1 aria-hidden="true" className="sr-only">
-              Thread powered by Member Protocol
-            </h1>
-
-            <a
-              href="/"
-              className="hover:opacity-75 text-white hover:no-underline transition-all duration-200"
-            >
-              <span className="flex flex-col xs:flex-row xs:space-x-2  xs:items-center">
-                <NextIcon className="w-[90px]" />
-                <span className=" text-2xl font-bold tracking-tighter">
-                  Discord Forum
-                </span>
-              </span>
-            </a>
-
-            <div className="flex space-x-5">
-              <a
-                href="https://nextjs.org/discord"
-                target="_blank"
-                rel="noopener"
-                aria-label="Discord Server Invite"
-                className="hover:opacity-75 text-white transition-all duration-200"
-              >
-                <DiscordIcon size={7} />
-              </a>
-
-              <a
-                href="https://github.com/rafaelalmeidatk/nextjs-forum"
-                target="_blank"
-                rel="noopener"
-                aria-label="Github Repository"
-                className="hover:opacity-75 text-white transition-all duration-200"
-              >
-                <GitHubIcon size={7} />
-              </a>
-            </div>
-          </div>
-        </header>
-
         <Providers>{children}</Providers>
-
         <Analytics />
       </body>
     </html>