|
1 | | -import { Routes, HashRouter, Route, Outlet } from 'react-router-dom'; |
2 | | -import S from './App.module.scss' |
3 | | -import '@/app/fonts'; |
| 1 | +import { Routes, HashRouter, Route, Outlet } from "react-router-dom"; |
| 2 | +import S from "./App.module.scss"; |
| 3 | +import "@/app/fonts"; |
4 | 4 |
|
5 | | -import { |
6 | | - AppLoader, |
7 | | - AppSettings, |
8 | | - LayoutMenu, |
9 | | - AddDividers, |
10 | | - Col, |
11 | | - Footer, |
12 | | - LayoutInfo, |
13 | | - CategoryInfo, |
14 | | - ActivePopup, |
15 | | - WithLayoutSupport, |
16 | | - Layout, |
17 | | - WithBrowserSupport |
18 | | -} from '@/components'; |
| 5 | +import { |
| 6 | + AppLoader, |
| 7 | + AppSettings, |
| 8 | + LayoutMenu, |
| 9 | + AddDividers, |
| 10 | + Col, |
| 11 | + Footer, |
| 12 | + LayoutInfo, |
| 13 | + CategoryInfo, |
| 14 | + ActivePopup, |
| 15 | + WithLayoutSupport, |
| 16 | + Layout, |
| 17 | + WithBrowserSupport, |
| 18 | +} from "@/components"; |
19 | 19 |
|
20 | | -import { useAppSelector } from '@/shared/lib/hooks/useAppSelector'; |
21 | | -import { selectDividers } from '@/app/store/features/dividers/dividers'; |
22 | | -import { useAppNavigation } from '@/shared/lib/hooks/useAppNavigation'; |
23 | | -import { useAppDispatch } from '@/shared/lib/hooks/useAppDispatch'; |
24 | | -import { loadAppData } from '@/app/store/features/app/app'; |
25 | | -import { useEffect } from 'react'; |
| 20 | +import { useAppSelector } from "@/shared/lib/hooks/useAppSelector"; |
| 21 | +import { selectDividers } from "@/app/store/features/dividers/dividers"; |
| 22 | +import { useAppNavigation } from "@/shared/lib/hooks/useAppNavigation"; |
| 23 | +import { useAppDispatch } from "@/shared/lib/hooks/useAppDispatch"; |
| 24 | +import { loadAppData } from "@/app/store/features/app/app"; |
| 25 | +import { useEffect } from "react"; |
26 | 26 |
|
27 | | - |
28 | | -import './index.scss' |
| 27 | +import "./index.scss"; |
29 | 28 |
|
30 | 29 | const App = () => { |
31 | | - return ( |
32 | | - <HashRouter> |
33 | | - <Routes> |
34 | | - <Route path="/" element={<AppLayout />}> |
35 | | - <Route path=':language'> |
36 | | - <Route path='orientation/:orientation'/> |
37 | | - <Route path='category/:categoryId' element={<CategoryInfo/>}> |
38 | | - <Route path=':layoutId' element={<LayoutInfo/>}> |
39 | | - <Route path=':type'> |
40 | | - <Route path=':storyId'/> |
41 | | - </Route> |
42 | | - </Route> |
43 | | - </Route> |
| 30 | + return ( |
| 31 | + <HashRouter> |
| 32 | + <Routes> |
| 33 | + <Route path="/" element={<AppLayout />}> |
| 34 | + <Route path=":language"> |
| 35 | + <Route path="orientation/:orientation" /> |
| 36 | + <Route path="category/:categoryId" element={<CategoryInfo />}> |
| 37 | + <Route path=":layoutId" element={<LayoutInfo />}> |
| 38 | + <Route path=":type"> |
| 39 | + <Route path=":storyId" /> |
| 40 | + </Route> |
| 41 | + </Route> |
| 42 | + </Route> |
| 43 | + |
| 44 | + <Route path="color" /> |
| 45 | + <Route path="grayscale" /> |
44 | 46 |
|
45 | | - <Route path='color'/> |
46 | | - <Route path='grayscale'/> |
47 | | - |
48 | | - <Route path='layout/:layoutId' element={<LayoutInfo/>}> |
49 | | - <Route path=':type'> |
50 | | - <Route path=':storyId'/> |
51 | | - </Route> |
52 | | - </Route> |
53 | | - </Route> |
54 | | - </Route> |
55 | | - </Routes> |
56 | | - </HashRouter> |
57 | | - ) |
58 | | -} |
| 47 | + <Route path="layout/:layoutId" element={<LayoutInfo />}> |
| 48 | + <Route path=":type"> |
| 49 | + <Route path=":storyId" /> |
| 50 | + </Route> |
| 51 | + </Route> |
| 52 | + </Route> |
| 53 | + </Route> |
| 54 | + </Routes> |
| 55 | + </HashRouter> |
| 56 | + ); |
| 57 | +}; |
59 | 58 |
|
60 | 59 | const AppLayout = () => { |
61 | | - const dispatch = useAppDispatch(); |
| 60 | + const dispatch = useAppDispatch(); |
62 | 61 |
|
63 | | - useEffect(() => { |
64 | | - dispatch(loadAppData()); |
65 | | - }, [dispatch]); |
| 62 | + useEffect(() => { |
| 63 | + dispatch(loadAppData()); |
| 64 | + }, [dispatch]); |
66 | 65 |
|
67 | | - useAppNavigation(); |
| 66 | + useAppNavigation(); |
68 | 67 |
|
69 | | - const dividers = useAppSelector(selectDividers); |
| 68 | + const dividers = useAppSelector(selectDividers); |
70 | 69 |
|
71 | | - const showLayout = dividers.length > 0; |
| 70 | + const showLayout = dividers.length > 0; |
72 | 71 |
|
73 | | - return ( |
74 | | - <WithBrowserSupport> |
75 | | - <AppLoader> |
76 | | - <Col className={S.container}> |
77 | | - <AppSettings/> |
78 | | - <Col className={S.content}> |
79 | | - <Outlet/> |
80 | | - <LayoutMenu/> |
81 | | - <div className={S.addDividers}> |
82 | | - <AddDividers/> |
83 | | - </div> |
84 | | - <WithLayoutSupport fallback={true}> |
85 | | - {showLayout && ( |
86 | | - <div className={S.layout}> |
87 | | - <Layout/> |
88 | | - </div> |
89 | | - )} |
90 | | - </WithLayoutSupport> |
91 | | - </Col> |
92 | | - <Footer/> |
93 | | - </Col> |
94 | | - <ActivePopup/> |
95 | | - </AppLoader> |
96 | | - </WithBrowserSupport> |
97 | | - ); |
98 | | -} |
| 72 | + return ( |
| 73 | + <WithBrowserSupport> |
| 74 | + <AppLoader> |
| 75 | + <Col className={S.container}> |
| 76 | + <AppSettings /> |
| 77 | + <Col className={S.content}> |
| 78 | + <Outlet /> |
| 79 | + <LayoutMenu /> |
| 80 | + <div className={S.addDividers}> |
| 81 | + <AddDividers /> |
| 82 | + </div> |
| 83 | + <WithLayoutSupport fallback={true}> |
| 84 | + {showLayout && ( |
| 85 | + <div className={S.layout}> |
| 86 | + <Layout /> |
| 87 | + </div> |
| 88 | + )} |
| 89 | + </WithLayoutSupport> |
| 90 | + </Col> |
| 91 | + <Footer /> |
| 92 | + </Col> |
| 93 | + <ActivePopup /> |
| 94 | + </AppLoader> |
| 95 | + </WithBrowserSupport> |
| 96 | + ); |
| 97 | +}; |
99 | 98 |
|
100 | | -export default App |
| 99 | +export default App; |
0 commit comments