meeting-planner/frontend
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Add loading state to dashboard

Browse Source
This commit is contained in:
rui hildt 2020-09-04 18:50:50 +02:00
parent 495b60935d
commit 962b30edf0
2 changed files with 36 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/Dashboard/MeetingList.js
View File

@ -72,7 +72,7 @@ const alignRight = {
justifyContent: 'center', justifyContent: 'center',
alignItems: 'center', alignItems: 'center',
height: '60px', height: '60px',
alignSelf: 'right' marginLeft: 'auto'
}; };
const slimText = { const slimText = {

46
src/screens/Dashboard.js
View File

@ -1,15 +1,18 @@
import React, { useEffect, useState } from 'react'; import React, { useEffect, useState } from 'react';
import { Panel, Divider, List, Icon, FlexboxGrid } from 'rsuite'; import { Panel, Placeholder, Loader } from 'rsuite';
import { NavBar, MeetingList } from '../components'; import { NavBar, MeetingList } from '../components';
import './styles/layout.less'; import './styles/layout.less';
import { backend } from '../helpers/http-common'; import { backend } from '../helpers/http-common';
const { Paragraph } = Placeholder;
export default function Dashboard({ currentUser }) { export default function Dashboard({ currentUser }) {
const [meetings, setMeetings] = useState([]); const [meetings, setMeetings] = useState([]);
const [confirmed, setConfirmed] = useState(); const [confirmed, setConfirmed] = useState();
const [unconfirmed, setUnconfirmed] = useState(); const [unconfirmed, setUnconfirmed] = useState();
const [loading, setLoading] = useState(true);
useEffect(() => { useEffect(() => {
backend backend
@ -27,6 +30,7 @@ export default function Dashboard({ currentUser }) {
setConfirmed(confirmed); setConfirmed(confirmed);
setUnconfirmed(unconfirmed); setUnconfirmed(unconfirmed);
setMeetings(allMeetings); setMeetings(allMeetings);
setLoading(false);
}) })
.catch((error) => console.log(error)); .catch((error) => console.log(error));
}, []); }, []);
@ -34,16 +38,36 @@ export default function Dashboard({ currentUser }) {
return ( return (
<> <>
<NavBar title='Dashboard' /> <NavBar title='Dashboard' />
<Panel className={'app-container'}> {loading ? (
<h2>Invitations</h2> <Panel className={'app-container'}>
{meetings.length === 0 && <p>You have no meetings.</p>} <h2>Invitations</h2>
{confirmed && ( <h4>Confirmed</h4>
<MeetingList meetings={confirmed} status={'Confirmed'} /> <Paragraph style={{ marginTop: 30 }} graph='square'>
)} <Loader backdrop content='loading...' vertical />
{unconfirmed && ( </Paragraph>
<MeetingList meetings={unconfirmed} status={'To confirm'} /> <h4>To confirm</h4>
)} <Paragraph style={{ marginTop: 30 }} graph='square'>
</Panel> <Loader backdrop content='loading...' vertical />
</Paragraph>
</Panel>
) : (
<Panel className={'app-container'}>
<h2>Invitations</h2>
{confirmed && (
<MeetingList
meetings={confirmed}
status={'Confirmed'}
/>
)}
{unconfirmed && (
<MeetingList
meetings={unconfirmed}
status={'To confirm'}
/>
)}
{meetings.length === 0 && <p>You have no meetings.</p>}
</Panel>
)}
</> </>
); );
} }