Skip to content

Commit fe2da1c

Browse files
RoshanjosseyRoshanjossey
committed
move story editor to app directory
1 parent c858b2b commit fe2da1c

File tree

6 files changed

+89
-87
lines changed

6 files changed

+89
-87
lines changed

‎app/Home.tsx

Lines changed: 16 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,37 +1,31 @@
11
'use client'
22

33
import { Suspense } from 'react'
4-
import { SerializablePreloadedQuery } from '../src/relay/loadSerializableQuery'
5-
import MainViewQueryNode, {
6-
HomeQuery,
7-
} from '../__generated__/HomeQuery.graphql'
8-
import { getCurrentEnvironment } from '../src/relay/environment'
94
import {
105
RelayEnvironmentProvider,
116
graphql,
127
PreloadedQuery,
138
usePreloadedQuery,
149
Environment,
1510
} from 'react-relay'
16-
import useSerializablePreloadedQuery from '../src/relay/useSerializablePreloadedQuery'
17-
import Card from '../src/components/Card'
18-
import Layout from '../src/components/Layout'
19-
import Login from '../src/components/Login'
20-
import Feed from '../src/components/feed/Feed'
21-
import UserDetails from '../src/components/UserDetails/UserDetails'
11+
import HomeQueryNode, { HomeQuery } from '__generated__/HomeQuery.graphql'
12+
import { getCurrentEnvironment } from 'src/relay/environment'
13+
import { SerializablePreloadedQuery } from 'src/relay/loadSerializableQuery'
14+
import useSerializablePreloadedQuery from 'src/relay/useSerializablePreloadedQuery'
15+
import Card from 'src/components/Card'
16+
import Layout from 'src/components/Layout'
17+
import Login from 'src/components/Login'
18+
import Feed from 'src/components/feed/Feed'
19+
import UserDetails from 'src/components/UserDetails/UserDetails'
2220

23-
const HomePage = (props: {
24-
preloadedQuery: SerializablePreloadedQuery<
25-
typeof MainViewQueryNode,
26-
HomeQuery
27-
>
21+
type HomePageProps = {
22+
preloadedQuery: SerializablePreloadedQuery<typeof HomeQueryNode, HomeQuery>
2823
cookies: string
29-
}) => {
30-
const environment = getCurrentEnvironment(props.cookies)
31-
const queryRef = useSerializablePreloadedQuery(
32-
environment,
33-
props.preloadedQuery
34-
)
24+
}
25+
26+
const HomePage = ({ preloadedQuery, cookies }: HomePageProps) => {
27+
const environment = getCurrentEnvironment(cookies)
28+
const queryRef = useSerializablePreloadedQuery(environment, preloadedQuery)
3529

3630
return (
3731
<RelayEnvironmentProvider environment={environment as Environment}>

‎app/page.tsx

Lines changed: 1 addition & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,10 @@
11
import { headers } from 'next/headers'
22
import loadSerializableQuery from 'src/relay/loadSerializableQuery'
3-
import MainViewQueryNode, {
4-
HomeQuery,
5-
} from '../__generated__/HomeQuery.graphql'
3+
import MainViewQueryNode, { HomeQuery } from '__generated__/HomeQuery.graphql'
64
import HomePage from './Home'
75

86
const Page = async () => {
9-
// console.log('cookies', cookies())
10-
// const requestCookie = cookies().getAll()
117
const requestCookie = headers().get('cookie')
12-
console.log('request cookie', headers().get('cookie'))
138
const preloadedQuery = await loadSerializableQuery<
149
typeof MainViewQueryNode,
1510
HomeQuery

‎app/story/page.tsx

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import { headers } from 'next/headers'
2+
import dynamic from 'next/dynamic'
3+
import Layout from 'src/components/Layout'
4+
5+
const Editor = dynamic(() => import('src/components/story/StoryEditor'), {
6+
ssr: false,
7+
})
8+
9+
export default function Story() {
10+
const requestCookie = headers().get('cookie')
11+
return (
12+
<div>
13+
<Layout
14+
sidebarContentRight={<div>Promoted</div>}
15+
sidebarContentLeft={<div>Reactions</div>}
16+
>
17+
<Editor editable={true} requestCookie={requestCookie} />
18+
</Layout>
19+
</div>
20+
)
21+
}

‎src/components/Layout.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 React, { ReactNode, useState } from 'react'
24
import Navbar from './navbar/Navbar'
35

‎src/components/story/StoryEditor.tsx

Lines changed: 49 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,18 @@
1+
'use client'
2+
13
import EditorJS, { OutputData } from '@editorjs/editorjs'
24
import { stripHtml } from 'string-strip-html'
35
import React, { useEffect, useRef } from 'react'
4-
import { graphql, useMutation } from 'react-relay'
6+
import {
7+
Environment,
8+
graphql,
9+
RelayEnvironmentProvider,
10+
useMutation,
11+
} from 'react-relay'
512
import Button from '../Button'
613
import Card from '../Card'
714
import { EDITOR_JS_TOOLS } from './editorTools'
8-
import { useRouter } from 'next/router'
15+
import { getCurrentEnvironment } from 'src/relay/environment'
916

1017
const DEFAULT_INITIAL_DATA = (): OutputData => {
1118
return {
@@ -65,10 +72,11 @@ const EDITTOR_HOLDER_ID = 'editorjs'
6572
type EditorProps = {
6673
editable?: boolean
6774
body?: string
75+
requestCookie?: string | null
6876
}
6977

70-
export default function Editor({ editable, body }: EditorProps) {
71-
const router = useRouter()
78+
export default function Editor({ editable, body, requestCookie }: EditorProps) {
79+
const environment = getCurrentEnvironment(requestCookie ?? '')
7280
const ejInstance = useRef<EditorJS | null>()
7381

7482
const [editorData, setEditorData] = React.useState(
@@ -113,9 +121,6 @@ export default function Editor({ editable, body }: EditorProps) {
113121
const handleStorySubmit = () => {
114122
const postTitle = getTitle(editorData)
115123
commitMutation({
116-
onCompleted: () => {
117-
router.push('/')
118-
},
119124
variables: {
120125
input: {
121126
title: postTitle,
@@ -131,42 +136,46 @@ export default function Editor({ editable, body }: EditorProps) {
131136
})
132137
}
133138
return (
134-
<Card classes="prose max-w-none dark:prose-invert">
135-
<div className="prose-code">
136-
<div id={EDITTOR_HOLDER_ID}> </div>
137-
</div>
138-
<style jsx>
139-
{`
140-
.prose-code {
141-
--tw-prose-code: none;
142-
--tw-prose-pre-code: none;
143-
--tw-prose-pre-bg: none;
144-
}
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+
}
145151
146-
.dark .ce-inline-tool,
147-
.dark .ce-toolbar__plus,
148-
.dark .ce-toolbar__settings-btn {
149-
@apply text-gray-400;
150-
}
152+
.dark .ce-inline-tool,
153+
.dark .ce-toolbar__plus,
154+
.dark .ce-toolbar__settings-btn {
155+
@apply text-gray-400;
156+
}
151157
152-
.dark .ce-inline-toolbar,
153-
.dark .ce-conversion-toolbar,
154-
.dark .ce-toolbox,
155-
.dark .ce-popover,
156-
.dark .ce-settings {
157-
@apply bg-dark-600 border-dark-500;
158-
}
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+
}
159165
160-
.dark .ce-popover__item-icon {
161-
@apply bg-dark-500;
162-
}
166+
.dark .ce-popover__item-icon {
167+
@apply bg-dark-500;
168+
}
163169
164-
.dark .ce-block--selected {
165-
@apply bg-dark-500 text-gray-800;
166-
}
167-
`}
168-
</style>
169-
{editable && <Button onClick={() => handleStorySubmit()}>Submit </Button>}
170-
</Card>
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>
171180
)
172181
}

‎src/pages/story/index.tsx

Lines changed: 0 additions & 19 deletions
This file was deleted.

0 commit comments

Comments
 (0)