diff --git a/src/App.js b/src/App.js index 601cc28..dd2759b 100644 --- a/src/App.js +++ b/src/App.js @@ -67,7 +67,11 @@ export default function App() { - + +

{status}

+ + + {meetings.map((meeting) => ( + + + {/* Icon */} + + + + + {/*base info*/} + +
{meeting.title}
+ {meeting.start_time !== null && ( + <>{meeting.start_time} + )} +
+ + + View + | + Edit + +
+
+ ))} +
+ + ); +} + +// 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, +}; diff --git a/src/components/Navbar/MenuDropdown.js b/src/components/Navbar/MenuDropdown.js index 5b12062..8c7a167 100644 --- a/src/components/Navbar/MenuDropdown.js +++ b/src/components/Navbar/MenuDropdown.js @@ -23,7 +23,8 @@ export default function MenuDropdown() { const MenuPopover = ({ onSelect, ...rest }) => ( - Dashboard + Home + Dashboard Register Login diff --git a/src/components/index.js b/src/components/index.js index 56b7e97..8f1b1bb 100644 --- a/src/components/index.js +++ b/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'; + diff --git a/src/screens/Dashboard.js b/src/screens/Dashboard.js index 49f4138..3624ac8 100644 --- a/src/screens/Dashboard.js +++ b/src/screens/Dashboard.js @@ -1,20 +1,48 @@ -import React from 'react'; -import { Panel } from 'rsuite'; +import React, { useEffect, useState } from 'react'; +import { Panel, Divider, List, Icon, FlexboxGrid } from 'rsuite'; -import { useAuth } from '../helpers/authContext'; -import { NavBar } from '../components'; +import { NavBar, MeetingList } from '../components'; -export default function Dashboard() { - const { authToken, isAuthenticated, currentUser } = useAuth(); +import './styles/layout.less'; +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 ( <> - - Dashboard} bordered> -

This is just experimenting with stuff.

-

{authToken}

-

Authenticated: {isAuthenticated.toString()}

-

Current user: {currentUser.username}

+ + +

Invitations

+ {meetings.length === 0 &&

You have no meetings.

} + {confirmed && ( + + )} + {unconfirmed && ( + + )}
); diff --git a/src/screens/Login.js b/src/screens/Login.js index 4066ab1..96e92eb 100644 --- a/src/screens/Login.js +++ b/src/screens/Login.js @@ -53,7 +53,7 @@ export default function Login() { }; if (isAuthenticated) { - return ; + return ; } return (