import React, { useState, useRef } from 'react'; import { IonToolbar, IonContent, IonPage, IonButtons, IonTitle, IonMenuButton, IonSegment, IonSegmentButton, IonButton, IonIcon, IonSearchbar, IonRefresher, IonRefresherContent, IonToast, IonModal, IonHeader, getConfig, } from '@ionic/react'; import { options, search } from 'ionicons/icons'; import SessionList from '../components/SessionList'; import SessionListFilter from '../components/SessionListFilter'; import './SchedulePage.scss'; import ShareSocialFab from '../components/ShareSocialFab'; import * as selectors from '../data/selectors'; import { connect } from '../data/connect'; import { setSearchText } from '../data/sessions/sessions.actions'; import { Schedule } from '../models/Schedule'; interface OwnProps {} interface StateProps { schedule: Schedule; favoritesSchedule: Schedule; mode: 'ios' | 'md'; } interface DispatchProps { setSearchText: typeof setSearchText; } type SchedulePageProps = OwnProps & StateProps & DispatchProps; const SchedulePage: React.FC = ({ favoritesSchedule, schedule, setSearchText, mode, }) => { const [segment, setSegment] = useState<'all' | 'favorites'>('all'); const [showSearchbar, setShowSearchbar] = useState(false); const [showFilterModal, setShowFilterModal] = useState(false); const ionRefresherRef = useRef(null); const [showCompleteToast, setShowCompleteToast] = useState(false); const pageRef = useRef(null); const ios = mode === 'ios'; const doRefresh = () => { setTimeout(() => { ionRefresherRef.current!.complete(); setShowCompleteToast(true); }, 2500); }; return ( {!showSearchbar && ( )} {ios && ( setSegment(e.detail.value as any)} > All Favorites )} {!ios && !showSearchbar && Schedule} {showSearchbar && ( setSearchText(e.detail.value)} onIonCancel={() => setShowSearchbar(false)} > )} {!ios && !showSearchbar && ( setShowSearchbar(true)}> )} {!showSearchbar && ( setShowFilterModal(true)}> {mode === 'ios' ? ( 'Filter' ) : ( )} )} {!ios && ( setSegment(e.detail.value as any)} > All Favorites )} Schedule setSearchText(e.detail.value)} > setShowCompleteToast(false)} /> setShowFilterModal(false)} presentingElement={pageRef.current!} > setShowFilterModal(false)} /> ); }; export default connect({ mapStateToProps: (state) => ({ schedule: selectors.getSearchedSchedule(state), favoritesSchedule: selectors.getGroupedFavorites(state), mode: getConfig()!.get('mode'), }), mapDispatchToProps: { setSearchText, }, component: React.memo(SchedulePage), });