Reorganize and cleanup

src/App.js

@@ -3,16 +3,17 @@ import 'rsuite/lib/styles/index.less';
 import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
 
 import { AuthContext } from './helpers/authContext';
+import { PrivateRoute } from './components';
 
-import PrivateRoute from './components/Routes/PrivateRoute';
-
-import Home from './screens/Home';
-import Dashboard from './screens/Dashboard';
-import Schedule from './screens/Schedule/Schedule';
-import Availability from './screens/Availability/Availability';
-import Invite from './screens/Invite/Invite';
-import Login from './screens/Login';
-import Register from './screens/Register';
+import {
+	Home,
+	Login,
+	Register,
+	Dashboard,
+	Invite,
+	Availability,
+	Schedule,
+} from './screens';
 
 const existingToken = localStorage.getItem('token');
 // const existingUser = JSON.parse(localStorage.getItem('user'));

src/components/IntervalSelector.js

@@ -1,13 +1,12 @@
 import React from 'react';
-import { DateTime } from 'luxon';
-
-import { Icon, IconButton } from 'rsuite';
-
 import FullCalendar from '@fullcalendar/react';
 import dayGridPlugin from '@fullcalendar/daygrid';
 import timeGridPlugin from '@fullcalendar/timegrid';
 import interaction from '@fullcalendar/interaction';
 import scrollGrid from '@fullcalendar/scrollgrid';
+import { DateTime } from 'luxon';
+import { Icon, IconButton } from 'rsuite';
+
 
 // FullCalendar props
 const dayMinWidth = 110;

src/components/Navbar/NavBar.js

@@ -1,8 +1,8 @@
 import React from 'react';
-
 import { Header, Navbar, Nav } from 'rsuite';
+
 import MenuDropdown from './MenuDropdown';
-import Title from './../General/Title';
+import Title from '../Title';
 
 export default function NavBar({ title }) {
 	return (

src/components/PrivateRoute.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Redirect, Route } from 'react-router-dom';
 
-import { useAuth } from '../../helpers/authContext';
+import { useAuth } from '../helpers/authContext';
 
 const PrivateRoute = ({ component: Component, ...rest }) => {
 	const { authToken } = useAuth();

src/components/Schedule/DurationSelector.js

@@ -1,5 +1,6 @@
 import React, {useState} from 'react';
 import { InputGroup, Icon } from 'rsuite';
+
 import { durations } from '../../assets/data/durations';
 
 export default function DurationSelector() {

src/components/Schedule/SelectedDates.js

@@ -1,5 +1,4 @@
 import React from 'react';
-
 import { Divider, Icon, IconButton } from 'rsuite';
 
 export default function SelectedDates({ datesList, handleDelete }) {

src/components/TimezonePicker.js

@@ -1,7 +1,8 @@
 import React, { useState } from 'react';
-import { timezones } from '../../assets/data/timezonesFlat';
 import { InputPicker } from 'rsuite';
 
+import { timezones } from '../assets/data/timezonesFlat';
+
 export default function TimezonePicker() {
 	const [timezone, setTimezone] = useState('');
 
@@ -9,7 +10,7 @@ export default function TimezonePicker() {
 		<InputPicker
 			data={timezones}
 			// cleanable={false}
-			style={{ width: "100%" }}
+			style={{ width: '100%' }}
 			labelKey='timezone'
 			groupBy='area'
 			placeholder='type to search your timezone'

src/components/index.js

@@ -0,0 +1,8 @@
+export { default as PrivateRoute } from './PrivateRoute';
+export { default as TimezonePicker } from './TimezonePicker';
+export { default as IntervalSelector } from './IntervalSelector';
+
+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';

src/screens/Availability.js

@@ -1,5 +1,4 @@
 import React, { useState } from 'react';
-
 import {
 	Panel,
 	Form,
@@ -11,11 +10,9 @@ import {
 	FormGroup,
 } from 'rsuite';
 
-import NavBar from '../../components/Navbar/NavBar';
-import TimezonePicker from '../../components/General/TimezonePicker';
-import IntervalSelector from '../../components/Interval/IntervalSelector';
-
-import './Availability.less';
+import { NavBar, TimezonePicker, IntervalSelector } from '../components';
+import './styles/Availability.less';
+import './styles/layout.less';
 
 export default function Availability() {
 	const [availability, setAvailability] = useState([...availabilityList]);
@@ -37,7 +34,7 @@ export default function Availability() {
 	return (
 		<>
 			<NavBar title='Add your availability' />
-			<Panel style={containerStyle}>
+			<Panel className={'app-container'}>
 				<Form className={'av-container'}>
 					<div className={'av-details'}>
 						<FormGroup>
@@ -94,13 +91,6 @@ export default function Availability() {
 	);
 }
 
-const containerStyle = {
-	// TODO Move to a .less file
-	maxWidth: '1200px',
-	margin: '30px auto',
-	backgroundColor: 'rgba(255,255,255,0.6)',
-};
-
 // TODO Remove fake data
 const eventsList = [
 	{

src/screens/Dashboard.js

@@ -2,11 +2,7 @@ import React from 'react';
 import { Panel } from 'rsuite';
 
 import { useAuth } from '../helpers/authContext';
-import NavBar from '../components/Navbar/NavBar';
-
-const boxStyle = {
-	margin: '50px 10px',
-};
+import { NavBar } from '../components';
 
 export default function Dashboard() {
 	const { authToken } = useAuth();
@@ -14,7 +10,7 @@ export default function Dashboard() {
 	return (
 		<>
 			<NavBar title='Meeting Planner' />
-			<Panel header={<h3>Dashboard</h3>} bordered style={boxStyle}>
+			<Panel header={<h3>Dashboard</h3>} bordered >
 				<p>This is just experimenting with stuff.</p>
 				<p>{authToken}</p>
 			</Panel>

src/screens/Home.js

@@ -2,18 +2,14 @@ import React from 'react';
 import { Panel } from 'rsuite';
 
 import { useAuth } from '../helpers/authContext';
-import NavBar from '../components/Navbar/NavBar';
-
-const boxStyle = {
-	margin: '50px 10px',
-};
+import { NavBar } from '../components';
 
 export default function Home() {
 	const { authToken } = useAuth();
 	return (
 		<>
 			<NavBar title='Meeting Planner' />
-			<Panel header={<h3>Home</h3>} bordered style={boxStyle}>
+			<Panel header={<h3>Home</h3>} bordered >
 				<p>This will be the home page</p>
 				<p>{authToken}</p>
 			</Panel>

src/screens/Invite.js

@@ -1,10 +1,10 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState } from 'react';
 import { useHistory } from 'react-router-dom';
-
 import { Panel, Form, Button, ButtonGroup, Message, TagPicker } from 'rsuite';
 
-import NavBar from '../../components/Navbar/NavBar';
-import './Invite.less';
+import { NavBar } from '../components';
+import './styles/Invite.less';
+import './styles/layout.less';
 
 export default function Invite() {
 	const [participants, setParticipants] = useState([]);
@@ -12,11 +12,6 @@ export default function Invite() {
 
 	const history = useHistory();
 
-	useEffect(() => {
-		console.log('useEffect participants: ', participants);
-		console.log('useEffect contactDropdown: ', contactDropdown);
-	}, [participants, contactDropdown]);
-
 	const handleSelect = (value) => {
 		// TODO Verify if input contains an email
 		// Verify if email is already in the participants
@@ -64,7 +59,7 @@ export default function Invite() {
 	return (
 		<>
 			<NavBar title='Invite participants' />
-			<Panel style={containerStyle}>
+			<Panel className={'app-container'}>
 				<Form className={'av-container'}>
 					<div className={'interval-selector'}>
 						<Message
@@ -101,7 +96,9 @@ export default function Invite() {
 								appearance='primary'
 								size='lg'
 								block
-								onClick={() => {history.push('availability');}}
+								onClick={() => {
+									history.push('availability');
+								}}
 							>
 								Add your availability
 							</Button>
@@ -112,30 +109,3 @@ export default function Invite() {
 		</>
 	);
 }
-
-const containerStyle = {
-	// TODO Move to a .less file
-	maxWidth: '1200px',
-	margin: '30px auto',
-	backgroundColor: 'rgba(255,255,255,0.6)',
-};
-
-// TODO Remove fake data
-// const contactsList = [
-// 	{
-// 		label: 'rui@protonmail.com',
-// 		value: 'rui@protonmail.com',
-// 	},
-// 	{
-// 		label: 'ln@armada.digital',
-// 		value: 'ln@armada.digital',
-// 	},
-// 	{
-// 		label: 'serge@goldwicht.be',
-// 		value: 'serge@goldwicht.be',
-// 	},
-// 	{
-// 		label: 'penkova@penkova.cc',
-// 		value: 'penkova@penkova.cc',
-// 	},
-// ];

src/screens/Login.js

@@ -10,9 +10,10 @@ import {
 	Message,
 } from 'rsuite';
 
-import NavBar from './../components/Navbar/NavBar';
+import { NavBar } from './../components';
 import { backend } from '../helpers/http-common';
 import { useAuth } from '../helpers/authContext';
+import './styles/layout.less';
 
 export default function Login() {
 	const [error, setError] = useState(false);
@@ -51,7 +52,7 @@ export default function Login() {
 	return (
 		<>
 			<NavBar title='Login' />
-			<Panel bordered style={boxStyle}>
+			<Panel bordered className={'form-container'}>
 				{error && <Message type='error' description={error} />}
 				<Form>
 					<FormGroup>
@@ -88,14 +89,3 @@ export default function Login() {
 		</>
 	);
 }
-
-// TODO Move to a .less file
-const boxStyle = {
-	maxWidth: 373,
-	margin: '0 auto',
-	borderRadius: 7,
-	background: 'white',
-	marginTop: '10vh',
-	marginBottom: '10vh',
-	padding: '1rem',
-};

src/screens/Register.js

@@ -1,40 +1,30 @@
 import React from 'react';
+import {
+	Form,
+	FormGroup,
+	FormControl,
+	ControlLabel,
+	HelpBlock,
+	Button,
+	Panel,
+} from 'rsuite';
 
-import { Form, FormGroup, FormControl, ControlLabel, HelpBlock, Button, Panel } from 'rsuite';
-
-import NavBar from './../components/Navbar/NavBar';
-import TimezonePicker from '../components/General/TimezonePicker';
-
-// TODO Move to a .less file
-const boxStyle = {
-	maxWidth: 373,
-	margin: '0 auto',
-	borderRadius: 7,
-	background: 'white',
-	marginTop: '10vh',
-	marginBottom: '10vh',
-	padding: '1rem',
-};
+import { NavBar, TimezonePicker } from './../components';
+import './styles/layout.less';
 
 export default function Register() {
 	return (
 		<>
 			<NavBar title='Register' />
-			<Panel bordered style={boxStyle}>
+			<Panel bordered className={'form-container'}>
 				<Form>
 					<FormGroup>
 						<ControlLabel>Username</ControlLabel>
-						<FormControl
-							name='username'
-							type='text'
-						/>
+						<FormControl name='username' type='text' />
 					</FormGroup>
 					<FormGroup>
 						<ControlLabel>Email</ControlLabel>
-						<FormControl
-							name='email'
-							type='email'
-						/>
+						<FormControl name='email' type='email' />
 					</FormGroup>
 					<ControlLabel>Timezone</ControlLabel>
 					<FormGroup>
@@ -42,16 +32,13 @@ export default function Register() {
 					</FormGroup>
 					<ControlLabel>Password</ControlLabel>
 					<FormGroup>
-						<FormControl
-							name='password'
-							type='password'
-						/>
+						<FormControl name='password' type='password' />
 						<HelpBlock>
 							Minimum password length is 8 characters
 						</HelpBlock>
 					</FormGroup>
 					<FormGroup>
-						<Button appearance='primary' block size="lg">
+						<Button appearance='primary' block size='lg'>
 							Register
 						</Button>
 					</FormGroup>

src/screens/Schedule.js

@@ -13,13 +13,15 @@ import {
 } from 'rsuite';
 import { DateTime } from 'luxon';
 
-import NavBar from '../../components/Navbar/NavBar';
-import TimezonePicker from '../../components/General/TimezonePicker';
-import DaySelector from '../../components/Schedule/DaySelector';
-import DurationSelector from '../../components/Schedule/DurationSelector';
-import SelectedDates from '../../components/Schedule/SelectedDates';
+import {
+	NavBar,
+	TimezonePicker,
+	DaySelector,
+	DurationSelector,
+	SelectedDates,
+} from '../components';
 
-import './Schedule.less';
+import './styles/Schedule.less';
 
 export default function Schedule() {
 	const [eventsList, setEventsList] = useState([]);
@@ -118,7 +120,7 @@ export default function Schedule() {
 	return (
 		<>
 			<NavBar title='Schedule a meeting' />
-			<Panel style={containerStyle}>
+			<Panel className={'app-container'}>
 				<Form className={'meeting-container'}>
 					<div className={'meeting-info'}>
 						<FormGroup>
@@ -201,10 +203,3 @@ const eventsToDates = (events) => {
 	});
 	return dates;
 };
-
-const containerStyle = {
-	// TODO Move to a .less file
-	maxWidth: '1200px',
-	margin: '30px auto',
-	backgroundColor: 'rgba(255,255,255,0.6)',
-};

src/screens/index.js

@@ -0,0 +1,7 @@
+export { default as Home } from './Home';
+export { default as Login } from './Login';
+export { default as Register } from './Register';
+export { default as Dashboard } from './Dashboard';
+export { default as Invite } from './Invite';
+export { default as Availability } from './Availability';
+export { default as Schedule } from './Schedule';

src/screens/styles/layout.less

@@ -0,0 +1,15 @@
+.app-container {
+	max-width: 1200px;
+	margin: 30px auto;
+	background-color: rgba(255, 255, 255, 0.6);
+}
+
+.form-container {
+	max-width: 373px;
+	margin: 0 auto;
+	border-radius: 7px;
+	background: white;
+	margin-top: 10vh;
+	margin-bottom: 10vh;
+	padding: 1rem;
+}