74 lines
1.8 KiB
JavaScript
74 lines
1.8 KiB
JavaScript
import React, { useEffect, useState } from 'react';
|
|
import { Panel, Placeholder, Loader } from 'rsuite';
|
|
|
|
import { NavBar, MeetingList } from '../components';
|
|
|
|
import './styles/layout.less';
|
|
import { backend } from '../helpers/http-common';
|
|
|
|
const { Paragraph } = Placeholder;
|
|
|
|
export default function Dashboard({ currentUser }) {
|
|
const [meetings, setMeetings] = useState([]);
|
|
const [confirmed, setConfirmed] = useState();
|
|
const [unconfirmed, setUnconfirmed] = useState();
|
|
const [loading, setLoading] = useState(true);
|
|
|
|
useEffect(() => {
|
|
backend
|
|
.get(`/accounts/${currentUser.id}/meetings`)
|
|
.then((response) => {
|
|
const allMeetings = response.data;
|
|
|
|
const confirmed = allMeetings.filter(
|
|
(meeting) => meeting.start_time,
|
|
);
|
|
const unconfirmed = allMeetings.filter(
|
|
(meeting) => !meeting.start_time,
|
|
);
|
|
|
|
setConfirmed(confirmed);
|
|
setUnconfirmed(unconfirmed);
|
|
setMeetings(allMeetings);
|
|
setLoading(false);
|
|
})
|
|
.catch((error) => console.log(error));
|
|
}, []);
|
|
|
|
return (
|
|
<>
|
|
<NavBar title='Dashboard' />
|
|
{loading ? (
|
|
<Panel className={'app-container-small'}>
|
|
<h2>Invitations</h2>
|
|
<h4>Confirmed</h4>
|
|
<Paragraph style={{ marginTop: 30 }} graph='square'>
|
|
<Loader backdrop content='loading...' vertical />
|
|
</Paragraph>
|
|
<h4>To confirm</h4>
|
|
<Paragraph style={{ marginTop: 30 }} graph='square'>
|
|
<Loader backdrop content='loading...' vertical />
|
|
</Paragraph>
|
|
</Panel>
|
|
) : (
|
|
<Panel className={'app-container-small'}>
|
|
<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>
|
|
)}
|
|
</>
|
|
);
|
|
}
|