# React Hooks

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import * as serviceWorker from './serviceWorker';

ReactDOM.render(<App />, document.getElementById('root'));

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: http://bit.ly/CRA-PWA
serviceWorker.unregister();

import React, { Component } from 'react';

class App extends Component {
  render() {
    return (
      <div>Hello world</div>
    );
  }
}

export default App;

import React from 'react';
import ReactDOM from 'react-dom';
import App from './AppClass';
import * as serviceWorker from './serviceWorker';

ReactDOM.render(<App />, document.getElementById('root'));

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: http://bit.ly/CRA-PWA
serviceWorker.unregister();

import React, {useState} from 'react';

const App = () => {
  const [count, setCount] = useState(0);
  const incrementCount = () => {
    setCount(count+1)
  }  
  return <button onClick={incrementCount}>I was clicked {count} times</button>
}

export default App;

import React from 'react';
import ReactDOM from 'react-dom';
// import App from './AppClass';
import App from './AppFunction';
import * as serviceWorker from './serviceWorker';

ReactDOM.render(<App />, document.getElementById('root'));

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: http://bit.ly/CRA-PWA
serviceWorker.unregister();

import React, { Component } from 'react';

class App extends Component {
  state = {
    count: 0
  }

  incrementCount = () => {
    this.setState(previousState => ({ count: previousState.count + 1}));
  }
  render() {
    return (
      <button onClick={() => this.incrementCount()}>I was clicked {this.state.count} times</button>
    );
  }
}

export default App;

import React, {useState} from 'react';

const App = () => {
  const [count, setCount] = useState(0);
  const incrementCount = () => {
    setCount(prevCount => prevCount + 1);
  }  
  return <button onClick={incrementCount}>I was clicked {count} times</button>
}

export default App;

import React, { Component } from 'react';

class App extends Component {
  state = {
    count: 0,
    isOn: false
  }

  incrementCount = () => {
    this.setState(previousState => ({ count: previousState.count + 1}));
  }

  toggleLight = () => {
    this.setState(previousState => ({ isOn: !previousState.isOn}));
  }

  render() {
    return (
      <>
        <h2>Counter</h2>
        <button onClick={() => this.incrementCount()}>I was clicked {this.state.count} times</button>

        <h2>Toggle Light</h2>
        <div 
          style={{
            height: '50px',
            width: '50px',
            background: this.state.isOn ? 'yellow' : 'grey'
          }}
          onClick={this.toggleLight}
          >
        </div>
      </>
    );
  }
}

export default App;

import React, {useState} from 'react';

const App = () => {
  const [count, setCount] = useState(0);
  const [isOn, setIsOn] = useState(false);

  const incrementCount = () => {
    setCount(prevCount => prevCount + 1);
  }  

  const toggleLight = () => {
    setIsOn(previousIsOn => !previousIsOn);
  }

  return (
    <>
    <h2>Counter</h2>
    <button onClick={incrementCount}>I was clicked {count} times</button>

    <h2>Toggle Light</h2>
    <div 
      style={{
        height: '50px',
        width: '50px',
        background: isOn ? 'yellow' : 'grey'
      }}
      onClick={toggleLight}
      >
    </div>
  </>    
  ) 
}

export default App;

import React, {useState} from 'react';

const App = () => {
  const [count, setCount] = useState(0);
  const [isOn, setIsOn] = useState(false);

  const incrementCount = () => {
    setCount(prevCount => prevCount + 1);
  }  

  const toggleLight = () => {
    setIsOn(previousIsOn => !previousIsOn);
  }

  return (
    <>
    <h2>Counter</h2>
    <button onClick={incrementCount}>I was clicked {count} times</button>

    <h2>Toggle Light</h2>
    <img 
      src={
        isOn 
          ? 'https://icon.now.sh/highlight/fd0'
          : 'https://icon.now.sh/highlight/aaa'
      }
      style={{
        height: '50px',
        width: '50px'
      }}
      alt="Flashlight"
      onClick={toggleLight}
      >
    </img>
  </>    
  ) 
}

export default App;

import React, {useState, useEffect} from 'react';

const App = () => {
  const [count, setCount] = useState(0);
  const [isOn, setIsOn] = useState(false);

  useEffect(() => {
    document.title = `You have click ${count} times`;
  })

  const incrementCount = () => {
    setCount(prevCount => prevCount + 1);
  }  

  const toggleLight = () => {
    setIsOn(previousIsOn => !previousIsOn);
  }

  return (
    <>
    <h2>Counter</h2>
    <button onClick={incrementCount}>I was clicked {count} times</button>

    <h2>Toggle Light</h2>
    <img 
      src={
        isOn 
          ? 'https://icon.now.sh/highlight/fd0'
          : 'https://icon.now.sh/highlight/aaa'
      }
      style={{
        height: '50px',
        width: '50px'
      }}
      alt="Flashlight"
      onClick={toggleLight}
      >
    </img>
  </>    
  ) 
}

export default App;

import React, { Component } from 'react';

class App extends Component {
  state = {
    count: 0,
    isOn: false
  }

  componentDidMount() {
    document.title = `You have been clicked ${this.state.count} times`;
  }

  componentDidUpdate() {
    document.title = `You have been clicked ${this.state.count} times`;
  }

  incrementCount = () => {
    this.setState(previousState => ({ count: previousState.count + 1}));
  }

  toggleLight = () => {
    this.setState(previousState => ({ isOn: !previousState.isOn}));
  }

  render() {
    return (
      <>
        <h2>Counter</h2>
        <button onClick={() => this.incrementCount()}>I was clicked {this.state.count} times</button>

        <h2>Toggle Light</h2>
        <div 
          style={{
            height: '50px',
            width: '50px',
            background: this.state.isOn ? 'yellow' : 'grey'
          }}
          onClick={this.toggleLight}
          >
        </div>
      </>
    );
  }
}

export default App;

import React, { Component } from 'react';

class App extends Component {
  state = {
    count: 0,
    isOn: false,
    x: null,
    y: null
  }

  componentDidMount() {
    document.title = `You have been clicked ${this.state.count} times`;
    window.addEventListener('mousemove', this.handleMouseMove);
  }

  componentDidUpdate() {
    document.title = `You have been clicked ${this.state.count} times`;
  }

  componentWillUnmount() {
    window.removeEventListener('mousemove', this.handleMouseMove);
  }

  incrementCount = () => {
    this.setState(previousState => ({ count: previousState.count + 1}));
  }

  toggleLight = () => {
    this.setState(previousState => ({ isOn: !previousState.isOn}));
  }

  handleMouseMove = event => {
    this.setState({
      x: event.pageX,
      y: event.pageY
    })
  }

  render() {
    return (
      <>
        <h2>Counter</h2>
        <button onClick={() => this.incrementCount()}>I was clicked {this.state.count} times</button>

        <h2>Toggle Light</h2>
        <div 
          style={{
            height: '50px',
            width: '50px',
            background: this.state.isOn ? 'yellow' : 'grey'
          }}
          onClick={this.toggleLight}
          >
        </div>

        <h2>Mouse Position</h2>
        <p>X position: {this.state.x}</p>
        <p>Y position: {this.state.y}</p>
      </>
    );
  }
}

export default App;

import React, {useState, useEffect} from 'react';

const App = () => {
  const [count, setCount] = useState(0);
  const [isOn, setIsOn] = useState(false);
  const [mousePosition, setMousePosition] = useState({ x: null, y: null});

  useEffect(() => {
    document.title = `You have click ${count} times`;
    window.addEventListener('mousemove', handleMouseMove);

    // Here we tell the useEffect what we want to do when the component is unmounted
    return () => {
      window.removeEventListener('mousemove', handleMouseMove);
    }
  }, []) // As we don't pass any value in the array, it is executed only once.

  const incrementCount = () => {
    setCount(prevCount => prevCount + 1);
  }  

  const toggleLight = () => {
    setIsOn(previousIsOn => !previousIsOn);
  }

  const handleMouseMove = event => {
    setMousePosition({
      x: event.pageX,
      y: event.pageY
    });
  }

  return (
    <>
    <h2>Counter</h2>
    <button onClick={incrementCount}>I was clicked {count} times</button>

    <h2>Toggle Light</h2>
    <img 
      src={
        isOn 
          ? 'https://icon.now.sh/highlight/fd0'
          : 'https://icon.now.sh/highlight/aaa'
      }
      style={{
        height: '50px',
        width: '50px'
      }}
      alt="Flashlight"
      onClick={toggleLight}
      >
    </img>

    <h2>Mouse Position</h2>
    {JSON.stringify(mousePosition, null, 2 )}
    <br />   
  </>    
  ) 
}

export default App;

import React, {useState, useEffect} from 'react';

const App = () => {
  const [count, setCount] = useState(0);
  const [isOn, setIsOn] = useState(false);
  const [mousePosition, setMousePosition] = useState({ x: null, y: null});

  useEffect(() => {
    document.title = `You have click ${count} times`;
    window.addEventListener('mousemove', handleMouseMove);

    // Here we tell the useEffect what we want to do when the component is unmounted
    return () => {
      window.removeEventListener('mousemove', handleMouseMove);
    }
  }, [count]) // Every time count changes it is executed.

  const incrementCount = () => {
    setCount(prevCount => prevCount + 1);
  }  

  const toggleLight = () => {
    setIsOn(previousIsOn => !previousIsOn);
  }

  const handleMouseMove = event => {
    setMousePosition({
      x: event.pageX,
      y: event.pageY
    });
  }

  return (
    <>
    <h2>Counter</h2>
    <button onClick={incrementCount}>I was clicked {count} times</button>

    <h2>Toggle Light</h2>
    <img 
      src={
        isOn 
          ? 'https://icon.now.sh/highlight/fd0'
          : 'https://icon.now.sh/highlight/aaa'
      }
      style={{
        height: '50px',
        width: '50px'
      }}
      alt="Flashlight"
      onClick={toggleLight}
      >
    </img>

    <h2>Mouse Position</h2>
    {JSON.stringify(mousePosition, null, 2 )}
    <br />   
  </>    
  ) 
}

export default App;

import React, {useState, useEffect} from 'react';

const App = () => {
  const [count, setCount] = useState(0);
  const [isOn, setIsOn] = useState(false);
  const [mousePosition, setMousePosition] = useState({ x: null, y: null});
  const [onlineStatus, setOnlineStatus] = useState(navigator.onLine)

  useEffect(() => {
    document.title = `You have click ${count} times`;
    window.addEventListener('mousemove', handleMouseMove);
    window.addEventListener('online', handleOnlineStatus);
    window.addEventListener('offline', handleOfflineStatus);

    // Here we tell the useEffect what we want to do when the component is unmounted
    return () => {
      window.removeEventListener('mousemove', handleMouseMove);
      window.removeEventListener('online', handleOnlineStatus);
      window.removeEventListener('offline', handleOfflineStatus);
    }
  }, [count]) // Every time count changes it is executed.

  const incrementCount = () => {
    setCount(prevCount => prevCount + 1);
  }  

  const toggleLight = () => {
    setIsOn(previousIsOn => !previousIsOn);
  }

  const handleMouseMove = event => {
    setMousePosition({
      x: event.pageX,
      y: event.pageY
    });
  }

  const handleOnlineStatus = () => {
    setOnlineStatus(true);
  }

  const handleOfflineStatus = () => {
    setOnlineStatus(false);
  }
  
  return (
    <>
    <h2>Counter</h2>
    <button onClick={incrementCount}>I was clicked {count} times</button>

    <h2>Toggle Light</h2>
    <img 
      src={
        isOn 
          ? 'https://icon.now.sh/highlight/fd0'
          : 'https://icon.now.sh/highlight/aaa'
      }
      style={{
        height: '50px',
        width: '50px'
      }}
      alt="Flashlight"
      onClick={toggleLight}
      >
    </img>

    <h2>Mouse Position</h2>
    {JSON.stringify(mousePosition, null, 2 )}
    <br />   

    <h2>Network Status</h2>
    <p>You are <strong>{onlineStatus ? 'online': 'offline'}</strong></p>
    </>
  ) 
}

export default App;

import React, {useState, useEffect} from 'react';

const initialLocationState = {
  latitude: null,
  longitude: null,
  speed: null
}

const App = () => {
  const [count, setCount] = useState(0);
  const [isOn, setIsOn] = useState(false);
  const [mousePosition, setMousePosition] = useState({ x: null, y: null});
  const [onlineStatus, setOnlineStatus] = useState(navigator.onLine);
  const [{latitude, longitude, speed}, setLocation] = useState(initialLocationState);
  let geolocationMounted = true;

  useEffect(() => {
    document.title = `You have click ${count} times`;
    window.addEventListener('mousemove', handleMouseMove);
    window.addEventListener('online', handleOnlineStatus);
    window.addEventListener('offline', handleOfflineStatus);
    navigator.geolocation.getCurrentPosition(handleGeolocation);
    const geolocationWatchId = navigator.geolocation.watchPosition(handleGeolocation)

    // Here we tell the useEffect what we want to do when the component is unmounted
    return () => {
      window.removeEventListener('mousemove', handleMouseMove);
      window.removeEventListener('online', handleOnlineStatus);
      window.removeEventListener('offline', handleOfflineStatus);
      geolocationMounted = false;
      navigator.geolocation.clearWatch(geolocationWatchId);
    }
  }, [count]) // Every time count changes it is executed.

  const incrementCount = () => {
    setCount(prevCount => prevCount + 1);
  }  

  const toggleLight = () => {
    setIsOn(previousIsOn => !previousIsOn);
  }

  const handleMouseMove = event => {
    setMousePosition({
      x: event.pageX,
      y: event.pageY
    });
  }

  const handleOnlineStatus = () => {
    setOnlineStatus(true);
  }

  const handleOfflineStatus = () => {
    setOnlineStatus(false);
  }
  
  const handleGeolocation = event => {
    if (geolocationMounted) {
      setLocation({
        latitude: event.coords.latitude,
        longitude: event.coords.longitude,
        speed: event.coords.speed
      })
    }
  }

  return (
    <>
    <h2>Counter</h2>
    <button onClick={incrementCount}>I was clicked {count} times</button>

    <h2>Toggle Light</h2>
    <img 
      src={
        isOn 
          ? 'https://icon.now.sh/highlight/fd0'
          : 'https://icon.now.sh/highlight/aaa'
      }
      style={{
        height: '50px',
        width: '50px'
      }}
      alt="Flashlight"
      onClick={toggleLight}
      >
    </img>

    <h2>Mouse Position</h2>
    {JSON.stringify(mousePosition, null, 2 )}
    <br />   

    <h2>Network Status</h2>
    <p>You are <strong>{onlineStatus ? 'online': 'offline'}</strong></p>

    <h2>Geolocation</h2>
    <p>Latitude is: {latitude}</p>
    <p>Longitude is: {longitude}</p>
    <p>Your speed is: {speed ? speed: '0'}</p>
    </>
  ) 
}

export default App;

import React, {useState} from 'react'

export default function Login() {

  const [username, setUsername] = useState("");
  const [password, setPassword] = useState("");
  const [user, setUser] = useState(null);

  const handleSubmit = event => {
    event.preventDefault();
    const userData = {
      username,
      password
    }
    setUser(userData);
    setUsername("");
    setPassword("");
  }

  return (
    <div
      style={{
        textAlign: 'center'
      }}
    >
      <h2>Login</h2>
      <form
        style={{
          display: 'grid',
          alignItems: 'centre',
          justifyItems: 'center'
        }}
        onSubmit={handleSubmit}
      >
        <input 
          type="text"
          placeholder="Username"
          onChange={event => setUsername(event.target.value)}
          value={username}
        />
        <input 
          type="password"
          placeholder="Password"
          onChange={event => setPassword(event.target.value)}
          value={password}
        />
        <button type="submit">Submit</button>
      </form>
      
      {user && JSON.stringify(user, null, 2)}
    </div>
  )
}

import React, {useState} from 'react'

const initialFormState = {
  username: "",
  email: "",
  password: ""
}

export default function Register() {
  const [form, setForm] = useState(initialFormState)

  const [user, setUser] = useState(null);

  const handleChange = event => {
    setForm({
      ...form,
      [event.target.name]: event.target.value
    });
  }

  const handleSubmit = event => {
    event.preventDefault();
    setUser(form);
    setForm(initialFormState)
  }
  return (
    <div
    style={{
      textAlign: 'center'
    }}
  >
    <h2>Register</h2>
    <form
      style={{
        display: 'grid',
        alignItems: 'centre',
        justifyItems: 'center'
      }}
      onSubmit={handleSubmit}
    >
      <input 
        type="text"
        placeholder="Username"
        name="username"
        onChange={handleChange}
        value={form.username}
      />
      <input 
        type="email"
        placeholder="Email address"
        name="email"
        onChange={handleChange}
        value={form.email}
      />
      <input 
        type="password"
        placeholder="Password"
        name="password"
        onChange={handleChange}
        value={form.password}
      />
      <button type="submit">Submit</button>
    </form>
    
    {user && JSON.stringify(user, null, 2)}
  </div>
  )
}

import React from 'react';

export default function App() {
  return (
    <div>App</div>
  )
}

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import * as serviceWorker from './serviceWorker';

ReactDOM.render(<App />, document.getElementById('root'));

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: http://bit.ly/CRA-PWA
serviceWorker.unregister();

import React, {useState, useEffect} from 'react';
import axios from 'axios'

export default function App() {

  const [results, setResults] = useState([])
  useEffect(() => {
    axios.get('http://hn.algolia.com/api/v1/search?query=reacthooks')
      .then(response => {
        console.log(response.data);
        setResults(response.data.hits);
      });
  }, [])

  return (
    <>
    <ul>
      {results.map(result => (
        <li key={result.objectID}>
          <a href={result.url}>{result.title}</a>
        </li>
      ))}
    </ul>
    </>
  )
}

import React, {useState, useEffect} from 'react';
import axios from 'axios'

export default function App() {

  const [results, setResults] = useState([])

  useEffect(() => {
    getResult();
  }, [])

  const getResult = async () => {
    const response = await axios.get('http://hn.algolia.com/api/v1/search?query=reacthooks');
    setResults(response.data.hits);
  }

  return (
    <>
    <ul>
      {results.map(result => (
        <li key={result.objectID}>
          <a href={result.url}>{result.title}</a>
        </li>
      ))}
    </ul>
    </>
  )
}

import React, {useState, useEffect} from 'react';
import axios from 'axios'

export default function App() {

  const [results, setResults] = useState([])
  const [query, setQuery] = useState('reacthooks');

  useEffect(() => {
    getResult();
  }, [query])

  const getResult = async () => {
    const response = await axios.get(`http://hn.algolia.com/api/v1/search?query=${query}`);
    setResults(response.data.hits);
  }

  return (
    <>
    <input type="text" onChange={event => setQuery(event.target.value)}/>
    <ul>
      {results.map(result => (
        <li key={result.objectID}>
          <a href={result.url}>{result.title}</a>
        </li>
      ))}
    </ul>
    </>
  )
}

import React, {useState, useEffect} from 'react';
import axios from 'axios'

export default function App() {

  const [results, setResults] = useState([])
  const [query, setQuery] = useState('react hooks');

  useEffect(() => {
    getResults();
  }, [])

  const getResults = async () => {
    const response = await axios.get(`http://hn.algolia.com/api/v1/search?query=${query}`);
    setResults(response.data.hits);
  }

  const handleSearch = event => {
    event.preventDefault();
    getResults();
  }

  return (
    <>
    <form
      onSubmit={handleSearch}
    >
      <input 
        type="text" 
        onChange={event => setQuery(event.target.value)}
        value={query}
      />
      <button type="submit">Search</button>
    </form>
    <ul>
      {results.map(result => (
        <li key={result.objectID}>
          <a href={result.url}>{result.title}</a>
        </li>
      ))}
    </ul>
    </>
  )
}

import React, {useState, useEffect, useRef } from 'react';
import axios from 'axios'

export default function App() {

  const [results, setResults] = useState([])
  const [query, setQuery] = useState('react hooks');
  const searchInputRef = useRef();

  useEffect(() => {
    getResults();
  }, [])

  const getResults = async () => {
    const response = await axios.get(`http://hn.algolia.com/api/v1/search?query=${query}`);
    setResults(response.data.hits);
  }

  const handleSearch = event => {
    event.preventDefault();
    getResults();
  }

  const handleClearSearch = event => {
    event.preventDefault();
    setQuery("");
    searchInputRef.current.focus();
  }

  return (
    <>
    <form
      onSubmit={handleSearch}
    >
      <input 
        type="text" 
        onChange={event => setQuery(event.target.value)}
        value={query}
        ref={searchInputRef}
      />
      <button type="submit">Search</button>
      <button 
        type="button"
        onClick={handleClearSearch}
      >Clear</button>
    </form>
    <ul>
      {results.map(result => (
        <li key={result.objectID}>
          <a href={result.url}>{result.title}</a>
        </li>
      ))}
    </ul>
    </>
  )
}

import React, {useState, useEffect, useRef } from 'react';
import axios from 'axios'

export default function App() {

  const [results, setResults] = useState([])
  const [query, setQuery] = useState('react hooks');
  const [loading, setLoading] = useState(false);
  const searchInputRef = useRef();

  useEffect(() => {
    getResults();
  }, [])

  const getResults = async () => {
    setLoading(true);
    const response = await axios.get(`http://hn.algolia.com/api/v1/search?query=${query}`);
    setResults(response.data.hits);
    setLoading(false);
  }

  const handleSearch = event => {
    event.preventDefault();
    getResults();
  }

  const handleClearSearch = event => {
    event.preventDefault();
    setQuery("");
    searchInputRef.current.focus();
  }

  return (
    <>
    <form
      onSubmit={handleSearch}
    >
      <input 
        type="text" 
        onChange={event => setQuery(event.target.value)}
        value={query}
        ref={searchInputRef}
      />
      <button type="submit">Search</button>
      <button 
        type="button"
        onClick={handleClearSearch}
      >Clear</button>
    </form>
    { loading ? (
        <div>Loading results...</div>
      ) : (
        <ul>
          {results.map(result => (
            <li key={result.objectID}>
              <a href={result.url}>{result.title}</a>
            </li>
          ))}
        </ul>
      )
    }
    </>
  )
}

import React, {useState, useEffect, useRef } from 'react';
import axios from 'axios'

export default function App() {

  const [results, setResults] = useState([])
  const [query, setQuery] = useState('react hooks');
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState(null);
  const searchInputRef = useRef();

  useEffect(() => {
    getResults();
  }, [])

  const getResults = async () => {
    setLoading(true);
    try {
      const response = await axios.get(`http://hn.algolia.com/api/v1/search?query=${query}`);
      setResults(response.data.hits);     
    } catch (error) {
      setError(error)
    }

    setLoading(false);
  }

  const handleSearch = event => {
    event.preventDefault();
    getResults();
  }

  const handleClearSearch = event => {
    event.preventDefault();
    setQuery("");
    setError("");
    searchInputRef.current.focus();
  }

  return (
    <>
    <form
      onSubmit={handleSearch}
    >
      <input 
        type="text" 
        onChange={event => setQuery(event.target.value)}
        value={query}
        ref={searchInputRef}
      />
      <button type="submit">Search</button>
      <button 
        type="button"
        onClick={handleClearSearch}
      >Clear</button>
    </form>
    { loading ? (
        <div>Loading results...</div>
      ) : (
        <ul>
          {results.map(result => (
            <li key={result.objectID}>
              <a href={result.url}>{result.title}</a>
            </li>
          ))}
        </ul>
      )
    }

    {error && <div>{error.message}</div>}
    </>
  )
}

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import * as serviceWorker from './serviceWorker';

ReactDOM.render(<App />, document.getElementById('root'));

if (module.hot) {
  module.hot.accept();
}

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: http://bit.ly/CRA-PWA
serviceWorker.unregister();

import React, {useState, useEffect, useRef } from 'react';
import axios from 'axios'

export default function App() {

  const [results, setResults] = useState([])
  const [query, setQuery] = useState('react hooks');
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState(null);
  const searchInputRef = useRef();

  useEffect(() => {
    getResults();
  }, [])

  const getResults = async () => {
    setLoading(true);
    try {
      const response = await axios.get(`http://hn.algolia.com/api/v1/search?query=${query}`);
      setResults(response.data.hits);     
    } catch (error) {
      setError(error)
    }

    setLoading(false);
  }

  const handleSearch = event => {
    event.preventDefault();
    getResults();
  }

  const handleClearSearch = event => {
    event.preventDefault();
    setQuery("");
    setError("");
    searchInputRef.current.focus();
  }

  return (
    <div className="container max-w-md mx-auto p-4 m-2 bg-purple-lightest shadow-lg rounded">
    <img 
      src="https://icon.now.sh/react/c0c" 
      alt="React logo" 
      className="float-right h-12"
    />
    <h1 className="text-grey-darkets font-thin">Hook News</h1>
    <form
      onSubmit={handleSearch}
      className="mb-2"
    >
      <input 
        type="text" 
        onChange={event => setQuery(event.target.value)}
        value={query}
        ref={searchInputRef}
        className="border p-1 rounded"
      />
      <button 
        type="submit"
        className="bg-orange rounded m-1 p-1"
      >Search</button>
      <button 
        type="button"
        onClick={handleClearSearch}
        className="bg-teal text-white rounded p-1"
      >Clear</button>
    </form>
    { loading ? (
        <div className="font-bold text-orange-dark">Loading results...</div>
      ) : (
        <ul className="list-reset leading-normal">
          {results.map(result => (
            <li key={result.objectID}>
              <a 
                href={result.url}
                className="text-indigo-dark hover:text-indigo-darkest"
              >{result.title}</a>
            </li>
          ))}
        </ul>
      )
    }

    {error && <div className="text-red font-bold">{error.message}</div>}
    </div>
  )
}

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import * as serviceWorker from './serviceWorker';

ReactDOM.render(<App />, document.getElementById('root'));

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: http://bit.ly/CRA-PWA
serviceWorker.unregister();

import React from 'react';

export default function App() {
  return (
    <div>App</div>
  );
}

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import * as serviceWorker from './serviceWorker';

const username = "Dave";

ReactDOM.render(<App username={username} />, document.getElementById('root'));

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: http://bit.ly/CRA-PWA
serviceWorker.unregister();

import React from 'react';

export default function App(props) {
  return (
    <div>{props.username}</div>
  );
}

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import * as serviceWorker from './serviceWorker';

export const UserContext = React.createContext()

const username = "Dave";

ReactDOM.render(
  <UserContext.Provider value={username}>
    <App />
  </UserContext.Provider>
  , document.getElementById('root')
);

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: http://bit.ly/CRA-PWA
serviceWorker.unregister();

import React from 'react';
import { UserContext } from './index'

export default function App() {
  return (
    <div>
      <UserContext.Consumer>
        {value => <div>Hello, {value}</div>}
      </UserContext.Consumer>
    </div>
  );
}

import React, {useContext} from 'react';
import { UserContext } from './index'

export default function App() {
  const value = useContext(UserContext);

  return (
      <div>Hello, {value}</div>
  );
}

import React, {useContext, useReducer} from 'react';
import { UserContext } from './index'

const initialState = {
  count: 0
}

function reducer(state, action) {
  switch (action.type) {
    case "increment":
      return {
        count: state.count + 1
      }
    default:
      return initialState;
  }
}

export default function App() {
  const [state, dispatch] = useReducer(reducer, initialState);
  const value = useContext(UserContext);

  return (
    <div>
      Count: {state.count}
      <button hooks-todos6
        className="border p-1"
        onClick={() => dispatch({ type: "increment"})}
      >Increment</button>
      <br />
      <div>Hello, {value}</div>
    </div>
  );
}

import React, {useContext, useReducer} from 'react';
import { UserContext } from './index'

const initialState = {
  count: 0
}

function reducer(state, action) {
  switch (action.type) {
    case "increment":
      return {
        count: state.count + 1
      };
    case "decrement":
      return {
        count: state.count - 1
      };
    case "reset":
      return initialState;
    default:
      return initialState;
  }
}

export default function App() {
  const [state, dispatch] = useReducer(reducer, initialState);
  const value = useContext(UserContext);

  return (
    <div>
      Count: {state.count}
      <button 
        className="border p-1 m-1"
        onClick={() => dispatch({ type: "increment"})}
      >Increment</button>
      <button 
        className="border p-1 m-1"
        onClick={() => dispatch({ type: "decrement"})}
      >Decrement</button>
      <button 
        className="border p-1 m-1"
        onClick={() => dispatch({ type: "reset"})}
      >Reset</button>        
      <br />
      <div>Hello, {value}</div>
    </div>
  );
}

import React from 'react';
import ReactDOM from 'react-dom';
import * as serviceWorker from './serviceWorker';

ReactDOM.render(
  <App />
  , document.getElementById('root')
);

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: http://bit.ly/CRA-PWA
serviceWorker.unregister();

import React from 'react';

const TodosContext = React.createContext({
  todos: [
    {id: 1, text: 'Eat breakfast', complete: false},
    {id: 2, text: 'Do laundry', complete: false},
    {id: 3, text: 'Finish project', complete: true}
  ]
});

export default TodosContext;

export default function reducer(state, action) {
  switch (action.type) {
    default:
      return state;
  }
}

import React, {useContext} from 'react';
import TodosContext from '../context';

export default function TodoList() {
  const {state} = useContext(TodosContext);
  return (
    <div>
      <ul>
        {state.todos.map(todo => (
          <li key={todo.id}>
            <span>{todo.text}</span>
          </li>  
        ))}
      </ul>
    </div>
  )
}

import React, {useContext, useReducer} from 'react';
import ReactDOM from 'react-dom';
import * as serviceWorker from './serviceWorker';
import TodosContext from './context';
import todosReducer from './reducer';
import TodoList from './components/TodoList'

const App = () => {
  const initialState = useContext(TodosContext);
  const [state, dispatch] = useReducer(todosReducer, initialState);
  return (
    <TodosContext.Provider value={{ state, dispatch}}> 
      <TodoList />
    </TodosContext.Provider>
  )
}


ReactDOM.render(
  <App />
  , document.getElementById('root')
);

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: http://bit.ly/CRA-PWA
serviceWorker.unregister();

import React, {useContext} from 'react';
import TodosContext from '../context';

export default function TodoList() {
  const {state} = useContext(TodosContext);
  const title = state.todos.length > 0 ? `${state.todos.length} Todos` : 'Nothing To Do!';
  return (
    <div className="container mx-auto max-w-md text-center font-mono">
      <h1 className="text-bold">{title}</h1>
      <ul className="list-reset text-white p-0">
        {state.todos.map(todo => (
          <li 
            key={todo.id}
            className="flex items-center bg-orange-dark border-black border-dashed border-2 my-2 py-4"
          >
            <span className="flex-1 ml-12 cursor-pointer">{todo.text}</span>
            <button>
              <img 
                src="https://icon.now.sh/edit/0050c5"
                alt="Edit Icon"
                className="h-6"
              />
            </button>
            <button>
              <img 
                src="https://icon.now.sh/delete/8b0000"
                alt="Delete Icon"
                className="h-6"
              />
            </button>
          </li>  
        ))}
      </ul>
    </div>
  )
}

import React, {useContext} from 'react';
import TodosContext from '../context';

export default function TodoList() {
  const {state, dispatch } = useContext(TodosContext);
  const title = state.todos.length > 0 ? `${state.todos.length} Todos` : 'Nothing To Do!';
  return (
    <div className="container mx-auto max-w-md text-center font-mono">
      <h1 className="text-bold">{title}</h1>
      <ul className="list-reset text-white p-0">
        {state.todos.map(todo => (
          <li 
            key={todo.id}
            className="flex items-center bg-orange-dark border-black border-dashed border-2 my-2 py-4"
          >
            <span 
              onDoubleClick={() => dispatch({ type: "TOGGLE_TODO", payload: todo})}
              className={`flex-1 ml-12 cursor-pointer ${todo.complete && "line-through text-grey-darkest"}` }
            >{todo.text}</span>
            <button>
              <img 
                src="https://icon.now.sh/edit/0050c5"
                alt="Edit Icon"
                className="h-6"
              />
            </button>
            <button>
              <img 
                src="https://icon.now.sh/delete/8b0000"
                alt="Delete Icon"
                className="h-6"
              />
            </button>
          </li>  
        ))}
      </ul>
    </div>
  )
}

export default function reducer(state, action) {
  switch (action.type) {
    case "TOGGLE_TODO":
      const toggledTodos = state.todos.map(t => 
        t.id === action.payload.id ? {...action.payload, complete: !action.payload.complete} : t )
      return {
        ...state,
        todos: toggledTodos
      }
    default:
      return state;
  }
}

import React, {useContext} from 'react';
import TodosContext from '../context';

export default function TodoList() {
  const {state, dispatch } = useContext(TodosContext);
  const title = state.todos.length > 0 ? `${state.todos.length} Todos` : 'Nothing To Do!';
  return (
    <div className="container mx-auto max-w-md text-center font-mono">
      <h1 className="text-bold">{title}</h1>
      <ul className="list-reset text-white p-0">
        {state.todos.map(todo => (
          <li 
            key={todo.id}
            className="flex items-center bg-orange-dark border-black border-dashed border-2 my-2 py-4"
          >
            <span 
              onDoubleClick={() => dispatch({ type: "TOGGLE_TODO", payload: todo})}
              className={`flex-1 ml-12 cursor-pointer ${todo.complete && "line-through text-grey-darkest"}` }
            >{todo.text}</span>
            <button>
              <img 
                src="https://icon.now.sh/edit/0050c5"
                alt="Edit Icon"
                className="h-6"
              />
            </button>
            <button
              onClick={() => dispatch({ type: "REMOVE_TODO", payload: todo})}
            >
              <img 
                src="https://icon.now.sh/delete/8b0000"
                alt="Delete Icon"
                className="h-6"
              />
            </button>
          </li>  
        ))}
      </ul>
    </div>
  )
}

export default function reducer(state, action) {
  switch (action.type) {
    case "TOGGLE_TODO":
      const toggledTodos = state.todos.map(t => 
        t.id === action.payload.id ? {...action.payload, complete: !action.payload.complete} : t )
      return {
        ...state,
        todos: toggledTodos
      }
    case "REMOVE_TODO":
      const removedTodos = state.todos.filter(t => t.id !== action.payload.id);
      return {
        ...state,
        todos: removedTodos
      }      
    default:
      return state;
  }
}

import React, { useState, useContext } from 'react';
import TodosContext from '../context';

export default function TodoForm() {

  const [todo, setTodo] = useState("");
  const { dispatch } = useContext(TodosContext);
  const handleSubmit = event => {
    event.preventDefault();
    dispatch({ type: "ADD_TODO", payload: todo});
    setTodo("");
  }
  return (
    <form 
      onSubmit={handleSubmit}
      className="flex justify-center p-5"
    >
      <input 
        type="text"
        className="border-black border-solid border-2"
        onChange={event => setTodo(event.target.value)}
        value={todo}
      />

    </form>
  )
}

import React, {useContext, useReducer} from 'react';
import ReactDOM from 'react-dom';
import * as serviceWorker from './serviceWorker';
import TodosContext from './context';
import todosReducer from './reducer';
import TodoList from './components/TodoList'
import TodoForm from './components/TodoForm'

const App = () => {
  const initialState = useContext(TodosContext);
  const [state, dispatch] = useReducer(todosReducer, initialState);
  return (
    <TodosContext.Provider value={{ state, dispatch}}> 
      <TodoForm />
      <TodoList />
    </TodosContext.Provider>
  )
}


ReactDOM.render(
  <App />
  , document.getElementById('root')
);

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: http://bit.ly/CRA-PWA
serviceWorker.unregister();

import uuidv4 from 'uuid/v4'

export default function reducer(state, action) {
  switch (action.type) {
    case "ADD_TODO":
      const newTodo = {
        id: uuidv4(),
        text: action.payload,
        complete: false
      };
      const addedTodos = [...state.todos, newTodo];
      return {
        ...state,
        todos: addedTodos
      };
    case "TOGGLE_TODO":
      const toggledTodos = state.todos.map(t => 
        t.id === action.payload.id ? {...action.payload, complete: !action.payload.complete} : t );
      return {
        ...state,
        todos: toggledTodos
      };
    case "REMOVE_TODO":
      const removedTodos = state.todos.filter(t => t.id !== action.payload.id);
      return {
        ...state,
        todos: removedTodos
      };
    default:
      return state;
  }
}

import React from 'react';

const TodosContext = React.createContext({
  todos: [
    {id: 1, text: 'Eat breakfast', complete: false},
    {id: 2, text: 'Do laundry', complete: false},
    {id: 3, text: 'Finish project', complete: true}
  ],
  currentTodo: {}
});

export default TodosContext;

import React, {useContext} from 'react';
import TodosContext from '../context';

export default function TodoList() {
  const {state, dispatch } = useContext(TodosContext);
  const title = state.todos.length > 0 ? `${state.todos.length} Todos` : 'Nothing To Do!';
  return (
    <div className="container mx-auto max-w-md text-center font-mono">
      <h1 className="text-bold">{title}</h1>
      <ul className="list-reset text-white p-0">
        {state.todos.map(todo => (
          <li 
            key={todo.id}
            className="flex items-center bg-orange-dark border-black border-dashed border-2 my-2 py-4"
          >
            <span 
              onDoubleClick={() => dispatch({ type: "TOGGLE_TODO", payload: todo})}
              className={`flex-1 ml-12 cursor-pointer ${todo.complete && "line-through text-grey-darkest"}` }
            >{todo.text}</span>
            <button
              onClick={() => dispatch({ type: "SET_CURRENT_TODO", payload: todo})}
            >
              <img 
                src="https://icon.now.sh/edit/0050c5"
                alt="Edit Icon"
                className="h-6"
              />
            </button>
            <button
              onClick={() => dispatch({ type: "REMOVE_TODO", payload: todo})}
            >
              <img 
                src="https://icon.now.sh/delete/8b0000"
                alt="Delete Icon"
                className="h-6"
              />
            </button>
          </li>  
        ))}
      </ul>
    </div>
  )
}

import uuidv4 from 'uuid/v4'

export default function reducer(state, action) {
  switch (action.type) {
    case "ADD_TODO":
      const newTodo = {
        id: uuidv4(),
        text: action.payload,
        complete: false
      };
      const addedTodos = [...state.todos, newTodo];
      return {
        ...state,
        todos: addedTodos
      };
    case "SET_CURRENT_TODO":
      return {
        ...state,
        currentTodo: action.payload
      }
    case "TOGGLE_TODO":
      const toggledTodos = state.todos.map(t => 
        t.id === action.payload.id ? {...action.payload, complete: !action.payload.complete} : t );
      return {
        ...state,
        todos: toggledTodos
      };
    case "UPDATE_TODO":
      const updatedTodo = {...state.currentTodo, text: action.payload};
      const updatedTodoIndex = state.todos.findIndex(t => t.id === state.currentTodo.id);
      const updatedTodos = [
        ...state.todos.slice(0, updatedTodoIndex),
        updatedTodo,
        ...state.todos.slice(updatedTodoIndex + 1)
      ];
      return {
        ...state,
        currentTodo: {},
        todos: updatedTodos
      };   
    case "REMOVE_TODO":
      const removedTodos = state.todos.filter(t => t.id !== action.payload.id);
      return {
        ...state,
        todos: removedTodos
      };
    default:
      return state;
  }
}