Skip to content

Commit 866b47c

Browse files
RoshanjosseyRoshanjossey
committed
refactor: issues page
1 parent c8807f2 commit 866b47c

File tree

7 files changed

+98
-58
lines changed

7 files changed

+98
-58
lines changed

‎.storybook/RelayStorybook.tsx

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,7 @@
11
import { ReactNode, useEffect, useState } from 'react'
2+
import { RelayEnvironmentProvider } from 'react-relay'
23
import { createMockEnvironment, MockPayloadGenerator } from 'relay-test-utils'
34

4-
import { IEnvironment } from 'relay-runtime'
5-
import RelayEnvironmentProvider from '../src/lib/RelayEnvironmentProvider'
6-
import RelayModernEnvironment from 'relay-runtime/lib/store/RelayModernEnvironment'
7-
85
type RelayStorybookProps = {
96
children: ReactNode
107
mockResolvers?: Record<string, unknown>

‎app/issues/Issues.tsx

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
'use client'
2+
3+
import {
4+
Environment,
5+
graphql,
6+
PreloadedQuery,
7+
RelayEnvironmentProvider,
8+
usePreloadedQuery,
9+
} from 'react-relay'
10+
import { getCurrentEnvironment } from 'src/relay/environment'
11+
import { SerializablePreloadedQuery } from 'src/relay/loadSerializableQuery'
12+
import useSerializablePreloadedQuery from 'src/relay/useSerializablePreloadedQuery'
13+
import Layout from 'src/components/Layout'
14+
import UserDetails from 'src/components/UserDetails/UserDetails'
15+
import issuesQueryNode, { issuesQuery } from '__generated__/issuesQuery.graphql'
16+
import Card from 'src/components/Card'
17+
import IssuesFromLastRepo from 'src/components/issue/IssuesFromLastRepo'
18+
import IssuesFromRecentRepos from 'src/components/issue/IssuesFromRecentRepo'
19+
import RelevantIssues from 'src/components/issue/RelevantIssues'
20+
import { Suspense } from 'react'
21+
22+
const IssuesQuery = graphql`
23+
query issuesQuery {
24+
viewer {
25+
handle
26+
...UserDetails_user
27+
...RelevantIssues
28+
...IssuesFromLastRepo
29+
...IssuesFromRecentRepos
30+
}
31+
}
32+
`
33+
type IssuesProps = {
34+
preloadedQuery: SerializablePreloadedQuery<
35+
typeof issuesQueryNode,
36+
issuesQuery
37+
>
38+
cookies: string
39+
}
40+
41+
export default function IssuesContainer({
42+
preloadedQuery,
43+
cookies,
44+
}: IssuesProps) {
45+
const environment = getCurrentEnvironment(cookies)
46+
const queryRef = useSerializablePreloadedQuery(environment, preloadedQuery)
47+
return (
48+
<RelayEnvironmentProvider environment={environment as Environment}>
49+
<Suspense fallback="Loading...">
50+
<Issues queryRef={queryRef} />
51+
</Suspense>
52+
</RelayEnvironmentProvider>
53+
)
54+
}
55+
56+
export function Issues(props: { queryRef: PreloadedQuery<issuesQuery> }) {
57+
const data = usePreloadedQuery(IssuesQuery, props.queryRef)
58+
if (!data.viewer) {
59+
return <></>
60+
}
61+
return (
62+
<div>
63+
<Layout
64+
sidebarContentRight={<></>}
65+
sidebarContentLeft={
66+
<Card>
67+
<UserDetails user={data.viewer} />
68+
</Card>
69+
}
70+
>
71+
<IssuesFromLastRepo user={data.viewer} />
72+
<IssuesFromRecentRepos user={data.viewer} />
73+
<RelevantIssues user={data.viewer} />
74+
</Layout>
75+
</div>
76+
)
77+
}

‎app/issues/page.tsx

Lines changed: 14 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -1,59 +1,25 @@
1-
'use client'
2-
31
import { headers } from 'next/headers'
4-
import {
5-
Environment,
6-
graphql,
7-
RelayEnvironmentProvider,
8-
usePreloadedQuery,
9-
} from 'react-relay'
10-
import { getCurrentEnvironment } from 'src/relay/environment'
112
import loadSerializableQuery from 'src/relay/loadSerializableQuery'
12-
import useSerializablePreloadedQuery from 'src/relay/useSerializablePreloadedQuery'
13-
import Layout from 'src/components/Layout'
14-
import UserDetails from 'src/components/UserDetails/UserDetails'
153
import issuesQueryNode, { issuesQuery } from '__generated__/issuesQuery.graphql'
16-
import Card from 'src/components/Card'
17-
import IssuesFromLastRepo from 'src/components/issue/IssuesFromLastRepo'
18-
import IssuesFromRecentRepos from 'src/components/issue/IssuesFromRecentRepo'
19-
import RelevantIssues from 'src/components/issue/RelevantIssues'
4+
import Issues from './Issues'
205

21-
const IssuesQuery = graphql`
22-
query issuesQuery {
23-
viewer {
24-
handle
25-
...UserDetails_user
26-
...RelevantIssues
27-
...IssuesFromLastRepo
28-
...IssuesFromRecentRepos
29-
}
30-
}
31-
`
32-
export default async function Story() {
6+
export default async function IssuesPage({
7+
params,
8+
}: {
9+
params: { id: string }
10+
}) {
3311
const requestCookie = headers().get('cookie')
34-
const environment = getCurrentEnvironment(requestCookie ?? '')
3512
const preloadedQuery = await loadSerializableQuery<
3613
typeof issuesQueryNode,
3714
issuesQuery
38-
>(issuesQueryNode.params, {}, requestCookie ?? '')
39-
const queryRef = useSerializablePreloadedQuery(environment, preloadedQuery)
40-
const data = usePreloadedQuery(IssuesQuery, queryRef)
15+
>(
16+
issuesQueryNode.params,
17+
{ id: (decodeURIComponent(params.id) as string) ?? '' },
18+
requestCookie ?? ''
19+
)
4120
return (
42-
<RelayEnvironmentProvider environment={environment as Environment}>
43-
<div>
44-
<Layout
45-
sidebarContentRight={<></>}
46-
sidebarContentLeft={
47-
<Card>
48-
<UserDetails user={data.viewer} />
49-
</Card>
50-
}
51-
>
52-
<IssuesFromLastRepo user={data.viewer} />
53-
<IssuesFromRecentRepos user={data.viewer} />
54-
<RelevantIssues user={data.viewer} />
55-
</Layout>
56-
</div>
57-
</RelayEnvironmentProvider>
21+
<div>
22+
<Issues preloadedQuery={preloadedQuery} cookies={requestCookie ?? ''} />
23+
</div>
5824
)
5925
}

‎src/components/issue/Issue.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { graphql, useFragment } from 'react-relay'
2-
import { Issue_node$key } from '../../queries/__generated__/Issue_node.graphql'
2+
import { Issue_node$key } from '__generated__/Issue_node.graphql'
33

44
export type IssueProps = {
55
issue: Issue_node$key

‎src/components/issue/IssuesFromLastRepo.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React, { useCallback, useEffect } from 'react'
22
import { graphql, usePaginationFragment } from 'react-relay'
3-
import { IssuesFromLastRepo$key } from '../../queries/__generated__/IssuesFromLastRepo.graphql'
3+
import { IssuesFromLastRepo$key } from '__generated__/IssuesFromLastRepo.graphql'
44
import { FaChevronRight } from '@react-icons/all-files/fa/FaChevronRight'
55
import Issue from './Issue'
66

‎src/components/issue/IssuesFromRecentRepo.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React from 'react'
2-
import { useFragment, graphql, usePaginationFragment } from 'react-relay'
3-
import { IssuesFromRecentRepos$key } from '../../queries/__generated__/IssuesFromRecentRepos.graphql'
2+
import { graphql, usePaginationFragment } from 'react-relay'
3+
import { IssuesFromRecentRepos$key } from '__generated__/IssuesFromRecentRepos.graphql'
44
import Issue from './Issue'
55

66
type IssuesFromRecentReposProps = {

‎src/components/issue/RelevantIssues.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React from 'react'
2-
import { useFragment, graphql, usePaginationFragment } from 'react-relay'
3-
import { RelevantIssues$key } from '../../queries/__generated__/RelevantIssues.graphql'
2+
import { graphql, usePaginationFragment } from 'react-relay'
3+
import { RelevantIssues$key } from '__generated__/RelevantIssues.graphql'
44
import Issue from './Issue'
55

66
type RelevantIssuesProps = {

0 commit comments

Comments
 (0)