11import React from 'react'
2- import { Route , Switch , withRouter , Link } from "react-router-dom"
2+ import { Redirect , Route , Switch , withRouter } from "react-router-dom"
33
4- import ProfileIcon from "@material-ui/icons/PersonOutlineOutlined"
5- import DashboardIcon from "@material-ui/icons/DashboardOutlined"
6- import TripIcon from "@material-ui/icons/CompareArrowsOutlined"
7- import PresetIcon from "@material-ui/icons/AddSharp"
4+ import { withTheme } from '@material-ui/core'
85
9- import { withTheme , BottomNavigation , BottomNavigationAction } from '@material-ui/core'
10-
11- import { routes } from './lib/router'
6+ import { routes as ROUTES } from './lib/router'
127
138import {
14- Landing ,
15- Profile ,
16- Register ,
17- OfflineStatus ,
18- HomePage ,
19- NotFound ,
20- Dialog ,
21- Trips ,
22- Messages ,
23- Trip ,
24- EditCatch ,
25- Form ,
26- Notification ,
27- Preset
9+ Dialog , EditCatch , Form , Home ,
10+ Landing , Messages , NotFound , Notification ,
11+ OfflineStatus , Preset , Profile , Register ,
12+ Trip , Trips
2813} from './components'
2914
30- import { useTranslation } from 'react-i18next'
31-
15+ import Navigation from './Navigation'
16+
17+
18+ // Define new pages here
19+ const routes = [
20+ { component : Landing , path : ROUTES . ROOT } ,
21+ { component : Register , path : ROUTES . REGISTER } , // REVIEW: Delete?
22+ { component : Profile , path : ROUTES . PROFILE } ,
23+ { component : Home , path : ROUTES . HOMEPAGE } ,
24+ { component : Preset , path : ROUTES . PRESET } ,
25+ { component : Trips , path : ROUTES . TRIPS } ,
26+ { component : Trip , path : `${ ROUTES . TRIPS } /:tripId` } ,
27+ { component : Messages , path : ROUTES . MESSAGES } ,
28+ { component : EditCatch , path : `${ ROUTES . MESSAGES } /:type/:messageId${ ROUTES . EDIT } ` } ,
29+ { component : Form , path : `${ ROUTES . MESSAGES } /:type${ ROUTES . NEW } ` }
30+ ]
3231
3332export const App = ( { theme : { palette : { type} } } ) =>
34- < div className = "app" style = { { backgroundColor : type === "dark" ? "#000" : "" } } >
33+ < div className = { `app ${ type === "dark" ? "dark" : "" } ` } >
34+ < Route component = { Navigation } />
3535 < Switch >
36- < Route component = { Landing } exact path = { routes . ROOT } />
37- < Route component = { Register } exact path = { routes . REGISTER } />
38- < Route component = { Profile } exact path = { routes . PROFILE } />
39- < Route component = { HomePage } exact path = { routes . HOMEPAGE } />
40- < Route component = { Preset } exact path = { routes . PRESET } />
41- < Route component = { Trips } exact path = { routes . TRIPS } />
42- < Route component = { Trip } exact path = { `${ routes . TRIPS } /:tripId` } />
43- < Route component = { Messages } exact path = { routes . MESSAGES } />
44- < Route component = { EditCatch } exact path = { `${ routes . MESSAGES } /:type/:messageId${ routes . EDIT } ` } />
45- < Route component = { Form } exact path = { `${ routes . MESSAGES } /:type${ routes . NEW } ` } />
36+ { routes . map ( route =>
37+ < Route key = { route . path } { ...route } exact />
38+ ) }
4639 < Route component = { NotFound } />
4740 </ Switch >
48- < Route
49- render = {
50- ( { location : { pathname} } ) =>
51- ! [ routes . ROOT , routes . REGISTER ] . includes ( pathname ) ?
52- < Navigation value = { pathname . slice ( 1 ) } /> :
53- null
54- }
55- />
5641 < OfflineStatus />
5742 < Dialog />
5843 < Notification />
44+ < FirstTimeRedirect />
5945 </ div >
6046
61-
6247export default withRouter ( withTheme ( ) ( App ) )
6348
6449
65- const navigation = [
66- {
67- id : "homepage" ,
68- icon : < DashboardIcon /> ,
69- to : routes . HOMEPAGE
70- } ,
71- {
72- id : "trips" ,
73- icon : < TripIcon /> ,
74- to : routes . TRIPS
75- } ,
76- {
77- id : "profile" ,
78- icon : < ProfileIcon /> ,
79- to : routes . PROFILE
80- } ,
81- {
82- id : "preset" ,
83- icon : < PresetIcon /> ,
84- to : routes . PRESET
50+ /**
51+ * If the user opens the page for the first time,
52+ * they will be redirected to the PRESET page.
53+ */
54+ const FirstTimeRedirect = ( ) => {
55+ if ( ! localStorage . getItem ( "noRedirect" ) ) {
56+ localStorage . setItem ( "noRedirect" , 1 )
57+ return < Redirect to = { ROUTES . PRESET } />
8558 }
86- ]
87-
88- export const Navigation = ( { value} ) => {
89- const [ t ] = useTranslation ( "common" )
90- return (
91- < BottomNavigation
92- style = { { position : "fixed" , bottom : 0 , width : "100vw" } }
93- value = { value }
94- >
95- { navigation . map ( ( { id, icon, to} ) =>
96- < BottomNavigationAction
97- component = { Link }
98- icon = { icon }
99- key = { id }
100- label = { t ( `navigation.${ id } ` ) }
101- to = { to }
102- value = { id }
103- />
104- ) }
105- </ BottomNavigation >
106- )
59+ return null
10760}
0 commit comments