diff options
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; |