armujahid#42 - Migrate to next

RenatoSiqueira · Oct 4, 2020 · 2bec44e · 2bec44e
1 parent c76d93b
commit 2bec44e
Show file tree

Hide file tree

Showing 14 changed files with 2,034 additions and 93 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1,5 +1,7 @@
 # See https://help.github.com/ignore-files/ for more about ignoring files.
 
+.next
+
 # dependencies
 /node_modules
 

diff --git a/package.json b/package.json
@@ -5,6 +5,7 @@
   "dependencies": {
     "axios": "^0.19.0",
     "bootstrap": "^4.3.1",
+    "next": "^9.5.3",
     "paginate-array": "^2.1.0",
     "react": "^16.10.2",
     "react-content-loader": "^5.0.0",
@@ -15,8 +16,9 @@
     "reactstrap": "^8.1.1"
   },
   "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
+    "dev": "next dev",
+    "start": "next start",
+    "build": "next build",
     "test": "react-scripts test --env=jsdom",
     "eject": "react-scripts eject"
   },

diff --git a/src/components/404Page.js b/src/components/404Page.js
diff --git a/src/components/NavBar.js b/src/components/NavBar.js
@@ -5,43 +5,48 @@ import {
   NavbarToggler,
   NavbarBrand,
   Nav,
-  NavItem,
-  NavLink } from 'reactstrap';
-import { Link } from 'react-router-dom'
+} from 'reactstrap';
+import { useRouter } from 'next/router'
+
+const Links = [
+  { name: 'Top', linkTo: '/' },
+  { name: 'New', linkTo: '/new' },
+  { name: 'Best', linkTo: '/best' },
+  { name: 'Ask', linkTo: '/ask' },
+  { name: 'Show', linkTo: '/show' },
+  { name: 'Jobs', linkTo: '/jobs' },
+]
+
+const GenLink = ({ name, linkTo }) => {
+  const router = useRouter()
+  return (
+    <li className="nav-item">
+      <a
+        className="nav-link"
+        onClick={() => router.push(linkTo)}
+        style={{ cursor: 'pointer' }}>{name}</a>
+    </li>
+  )
+}
 
 const NavBar = () => {
   const [isOpen, setIsOpen] = useState(false)
 
-  const toggle = () =>  {
+  const toggle = () => {
     setIsOpen(!isOpen)
   }
 
   return (
     <div>
       <Navbar color="light" light expand="md">
-        <NavbarBrand tag={Link} to="/">HN React</NavbarBrand>
+        <NavbarBrand href='/'>HN React</NavbarBrand>
         <Fragment>
           <NavbarToggler onClick={toggle} />
           <Collapse isOpen={isOpen} navbar>
             <Nav className="ml-auto" navbar>
-              <NavItem>
-                <NavLink tag={Link} to="/">Top</NavLink>
-              </NavItem>
-              <NavItem>
-                <NavLink tag={Link} to="/new">New</NavLink>
-              </NavItem>
-              <NavItem>
-                <NavLink tag={Link} to="/best">Best</NavLink>
-              </NavItem>
-              <NavItem>
-                <NavLink tag={Link} to="/ask">Ask</NavLink>
-              </NavItem>
-              <NavItem>
-                <NavLink tag={Link} to="/show">Show</NavLink>
-              </NavItem>
-              <NavItem>
-                <NavLink tag={Link} to="/jobs">Jobs</NavLink>
-              </NavItem>
+              {
+                Links.map((each, index) => <GenLink key={index} {...each} />)
+              }
             </Nav>
           </Collapse>
         </Fragment>

diff --git a/src/pages/404.js b/src/pages/404.js
@@ -0,0 +1,16 @@
+import React from 'react';
+import Link from 'next/link'
+
+const NotFound = () => {
+  return (
+    <>
+      <div>404 Not Found</div>
+      <Link href="/">
+        <a>Click here</a>
+      </Link>{' '}
+      to go back to home page
+    </>
+  );
+}
+
+export default NotFound
diff --git a/src/pages/_app.js b/src/pages/_app.js
@@ -0,0 +1,21 @@
+import '../styles/index.css'
+import 'bootstrap/dist/css/bootstrap.min.css';
+import Head from 'next/head'
+import NavBar from '../components/NavBar'
+
+function MyApp({ Component, pageProps }) {
+    return (
+        <div className="main-container">
+            <Head>
+                <title>HN React</title>
+                <meta name="viewport" content="initial-scale=1.0, width=device-width" />
+            </Head>
+            <NavBar />
+            <div className="container">
+                <Component {...pageProps} />
+            </div>
+        </div>
+    )
+}
+
+export default MyApp
diff --git a/src/pages/ask.js b/src/pages/ask.js
@@ -0,0 +1,8 @@
+import React from 'react'
+import Stories from '../components/Stories'
+
+
+const Index = () => <Stories storytype="askstories" key="4" />
+
+
+export default Index
diff --git a/src/pages/best.js b/src/pages/best.js
@@ -0,0 +1,8 @@
+import React from 'react'
+import Stories from '../components/Stories'
+
+
+const Index = () => <Stories storytype="beststories" key="3" />
+
+
+export default Index
diff --git a/src/pages/index.js b/src/pages/index.js
@@ -0,0 +1,8 @@
+import React from 'react'
+import Stories from '../components/Stories'
+
+
+const Index = () => <Stories storytype="topstories" key="1" />
+
+
+export default Index
diff --git a/src/pages/jobs.js b/src/pages/jobs.js
@@ -0,0 +1,8 @@
+import React from 'react'
+import Stories from '../components/Stories'
+
+
+const Index = () => <Stories storytype="jobstories" key="6" />
+
+
+export default Index
diff --git a/src/pages/new.js b/src/pages/new.js
@@ -0,0 +1,8 @@
+import React from 'react'
+import Stories from '../components/Stories'
+
+
+const Index = () => <Stories storytype="newstories" key="2" />
+
+
+export default Index
diff --git a/src/pages/show.js b/src/pages/show.js
@@ -0,0 +1,8 @@
+import React from 'react'
+import Stories from '../components/Stories'
+
+
+const Index = () => <Stories storytype="showstories" key="5" />
+
+
+export default Index
diff --git a/src/index.css → src/styles/index.css b/src/index.css → src/styles/index.css