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
+}