97 lines
2.3 KiB
TypeScript
97 lines
2.3 KiB
TypeScript
import MessageListItem from '../components/MessageListItem';
|
|
import React, { JSX, useState } from 'react';
|
|
import {
|
|
IonButton,
|
|
IonButtons,
|
|
IonContent,
|
|
IonHeader,
|
|
IonIcon,
|
|
IonList,
|
|
IonPage,
|
|
IonRefresher,
|
|
IonRefresherContent,
|
|
IonTitle,
|
|
IonToolbar,
|
|
useIonRouter,
|
|
useIonViewWillEnter,
|
|
} from '@ionic/react';
|
|
|
|
import './Home.scss';
|
|
|
|
import { get, set } from '../data/IonicStorage';
|
|
import { getMessages, rawMessages } from '../data/messages';
|
|
import { chevronBackOutline } from 'ionicons/icons';
|
|
|
|
const Home = (): JSX.Element => {
|
|
const [messages, setMessages] = useState<typeof rawMessages>([]);
|
|
|
|
useIonViewWillEnter(async () => {
|
|
const exists = await get('msgs');
|
|
|
|
if (!exists) {
|
|
const msgs = getMessages();
|
|
set('msgs', msgs);
|
|
setMessages(msgs);
|
|
} else {
|
|
setMessages(exists);
|
|
}
|
|
});
|
|
|
|
const refresh = (e: any) => {
|
|
resetStore();
|
|
setTimeout(() => {
|
|
e.detail.complete();
|
|
}, 1000);
|
|
};
|
|
|
|
const resetStore = async () => {
|
|
const msgs = getMessages();
|
|
set('msgs', msgs);
|
|
setMessages(msgs);
|
|
};
|
|
|
|
const router = useIonRouter();
|
|
function handleBackClick() {
|
|
router.goBack();
|
|
}
|
|
|
|
return (
|
|
<IonPage id="home-page">
|
|
<IonHeader>
|
|
<IonToolbar>
|
|
<IonTitle>Inbox</IonTitle>
|
|
|
|
<IonButtons slot="start">
|
|
<IonButton shape="round" onClick={() => handleBackClick()}>
|
|
<IonIcon icon={chevronBackOutline} color="primary" />
|
|
</IonButton>
|
|
</IonButtons>
|
|
</IonToolbar>
|
|
</IonHeader>
|
|
<IonContent fullscreen>
|
|
<IonRefresher slot="fixed" onIonRefresh={refresh}>
|
|
<IonRefresherContent></IonRefresherContent>
|
|
</IonRefresher>
|
|
|
|
<IonHeader collapse="condense">
|
|
<IonToolbar>
|
|
<IonTitle size="large">Inbox</IonTitle>
|
|
|
|
<IonButtons slot="start">
|
|
<IonButton shape="round" onClick={() => handleBackClick()}>
|
|
<IonIcon icon={chevronBackOutline} color="primary" />
|
|
</IonButton>
|
|
</IonButtons>
|
|
</IonToolbar>
|
|
</IonHeader>
|
|
|
|
<IonList>
|
|
{messages && messages.map((m: any) => <MessageListItem key={m.id} message={m} />)}
|
|
</IonList>
|
|
</IonContent>
|
|
</IonPage>
|
|
);
|
|
};
|
|
|
|
export default Home;
|