From 85598d2db2be166dda2d6ff911b1e53d0294a48e Mon Sep 17 00:00:00 2001
From: Tyler McGinnis <tylermcginnis33@gmail.com>
Date: Sun, 21 Jul 2019 21:00:26 -0600
Subject: [PATCH 1/6] Code for 2-index

---
 app/components/Battle.js |  6 ++---
 app/components/Card.js   |  2 +-
 app/components/Nav.js    |  4 ++--
 app/index.js             | 51 +++++++++++++++++-----------------------
 4 files changed, 28 insertions(+), 35 deletions(-)

diff --git a/app/components/Battle.js b/app/components/Battle.js
index 4458e7e..5feee36 100644
--- a/app/components/Battle.js
+++ b/app/components/Battle.js
@@ -8,7 +8,7 @@ import { Link } from 'react-router-dom'
 function Instructions () {
   return (
     <ThemeConsumer>
-      {({ theme }) => (
+      {(theme) => (
         <div className='instructions-container'>
           <h1 className='center-text header-lg'>
             Instructions
@@ -50,7 +50,7 @@ class PlayerInput extends React.Component {
   render() {
     return (
       <ThemeConsumer>
-        {({ theme }) => (
+        {(theme) => (
           <form className='column player' onSubmit={this.handleSubmit}>
             <label htmlFor='username' className='player-label'>
               {this.props.label}
@@ -88,7 +88,7 @@ PlayerInput.propTypes = {
 function PlayerPreview ({ username, onReset, label }) {
   return (
     <ThemeConsumer>
-      {({ theme }) => (
+      {(theme) => (
         <div className='column player'>
           <h3 className='player-label'>{label}</h3>
           <div className={`row bg-${theme}`}>
diff --git a/app/components/Card.js b/app/components/Card.js
index 05dcbc5..237a35d 100644
--- a/app/components/Card.js
+++ b/app/components/Card.js
@@ -5,7 +5,7 @@ import { ThemeConsumer } from '../contexts/theme'
 export default function Card ({ header, subheader, avatar, href, name, children }) {
   return (
     <ThemeConsumer>
-      {({ theme }) => (
+      {(theme) => (
         <div className={`card bg-${theme}`}>
           <h4 className='header-lg center-text'>
             {header}
diff --git a/app/components/Nav.js b/app/components/Nav.js
index 26a514a..83d418c 100644
--- a/app/components/Nav.js
+++ b/app/components/Nav.js
@@ -6,10 +6,10 @@ const activeStyle = {
   color: 'rgb(187, 46, 31)'
 }
 
-export default function Nav () {
+export default function Nav ({ toggleTheme }) {
   return (
     <ThemeConsumer>
-      {({ theme, toggleTheme }) => (
+      {(theme) => (
         <nav className='row space-between'>
           <ul className='row nav'>
             <li>
diff --git a/app/index.js b/app/index.js
index 33a7308..09766cd 100644
--- a/app/index.js
+++ b/app/index.js
@@ -10,37 +10,30 @@ const Popular = React.lazy(() => import('./components/Popular'))
 const Battle = React.lazy(() => import('./components/Battle'))
 const Results = React.lazy(() => import('./components/Results'))
 
-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 />
+function App () {
+  const [theme, setTheme] = React.useState('light')
+  const toggleTheme = () => setTheme((theme) => theme === 'light' ? 'dark' : 'light')
 
-              <React.Suspense fallback={<Loading />} >
-                <Switch>
-                  <Route exact path='/' component={Popular} />
-                  <Route exact path='/battle' component={Battle} />
-                  <Route path='/battle/results' component={Results} />
-                  <Route render={() => <h1>404</h1>} />
-                </Switch>
-              </React.Suspense>
-            </div>
+  return (
+    <Router>
+      <ThemeProvider value={theme}>
+        <div className={theme}>
+          <div className='container'>
+            <Nav toggleTheme={toggleTheme} />
+
+            <React.Suspense fallback={<Loading />} >
+              <Switch>
+                <Route exact path='/' component={Popular} />
+                <Route exact path='/battle' component={Battle} />
+                <Route path='/battle/results' component={Results} />
+                <Route render={() => <h1>404</h1>} />
+              </Switch>
+            </React.Suspense>
           </div>
-        </ThemeProvider>
-      </Router>
-    )
-  }
+        </div>
+      </ThemeProvider>
+    </Router>
+  )
 }
 
 ReactDOM.render(

From d59f0b3a53c17fd2485ecc7a85d0aab536236c16 Mon Sep 17 00:00:00 2001
From: Tyler McGinnis <tylermcginnis33@gmail.com>
Date: Sun, 21 Jul 2019 21:15:11 -0600
Subject: [PATCH 2/6] Code for 3-battle

---
 app/components/Battle.js | 291 ++++++++++++++++++---------------------
 app/contexts/theme.js    |   7 +-
 2 files changed, 140 insertions(+), 158 deletions(-)

diff --git a/app/components/Battle.js b/app/components/Battle.js
index 5feee36..6576e8f 100644
--- a/app/components/Battle.js
+++ b/app/components/Battle.js
@@ -2,82 +2,72 @@ import React from 'react'
 import { FaUserFriends, FaFighterJet, FaTrophy, FaTimesCircle } from 'react-icons/fa'
 import PropTypes from 'prop-types'
 import Results from './Results'
-import { ThemeConsumer } from '../contexts/theme'
+import ThemeContext from '../contexts/theme'
 import { Link } from 'react-router-dom'
 
 function Instructions () {
+  const theme = React.useContext(ThemeContext)
+
   return (
-    <ThemeConsumer>
-      {(theme) => (
-        <div className='instructions-container'>
-          <h1 className='center-text header-lg'>
-            Instructions
-          </h1>
-          <ol className='container-sm grid center-text battle-instructions'>
-            <li>
-              <h3 className='header-sm'>Enter two Github users</h3>
-              <FaUserFriends className={`bg-${theme}`} color='rgb(255, 191, 116)' size={140} />
-            </li>
-            <li>
-              <h3 className='header-sm'>Battle</h3>
-              <FaFighterJet className={`bg-${theme}`} color='#727272' size={140} />
-            </li>
-            <li>
-              <h3 className='header-sm'>See the winners</h3>
-              <FaTrophy className={`bg-${theme}`} color='rgb(255, 215, 0)' size={140} />
-            </li>
-          </ol>
-        </div>
-      )}
-    </ThemeConsumer>
+    <div className='instructions-container'>
+      <h1 className='center-text header-lg'>
+        Instructions
+      </h1>
+      <ol className='container-sm grid center-text battle-instructions'>
+        <li>
+          <h3 className='header-sm'>Enter two Github users</h3>
+          <FaUserFriends className={`bg-${theme}`} color='rgb(255, 191, 116)' size={140} />
+        </li>
+        <li>
+          <h3 className='header-sm'>Battle</h3>
+          <FaFighterJet className={`bg-${theme}`} color='#727272' size={140} />
+        </li>
+        <li>
+          <h3 className='header-sm'>See the winners</h3>
+          <FaTrophy className={`bg-${theme}`} color='rgb(255, 215, 0)' size={140} />
+        </li>
+      </ol>
+    </div>
   )
 }
 
-class PlayerInput extends React.Component {
-  state = {
-    username: ''
-  }
-  handleSubmit = (event) => {
-    event.preventDefault()
+function PlayerInput ({ onSubmit, label }) {
+  const [username, setUsername] = React.useState('')
 
-    this.props.onSubmit(this.state.username)
-  }
-  handleChange = (event) => {
-    this.setState({
-      username: event.target.value
-    })
-  }
-  render() {
-    return (
-      <ThemeConsumer>
-        {(theme) => (
-          <form className='column player' onSubmit={this.handleSubmit}>
-            <label htmlFor='username' className='player-label'>
-              {this.props.label}
-            </label>
-            <div className='row player-inputs'>
-              <input
-                type='text'
-                id='username'
-                className={`input-${theme}`}
-                placeholder='github username'
-                autoComplete='off'
-                value={this.state.username}
-                onChange={this.handleChange}
-              />
-              <button
-                className={`btn ${theme === 'dark' ? 'light-btn' : 'dark-btn'}`}
-                type='submit'
-                disabled={!this.state.username}
-              >
-                Submit
-              </button>
-            </div>
-          </form>
-        )}
-      </ThemeConsumer>
-    )
+  const handleSubmit = (e) => {
+    e.preventDefault()
+
+    onSubmit(username)
   }
+
+  const handleChange = (event) => setUsername(event.target.value)
+  const theme = React.useContext(ThemeContext)
+
+  return (
+    <form className='column player' onSubmit={handleSubmit}>
+      <label htmlFor='username' className='player-label'>
+        {label}
+      </label>
+      <div className='row player-inputs'>
+        <input
+          type='text'
+          id='username'
+          className={`input-${theme}`}
+          placeholder='github username'
+          autoComplete='off'
+          value={username}
+          onChange={handleChange}
+        />
+        <button
+          className={`btn ${theme === 'dark' ? 'light-btn' : 'dark-btn'}`}
+          type='submit'
+          disabled={!username}
+        >
+          Submit
+        </button>
+      </div>
+    </form>
+  )
 }
 
 PlayerInput.propTypes = {
@@ -86,31 +76,29 @@ PlayerInput.propTypes = {
 }
 
 function PlayerPreview ({ username, onReset, label }) {
+  const theme = React.useContext(ThemeContext)
+
   return (
-    <ThemeConsumer>
-      {(theme) => (
-        <div className='column player'>
-          <h3 className='player-label'>{label}</h3>
-          <div className={`row bg-${theme}`}>
-            <div className='player-info'>
-              <img
-                className='avatar-small'
-                src={`https://github.com/${username}.png?size=200`}
-                alt={`Avatar for ${username}`}
-              />
-              <a
-                href={`https://github.com/${username}`}
-                className='link'>
-                  {username}
-              </a>
-            </div>
-            <button className='btn-clear flex-center' onClick={onReset}>
-              <FaTimesCircle color='rgb(194, 57, 42)' size={26} />
-            </button>
-          </div>
+    <div className='column player'>
+      <h3 className='player-label'>{label}</h3>
+      <div className={`row bg-${theme}`}>
+        <div className='player-info'>
+          <img
+            className='avatar-small'
+            src={`https://github.com/${username}.png?size=200`}
+            alt={`Avatar for ${username}`}
+          />
+          <a
+            href={`https://github.com/${username}`}
+            className='link'>
+              {username}
+          </a>
         </div>
-      )}
-    </ThemeConsumer>
+        <button className='btn-clear flex-center' onClick={onReset}>
+          <FaTimesCircle color='rgb(194, 57, 42)' size={26} />
+        </button>
+      </div>
+    </div>
   )
 }
 
@@ -120,70 +108,63 @@ PlayerPreview.propTypes = {
   label: PropTypes.string.isRequired
 }
 
-export default class Battle extends React.Component {
-  state = {
-    playerOne: null,
-    playerTwo: null,
-  }
-  handleSubmit = (id, player) => {
-    this.setState({
-      [id]: player
-    })
-  }
-  handleReset = (id) => {
-    this.setState({
-      [id]: null
-    })
-  }
-  render() {
-    const { playerOne, playerTwo } = this.state
-
-    return (
-      <React.Fragment>
-        <Instructions />
-
-        <div className='players-container'>
-          <h1 className='center-text header-lg'>Players</h1>
-          <div className='row space-around'>
-            {playerOne === null
-              ? <PlayerInput
-                  label='Player One'
-                  onSubmit={(player) => this.handleSubmit('playerOne', player)}
-                />
-              : <PlayerPreview
-                  username={playerOne}
-                  label='Player One'
-                  onReset={() => this.handleReset('playerOne')}
-                />
-            }
-
-            {playerTwo === null
-              ? <PlayerInput
-                  label='Player Two'
-                  onSubmit={(player) => this.handleSubmit('playerTwo', player)}
-                />
-              : <PlayerPreview
-                  username={playerTwo}
-                  label='Player Two'
-                  onReset={() => this.handleReset('playerTwo')}
-                />
-            }
-          </div>
-
-
-          {playerOne && playerTwo && (
-            <Link
-              className='btn dark-btn btn-space'
-              to={{
-                pathname: '/battle/results',
-                search: `?playerOne=${playerOne}&playerTwo=${playerTwo}`
-              }}
-            >
-              Battle
-            </Link>
-          )}
+export default function Battle () {
+  const [playerOne, setPlayerOne] = React.useState(null)
+  const [playerTwo, setPlayerTwo] = React.useState(null)
+
+  const handleSubmit = (id, player) => id === 'playerOne'
+    ? setPlayerOne(player)
+    : setPlayerTwo(player)
+
+  const handleReset = (id) => id === 'playerOne'
+    ? setPlayerOne(null)
+    : setPlayerTwo(null)
+
+  return (
+    <React.Fragment>
+      <Instructions />
+
+      <div className='players-container'>
+        <h1 className='center-text header-lg'>Players</h1>
+        <div className='row space-around'>
+          {playerOne === null
+            ? <PlayerInput
+                label='Player One'
+                onSubmit={(player) => handleSubmit('playerOne', player)}
+              />
+            : <PlayerPreview
+                username={playerOne}
+                label='Player One'
+                onReset={() => handleReset('playerOne')}
+              />
+          }
+
+          {playerTwo === null
+            ? <PlayerInput
+                label='Player Two'
+                onSubmit={(player) => handleSubmit('playerTwo', player)}
+              />
+            : <PlayerPreview
+                username={playerTwo}
+                label='Player Two'
+                onReset={() => handleReset('playerTwo')}
+              />
+          }
         </div>
-      </React.Fragment>
-    )
-  }
+
+
+        {playerOne && playerTwo && (
+          <Link
+            className='btn dark-btn btn-space'
+            to={{
+              pathname: '/battle/results',
+              search: `?playerOne=${playerOne}&playerTwo=${playerTwo}`
+            }}
+          >
+            Battle
+          </Link>
+        )}
+      </div>
+    </React.Fragment>
+  )
 }
\ No newline at end of file
diff --git a/app/contexts/theme.js b/app/contexts/theme.js
index 7e4742b..9373368 100644
--- a/app/contexts/theme.js
+++ b/app/contexts/theme.js
@@ -1,6 +1,7 @@
 import React from 'react'
 
-const { Consumer, Provider } = React.createContext()
+const ThemeContext = React.createContext()
 
-export const ThemeConsumer = Consumer
-export const ThemeProvider = Provider
\ No newline at end of file
+export default ThemeContext
+export const ThemeConsumer = ThemeContext.Consumer
+export const ThemeProvider = ThemeContext.Provider

From fcf29e3eb0410469512c76251f92e77d11b127e5 Mon Sep 17 00:00:00 2001
From: Tyler McGinnis <tylermcginnis33@gmail.com>
Date: Sun, 21 Jul 2019 21:18:18 -0600
Subject: [PATCH 3/6] Code for 4-card-nav

---
 app/components/Card.js | 48 +++++++++++++++----------------
 app/components/Nav.js  | 64 ++++++++++++++++++++----------------------
 2 files changed, 54 insertions(+), 58 deletions(-)

diff --git a/app/components/Card.js b/app/components/Card.js
index 237a35d..d719e5a 100644
--- a/app/components/Card.js
+++ b/app/components/Card.js
@@ -1,34 +1,32 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import { ThemeConsumer } from '../contexts/theme'
+import ThemeContext from '../contexts/theme'
 
 export default function Card ({ header, subheader, avatar, href, name, children }) {
+  const theme = React.useContext(ThemeContext)
+
   return (
-    <ThemeConsumer>
-      {(theme) => (
-        <div className={`card bg-${theme}`}>
-          <h4 className='header-lg center-text'>
-            {header}
-          </h4>
-          <img
-            className='avatar'
-            src={avatar}
-            alt={`Avatar for ${name}`}
-          />
-          {subheader && (
-            <h4 className='center-text'>
-              {subheader}
-            </h4>
-          )}
-          <h2 className='center-text'>
-            <a className='link' href={href}>
-              {name}
-            </a>
-          </h2>
-          {children}
-        </div>
+    <div className={`card bg-${theme}`}>
+      <h4 className='header-lg center-text'>
+        {header}
+      </h4>
+      <img
+        className='avatar'
+        src={avatar}
+        alt={`Avatar for ${name}`}
+      />
+      {subheader && (
+        <h4 className='center-text'>
+          {subheader}
+        </h4>
       )}
-    </ThemeConsumer>
+      <h2 className='center-text'>
+        <a className='link' href={href}>
+          {name}
+        </a>
+      </h2>
+      {children}
+    </div>
   )
 }
 
diff --git a/app/components/Nav.js b/app/components/Nav.js
index 83d418c..90b0cab 100644
--- a/app/components/Nav.js
+++ b/app/components/Nav.js
@@ -1,5 +1,5 @@
 import React from 'react'
-import { ThemeConsumer } from '../contexts/theme'
+import ThemeContext from '../contexts/theme'
 import { NavLink } from 'react-router-dom'
 
 const activeStyle = {
@@ -7,38 +7,36 @@ const activeStyle = {
 }
 
 export default function Nav ({ toggleTheme }) {
+  const theme = React.useContext(ThemeContext)
+
   return (
-    <ThemeConsumer>
-      {(theme) => (
-        <nav className='row space-between'>
-          <ul className='row nav'>
-            <li>
-              <NavLink
-                to='/'
-                exact
-                activeStyle={activeStyle}
-                className='nav-link'>
-                  Popular
-              </NavLink>
-            </li>
-            <li>
-              <NavLink
-                to='/battle'
-                activeStyle={activeStyle}
-                className='nav-link'>
-                  Battle
-              </NavLink>
-            </li>
-          </ul>
-          <button
-            style={{fontSize: 30}}
-            className='btn-clear'
-            onClick={toggleTheme}
-          >
-            {theme === 'light' ? '🔦' : '💡'}
-          </button>
-        </nav>
-      )}
-    </ThemeConsumer>
+    <nav className='row space-between'>
+      <ul className='row nav'>
+        <li>
+          <NavLink
+            to='/'
+            exact
+            activeStyle={activeStyle}
+            className='nav-link'>
+              Popular
+          </NavLink>
+        </li>
+        <li>
+          <NavLink
+            to='/battle'
+            activeStyle={activeStyle}
+            className='nav-link'>
+              Battle
+          </NavLink>
+        </li>
+      </ul>
+      <button
+        style={{fontSize: 30}}
+        className='btn-clear'
+        onClick={toggleTheme}
+      >
+        {theme === 'light' ? '🔦' : '💡'}
+      </button>
+    </nav>
   )
 }
\ No newline at end of file

From 38e76eefa0fc96904d0f7453ed663f507d5228e7 Mon Sep 17 00:00:00 2001
From: Tyler McGinnis <tylermcginnis33@gmail.com>
Date: Sun, 21 Jul 2019 21:35:15 -0600
Subject: [PATCH 4/6] Code for 5-useHover

---
 app/components/Hover.js   | 14 --------------
 app/components/Tooltip.js | 16 +++++++---------
 app/hooks/useHover.js     | 13 +++++++++++++
 3 files changed, 20 insertions(+), 23 deletions(-)
 delete mode 100644 app/components/Hover.js
 create mode 100644 app/hooks/useHover.js

diff --git a/app/components/Hover.js b/app/components/Hover.js
deleted file mode 100644
index de236f0..0000000
--- a/app/components/Hover.js
+++ /dev/null
@@ -1,14 +0,0 @@
-import React from 'react'
-
-export default class Hover extends React.Component {
-  state = { hovering: false }
-  mouseOver = () => this.setState({ hovering: true })
-  mouseOut = () => this.setState({ hovering: false })
-  render () {
-    return (
-      <div onMouseOver={this.mouseOver} onMouseOut={this.mouseOut}>
-        {this.props.children(this.state.hovering)}
-      </div>
-    )
-  }
-}
\ No newline at end of file
diff --git a/app/components/Tooltip.js b/app/components/Tooltip.js
index a10cd55..09fce1e 100644
--- a/app/components/Tooltip.js
+++ b/app/components/Tooltip.js
@@ -1,6 +1,6 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import Hover from './Hover'
+import useHover from '../hooks/useHover'
 
 const styles = {
   container: {
@@ -25,15 +25,13 @@ const styles = {
 }
 
 export default function Tooltip ({ text, children }) {
+  const [hovering, attrs] = useHover()
+
   return (
-    <Hover>
-      {(hovering) => (
-        <div style={styles.container}>
-          {hovering === true && <div style={styles.tooltip}>{text}</div>}
-          {children}
-        </div>
-      )}
-    </Hover>
+    <div style={styles.container} {...attrs}>
+      {hovering === true && <div style={styles.tooltip}>{text}</div>}
+      {children}
+    </div>
   )
 }
 
diff --git a/app/hooks/useHover.js b/app/hooks/useHover.js
new file mode 100644
index 0000000..9a6807f
--- /dev/null
+++ b/app/hooks/useHover.js
@@ -0,0 +1,13 @@
+import React from 'react'
+
+export default function useHover () {
+  const [hovering, setHovering] = React.useState(false)
+
+  const onMouseOver = () => setHovering(true)
+  const onMouseOut = () => setHovering(false)
+
+  return [hovering, {
+    onMouseOut,
+    onMouseOver
+  }]
+}
\ No newline at end of file

From d2a040c146117aca746f7932d40092de7e3da0de Mon Sep 17 00:00:00 2001
From: Tyler McGinnis <tylermcginnis33@gmail.com>
Date: Sun, 21 Jul 2019 21:45:08 -0600
Subject: [PATCH 5/6] Code for 6-loading

---
 app/components/Loading.js | 46 +++++++++++++++++----------------------
 1 file changed, 20 insertions(+), 26 deletions(-)

diff --git a/app/components/Loading.js b/app/components/Loading.js
index af58539..99f1aee 100644
--- a/app/components/Loading.js
+++ b/app/components/Loading.js
@@ -12,35 +12,29 @@ const styles = {
   }
 }
 
-export default class Loading extends React.Component {
-  state = { content: this.props.text }
-  componentDidMount () {
-    const { speed, text } = this.props
+export default function Loading ({ text = 'Loading', speed = 300 }) {
+  const [content, setContent] = React.useState(text)
 
-    this.interval = window.setInterval(() => {
-      this.state.content === text + '...'
-        ? this.setState({ content: text })
-        : this.setState(({ content }) => ({ content: content + '.' }))
+  React.useEffect(() => {
+    const id = window.setInterval(() => {
+      setContent((content) => {
+        return content === `${text}...`
+          ? text
+          : `${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,
+    return () => window.clearInterval(id)
+  }, [text, speed])
+
+  return (
+    <p style={styles.content}>
+      {content}
+    </p>
+  )
 }
 
-Loading.defaultProps = {
-  text: 'Loading',
-  speed: 300
+Loading.propTypes = {
+  text: PropTypes.string,
+  speed: PropTypes.number,
 }
\ No newline at end of file

From 6fe245beb674024cf60894319e3a8f810a6f55fd Mon Sep 17 00:00:00 2001
From: Tyler McGinnis <tylermcginnis33@gmail.com>
Date: Sun, 21 Jul 2019 23:08:02 -0600
Subject: [PATCH 6/6] Code for 7-popular

---
 app/components/Popular.js | 91 ++++++++++++++++++---------------------
 1 file changed, 43 insertions(+), 48 deletions(-)

diff --git a/app/components/Popular.js b/app/components/Popular.js
index 76ca21f..f8b6d05 100644
--- a/app/components/Popular.js
+++ b/app/components/Popular.js
@@ -79,61 +79,56 @@ ReposGrid.propTypes = {
   repos: PropTypes.array.isRequired
 }
 
-export default class Popular extends React.Component {
-  state = {
-    selectedLanguage: 'All',
-    repos: {},
-    error: null,
-  }
-  componentDidMount () {
-    this.updateLanguage(this.state.selectedLanguage)
-  }
-  updateLanguage = (selectedLanguage) => {
-    this.setState({
-      selectedLanguage,
+function popularReducer (state, action) {
+  if (action.type === 'success') {
+    return {
+      ...state,
+      [action.selectedLanguage]: action.repos,
       error: null,
-    })
+    }
+  } else if (action.type === 'error') {
+    return {
+      ...state,
+      error: action.error.message
+    }
+  } else {
+    throw new Error(`That action type isn't supported.`)
+  }
+}
+
+export default function Popular () {
+  const [selectedLanguage, setSelectedLanguage] = React.useState('All')
+  const [state, dispatch] = React.useReducer(
+    popularReducer,
+    { error: null }
+  )
+
+  const fetchedLanguages = React.useRef([])
+
+  React.useEffect(() => {
+    if (fetchedLanguages.current.includes(selectedLanguage) === false) {
+      fetchedLanguages.current.push(selectedLanguage)
 
-    if (!this.state.repos[selectedLanguage]) {
       fetchPopularRepos(selectedLanguage)
-        .then((data) => {
-          this.setState(({ repos }) => ({
-            repos: {
-              ...repos,
-              [selectedLanguage]: data
-            }
-          }))
-        })
-        .catch(() => {
-          console.warn('Error fetching repos: ', error)
-
-          this.setState({
-            error: `There was an error fetching the repositories.`
-          })
-        })
+        .then((repos) => dispatch({ type: 'success', selectedLanguage, repos }))
+        .catch((error) => dispatch({ type: 'error', error }))
     }
-  }
-  isLoading = () => {
-    const { selectedLanguage, repos, error } = this.state
+  }, [fetchedLanguages, selectedLanguage])
 
-    return !repos[selectedLanguage] && error === null
-  }
-  render() {
-    const { selectedLanguage, repos, error } = this.state
+  const isLoading = () => !state[selectedLanguage] && state.error === null
 
-    return (
-      <React.Fragment>
-        <LangaugesNav
-          selected={selectedLanguage}
-          onUpdateLanguage={this.updateLanguage}
-        />
+  return (
+    <React.Fragment>
+      <LangaugesNav
+        selected={selectedLanguage}
+        onUpdateLanguage={setSelectedLanguage}
+      />
 
-        {this.isLoading() && <Loading text='Fetching Repos' />}
+      {isLoading() && <Loading text='Fetching Repos' />}
 
-        {error && <p className='center-text error'>{error}</p>}
+      {state.error && <p className='center-text error'>{state.error}</p>}
 
-        {repos[selectedLanguage] && <ReposGrid repos={repos[selectedLanguage]} />}
-      </React.Fragment>
-    )
-  }
+      {state[selectedLanguage] && <ReposGrid repos={state[selectedLanguage]} />}
+    </React.Fragment>
+  )
 }
\ No newline at end of file