jeswin/router-article.full.html

## router-article.full.html
<html>
  <head>
    <script
      src="https://unpkg.com/react@16/umd/react.development.js"
      crossorigin
    ></script>
    <script
      src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"
      crossorigin
    ></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.21.1/babel.min.js"></script>
    <script type="text/babel">
      const { useState } = React;

      const todos = [
        { id: 1, text: "Buy Milk" },
        { id: 2, text: "Pay Bills" },
        { id: 3, text: "Write Article" },
        { id: 4, text: "Sleep Early" }
      ];

      let storePathInState;

      const Home = ({ pathArr }) => {
        const [pathInState, setPathFn] = useState(pathArr);
        storePathInState = setPathFn;

        return pathInState[0] === "todos" ? (
          // If the first part of the url is /todos, show the TodoList component
          <TodoList todos={todos} pathArr={pathInState} />
        ) : pathInState[0] === "about" ? (
          // If the first part of the url is /todos, show the TodoList component
          <About />
        ) : (
          // Otherwise show the home page.
          <div>
            There are two links: <br />
            1.{" "}
            <a href="#" onClick={createClickHandler("/todos")}>
              Todos page
            </a>
            <br />
            2.{" "}
            <a href="#" onClick={createClickHandler("/about")}>
              About page
            </a>
          </div>
        );
      };

      const TodoList = ({ todos, pathArr }) => {
        const [first, todoId] = pathArr;
        return (
          <div>
            <h1>Todos Module</h1>
            {typeof todoId === "undefined" ? (
              <div>
                <h2>List of todos:</h2>
                {todos ? (
                  todos.map(todo => <Todo key={todo.id} todo={todo} />)
                ) : (
                  <p>There are no todos.</p>
                )}
              </div>
            ) : (
              <TodoDetail todo={todos.find(todo => todo.id == todoId)} />
            )}
          </div>
        );
      };

      const Todo = ({ todo }) => (
        <p>
          <a href="#" onClick={createClickHandler(`/todos/${todo.id}`)}>
            {todo.text}
          </a>
        </p>
      );

      const TodoDetail = ({ todo }) => (
        <div>
          Detail page for {todo.id}
          <br />
          Text: {todo.text}
        </div>
      );

      const About = () => <div>This is the about page.</div>;

      if (document.readyState === "loading") {
        // Loading hasn't finished yet
        document.addEventListener("DOMContentLoaded", startup);
      } else {
        // `DOMContentLoaded` has already fired
        startup();
      }

      function startup() {
        ReactDOM.render(
          <Home
            todos={todos}
            pathArr={window.location.pathname.split("/").slice(1)}
          />,
          document.getElementById("container")
        );
      }

      function createClickHandler(url) {
        return ev => {
          history.pushState({}, undefined, url);
          storePathInState(url.split("/").slice(1));
          ev.preventDefault();
        };
      }

      window.onpopstate = ev =>
        storePathInState(window.location.pathname.split("/").slice(1));
    </script>
  </head>
  <body>
    <h1>Examplos!</h1>
    <div id="container"></div>
  </body>
</html>
	<html>
	<head>
	<script
	src="https://unpkg.com/react@16/umd/react.development.js"
	crossorigin
	></script>
	<script
	src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"
	crossorigin
	></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.21.1/babel.min.js"></script>
	<script type="text/babel">
	const { useState } = React;

	const todos = [
	{ id: 1, text: "Buy Milk" },
	{ id: 2, text: "Pay Bills" },
	{ id: 3, text: "Write Article" },
	{ id: 4, text: "Sleep Early" }
	];

	let storePathInState;

	const Home = ({ pathArr }) => {
	const [pathInState, setPathFn] = useState(pathArr);
	storePathInState = setPathFn;

	return pathInState[0] === "todos" ? (
	// If the first part of the url is /todos, show the TodoList component
	<TodoList todos={todos} pathArr={pathInState} />
	) : pathInState[0] === "about" ? (
	// If the first part of the url is /todos, show the TodoList component
	<About />
	) : (
	// Otherwise show the home page.
	<div>
	There are two links: <br />
	1.{" "}
	<a href="#" onClick={createClickHandler("/todos")}>
	Todos page
	</a>
	<br />
	2.{" "}
	<a href="#" onClick={createClickHandler("/about")}>
	About page
	</a>
	</div>
	);
	};

	const TodoList = ({ todos, pathArr }) => {
	const [first, todoId] = pathArr;
	return (
	<div>
	<h1>Todos Module</h1>
	{typeof todoId === "undefined" ? (
	<div>
	<h2>List of todos:</h2>
	{todos ? (
	todos.map(todo => <Todo key={todo.id} todo={todo} />)
	) : (
	<p>There are no todos.</p>
	)}
	</div>
	) : (
	<TodoDetail todo={todos.find(todo => todo.id == todoId)} />
	)}
	</div>
	);
	};

	const Todo = ({ todo }) => (
	<p>
	<a href="#" onClick={createClickHandler(`/todos/${todo.id}`)}>
	{todo.text}
	</a>
	</p>
	);

	const TodoDetail = ({ todo }) => (
	<div>
	Detail page for {todo.id}
	<br />
	Text: {todo.text}
	</div>
	);

	const About = () => <div>This is the about page.</div>;

	if (document.readyState === "loading") {
	// Loading hasn't finished yet
	document.addEventListener("DOMContentLoaded", startup);
	} else {
	// `DOMContentLoaded` has already fired
	startup();
	}

	function startup() {
	ReactDOM.render(
	<Home
	todos={todos}
	pathArr={window.location.pathname.split("/").slice(1)}
	/>,
	document.getElementById("container")
	);
	}

	function createClickHandler(url) {
	return ev => {
	history.pushState({}, undefined, url);
	storePathInState(url.split("/").slice(1));
	ev.preventDefault();
	};
	}

	window.onpopstate = ev =>
	storePathInState(window.location.pathname.split("/").slice(1));
	</script>
	</head>
	<body>
	<h1>Examplos!</h1>
	<div id="container"></div>
	</body>
	</html>