Reorganize and cleanup

This commit is contained in:
rui hildt 2020-08-22 01:08:18 +02:00
parent 52e04006df
commit 672044e905
21 changed files with 97 additions and 142 deletions

View File

@ -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'));

View File

@ -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;

View File

@ -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 (

View File

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

View File

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

View File

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

View File

@ -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'

8
src/components/index.js Normal file
View File

@ -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';

View File

@ -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 = [
{

View File

@ -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>

View File

@ -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>

View File

@ -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',
// },
// ];

View File

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

View File

@ -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'
/>
<ControlLabel>Username</ControlLabel>
<FormControl name='username' type='text' />
</FormGroup>
<FormGroup>
<ControlLabel>Email</ControlLabel>
<FormControl
name='email'
type='email'
/>
<ControlLabel>Email</ControlLabel>
<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>

View File

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

7
src/screens/index.js Normal file
View File

@ -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';

View File

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