diff options
Diffstat (limited to 'users/wpcarro/boilerplate/typescript/src')
-rw-r--r-- | users/wpcarro/boilerplate/typescript/src/App.tsx | 52 | ||||
-rw-r--r-- | users/wpcarro/boilerplate/typescript/src/index.css | 3 | ||||
-rw-r--r-- | users/wpcarro/boilerplate/typescript/src/index.html | 11 | ||||
-rw-r--r-- | users/wpcarro/boilerplate/typescript/src/index.tsx | 12 | ||||
-rw-r--r-- | users/wpcarro/boilerplate/typescript/src/store.ts | 26 |
5 files changed, 104 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; diff --git a/users/wpcarro/boilerplate/typescript/src/index.css b/users/wpcarro/boilerplate/typescript/src/index.css new file mode 100644 index 000000000000..b5c61c956711 --- /dev/null +++ b/users/wpcarro/boilerplate/typescript/src/index.css @@ -0,0 +1,3 @@ +@tailwind base; +@tailwind components; +@tailwind utilities; diff --git a/users/wpcarro/boilerplate/typescript/src/index.html b/users/wpcarro/boilerplate/typescript/src/index.html new file mode 100644 index 000000000000..91752af916a4 --- /dev/null +++ b/users/wpcarro/boilerplate/typescript/src/index.html @@ -0,0 +1,11 @@ +<!DOCTYPE html> +<html lang="en"> + <head> + <meta charset="UTF-8" /> + <link rel="stylesheet" href="./index.css" /> + </head> + <body> + <div id="mount"></div> + <script src="./index.tsx"></script> + </body> +</html> diff --git a/users/wpcarro/boilerplate/typescript/src/index.tsx b/users/wpcarro/boilerplate/typescript/src/index.tsx new file mode 100644 index 000000000000..dc28dc4a9cc8 --- /dev/null +++ b/users/wpcarro/boilerplate/typescript/src/index.tsx @@ -0,0 +1,12 @@ +import React from "react"; +import ReactDOM from "react-dom"; +import App from "./App"; +import { Provider } from "react-redux"; +import store from "./store"; + +ReactDOM.render( + <Provider store={store}> + <App /> + </Provider>, + document.getElementById("mount") +); diff --git a/users/wpcarro/boilerplate/typescript/src/store.ts b/users/wpcarro/boilerplate/typescript/src/store.ts new file mode 100644 index 000000000000..03e980a491cc --- /dev/null +++ b/users/wpcarro/boilerplate/typescript/src/store.ts @@ -0,0 +1,26 @@ +import { createSlice, configureStore, PayloadAction } from "@reduxjs/toolkit"; +import { useSelector, TypedUseSelectorHook } from "react-redux"; + +export interface State { + isLoading: boolean; +} + +const initialState: State = { + isLoading: true, +}; + +export const { actions, reducer } = createSlice({ + name: "application", + initialState, + reducers: { + toggleIsLoading: state => ({ ...state, isLoading: !state.isLoading }), + } +}); + +/** + * Defining and consuming this allows us to avoid annotating State in all of our + * selectors. + */ +export const useTypedSelector: TypedUseSelectorHook<State> = useSelector; + +export default configureStore({ reducer }); |