Add MeetingList and Dashboard

src/App.js

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

src/components/Dashboard/MeetingList.js

@@ -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,
+};

src/components/Navbar/MenuDropdown.js

@@ -23,7 +23,8 @@ export default function MenuDropdown() {
 	const MenuPopover = ({ onSelect, ...rest }) => (
 		<Popover {...rest} full>
 			<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={'login'}>Login</Dropdown.Item>
 				<Dropdown.Item eventKey={'schedule'}>

src/components/index.js

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

src/screens/Dashboard.js

@@ -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 (
 		<>
-			<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>
 		</>
 	);

src/screens/Login.js

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