[Examples] Refactor with-electron-typescript (vercel#13802)

Related to [11014](vercel#11014). Removed getInitialProps in favor of getStaticProps and getServerSideProps. Refactored one of the components from class to functional. Removed redundant imports. Removed React.FC/FunctionComponent. Added two build files to gitignore. Let me know if you want something to be changed.
rokinsky · Jul 11, 2020 · 128edd0 · 128edd0
1 parent bb298cc
commit 128edd0
Show file tree

Hide file tree

Showing 8 changed files with 64 additions and 64 deletions.
diff --git a/examples/with-electron-typescript/renderer/components/Layout.tsx b/examples/with-electron-typescript/renderer/components/Layout.tsx
@@ -1,15 +1,13 @@
-import * as React from 'react'
+import React, { ReactNode } from 'react'
 import Link from 'next/link'
 import Head from 'next/head'
 
 type Props = {
+  children: ReactNode
   title?: string
 }
 
-const Layout: React.FunctionComponent<Props> = ({
-  children,
-  title = 'This is the default title',
-}) => (
+const Layout = ({ children, title = 'This is the default title' }: Props) => (
   <div>
     <Head>
       <title>{title}</title>

diff --git a/examples/with-electron-typescript/renderer/components/List.tsx b/examples/with-electron-typescript/renderer/components/List.tsx
@@ -1,12 +1,12 @@
-import * as React from 'react'
+import React from 'react'
 import ListItem from './ListItem'
 import { User } from '../interfaces'
 
 type Props = {
   items: User[]
 }
 
-const List: React.FunctionComponent<Props> = ({ items }) => (
+const List = ({ items }: Props) => (
   <ul>
     {items.map((item) => (
       <li key={item.id}>

diff --git a/examples/with-electron-typescript/renderer/components/ListDetail.tsx b/examples/with-electron-typescript/renderer/components/ListDetail.tsx
@@ -6,9 +6,7 @@ type ListDetailProps = {
   item: User
 }
 
-const ListDetail: React.FunctionComponent<ListDetailProps> = ({
-  item: user,
-}) => (
+const ListDetail = ({ item: user }: ListDetailProps) => (
   <div>
     <h1>Detail for {user.name}</h1>
     <p>ID: {user.id}</p>

diff --git a/examples/with-electron-typescript/renderer/components/ListItem.tsx b/examples/with-electron-typescript/renderer/components/ListItem.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react'
+import React from 'react'
 import Link from 'next/link'
 
 import { User } from '../interfaces'
@@ -7,7 +7,7 @@ type Props = {
   data: User
 }
 
-const ListItem: React.FunctionComponent<Props> = ({ data }) => (
+const ListItem = ({ data }: Props) => (
   <Link href={`/detail?id=${data.id}`}>
     <a>
       {data.id}: {data.name}

diff --git a/examples/with-electron-typescript/renderer/pages/about.tsx b/examples/with-electron-typescript/renderer/pages/about.tsx
@@ -1,8 +1,7 @@
-import * as React from 'react'
 import Link from 'next/link'
 import Layout from '../components/Layout'
 
-const AboutPage: React.FunctionComponent = () => (
+const AboutPage = () => (
   <Layout title="About | Next.js + TypeScript + Electron Example">
     <h1>About</h1>
     <p>This is the about page</p>

diff --git a/examples/with-electron-typescript/renderer/pages/detail.tsx b/examples/with-electron-typescript/renderer/pages/detail.tsx
@@ -1,46 +1,53 @@
-import * as React from 'react'
-import { NextPageContext } from 'next'
+// import { NextPageContext } from 'next'
 import Layout from '../components/Layout'
 import { User } from '../interfaces'
 import { findData } from '../utils/sample-api'
 import ListDetail from '../components/ListDetail'
+import { GetServerSideProps } from 'next'
 
 type Props = {
   item?: User
   errors?: string
 }
 
-class InitialPropsDetail extends React.Component<Props> {
-  static getInitialProps = async ({ query }: NextPageContext) => {
-    try {
-      const { id } = query
-      const item = await findData(Array.isArray(id) ? id[0] : id)
-      return { item }
-    } catch (err) {
-      return { errors: err.message }
-    }
+const InitialPropsDetail = ({ item, errors }: Props) => {
+  if (errors) {
+    return (
+      <Layout title={`Error | Next.js + TypeScript + Electron Example`}>
+        <p>
+          <span style={{ color: 'red' }}>Error:</span> {errors}
+        </p>
+      </Layout>
+    )
   }
 
-  render() {
-    const { item, errors } = this.props
+  return (
+    <Layout
+      title={`${item ? item.name : 'Detail'} | Next.js + TypeScript Example`}
+    >
+      {item && <ListDetail item={item} />}
+    </Layout>
+  )
+}
 
-    if (errors) {
-      return (
-        <Layout title={`Error | Next.js + TypeScript + Electron Example`}>
-          <p>
-            <span style={{ color: 'red' }}>Error:</span> {errors}
-          </p>
-        </Layout>
-      )
-    }
+export const getServerSideProps: GetServerSideProps = async (context) => {
+  const {
+    query: { id },
+  } = context
 
-    return (
-      <Layout
-        title={`${item ? item.name : 'Detail'} | Next.js + TypeScript Example`}
-      >
-        {item && <ListDetail item={item} />}
-      </Layout>
-    )
+  try {
+    const item = await findData(Array.isArray(id) ? id[0] : id)
+    return {
+      props: {
+        item,
+      },
+    }
+  } catch (err) {
+    return {
+      props: {
+        errors: err.message,
+      },
+    }
   }
 }
 

diff --git a/examples/with-electron-typescript/renderer/pages/index.tsx b/examples/with-electron-typescript/renderer/pages/index.tsx
@@ -1,9 +1,7 @@
-import * as React from 'react'
 import Link from 'next/link'
 import Layout from '../components/Layout'
-import { NextPage } from 'next'
 
-const IndexPage: NextPage = () => {
+const IndexPage = () => {
   return (
     <Layout title="Home | Next.js + TypeScript + Electron Example">
       <h1>Hello Next.js 👋</h1>

diff --git a/examples/with-electron-typescript/renderer/pages/initial-props.tsx b/examples/with-electron-typescript/renderer/pages/initial-props.tsx
@@ -1,5 +1,5 @@
-import { NextPage } from 'next'
 import Link from 'next/link'
+import { useRouter } from 'next/router'
 import Layout from '../components/Layout'
 import List from '../components/List'
 import { User } from '../interfaces'
@@ -10,26 +10,26 @@ type Props = {
   pathname: string
 }
 
-const WithInitialProps: NextPage<Props> = ({ items, pathname }) => (
-  <Layout title="List Example (as Function Component) | Next.js + TypeScript + Electron Example">
-    <h1>List Example (as Function Component)</h1>
-    <p>You are currently on: {pathname}</p>
-    <List items={items} />
-    <p>
-      <Link href="/">
-        <a>Go home</a>
-      </Link>
-    </p>
-  </Layout>
-)
+const WithInitialProps = ({ items }: Props) => {
+  const router = useRouter()
+  return (
+    <Layout title="List Example (as Function Component) | Next.js + TypeScript + Electron Example">
+      <h1>List Example (as Function Component)</h1>
+      <p>You are currently on: {router.pathname}</p>
+      <List items={items} />
+      <p>
+        <Link href="/">
+          <a>Go home</a>
+        </Link>
+      </p>
+    </Layout>
+  )
+}
 
-WithInitialProps.getInitialProps = async ({ pathname }) => {
-  // Example for including initial props in a Next.js function compnent page.
-  // Don't forget to include the respective types for any props passed into
-  // the component.
+export async function getStaticProps() {
   const items: User[] = await findAll()
 
-  return { items, pathname }
+  return { props: { items } }
 }
 
 export default WithInitialProps