95 lines
3.5 KiB
TypeScript
95 lines
3.5 KiB
TypeScript
// REQ102-navigation-bar
|
|
|
|
import { IonIcon, IonLabel, IonRouterOutlet, IonTabBar, IonTabButton, IonTabs } from '@ionic/react';
|
|
import { calendar, informationCircle, location, people } from 'ionicons/icons';
|
|
import React, { useContext } from 'react';
|
|
import { Redirect, Route } from 'react-router';
|
|
import About from '../About';
|
|
import MapView from '../MapView';
|
|
import SchedulePage from '../SchedulePage';
|
|
import SessionDetail from '../SessionDetail';
|
|
import SpeakerDetail from '../SpeakerDetail';
|
|
import SpeakerList from '../SpeakerList';
|
|
|
|
//
|
|
import { AppContext } from '../../data/AppContext';
|
|
// import Chat from '../chat.del.3';
|
|
import Events from '../events';
|
|
import FavouriteEvents from '../favourite_events';
|
|
import Messages from '../messages';
|
|
import NearBy from '../near_by';
|
|
import Orders from '../orders';
|
|
import Profile from '../profile';
|
|
import UserProfile from '../user_profile';
|
|
|
|
interface MainTabsProps {}
|
|
|
|
const MainTabs: React.FC<MainTabsProps> = () => {
|
|
const { showBottomTabBar } = useContext(AppContext);
|
|
|
|
return (
|
|
<IonTabs>
|
|
<IonRouterOutlet>
|
|
<Redirect exact path="/tabs" to="/tabs/schedule" />
|
|
{/*
|
|
Using the render method prop cuts down the number of renders your components will have due to route changes.
|
|
Use the component prop when your component depends on the RouterComponentProps passed in automatically.
|
|
*/}
|
|
|
|
<Route path="/tabs/events" render={() => <Events />} exact={true} />
|
|
<Route path="/tabs/nearby" render={() => <NearBy />} exact={true} />
|
|
<Route path="/tabs/orders" render={() => <Orders />} exact={true} />
|
|
<Route path="/tabs/messages" render={() => <Messages />} exact={true} />
|
|
<Route path="/tabs/profile" render={() => <Profile />} exact={true} />
|
|
|
|
<Route path="/tabs/about" render={() => <About />} exact={true} />
|
|
|
|
{/* FIXME: chat room missing */}
|
|
{/* <Route path="/tabs/chat_history/:id" component={Chat} exact={true} /> */}
|
|
|
|
<Route path="/tabs/favourite_events" render={() => <FavouriteEvents />} exact={true} />
|
|
|
|
<Route path="/tabs/map" render={() => <MapView />} exact={true} />
|
|
|
|
<Route path="/tabs/schedule" render={() => <SchedulePage />} exact={true} />
|
|
<Route path="/tabs/schedule/:id" component={SessionDetail} />
|
|
|
|
<Route path="/tabs/speakers" render={() => <SpeakerList />} exact={true} />
|
|
<Route path="/tabs/speakers/:id" component={SpeakerDetail} exact={true} />
|
|
<Route path="/tabs/speakers/sessions/:id" component={SessionDetail} />
|
|
|
|
<Route path="/tabs/user_profile/:user_id" component={UserProfile} exact={true} />
|
|
</IonRouterOutlet>
|
|
|
|
<IonTabBar slot="bottom">
|
|
<IonTabButton tab="events" href="/tabs/events">
|
|
<IonIcon icon={calendar} />
|
|
<IonLabel>{'Events'}</IonLabel>
|
|
</IonTabButton>
|
|
|
|
<IonTabButton tab="nearby" href="/tabs/nearby">
|
|
<IonIcon icon={people} />
|
|
<IonLabel>{'NearBy'}</IonLabel>
|
|
</IonTabButton>
|
|
|
|
<IonTabButton tab="orders" href="/tabs/orders">
|
|
<IonIcon icon={people} />
|
|
<IonLabel>{'Orders'}</IonLabel>
|
|
</IonTabButton>
|
|
|
|
<IonTabButton tab="message" href="/tabs/messages">
|
|
<IonIcon icon={location} />
|
|
<IonLabel>{'Message'}</IonLabel>
|
|
</IonTabButton>
|
|
|
|
<IonTabButton tab="profile" href="/tabs/profile">
|
|
<IonIcon icon={informationCircle} />
|
|
<IonLabel>{'Profile'}</IonLabel>
|
|
</IonTabButton>
|
|
</IonTabBar>
|
|
</IonTabs>
|
|
);
|
|
};
|
|
|
|
export default MainTabs;
|