Skip to content

Commit 1d61c84

Browse files
RoshanjosseyRoshanjossey
committed
Refactor story pages
1 parent f565cd1 commit 1d61c84

File tree

5 files changed

+147
-96
lines changed

5 files changed

+147
-96
lines changed

‎app/story/[id]/Story.tsx

Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
'use client'
2+
3+
import dynamic from 'next/dynamic'
4+
import {
5+
Environment,
6+
graphql,
7+
PreloadedQuery,
8+
RelayEnvironmentProvider,
9+
usePreloadedQuery,
10+
} from 'react-relay'
11+
import { getCurrentEnvironment } from 'src/relay/environment'
12+
import { SerializablePreloadedQuery } from 'src/relay/loadSerializableQuery'
13+
import useSerializablePreloadedQuery from 'src/relay/useSerializablePreloadedQuery'
14+
import Comments from 'src/components/comment/Comments'
15+
import Layout from 'src/components/Layout'
16+
import UserDetails from 'src/components/UserDetails/UserDetails'
17+
import Id_StoryQueryNode, {
18+
Id_StoryQuery,
19+
} from '__generated__/Id_StoryQuery.graphql'
20+
import { Suspense } from 'react'
21+
22+
const Editor = dynamic(() => import('src/components/story/StoryEditor'), {
23+
ssr: false,
24+
})
25+
26+
const StoryQuery = graphql`
27+
query Id_StoryQuery($id: ID!) {
28+
node(id: $id) {
29+
... on Story {
30+
id
31+
contentJson
32+
createdBy {
33+
...UserDetails_user
34+
}
35+
...Comments_story
36+
}
37+
}
38+
}
39+
`
40+
type StoryProps = {
41+
preloadedQuery: SerializablePreloadedQuery<
42+
typeof Id_StoryQueryNode,
43+
Id_StoryQuery
44+
>
45+
cookies: string
46+
}
47+
48+
export default function StoryContainer({
49+
preloadedQuery,
50+
cookies,
51+
}: StoryProps) {
52+
const environment = getCurrentEnvironment(cookies)
53+
const queryRef = useSerializablePreloadedQuery(environment, preloadedQuery)
54+
return (
55+
<RelayEnvironmentProvider environment={environment as Environment}>
56+
<Suspense fallback="Loading...">
57+
<Story queryRef={queryRef} />
58+
</Suspense>
59+
</RelayEnvironmentProvider>
60+
)
61+
}
62+
63+
const Story = (props: { queryRef: PreloadedQuery<Id_StoryQuery> }) => {
64+
const data = usePreloadedQuery(StoryQuery, props.queryRef)
65+
return (
66+
<div>
67+
<Layout
68+
sidebarContentRight={<div>Promoted</div>}
69+
sidebarContentLeft={
70+
<div>
71+
{data.node?.createdBy && (
72+
<UserDetails user={data?.node?.createdBy} />
73+
)}
74+
</div>
75+
}
76+
>
77+
<Editor body={data?.node?.contentJson} editable={false} />
78+
<Comments story={data.node} />
79+
</Layout>
80+
</div>
81+
)
82+
}

‎app/story/[id]/page.tsx

Lines changed: 14 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -1,70 +1,27 @@
1-
'use client'
2-
3-
import dynamic from 'next/dynamic'
41
import { headers } from 'next/headers'
5-
import { useRouter } from 'next/router'
6-
import {
7-
Environment,
8-
graphql,
9-
RelayEnvironmentProvider,
10-
usePreloadedQuery,
11-
} from 'react-relay'
12-
import { getCurrentEnvironment } from 'src/relay/environment'
132
import loadSerializableQuery from 'src/relay/loadSerializableQuery'
14-
import useSerializablePreloadedQuery from 'src/relay/useSerializablePreloadedQuery'
15-
import Comments from 'src/components/comment/Comments'
16-
import Layout from 'src/components/Layout'
17-
import UserDetails from 'src/components/UserDetails/UserDetails'
183
import Id_StoryQueryNode, {
194
Id_StoryQuery,
205
} from '__generated__/Id_StoryQuery.graphql'
6+
import Story from './Story'
217

22-
const Editor = dynamic(() => import('src/components/story/StoryEditor'), {
23-
ssr: false,
24-
})
25-
26-
const StoryQuery = graphql`
27-
query Id_StoryQuery($id: ID!) {
28-
node(id: $id) {
29-
... on Story {
30-
id
31-
contentJson
32-
createdBy {
33-
...UserDetails_user
34-
}
35-
...Comments_story
36-
}
37-
}
38-
}
39-
`
40-
export default async function Story() {
8+
export default async function StoryPage({
9+
params,
10+
}: {
11+
params: { id: string }
12+
}) {
4113
const requestCookie = headers().get('cookie')
42-
const environment = getCurrentEnvironment(requestCookie ?? '')
43-
const router = useRouter()
44-
const { id } = router.query
4514
const preloadedQuery = await loadSerializableQuery<
4615
typeof Id_StoryQueryNode,
4716
Id_StoryQuery
48-
>(Id_StoryQueryNode.params, { id: (id as string) ?? '' }, requestCookie ?? '')
49-
const queryRef = useSerializablePreloadedQuery(environment, preloadedQuery)
50-
const data = usePreloadedQuery(StoryQuery, queryRef)
17+
>(
18+
Id_StoryQueryNode.params,
19+
{ id: (decodeURIComponent(params.id) as string) ?? '' },
20+
requestCookie ?? ''
21+
)
5122
return (
52-
<RelayEnvironmentProvider environment={environment as Environment}>
53-
<div>
54-
<Layout
55-
sidebarContentRight={<div>Promoted</div>}
56-
sidebarContentLeft={
57-
<div>
58-
{data.node?.createdBy && (
59-
<UserDetails user={data?.node?.createdBy} />
60-
)}
61-
</div>
62-
}
63-
>
64-
<Editor body={data?.node?.contentJson} editable={false} />
65-
<Comments story={data.node} />
66-
</Layout>
67-
</div>
68-
</RelayEnvironmentProvider>
23+
<div>
24+
<Story preloadedQuery={preloadedQuery} cookies={requestCookie ?? ''} />
25+
</div>
6926
)
7027
}

‎src/components/UserDetails/Bio.tsx

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,10 @@
1+
'use client'
2+
13
import { useState } from 'react'
24
import { GoPencil } from '@react-icons/all-files/go/GoPencil'
35
import { GoCheck } from '@react-icons/all-files/go/GoCheck'
46
import { graphql, useFragment, useMutation } from 'react-relay'
5-
import { Bio_user$key } from '../../queries/__generated__/Bio_user.graphql'
7+
import { Bio_user$key } from '__generated__/Bio_user.graphql'
68

79
type BioProps = {
810
user: Bio_user$key

‎src/components/comment/NewComment.tsx

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
'use client'
2+
13
import { useState } from 'react'
24
import { graphql, RefetchFnDynamic, useMutation } from 'react-relay'
35
import { Options } from 'react-relay/relay-hooks/useRefetchableFragmentNode'

‎src/components/story/StoryEditor.tsx

Lines changed: 46 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -75,8 +75,20 @@ type EditorProps = {
7575
requestCookie?: string | null
7676
}
7777

78-
export default function Editor({ editable, body, requestCookie }: EditorProps) {
78+
export default function StoryEditor({
79+
editable,
80+
body,
81+
requestCookie,
82+
}: EditorProps) {
7983
const environment = getCurrentEnvironment(requestCookie ?? '')
84+
return (
85+
<RelayEnvironmentProvider environment={environment as Environment}>
86+
<Editor editable={editable} body={body} />
87+
</RelayEnvironmentProvider>
88+
)
89+
}
90+
91+
function Editor({ editable, body }: EditorProps) {
8092
const ejInstance = useRef<EditorJS | null>()
8193

8294
const [editorData, setEditorData] = React.useState(
@@ -136,46 +148,42 @@ export default function Editor({ editable, body, requestCookie }: EditorProps) {
136148
})
137149
}
138150
return (
139-
<RelayEnvironmentProvider environment={environment as Environment}>
140-
<Card classes="prose max-w-none dark:prose-invert">
141-
<div className="prose-code">
142-
<div id={EDITTOR_HOLDER_ID}> </div>
143-
</div>
144-
<style jsx>
145-
{`
146-
.prose-code {
147-
--tw-prose-code: none;
148-
--tw-prose-pre-code: none;
149-
--tw-prose-pre-bg: none;
150-
}
151+
<Card classes="prose max-w-none dark:prose-invert">
152+
<div className="prose-code">
153+
<div id={EDITTOR_HOLDER_ID}> </div>
154+
</div>
155+
<style jsx>
156+
{`
157+
.prose-code {
158+
--tw-prose-code: none;
159+
--tw-prose-pre-code: none;
160+
--tw-prose-pre-bg: none;
161+
}
151162
152-
.dark .ce-inline-tool,
153-
.dark .ce-toolbar__plus,
154-
.dark .ce-toolbar__settings-btn {
155-
@apply text-gray-400;
156-
}
163+
.dark .ce-inline-tool,
164+
.dark .ce-toolbar__plus,
165+
.dark .ce-toolbar__settings-btn {
166+
@apply text-gray-400;
167+
}
157168
158-
.dark .ce-inline-toolbar,
159-
.dark .ce-conversion-toolbar,
160-
.dark .ce-toolbox,
161-
.dark .ce-popover,
162-
.dark .ce-settings {
163-
@apply bg-dark-600 border-dark-500;
164-
}
169+
.dark .ce-inline-toolbar,
170+
.dark .ce-conversion-toolbar,
171+
.dark .ce-toolbox,
172+
.dark .ce-popover,
173+
.dark .ce-settings {
174+
@apply bg-dark-600 border-dark-500;
175+
}
165176
166-
.dark .ce-popover__item-icon {
167-
@apply bg-dark-500;
168-
}
177+
.dark .ce-popover__item-icon {
178+
@apply bg-dark-500;
179+
}
169180
170-
.dark .ce-block--selected {
171-
@apply bg-dark-500 text-gray-800;
172-
}
173-
`}
174-
</style>
175-
{editable && (
176-
<Button onClick={() => handleStorySubmit()}>Submit </Button>
177-
)}
178-
</Card>
179-
</RelayEnvironmentProvider>
181+
.dark .ce-block--selected {
182+
@apply bg-dark-500 text-gray-800;
183+
}
184+
`}
185+
</style>
186+
{editable && <Button onClick={() => handleStorySubmit()}>Submit </Button>}
187+
</Card>
180188
)
181189
}

0 commit comments

Comments
 (0)