Add MeetingList and Dashboard

This commit is contained in:
rui hildt 2020-09-04 18:30:36 +02:00
parent c254e9ca27
commit 495b60935d
6 changed files with 144 additions and 15 deletions

View File

@ -67,7 +67,11 @@ export default function App() {
<Route path='/login' component={Login} /> <Route path='/login' component={Login} />
<Route path='/register' component={Register} /> <Route path='/register' component={Register} />
<PrivateRoute path='/dashboard' component={Dashboard} /> <PrivateRoute
path='/dashboard'
component={Dashboard}
currentUser={currentUser}
/>
<PrivateRoute <PrivateRoute
path='/schedule' path='/schedule'
component={Schedule} component={Schedule}

View File

@ -0,0 +1,94 @@
import React from 'react';
import { List, FlexboxGrid, Icon } from 'rsuite';
export default function MeetingList({ meetings, status }) {
return (
<>
<h4>{status}</h4>
<List hover>
{meetings.map((meeting) => (
<List.Item key={meeting.id} bordered>
<FlexboxGrid>
{/* Icon */}
<FlexboxGrid.Item colspan={2} style={styleCenter}>
<Icon
icon={
meeting.start_time !== null
? 'calendar-check-o'
: 'calendar-o'
}
style={{
color: 'darkgrey',
fontSize: '1.5em',
}}
/>
</FlexboxGrid.Item>
{/*base info*/}
<FlexboxGrid.Item
colspan={6}
style={{
...styleCenter,
flexDirection: 'column',
alignItems: 'flex-start',
overflow: 'hidden',
}}
>
<div style={titleStyle}>{meeting.title}</div>
{meeting.start_time !== null && (
<>{meeting.start_time}</>
)}
</FlexboxGrid.Item>
<FlexboxGrid.Item
colspan={4}
style={{
...alignRight,
}}
>
<a href='#'>View</a>
<span style={{ padding: 5 }}>|</span>
<a href='#'>Edit</a>
</FlexboxGrid.Item>
</FlexboxGrid>
</List.Item>
))}
</List>
</>
);
}
// TODO move to a less file
const styleCenter = {
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
height: '60px',
};
const alignRight = {
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
height: '60px',
alignSelf: 'right'
};
const slimText = {
fontSize: '0.666em',
color: '#97969B',
fontWeight: 'lighter',
paddingBottom: 5,
};
const titleStyle = {
paddingBottom: 5,
whiteSpace: 'nowrap',
fontWeight: 500,
};
const dataStyle = {
fontSize: '1.2em',
fontWeight: 500,
};

View File

@ -23,7 +23,8 @@ export default function MenuDropdown() {
const MenuPopover = ({ onSelect, ...rest }) => ( const MenuPopover = ({ onSelect, ...rest }) => (
<Popover {...rest} full> <Popover {...rest} full>
<Dropdown.Menu onSelect={onSelect}> <Dropdown.Menu onSelect={onSelect}>
<Dropdown.Item eventKey={'/'}>Dashboard</Dropdown.Item> <Dropdown.Item eventKey={'/'}>Home</Dropdown.Item>
<Dropdown.Item eventKey={'dashboard'}>Dashboard</Dropdown.Item>
<Dropdown.Item eventKey={'register'}>Register</Dropdown.Item> <Dropdown.Item eventKey={'register'}>Register</Dropdown.Item>
<Dropdown.Item eventKey={'login'}>Login</Dropdown.Item> <Dropdown.Item eventKey={'login'}>Login</Dropdown.Item>
<Dropdown.Item eventKey={'schedule'}> <Dropdown.Item eventKey={'schedule'}>

View File

@ -8,3 +8,5 @@ export { default as NavBar } from './Navbar/NavBar';
export { default as DaySelector } from './Schedule/DaySelector'; export { default as DaySelector } from './Schedule/DaySelector';
export { default as DurationSelector } from './Schedule/DurationSelector'; export { default as DurationSelector } from './Schedule/DurationSelector';
export { default as SelectedDates } from './Schedule/SelectedDates'; export { default as SelectedDates } from './Schedule/SelectedDates';
export { default as MeetingList } from './Dashboard/MeetingList';

View File

@ -1,20 +1,48 @@
import React from 'react'; import React, { useEffect, useState } from 'react';
import { Panel } from 'rsuite'; import { Panel, Divider, List, Icon, FlexboxGrid } from 'rsuite';
import { useAuth } from '../helpers/authContext'; import { NavBar, MeetingList } from '../components';
import { NavBar } from '../components';
export default function Dashboard() { import './styles/layout.less';
const { authToken, isAuthenticated, currentUser } = useAuth(); import { backend } from '../helpers/http-common';
export default function Dashboard({ currentUser }) {
const [meetings, setMeetings] = useState([]);
const [confirmed, setConfirmed] = useState();
const [unconfirmed, setUnconfirmed] = useState();
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);
})
.catch((error) => console.log(error));
}, []);
return ( return (
<> <>
<NavBar title='Meeting Planner' /> <NavBar title='Dashboard' />
<Panel header={<h3>Dashboard</h3>} bordered> <Panel className={'app-container'}>
<p>This is just experimenting with stuff.</p> <h2>Invitations</h2>
<p>{authToken}</p> {meetings.length === 0 && <p>You have no meetings.</p>}
<p>Authenticated: {isAuthenticated.toString()}</p> {confirmed && (
<p>Current user: {currentUser.username}</p> <MeetingList meetings={confirmed} status={'Confirmed'} />
)}
{unconfirmed && (
<MeetingList meetings={unconfirmed} status={'To confirm'} />
)}
</Panel> </Panel>
</> </>
); );

View File

@ -53,7 +53,7 @@ export default function Login() {
}; };
if (isAuthenticated) { if (isAuthenticated) {
return <Redirect to='/schedule' />; return <Redirect to='/dashboard' />;
} }
return ( return (