Merge pull request #41 from firstcontributions/upgrade-next-to-13

Author: Roshanjossey

.babelrc

@@ -37,4 +37,7 @@ yarn-error.log*
 *.tsbuildinfo
 
 #vscode
-.vscode
+.vscode
+
+# relay
+__generated__

.gitignore

@@ -1,10 +1,7 @@
 import { ReactNode, useEffect, useState } from 'react'
+import { RelayEnvironmentProvider } from 'react-relay'
 import { createMockEnvironment, MockPayloadGenerator } from 'relay-test-utils'
 
-import { IEnvironment } from 'relay-runtime'
-import RelayEnvironmentProvider from '../src/lib/RelayEnvironmentProvider'
-import RelayModernEnvironment from 'relay-runtime/lib/store/RelayModernEnvironment'
-
 type RelayStorybookProps = {
   children: ReactNode
   mockResolvers?: Record<string, unknown>

.storybook/RelayStorybook.tsx

@@ -0,0 +1,71 @@
+'use client'
+
+import { Suspense } from 'react'
+import {
+  RelayEnvironmentProvider,
+  graphql,
+  PreloadedQuery,
+  usePreloadedQuery,
+  Environment,
+} from 'react-relay'
+import HomeQueryNode, { HomeQuery } from '__generated__/HomeQuery.graphql'
+import { getCurrentEnvironment } from 'src/relay/environment'
+import { SerializablePreloadedQuery } from 'src/relay/loadSerializableQuery'
+import useSerializablePreloadedQuery from 'src/relay/useSerializablePreloadedQuery'
+import Card from 'src/components/Card'
+import Layout from 'src/components/Layout'
+import Login from 'src/components/Login'
+import Feed from 'src/components/feed/Feed'
+import UserDetails from 'src/components/UserDetails/UserDetails'
+
+type HomePageProps = {
+  preloadedQuery: SerializablePreloadedQuery<typeof HomeQueryNode, HomeQuery>
+  cookies: string
+}
+
+const HomePage = ({ preloadedQuery, cookies }: HomePageProps) => {
+  const environment = getCurrentEnvironment(cookies)
+  const queryRef = useSerializablePreloadedQuery(environment, preloadedQuery)
+
+  return (
+    <RelayEnvironmentProvider environment={environment as Environment}>
+      <Suspense fallback="Loading...">
+        <MainView queryRef={queryRef} />
+      </Suspense>
+    </RelayEnvironmentProvider>
+  )
+}
+
+const RootQuery = graphql`
+  query HomeQuery {
+    viewer {
+      handle
+      ...UserDetails_user
+      ...RelevantIssues
+      ...IssuesFromLastRepo
+      ...IssuesFromRecentRepos
+    }
+    ...FeedsQuery
+  }
+`
+
+function MainView(props: { queryRef: PreloadedQuery<HomeQuery> }) {
+  const data = usePreloadedQuery(RootQuery, props.queryRef)
+
+  let leftSidebar = <Login />
+  if (data.viewer) {
+    leftSidebar = (
+      <Card>
+        <UserDetails user={data.viewer} />
+      </Card>
+    )
+  }
+
+  return (
+    <Layout sidebarContentLeft={leftSidebar}>
+      <Feed root={data} />
+    </Layout>
+  )
+}
+
+export default HomePage

app/Home.tsx

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

app/globals.css

@@ -0,0 +1,9 @@
+export default function Head() {
+  return (
+    <>
+      <title>OpenSourcer</title>
+      <meta content="width=device-width, initial-scale=1" name="viewport" />
+      <link rel="icon" href="/favicon.ico" />
+    </>
+  )
+}

app/head.tsx

@@ -0,0 +1,77 @@
+'use client'
+
+import {
+  Environment,
+  graphql,
+  PreloadedQuery,
+  RelayEnvironmentProvider,
+  usePreloadedQuery,
+} from 'react-relay'
+import { getCurrentEnvironment } from 'src/relay/environment'
+import { SerializablePreloadedQuery } from 'src/relay/loadSerializableQuery'
+import useSerializablePreloadedQuery from 'src/relay/useSerializablePreloadedQuery'
+import Layout from 'src/components/Layout'
+import UserDetails from 'src/components/UserDetails/UserDetails'
+import IssuesQueryNode, { IssuesQuery } from '__generated__/IssuesQuery.graphql'
+import Card from 'src/components/Card'
+import IssuesFromLastRepo from 'src/components/issue/IssuesFromLastRepo'
+import IssuesFromRecentRepos from 'src/components/issue/IssuesFromRecentRepo'
+import RelevantIssues from 'src/components/issue/RelevantIssues'
+import { Suspense } from 'react'
+
+const IssuesQuery = graphql`
+  query IssuesQuery {
+    viewer {
+      handle
+      ...UserDetails_user
+      ...RelevantIssues
+      ...IssuesFromLastRepo
+      ...IssuesFromRecentRepos
+    }
+  }
+`
+type IssuesProps = {
+  preloadedQuery: SerializablePreloadedQuery<
+    typeof IssuesQueryNode,
+    IssuesQuery
+  >
+  cookies: string
+}
+
+export default function IssuesContainer({
+  preloadedQuery,
+  cookies,
+}: IssuesProps) {
+  const environment = getCurrentEnvironment(cookies)
+  const queryRef = useSerializablePreloadedQuery(environment, preloadedQuery)
+  return (
+    <RelayEnvironmentProvider environment={environment as Environment}>
+      <Suspense fallback="Loading...">
+        <Issues queryRef={queryRef} />
+      </Suspense>
+    </RelayEnvironmentProvider>
+  )
+}
+
+export function Issues(props: { queryRef: PreloadedQuery<IssuesQuery> }) {
+  const data = usePreloadedQuery(IssuesQuery, props.queryRef)
+  if (!data.viewer) {
+    return <>User Not Found</>
+  }
+  return (
+    <div>
+      <Layout
+        sidebarContentRight={<>UserPage right sidebar</>}
+        sidebarContentLeft={
+          <Card>
+            <UserDetails user={data.viewer} />
+          </Card>
+        }
+      >
+        <IssuesFromLastRepo user={data.viewer} />
+        <IssuesFromRecentRepos user={data.viewer} />
+        <RelevantIssues user={data.viewer} />
+      </Layout>
+    </div>
+  )
+}

app/issues/Issues.tsx

@@ -0,0 +1,25 @@
+import { headers } from 'next/headers'
+import loadSerializableQuery from 'src/relay/loadSerializableQuery'
+import IssuesQueryNode, { IssuesQuery } from '__generated__/IssuesQuery.graphql'
+import Issues from './Issues'
+
+export default async function IssuesPage({
+  params,
+}: {
+  params: { id: string }
+}) {
+  const requestCookie = headers().get('cookie')
+  const preloadedQuery = await loadSerializableQuery<
+    typeof IssuesQueryNode,
+    IssuesQuery
+  >(
+    IssuesQueryNode.params,
+    { id: (decodeURIComponent(params.id) as string) ?? '' },
+    requestCookie ?? ''
+  )
+  return (
+    <div>
+      <Issues preloadedQuery={preloadedQuery} cookies={requestCookie ?? ''} />
+    </div>
+  )
+}

app/issues/page.tsx

@@ -0,0 +1,14 @@
+import './globals.css'
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return (
+    <html lang="en">
+      <head />
+      <body>{children}</body>
+    </html>
+  )
+}

app/layout.tsx

@@ -0,0 +1,22 @@
+import { headers } from 'next/headers'
+import loadSerializableQuery from 'src/relay/loadSerializableQuery'
+import MainViewQueryNode, { HomeQuery } from '__generated__/HomeQuery.graphql'
+import HomePage from './Home'
+
+const Page = async () => {
+  const requestCookie = headers().get('cookie')
+  const preloadedQuery = await loadSerializableQuery<
+    typeof MainViewQueryNode,
+    HomeQuery
+  >(MainViewQueryNode.params, {}, requestCookie ?? '')
+
+  return (
+    <div>
+      <HomePage preloadedQuery={preloadedQuery} cookies={requestCookie ?? ''} />
+    </div>
+  )
+}
+
+export default Page
+
+export const revalidate = 0