diff options
author | Vincent Ambo <mail@tazj.in> | 2021-12-13T22·51+0300 |
---|---|---|
committer | Vincent Ambo <mail@tazj.in> | 2021-12-13T23·15+0300 |
commit | 019f8fd2113df4c5247c3969c60fd4f0e08f91f7 (patch) | |
tree | 76a857f61aa88f62a30e854651e8439db77fd0ea /users/wpcarro/boilerplate/typescript/src/App.tsx | |
parent | 464bbcb15c09813172c79820bcf526bb10cf4208 (diff) | |
parent | 6123e976928ca3d8d93f0b2006b10b5f659eb74d (diff) |
subtree(users/wpcarro): docking briefcase at '24f5a642' r/3226
git-subtree-dir: users/wpcarro git-subtree-mainline: 464bbcb15c09813172c79820bcf526bb10cf4208 git-subtree-split: 24f5a642af3aa1627bbff977f0a101907a02c69f Change-Id: I6105b3762b79126b3488359c95978cadb3efa789
Diffstat (limited to 'users/wpcarro/boilerplate/typescript/src/App.tsx')
-rw-r--r-- | users/wpcarro/boilerplate/typescript/src/App.tsx | 52 |
1 files changed, 52 insertions, 0 deletions
diff --git a/users/wpcarro/boilerplate/typescript/src/App.tsx b/users/wpcarro/boilerplate/typescript/src/App.tsx new file mode 100644 index 000000000000..4fae1b36ac4d --- /dev/null +++ b/users/wpcarro/boilerplate/typescript/src/App.tsx @@ -0,0 +1,52 @@ +import React, { useEffect } from "react"; +import { BrowserRouter as Router, Switch, Route } from "react-router-dom"; +import { useDispatch } from "react-redux"; +import { actions, useTypedSelector } from "./store"; +import { Link } from "react-router-dom"; + +const App: React.FC = () => { + const dispatch = useDispatch(); + const { isLoading } = useTypedSelector(state => ({ + isLoading: state.isLoading, + })); + + return ( + <Router> + <nav className="bg-blue-400"> + <ul className="container mx-auto justify-between flex py-6 text-white"> + <li> + <Link to="/">Home</Link> + </li> + <li> + <Link to="/about">About</Link> + </li> + <li> + <Link to="/contact">Contact</Link> + </li> + </ul> + </nav> + <Switch> + <Route exact path="/"> + <div className="container mx-auto"> + <h1>Welcome to the home page. Loading: {isLoading ? "true" : "false"}</h1> + <button + className="bg-gray-300 py-4 px-6" + onClick={() => dispatch(actions.toggleIsLoading())}>isLoading</button> + </div> + </Route> + <Route exact path="/about"> + <div className="container mx-auto"> + <h1>Here is the about page.</h1> + </div> + </Route> + <Route exact path="/contact"> + <div className="container mx-auto"> + <h1>Here is the contact page.</h1> + </div> + </Route> + </Switch> + </Router> + ); +}; + +export default App; |