move story view page to app directory

Author: Roshanjossey

app/story/[id]/page.tsx

@@ -0,0 +1,70 @@
+'use client'
+
+import dynamic from 'next/dynamic'
+import { headers } from 'next/headers'
+import { useRouter } from 'next/router'
+import {
+  Environment,
+  graphql,
+  RelayEnvironmentProvider,
+  usePreloadedQuery,
+} from 'react-relay'
+import { getCurrentEnvironment } from 'src/relay/environment'
+import loadSerializableQuery from 'src/relay/loadSerializableQuery'
+import useSerializablePreloadedQuery from 'src/relay/useSerializablePreloadedQuery'
+import Comments from 'src/components/comment/Comments'
+import Layout from 'src/components/Layout'
+import UserDetails from 'src/components/UserDetails/UserDetails'
+import Id_StoryQueryNode, {
+  Id_StoryQuery,
+} from '__generated__/Id_StoryQuery.graphql'
+
+const Editor = dynamic(() => import('src/components/story/StoryEditor'), {
+  ssr: false,
+})
+
+const StoryQuery = graphql`
+  query Id_StoryQuery($id: ID!) {
+    node(id: $id) {
+      ... on Story {
+        id
+        contentJson
+        createdBy {
+          ...UserDetails_user
+        }
+        ...Comments_story
+      }
+    }
+  }
+`
+export default async function Story() {
+  const requestCookie = headers().get('cookie')
+  const environment = getCurrentEnvironment(requestCookie ?? '')
+  const router = useRouter()
+  const { id } = router.query
+  const preloadedQuery = await loadSerializableQuery<
+    typeof Id_StoryQueryNode,
+    Id_StoryQuery
+  >(Id_StoryQueryNode.params, { id: (id as string) ?? '' }, requestCookie ?? '')
+  const queryRef = useSerializablePreloadedQuery(environment, preloadedQuery)
+  const data = usePreloadedQuery(StoryQuery, queryRef)
+  return (
+    <RelayEnvironmentProvider environment={environment as Environment}>
+      <div>
+        <Layout
+          sidebarContentRight={<div>Promoted</div>}
+          sidebarContentLeft={
+            <div>
+              {data.node?.createdBy && (
+                <UserDetails user={data?.node?.createdBy} />
+              )}
+            </div>
+          }
+        >
+          <Editor body={data?.node?.contentJson} editable={false} />
+          <Comments story={data.node} />
+        </Layout>
+      </div>
+    </RelayEnvironmentProvider>
+  )
+}

src/components/comment/Comment.tsx

@@ -1,7 +1,7 @@
 import dayjs from 'dayjs'
 import relativeTime from 'dayjs/plugin/relativeTime'
 import { graphql, useFragment } from 'react-relay'
-import { Comment_node$key } from '../../queries/__generated__/Comment_node.graphql'
+import { Comment_node$key } from '__generated__/Comment_node.graphql'
 
 type CommentProps = {
   comment: Comment_node$key

src/components/feed/Feed.tsx

@@ -1,6 +1,6 @@
 import { graphql, usePaginationFragment } from 'react-relay'
 import { Virtuoso } from 'react-virtuoso'
-import { FeedsQuery$key } from '../../queries/__generated__/FeedsQuery.graphql'
+import { FeedsQuery$key } from '__generated__/FeedsQuery.graphql'
 import StoryPreview from './StoryPreview'
 
 type FeedProps = {

src/components/feed/MyStories.tsx

@@ -1,5 +1,5 @@
 import { graphql, usePaginationFragment } from 'react-relay'
-import { MyStories__Query$key } from '../../queries/__generated__/MyStories__Query.graphql'
+import { MyStories__Query$key } from '__generated__/MyStories__Query.graphql'
 import StoryPreview from './StoryPreview'
 
 type MyStoriesProps = {

src/components/feed/StoryPreview.tsx

@@ -1,5 +1,5 @@
 import { graphql, useFragment } from 'react-relay'
-import { StoryPreview_node$key } from '../../queries/__generated__/StoryPreview_node.graphql'
+import { StoryPreview_node$key } from '__generated__/StoryPreview_node.graphql'
 import StoryPreviewFooter from './StoryPreviewFooter'
 import UserSnippet from './UserSnippet'
 import { GoKebabVertical } from '@react-icons/all-files/go/GoKebabVertical'
@@ -34,25 +34,23 @@ const StoryPreview = ({ story }: StoryPreviewProps) => {
     <ErrorBoundary FallbackComponent={ErrorFallback}>
       <div className="my-8 mr-2 flex flex-col bg-white  dark:bg-dark-700 rounded-md">
         <Link href={`/story/${data.id}___${data.urlSuffix}`}>
-          <a>
-            <div>
-              {data.thumbnail ? (
-                <img className="cover-image" src={data.thumbnail} alt="" />
-              ) : (
-                <div className="image-placeholder bg-gray-100 dark:bg-dark-500"></div>
-              )}
+          <div>
+            {data.thumbnail ? (
+              <img className="cover-image" src={data.thumbnail} alt="" />
+            ) : (
+              <div className="image-placeholder bg-gray-100 dark:bg-dark-500"></div>
+            )}
+          </div>
+          <div className="px-4 pb-4">
+            <div className="flex flex-row justify-between">
+              <UserSnippet user={data.createdBy} />
+              <GoKebabVertical className="mt-4" />
             </div>
-            <div className="px-4 pb-4">
-              <div className="flex flex-row justify-between">
-                <UserSnippet user={data.createdBy} />
-                <GoKebabVertical className="mt-4" />
-              </div>
-              <div className="prose dark:text-gray-100">
-                <h3 className="dark:text-gray-200">{data.title}</h3>
-                <p className="abstract-content">{data.abstractContent}</p>
-              </div>
+            <div className="prose dark:text-gray-100">
+              <h3 className="dark:text-gray-200">{data.title}</h3>
+              <p className="abstract-content">{data.abstractContent}</p>
             </div>
-          </a>
+          </div>
         </Link>
         <StoryPreviewFooter story={data} />
         <style jsx>

src/components/feed/StoryPreviewFooter.tsx

@@ -1,7 +1,7 @@
 import { RiHeart3Fill } from '@react-icons/all-files/ri/RiHeart3Fill'
 import { RiHeartLine } from '@react-icons/all-files/ri/RiHeartLine'
 import { graphql, useMutation, useRefetchableFragment } from 'react-relay'
-import { StoryPreviewFooter_story$key } from '../../queries/__generated__/StoryPreviewFooter_story.graphql'
+import { StoryPreviewFooter_story$key } from '__generated__/StoryPreviewFooter_story.graphql'
 
 type StoryPreviewFooterProps = {
   story: StoryPreviewFooter_story$key

src/components/feed/UserSnippet.tsx

@@ -1,7 +1,7 @@
 import Link from 'next/link'
 import { graphql, useFragment } from 'react-relay'
-import { UserSnippet_user$key } from '../../queries/__generated__/UserSnippet_user.graphql'
-import { getCompactNumber } from '../../utils/formatNumber'
+import { UserSnippet_user$key } from '__generated__/UserSnippet_user.graphql'
+import { getCompactNumber } from 'src/utils/formatNumber'
 
 type UserSnippetProps = {
   user: UserSnippet_user$key