text: import React, { useState } from 'react';
  import {
    Route,
    Link,
    Switch,
    useRouteMatch,
    useHistory
  } from 'react-router-dom';
  import { useField } from './hooks/index';
  
  const Menu = () => {
    const padding = {
      paddingRight: 5
    };
    return (
      <div>
        <Link style={padding} to="/">anecdotes</Link>
        <Link style={padding} to="/create">create new</Link>
        <Link style={padding} to="/about">about</Link>
      </div>
    );
  };
  
  const AnecdoteList = ({ anecdotes }) => (
    <div>
      <h2>Anecdotes</h2>
      <ul>
        {anecdotes.map(anecdote =>
          <li key={anecdote.id} >
            <Link to={`/anecdotes/${anecdote.id}`}>{anecdote.content}</Link>
          </li>)}
      </ul>
    </div>
  );
  
  const Anecdote = ({ anecdote }) => {
    return (
      <div>
        <h2>{anecdote.content} by {anecdote.author}</h2>
        <div>has {anecdote.votes} votes</div>
        <div>for more info see <a href={anecdote.info} target="_blank">{anecdote.info}</a></div>
      </div>
    );
  };
  
  const Notification = ({ anecdote }) => (
    <div>
      A new anecdote {anecdote.content} created!
    </div>
  );
  
  const About = () => (
    <div>
      <h2>About anecdote app</h2>
      <p>According to Wikipedia:</p>
  
      <em>An anecdote is a brief, revealing account of an individual person or an incident.
        Occasionally humorous, anecdotes differ from jokes because their primary purpose is not simply to provoke laughter but to reveal a truth more general than the brief tale itself,
        such as to characterize a person by delineating a specific quirk or trait, to communicate an abstract idea about a person, place, or thing through the concrete details of a short narrative.
        An anecdote is "a story with a point."</em>
  
      <p>Software engineering is full of excellent anecdotes, at this app you can find the best and add more.</p>
    </div>
  );
  
  const Footer = () => (
    <div>
      Anecdote app for <a href='https://courses.helsinki.fi/fi/tkt21009'>Full Stack -websovelluskehitys</a>.
  
      See <a href='https://github.com/fullstack-hy/routed-anecdotes/blob/master/src/App.js'>https://github.com/fullstack-hy2019/routed-anecdotes/blob/master/src/App.js</a> for the source code.
    </div>
  );
  
  const CreateNew = (props) => {
    // 7.4 Step 1: Custom hook
    const history = useHistory();
    const [reset, setReset] = useState(true);
    const content = useField('text');
    const author = useField('text');
    const info = useField('info');
  
    const handleSubmit = (e) => {
      e.preventDefault();
      props.addNew({
        content: content.value,
        author: author.value,
        info: info.value,
        votes: 0
      });
      // 7.3 Step 3: Redirect to home page
      history.push('/');
    };
  
    // 7.5 Step 2: Add reset button
    const resetButtonHandler = (e) => {
      e.preventDefault();
      content.reset();
      author.reset();
      info.reset();
    };
  
    // 7.6 Step 3: NO SOLUTION YET!
  
    return (
      <div>
        <h2>create a new anecdote</h2>
        <form onSubmit={handleSubmit}>
          <div>
            content
            <input {...content} />
          </div>
          <div>
            author
            <input {...author} />
          </div>
          <div>
            url for more info
            <input {...info} />
          </div>
          <button type="submit">create</button><button type="reset" onClick={resetButtonHandler}>reset</button>
        </form>
      </div>
    );
  };
  
  const App = () => {
    const [anecdotes, setAnecdotes] = useState([
      {
        content: 'If it hurts, do it more often',
        author: 'Jez Humble',
        info: 'https://martinfowler.com/bliki/FrequencyReducesDifficulty.html',
        votes: 0,
        id: '1'
      },
      {
        content: 'Premature optimization is the root of all evil',
        author: 'Donald Knuth',
        info: 'http://wiki.c2.com/?PrematureOptimization',
        votes: 0,
        id: '2'
      }
    ]);
  
    const [notification, setNotification] = useState('');
  
    const addNew = (anecdote) => {
      anecdote.id = (Math.random() * 10000).toFixed(0);
      setAnecdotes(anecdotes.concat(anecdote));
      // 7.3 Step 3: Show notification
      setNotification(anecdote);
      setTimeout(() => setNotification(''), 10000);
    };
  
    const anecdoteById = (id) =>
      anecdotes.find(a => a.id === id);
  
    const vote = (id) => {
      const anecdote = anecdoteById(id);
  
      const voted = {
        ...anecdote,
        votes: anecdote.votes + 1
      };
  
      setAnecdotes(anecdotes.map(a => a.id === id ? voted : a));
    };
  
    // 7.2 Step 2: Implement a view for showing a single anecdote
    const match = useRouteMatch('/anecdotes/:id');
    const anecdote = match
      ? anecdotes.find(anecdote => Number(anecdote.id) === Number(match.params.id))
      : null;
  
    return (
      <div>
        <h1>Software anecdotes</h1>
        {/* 7.1 Routed Anecdotes, Step 1 */}
        <Menu />
        {notification ? <Notification anecdote={notification} /> : ''}
        <Switch>
          <Route path="/anecdotes/:id">
            <Anecdote anecdote={anecdote} />
          </Route>
          <Route path="/create">
            <CreateNew addNew={addNew} />
          </Route>
          <Route path="/about">
            <About />
          </Route>
          <Route path="/">
            <AnecdoteList anecdotes={anecdotes} />
          </Route>
        </Switch>
        <Footer />
      </div>
    );
  };
  
  export default App;