Starter code

Author: tylermcginnis

.gitignore

@@ -0,0 +1,3 @@
+node_modules
+.DS_Store
+dist

README.md

@@ -0,0 +1,32 @@
+<h1 align="center">
+  <a href="https://tylermcginnis.com"><img src="https://tylermcginnis.com/tylermcginnis_glasses-300.png" alt="TylerMcGinnis.com Logo" width="300"></a>
+  <br>
+</h1>
+
+<h3 align="center">React Hooks Course Curriculum - <a href="https://tm.dev/react-course-curriculum/">Hacker News Clone</a></h3>
+
+### Info
+
+This is the repository for TylerMcGinnis.com's "React Hooks" course curriculum project.
+
+For more information on the course, visit __[tm.dev/courses/react-hooks](https://tm.dev/courses/react-hooks/)__.
+
+### Assignment
+
+Clone this repo and refactor it to use React Hooks. The starter code is located on the "master" branch.
+
+### Project
+
+This is a (soft) "Hacker News" clone. You can view the final project at __[tm.dev/react-course-curriculum](https://tm.dev/react-course-curriculum/)__. 
+
+### Solution
+
+If you get stuck, you can view my solution by checking out the `solution` branch.
+
+### Project Preview
+
+Light Mode          |  Dark Mode
+:-------------------------:|:-------------------------:
+![](https://user-images.githubusercontent.com/2933430/55523754-c1775200-5647-11e9-9394-387cd49a012c.png) ![](https://user-images.githubusercontent.com/2933430/55523752-c0debb80-5647-11e9-91e0-cd2dd38b3255.png) ![](https://user-images.githubusercontent.com/2933430/55523749-c0debb80-5647-11e9-9575-80262d951938.png) |  ![](https://user-images.githubusercontent.com/2933430/55523751-c0debb80-5647-11e9-865e-fc829b2566f8.png) ![](https://user-images.githubusercontent.com/2933430/55523753-c1775200-5647-11e9-8230-db5ea02e7333.png) ![](https://user-images.githubusercontent.com/2933430/55523750-c0debb80-5647-11e9-835b-79530775d1b9.png)
+
+### [Tyler McGinnis](https://twitter.com/tylermcginnis)

_redirects

@@ -0,0 +1 @@
+/*    /index.html   200

app/components/Comment.js

@@ -0,0 +1,17 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import PostMetaInfo from './PostMetaInfo'
+
+export default function Comment ({ comment }) {
+  return (
+    <div className='comment'>
+      <PostMetaInfo
+        comment={true}
+        by={comment.by}
+        time={comment.time}
+        id={comment.id}
+      />
+      <p dangerouslySetInnerHTML={{__html: comment.text}} />
+    </div>
+  )
+}

app/components/Loading.js

@@ -0,0 +1,46 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+const styles = {
+  content: {
+    fontSize: '35px',
+    position: 'absolute',
+    left: '0',
+    right: '0',
+    marginTop: '20px',
+    textAlign: 'center',
+  }
+}
+
+export default class Loading extends React.Component {
+  state = { content: this.props.text }
+  componentDidMount () {
+    const { speed, text } = this.props
+
+    this.interval = window.setInterval(() => {
+      this.state.content === text + '...'
+        ? this.setState({ content: text })
+        : this.setState(({ content }) => ({ content: content + '.' }))
+    }, speed)
+  }
+  componentWillUnmount () {
+    window.clearInterval(this.interval)
+  }
+  render() {
+    return (
+      <p style={styles.content}>
+        {this.state.content}
+      </p>
+    )
+  }
+}
+
+Loading.propTypes = {
+  text: PropTypes.string.isRequired,
+  speed: PropTypes.number.isRequired,
+}
+
+Loading.defaultProps = {
+  text: 'Loading',
+  speed: 300
+}

app/components/Nav.js

@@ -0,0 +1,44 @@
+import React from 'react'
+import { ThemeConsumer } from '../contexts/theme'
+import { NavLink } from 'react-router-dom'
+
+const activeStyle = {
+  color: 'rgb(187, 46, 31)'
+}
+
+export default function Nav () {
+  return (
+    <ThemeConsumer>
+      {({ theme, toggleTheme }) => (
+        <nav className='row space-between'>
+          <ul className='row nav'>
+            <li>
+              <NavLink
+                to='/'
+                exact
+                activeStyle={activeStyle}
+                className='nav-link'>
+                  Top
+              </NavLink>
+            </li>
+            <li>
+              <NavLink
+                to='/new'
+                activeStyle={activeStyle}
+                className='nav-link'>
+                  New
+              </NavLink>
+            </li>
+          </ul>
+          <button
+            style={{fontSize: 30}}
+            className='btn-clear'
+            onClick={toggleTheme}
+          >
+            {theme === 'light' ? '🔦' : '💡'}
+          </button>
+        </nav>
+      )}
+    </ThemeConsumer>
+  )
+}

app/components/Post.js

@@ -0,0 +1,72 @@
+import React from 'react'
+import queryString from 'query-string'
+import { fetchItem, fetchPosts, fetchComments } from '../utils/api'
+import Loading from './Loading'
+import PostMetaInfo from './PostMetaInfo'
+import Title from './Title'
+import Comment from './Comment'
+
+export default class Post extends React.Component {
+  state = {
+    post: null,
+    loadingPost: true,
+    comments: null,
+    loadingComments: true,
+    error: null,
+  }
+  componentDidMount() {
+    const { id } = queryString.parse(this.props.location.search)
+
+    fetchItem(id)
+      .then((post) => {
+        this.setState({ post, loadingPost: false })
+
+        return fetchComments(post.kids || [])
+      })
+      .then((comments) => this.setState({
+        comments,
+        loadingComments: false
+      }))
+      .catch(({ message }) => this.setState({
+        error: message,
+        loadingPost: false,
+        loadingComments: false
+      }))
+  }
+  render() {
+    const { post, loadingPost, comments, loadingComments, error } = this.state
+
+    if (error) {
+      return <p className='center-text error'>{error}</p>
+    }
+
+    return (
+      <React.Fragment>
+        {loadingPost === true
+          ? <Loading text='Fetching post' />
+          : <React.Fragment>
+              <h1 className='header'>
+                <Title url={post.url} title={post.title} id={post.id} />
+              </h1>
+              <PostMetaInfo
+                by={post.by}
+                time={post.time}
+                id={post.id}
+                descendants={post.descendants}
+              />
+              <p dangerouslySetInnerHTML={{__html: post.text}} />
+            </React.Fragment>}
+        {loadingComments === true
+          ? loadingPost === false && <Loading text='Fetching comments' />
+          : <React.Fragment>
+              {this.state.comments.map((comment) =>
+                <Comment
+                  key={comment.id}
+                  comment={comment}
+                />
+              )}
+            </React.Fragment>}
+      </React.Fragment>
+    )
+  }
+}

app/components/PostMetaInfo.js

@@ -0,0 +1,30 @@
+import React from 'react'
+import { Link } from 'react-router-dom'
+import PropTypes from 'prop-types'
+import { formatDate } from '../utils/helpers'
+import { ThemeConsumer } from '../contexts/theme'
+
+export default function PostMetaInfo ({ by, time, id, descendants }) {
+  return (
+    <ThemeConsumer>
+      {({ theme }) => (
+        <div className={`meta-info-${theme}`}>
+          <span>by <Link to={`/user?id=${by}`}>{by}</Link></span>
+          <span>on {formatDate(time)}</span>
+          {typeof descendants === 'number' && (
+            <span>
+              with <Link to={`/post?id=${id}`}>{descendants}</Link> comments
+            </span>
+          )}
+        </div>
+      )}
+    </ThemeConsumer>
+  )
+}
+
+PostMetaInfo.propTypes = {
+  by: PropTypes.string.isRequired,
+  time: PropTypes.number.isRequired,
+  id: PropTypes.number.isRequired,
+  descendants: PropTypes.number,
+}

app/components/Posts.js

@@ -0,0 +1,56 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { fetchMainPosts } from '../utils/api'
+import Loading from './Loading'
+import PostsList from './PostsList'
+
+export default class Posts extends React.Component {
+  state = {
+    posts: null,
+    error: null,
+    loading: true,
+  }
+  componentDidMount() {
+    this.handleFetch()
+  }
+  componentDidUpdate(prevProps) {
+    if (prevProps.type !== this.props.type) {
+      this.handleFetch()
+    }
+  }
+  handleFetch () {
+    this.setState({
+      posts: null,
+      error: null,
+      loading: true
+    })
+
+    fetchMainPosts(this.props.type)
+      .then((posts) => this.setState({
+        posts,
+        loading: false,
+        error: null
+      }))
+      .catch(({ message }) => this.setState({
+        error: message,
+        loading: false
+      }))
+  }
+  render() {
+    const { posts, error, loading } = this.state
+
+    if (loading === true) {
+      return <Loading />
+    }
+
+    if (error) {
+      return <p className='center-text error'>{error}</p>
+    }
+
+    return <PostsList posts={posts} />
+  }
+}
+
+Posts.propTypes = {
+  type: PropTypes.oneOf(['top', 'new'])
+}

app/components/PostsList.js

@@ -0,0 +1,36 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import PostMetaInfo from './PostMetaInfo'
+import Title from './Title'
+
+export default function PostsList ({ posts }) {
+  if (posts.length === 0) {
+    return (
+      <p className='center-text'>
+        This user hasn't posted yet
+      </p>
+    )
+  }
+
+  return (
+    <ul>
+      {posts.map((post) => {
+        return (
+          <li key={post.id} className='post'>
+            <Title url={post.url} title={post.title} id={post.id} />
+            <PostMetaInfo
+              by={post.by}
+              time={post.time}
+              id={post.id}
+              descendants={post.descendants}
+            />
+          </li>
+        )
+      })}
+    </ul>
+  )
+}
+
+PostsList.propTypes = {
+  posts: PropTypes.array.isRequired
+}

app/components/Title.js

@@ -0,0 +1,15 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { Link } from 'react-router-dom'
+
+export default function Title ({ url, title, id }) {
+  return url
+    ? <a className='link' href={url}>{title}</a>
+    : <Link className='link' to={`/post?id=${id}`}>{title}</Link>
+}
+
+Title.propTypes = {
+  url: PropTypes.string,
+  title: PropTypes.string.isRequired,
+  id: PropTypes.number.isRequired
+}

app/components/User.js

@@ -0,0 +1,64 @@
+import React from 'react'
+import queryString from 'query-string'
+import { fetchUser, fetchPosts } from '../utils/api'
+import Loading from './Loading'
+import { formatDate } from '../utils/helpers'
+import PostsList from './PostsList'
+
+export default class Post extends React.Component {
+  state = {
+    user: null,
+    loadingUser: true,
+    posts: null,
+    loadingPosts: true,
+    error: null,
+  }
+  componentDidMount() {
+    const { id } = queryString.parse(this.props.location.search)
+
+    fetchUser(id)
+      .then((user) => {
+        this.setState({ user, loadingUser: false})
+
+        return fetchPosts(user.submitted.slice(0, 30))
+      })
+      .then((posts) => this.setState({
+        posts,
+        loadingPosts: false,
+        error: null
+      }))
+      .catch(({ message }) => this.setState({
+        error: message,
+        loadingUser: false,
+        loadingPosts: false
+      }))
+  }
+  render() {
+    const { user, posts, loadingUser, loadingPosts, error } = this.state
+
+    if (error) {
+      return <p className='center-text error'>{error}</p>
+    }
+
+    return (
+      <React.Fragment>
+        {loadingUser === true
+          ? <Loading text='Fetching User' />
+          : <React.Fragment>
+              <h1 className='header'>{user.id}</h1>
+              <div className='meta-info-light'>
+                <span>joined <b>{formatDate(user.created)}</b></span>
+                <span>has <b>{user.karma.toLocaleString()}</b> karma</span>
+              </div>
+              <p dangerouslySetInnerHTML={{__html: user.about}} />
+            </React.Fragment>}
+        {loadingPosts === true
+          ? loadingUser === false && <Loading text='Fetching posts'/>
+          : <React.Fragment>
+              <h2>Posts</h2>
+              <PostsList posts={posts} />
+            </React.Fragment>}
+      </React.Fragment>
+    )
+  }
+}

app/contexts/theme.js

@@ -0,0 +1,6 @@
+import React from 'react'
+
+const { Consumer, Provider } = React.createContext()
+
+export const ThemeConsumer = Consumer
+export const ThemeProvider = Provider

app/index.css

@@ -0,0 +1,111 @@
+html, body, #app {
+  margin: 0;
+  height: 100%;
+  width: 100%;
+}
+
+body {
+  font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif;
+}
+
+ul {
+  padding: 0;
+}
+
+li {
+  list-style-type: none;
+}
+
+.container {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 50px;
+}
+
+.header {
+  margin-bottom: 5px;
+}
+
+.dark {
+  color: #DADADA;
+  background: #1c2022;
+  min-height: 100%;
+}
+
+.dark a {
+  color: rgb(203, 203, 203);
+}
+
+.link {
+  color: rgb(187, 46, 31);
+  text-decoration: none;
+  font-weight: bold;
+}
+
+.row {
+  display: flex;
+  flex-direction: row;
+}
+
+.space-between {
+  justify-content: space-between;
+}
+
+.nav-link {
+  font-size: 18px;
+  font-weight: bold;
+  text-decoration: none;
+  color: inherit;
+}
+
+.nav li {
+  margin-right: 10px;
+}
+
+.btn-clear {
+  border: none;
+  background: transparent;
+}
+
+.center-text {
+  text-align: center;
+}
+
+.post {
+  margin: 20px 0;
+}
+
+.meta-info-light {
+  margin-top: 5px;
+  color: gray;
+}
+
+.meta-info-light a {
+  color: black;
+}
+
+.meta-info-light span {
+  margin: 10px 0;
+  margin-right: 6px;
+}
+
+.meta-info-dark {
+  margin-top: 5px;
+  color: gray;
+}
+
+.meta-info-dark a {
+  color: #bebebe;
+}
+
+.meta-info-dark span {
+  margin: 10px 0;
+  margin-right: 6px;
+}
+
+.comment {
+  background: rgba(128, 128, 128, 0.1411764705882353);
+  padding: 10px;
+  margin: 10px 0;
+  border-radius: 5px;
+}

app/index.html

@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Hacker News</title>
+  <link
+    rel="icon"
+    type="image/png"
+    sizes="32x32"
+    href="https://tylermcginnis.com/images/favicon/favicon-32x32.png">
+</head>
+<body>
+  <div id="app"></div>
+</body>
+</html>

app/index.js

@@ -0,0 +1,57 @@
+import React from 'react'
+import ReactDOM from 'react-dom'
+import './index.css'
+import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'
+import { ThemeProvider } from './contexts/theme'
+import Loading from './components/Loading'
+import Nav from './components/Nav'
+
+const Posts = React.lazy(() => import('./components/Posts'))
+const Post = React.lazy(() => import('./components/Post'))
+const User = React.lazy(() => import('./components/User'))
+
+class App extends React.Component {
+  state = {
+    theme: 'light',
+    toggleTheme: () => {
+      this.setState(({ theme }) => ({
+        theme: theme === 'light' ? 'dark' : 'light'
+      }))
+    }
+  }
+  render() {
+    return (
+      <Router>
+        <ThemeProvider value={this.state}>
+          <div className={this.state.theme}>
+            <div className='container'>
+              <Nav />
+
+              <React.Suspense fallback={<Loading />}>
+                <Switch>
+                  <Route
+                    exact
+                    path='/'
+                    render={() => <Posts type='top' />}
+                  />
+                  <Route
+                    path='/new'
+                    render={() => <Posts type='new' />}
+                  />
+                  <Route path='/post' component={Post} />
+                  <Route path='/user' component={User} />
+                  <Route render={() => <h1>404</h1>} />
+                </Switch>
+              </React.Suspense>
+            </div>
+          </div>
+        </ThemeProvider>
+      </Router>
+    )
+  }
+}
+
+ReactDOM.render(
+  <App />,
+  document.getElementById('app')
+)

app/utils/api.js

@@ -0,0 +1,52 @@
+const api = `https://hacker-news.firebaseio.com/v0`
+const json = '.json?print=pretty'
+
+function removeDead (posts) {
+  return posts.filter(Boolean).filter(({ dead }) => dead !== true)
+}
+
+function removeDeleted (posts) {
+  return posts.filter(({ deleted }) => deleted !== true)
+}
+
+function onlyComments (posts) {
+  return posts.filter(({ type }) => type === 'comment')
+}
+
+function onlyPosts (posts) {
+  return posts.filter(({ type }) => type === 'story')
+}
+
+export function fetchItem (id) {
+  return fetch(`${api}/item/${id}${json}`)
+    .then((res) => res.json())
+}
+
+export function fetchComments (ids) {
+  return Promise.all(ids.map(fetchItem))
+    .then((comments) => removeDeleted(onlyComments(removeDead(comments))))
+}
+
+export function fetchMainPosts (type) {
+  return fetch(`${api}/${type}stories${json}`)
+    .then((res) => res.json())
+    .then((ids) => {
+      if (!ids) {
+        throw new Error(`There was an error fetching the ${type} posts.`)
+      }
+
+      return ids.slice(0, 50)
+    })
+    .then((ids) => Promise.all(ids.map(fetchItem)))
+    .then((posts) => removeDeleted(onlyPosts(removeDead(posts))))
+}
+
+export function fetchUser (id) {
+  return fetch(`${api}/user/${id}${json}`)
+    .then((res) => res.json())
+}
+
+export function fetchPosts (ids) {
+  return Promise.all(ids.map(fetchItem))
+    .then((posts) => removeDeleted(onlyPosts(removeDead(posts))))
+}

app/utils/helpers.js

@@ -0,0 +1,7 @@
+export function formatDate (timestamp) {
+  return new Date(timestamp * 1000)
+    .toLocaleDateString("en-US", {
+      hour: 'numeric' ,
+      minute: 'numeric'
+    })
+}

package-lock.json

@@ -0,0 +1,46 @@
+{
+  "name": "react-hooks-course-curriculum",
+  "version": "1.0.0",
+  "description": "Curriculum for TylerMcGinnis.com's React Hooks course.",
+  "main": "index.js",
+  "scripts": {
+    "start": "webpack-dev-server",
+    "build": "NODE_ENV='production' webpack",
+    "build-for-windows": "SET NODE_ENV='production' && webpack"
+  },
+  "babel": {
+    "presets": [
+      "@babel/preset-env",
+      "@babel/preset-react"
+    ],
+    "plugins": [
+      "@babel/plugin-proposal-class-properties",
+      "syntax-dynamic-import"
+    ]
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "prop-types": "^15.7.2",
+    "query-string": "^6.8.1",
+    "react": "^16.8.6",
+    "react-dom": "^16.8.6",
+    "react-router-dom": "^5.0.1"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.5.5",
+    "@babel/plugin-proposal-class-properties": "^7.5.5",
+    "@babel/preset-env": "^7.5.5",
+    "@babel/preset-react": "^7.0.0",
+    "babel-loader": "^8.0.6",
+    "babel-plugin-syntax-dynamic-import": "^6.18.0",
+    "copy-webpack-plugin": "^5.0.3",
+    "css-loader": "^3.1.0",
+    "html-webpack-plugin": "^3.2.0",
+    "style-loader": "^0.23.1",
+    "webpack": "^4.36.1",
+    "webpack-cli": "^3.3.6",
+    "webpack-dev-server": "^3.7.2"
+  }
+}

package.json

@@ -0,0 +1,30 @@
+const path = require('path')
+const HtmlWebpackPlugin = require('html-webpack-plugin')
+const CopyPlugin = require('copy-webpack-plugin')
+
+module.exports = {
+  entry: './app/index.js',
+  output: {
+    path: path.resolve(__dirname, 'dist'),
+    filename: 'index_bundle.js',
+    publicPath: '/'
+  },
+  module: {
+    rules: [
+      { test: /\.(js)$/, use: 'babel-loader' },
+      { test: /\.css$/, use: [ 'style-loader', 'css-loader' ]}
+    ]
+  },
+  mode: process.env.NODE_ENV === 'production' ? 'production' : 'development',
+  plugins: [
+    new HtmlWebpackPlugin({
+      template: 'app/index.html'
+    }),
+    new CopyPlugin([
+      { from : '_redirects' }
+    ])
+  ],
+  devServer: {
+    historyApiFallback: true
+  }
+}