👽 Introduce Forum Thread View

packages/ui/src/app/pages/Forum/Forum.tsx

@@ -3,12 +3,14 @@ import { Route, Switch } from 'react-router-dom'
 
 import { ForumCategories } from '@/app/pages/Forum/ForumCategories'
 import { ForumCategory } from '@/app/pages/Forum/ForumCategory'
+import { ForumThread } from '@/app/pages/Forum/ForumThread'
 
 export const Forum = () => {
   return (
     <Switch>
       <Route path="/forum" exact component={ForumCategories} />
       <Route path="/forum/category/:id" exact component={ForumCategory} />
+      <Route path="/forum/thread/:id" exact component={ForumThread} />
     </Switch>
   )
 }

packages/ui/src/app/pages/Forum/ForumCategory.tsx

@@ -3,6 +3,7 @@ import { useParams } from 'react-router-dom'
 
 import { PageLayout } from '@/app/components/PageLayout'
 import { Loading } from '@/common/components/Loading'
+import { RouterLink } from '@/common/components/RouterLink'
 import { useForumCategoryThreads } from '@/forum/hooks/useForumCategoryThreads'
 
 export const ForumCategory = () => {
@@ -21,7 +22,9 @@ export const ForumCategory = () => {
             threads.map((thread) => {
               return (
                 <div key={thread.id}>
-                  {thread.id} | {thread.isSticky ? '📌' : ''} {thread.title}
+                  <RouterLink to={'/forum/thread/' + thread.id}>
+                    {thread.id} | {thread.isSticky ? '📌' : ''} {thread.title}
+                  </RouterLink>
                 </div>
               )
             })}

packages/ui/src/app/pages/Forum/ForumThread.tsx

@@ -0,0 +1,71 @@
+import React, { useRef } from 'react'
+import { useParams } from 'react-router-dom'
+
+import { PageLayout } from '@/app/components/PageLayout'
+import { ActivitiesBlock } from '@/common/components/Activities/ActivitiesBlock'
+import { ButtonGhost, ButtonsGroup } from '@/common/components/buttons'
+import { LinkIcon, WatchIcon } from '@/common/components/icons'
+import { Loading } from '@/common/components/Loading'
+import { PageHeader } from '@/common/components/page/PageHeader'
+import { PageTitle } from '@/common/components/page/PageTitle'
+import { PreviousPage } from '@/common/components/page/PreviousPage'
+import { SidePanel } from '@/common/components/page/SidePanel'
+import { useCopyToClipboard } from '@/common/hooks/useCopyToClipboard'
+import { useForumThread } from '@/forum/hooks/useForumThread'
+
+export const ForumThread = () => {
+  const { id } = useParams<{ id: string }>()
+  const { isLoading, thread } = useForumThread(id)
+
+  const { copyValue } = useCopyToClipboard()
+  const sideNeighborRef = useRef<HTMLDivElement>(null)
+
+  const displayHeader = () => {
+    if (isLoading || !thread) {
+      return null
+    }
+
+    return (
+      <PageHeader>
+        <PreviousPage>
+          <PageTitle>{thread.title}</PageTitle>
+        </PreviousPage>
+        <ButtonsGroup>
+          <ButtonGhost size="medium" onClick={() => copyValue(window.location.href)}>
+            <LinkIcon />
+            Copy link
+          </ButtonGhost>
+          <ButtonGhost size="medium">
+            <WatchIcon />
+            Watch thread
+          </ButtonGhost>
+        </ButtonsGroup>
+      </PageHeader>
+    )
+  }
+
+  const displayMain = () => {
+    if (isLoading) {
+      return <Loading />
+    }
+    if (!thread) {
+      return <h1>404 Not Found</h1>
+    }
+
+    return <div>Thread content</div>
+  }
+
+  const displaySidebar = () => {
+    if (isLoading || !thread) {
+      return null
+    }
+
+    return (
+      <SidePanel neighbor={sideNeighborRef}>
+        <ActivitiesBlock activities={[]} label="Suggested Threads" />
+      </SidePanel>
+    )
+  }
+
+  return <PageLayout header={displayHeader()} main={displayMain()} sidebar={displaySidebar()} />
+}

packages/ui/src/common/components/icons/WatchIcon.tsx

@@ -0,0 +1,14 @@
+import React from 'react'
+
+import { Icon } from './Icon'
+
+export const WatchIcon = React.memo(() => (
+  <Icon size="16" viewBox="0 0 16 16" fill="none" color="currentColor">
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M8.18185 4.94346C6.62683 4.94346 5.36187 6.20841 5.36187 7.76343C5.36187 9.31844 6.62683 10.5834 8.18185 10.5834C9.73686 10.5834 11.0018 9.31844 11.0018 7.76343C11.0018 6.20841 9.73686 4.94346 8.18185 4.94346ZM14.9399 7.44899C14.503 6.74506 12.0895 3.21657 7.99681 3.33494C4.21092 3.42357 2.0091 6.50641 1.42423 7.44899C1.30301 7.64396 1.30301 7.88388 1.42423 8.07885C1.855 8.77328 4.18352 12.1948 8.19885 12.1948C8.25501 12.1948 8.31116 12.1942 8.36732 12.1929C12.1525 12.1036 14.355 9.02143 14.9399 8.07885C15.0604 7.88388 15.0604 7.64396 14.9399 7.44899Z"
+      fill="currentColor"
+    />
+  </Icon>
+))

packages/ui/src/common/components/icons/index.ts

@@ -25,3 +25,4 @@ export * from './SuccessIcon'
 export * from './TransferIcon'
 export * from './VerifiedMemberIcon'
 export * from './WaitingIcon'
+export * from './WatchIcon'

packages/ui/src/forum/hooks/useForumThread.ts

@@ -0,0 +1,11 @@
+import { useGetForumThreadQuery } from '@/forum/queries/__generated__/forum.generated'
+import { asForumThread } from '@/forum/types'
+
+export const useForumThread = (threadId: string) => {
+  const { loading, data } = useGetForumThreadQuery({ variables: { where: { id: threadId } } })
+
+  return {
+    isLoading: loading,
+    thread: data && data.thread ? asForumThread(data.thread) : null,
+  }
+}

packages/ui/src/forum/queries/forum.graphql

@@ -22,3 +22,9 @@ query GetForumThreads($where: ForumThreadWhereInput) {
     ...ForumThreadFields
   }
 }
+
+query GetForumThread($where: ForumThreadWhereUniqueInput!) {
+  thread: forumThreadByUniqueInput(where: $where) {
+    ...ForumThreadFields
+  }
+}

packages/ui/src/mocks/server.ts

@@ -66,6 +66,7 @@ export const makeServer = (environment = 'development') => {
               budgetSpendingEvents: getWhereResolver('BudgetSpendingEvent'),
               forumCategories: getWhereResolver('ForumCategory'),
               forumThreads: getWhereResolver('ForumThread'),
+              forumThreadByUniqueInput: getUniqueResolver('ForumThread'),
               membershipByUniqueInput: getUniqueResolver('Membership'),
               memberships: getWhereResolver('Membership'),
               membershipsConnection: getConnectionResolver('MembershipConnection'),