components
5 years ago
pages
5 years ago
scss
5 years ago
store
5 years ago
app.js
5 years ago
index.js
5 years ago
routes.js
5 years ago
settings.js
5 years ago
settings.scss
5 years ago
util.js
5 years ago
app.js
127 lines
| 1 | const { __ } = wp.i18n; |
| 2 | const { |
| 3 | Card, |
| 4 | SnackbarList, |
| 5 | Flex, |
| 6 | FlexBlock, |
| 7 | FlexItem, |
| 8 | Spinner, |
| 9 | } = wp.components; |
| 10 | const { dispatch, useSelect } = wp.data; |
| 11 | const { useState, useEffect } = wp.element; |
| 12 | |
| 13 | import { fetchSettings } from "@/admin/settings/settings"; |
| 14 | |
| 15 | import { Router, Link, Route } from "@/router"; |
| 16 | import { routes } from "./routes"; |
| 17 | |
| 18 | import SaveButton from "./components/SaveButton"; |
| 19 | import General from "./pages/General"; |
| 20 | import Integrations from "./pages/Integrations"; |
| 21 | import Performance from "./pages/Performance"; |
| 22 | |
| 23 | function App() { |
| 24 | let [loading, setLoading] = useState(true); |
| 25 | |
| 26 | // scroll top on history change |
| 27 | window.onhashchange = () => { |
| 28 | window.scrollTo(0, 0); |
| 29 | }; |
| 30 | |
| 31 | useEffect(() => { |
| 32 | fetchSettings().then(() => { |
| 33 | setLoading(false); |
| 34 | }); |
| 35 | }, []); |
| 36 | |
| 37 | const notices = useSelect((select) => { |
| 38 | return select("presto-player/settings").notices(); |
| 39 | }); |
| 40 | |
| 41 | const removeNotice = (id) => { |
| 42 | dispatch("presto-player/settings").removeNotice(id); |
| 43 | }; |
| 44 | |
| 45 | const scrollToTop = () => { |
| 46 | window.scrollTo(0, 0); |
| 47 | }; |
| 48 | |
| 49 | if (loading) { |
| 50 | return ( |
| 51 | <div className="presto-settings__loading"> |
| 52 | <Spinner /> |
| 53 | </div> |
| 54 | ); |
| 55 | } |
| 56 | |
| 57 | return ( |
| 58 | <div className="presto-settings"> |
| 59 | <Router routes={routes} defaultRoute={routes?.general?.path}> |
| 60 | <Card className="presto-settings__navigation"> |
| 61 | <Flex> |
| 62 | <FlexBlock> |
| 63 | <div |
| 64 | role="tablist" |
| 65 | aria-orientation="horizontal" |
| 66 | className="components-tab-panel__tabs" |
| 67 | > |
| 68 | <Link |
| 69 | to={routes?.general?.path} |
| 70 | type="button" |
| 71 | role="tab" |
| 72 | activeClassName="is-active" |
| 73 | className="components-button components-tab-panel__tabs-item presto-player__nav-general" |
| 74 | > |
| 75 | {__("General", "presto-player")} |
| 76 | </Link> |
| 77 | <Link |
| 78 | to={routes?.integrations?.path} |
| 79 | type="button" |
| 80 | role="tab" |
| 81 | activeClassName="is-active" |
| 82 | className="components-button components-tab-panel__tabs-item presto-player__nav-integrations" |
| 83 | > |
| 84 | {__("Integrations", "presto-player")} |
| 85 | </Link> |
| 86 | <Link |
| 87 | to={routes?.performance?.path} |
| 88 | type="button" |
| 89 | role="tab" |
| 90 | activeClassName="is-active" |
| 91 | className="components-button components-tab-panel__tabs-item presto-player__nav-performance" |
| 92 | > |
| 93 | {__("Performance", "presto-player")} |
| 94 | </Link> |
| 95 | </div> |
| 96 | </FlexBlock> |
| 97 | <FlexItem> |
| 98 | <SaveButton |
| 99 | style={{ margin: "0 10px" }} |
| 100 | form="presto-settings-form" |
| 101 | /> |
| 102 | </FlexItem> |
| 103 | </Flex> |
| 104 | </Card> |
| 105 | |
| 106 | <Route path={routes?.general?.path} onRoute={scrollToTop}> |
| 107 | <General /> |
| 108 | </Route> |
| 109 | <Route path={routes?.integrations?.path} onRoute={scrollToTop}> |
| 110 | <Integrations /> |
| 111 | </Route> |
| 112 | <Route path={routes?.performance?.path} onRoute={scrollToTop}> |
| 113 | <Performance /> |
| 114 | </Route> |
| 115 | </Router> |
| 116 | |
| 117 | <SnackbarList |
| 118 | className="presto-settings-page-notices" |
| 119 | notices={notices} |
| 120 | onRemove={removeNotice} |
| 121 | /> |
| 122 | </div> |
| 123 | ); |
| 124 | } |
| 125 | |
| 126 | export default App; |
| 127 |