[MicroFrontend Workshop 1] Container component

index.js

/**
 *
 * App
 *
 * This component is the skeleton around the actual pages, and should only
 * contain code that should be seen on all pages. (e.g. navigation bar)
 */

import React from 'react';
import { ConnectedRouter } from 'connected-react-router';
import { Switch, Route } from 'react-router-dom';

import GlobalStyle from '../../global-styles';

import MicroFrontend from 'containers/MicroFrontend';

const DOG_HOST = "http://localhost:3001"
const CAT_HOST = "http://localhost:3002"

function Header() {
  return (
    <div className="banner">
      <h1 className="banner-title">&#128571; Cats and Dogs &#128021;</h1>
      <h4>Random pics of cats and dogs</h4>
    </div>
  );
}

function Dogs({ history }) {
  return <MicroFrontend history={history} host={DOG_HOST} name="Dogs" />;
}

function Cats({ history }) {
  return <MicroFrontend history={history} host={CAT_HOST} name="Cats" />;
}

function GreetingCat({ history }) {
  return (
    <div>
      <Header />
      <div className="home">
        <MicroFrontend history={history} host={CATS_HOST} name="Cats" />
      </div>
    </div>
  );
}

function Home({ history }) {
  const [input, setInput] = useState('');

  const handleOnClick = () => {
    history.push(`/cat/${input}`);
  };

  return (
    <div>
      <Header />
      <div className="home">
        <input
          placeholder="Insert a greeting"
          defaultValue={input}
          onBlur={e => setInput(e.target.value)}
        />
        <button type="button" onClick={handleOnClick}>
          Greet Me
        </button>
      </div>

      <div className="home">
        <div className="content">
          <div className="cat">
            <Cats />
          </div>
          <div className="dog">
            <Dogs />
          </div>
        </div>
      </div>
    </div>
  );
}

function App({ history }) {
  return (
    <ConnectedRouter history={history}>
      <React.Fragment>
        <GlobalStyle />
        <Switch>
          <Route exact path="/" component={Home} />
          <Route exact path="/cat/:greeting" component={GreetingCat} />
        </Switch>
      </React.Fragment>
    </ConnectedRouter>
  );
}

export default App;