From 672044e905237ddb12ca43e8805088a7392fbfcf Mon Sep 17 00:00:00 2001 From: rui hildt Date: Sat, 22 Aug 2020 01:08:18 +0200 Subject: [PATCH] Reorganize and cleanup --- src/App.js | 19 +++---- .../{Interval => }/IntervalSelector.js | 7 ++- src/components/Navbar/NavBar.js | 4 +- src/components/{Routes => }/PrivateRoute.js | 2 +- src/components/Schedule/DurationSelector.js | 1 + src/components/Schedule/SelectedDates.js | 1 - .../{General => }/TimezonePicker.js | 5 +- src/components/{General => }/Title.js | 0 src/components/index.js | 8 +++ .../{Availability => }/Availability.js | 18 ++----- src/screens/Dashboard.js | 8 +-- src/screens/Home.js | 10 ++-- src/screens/{Invite => }/Invite.js | 46 +++-------------- src/screens/Login.js | 16 ++---- src/screens/Register.js | 49 +++++++------------ src/screens/{Schedule => }/Schedule.js | 23 ++++----- src/screens/index.js | 7 +++ .../Availability.less | 0 src/screens/{Invite => styles}/Invite.less | 0 .../{Schedule => styles}/Schedule.less | 0 src/screens/styles/layout.less | 15 ++++++ 21 files changed, 97 insertions(+), 142 deletions(-) rename src/components/{Interval => }/IntervalSelector.js (99%) rename src/components/{Routes => }/PrivateRoute.js (86%) rename src/components/{General => }/TimezonePicker.js (84%) rename src/components/{General => }/Title.js (100%) create mode 100644 src/components/index.js rename src/screens/{Availability => }/Availability.js (88%) rename src/screens/{Invite => }/Invite.js (73%) rename src/screens/{Schedule => }/Schedule.js (90%) create mode 100644 src/screens/index.js rename src/screens/{Availability => styles}/Availability.less (100%) rename src/screens/{Invite => styles}/Invite.less (100%) rename src/screens/{Schedule => styles}/Schedule.less (100%) create mode 100644 src/screens/styles/layout.less diff --git a/src/App.js b/src/App.js index 2bdc93c..a524098 100644 --- a/src/App.js +++ b/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')); diff --git a/src/components/Interval/IntervalSelector.js b/src/components/IntervalSelector.js similarity index 99% rename from src/components/Interval/IntervalSelector.js rename to src/components/IntervalSelector.js index e9c8a70..79726de 100644 --- a/src/components/Interval/IntervalSelector.js +++ b/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; diff --git a/src/components/Navbar/NavBar.js b/src/components/Navbar/NavBar.js index b39b792..a4f3d93 100644 --- a/src/components/Navbar/NavBar.js +++ b/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 ( diff --git a/src/components/Routes/PrivateRoute.js b/src/components/PrivateRoute.js similarity index 86% rename from src/components/Routes/PrivateRoute.js rename to src/components/PrivateRoute.js index 3298d08..c4155bb 100644 --- a/src/components/Routes/PrivateRoute.js +++ b/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(); diff --git a/src/components/Schedule/DurationSelector.js b/src/components/Schedule/DurationSelector.js index 42c4739..2814136 100644 --- a/src/components/Schedule/DurationSelector.js +++ b/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() { diff --git a/src/components/Schedule/SelectedDates.js b/src/components/Schedule/SelectedDates.js index 10f153b..daa5560 100644 --- a/src/components/Schedule/SelectedDates.js +++ b/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 }) { diff --git a/src/components/General/TimezonePicker.js b/src/components/TimezonePicker.js similarity index 84% rename from src/components/General/TimezonePicker.js rename to src/components/TimezonePicker.js index 8ed1d87..fc3163b 100644 --- a/src/components/General/TimezonePicker.js +++ b/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() { - +
@@ -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 = [ { diff --git a/src/screens/Dashboard.js b/src/screens/Dashboard.js index 777700f..bb0e4d8 100644 --- a/src/screens/Dashboard.js +++ b/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 ( <> - Dashboard} bordered style={boxStyle}> + Dashboard} bordered >

This is just experimenting with stuff.

{authToken}

 diff --git a/src/screens/Home.js b/src/screens/Home.js index 7263252..e780e93 100644 --- a/src/screens/Home.js +++ b/src/screens/Home.js @@ -2,21 +2,17 @@ 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 ( <> - Home} bordered style={boxStyle}> + Home} bordered >

This will be the home page

{authToken}

 ); -} +} \ No newline at end of file diff --git a/src/screens/Invite/Invite.js b/src/screens/Invite.js similarity index 73% rename from src/screens/Invite/Invite.js rename to src/screens/Invite.js index 2504c1c..8bc0b0d 100644 --- a/src/screens/Invite/Invite.js +++ b/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 ( <> - +
{history.push('availability');}} + onClick={() => { + history.push('availability'); + }} > Add your availability @@ -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', -// }, -// ]; diff --git a/src/screens/Login.js b/src/screens/Login.js index 99de3ff..0d850f4 100644 --- a/src/screens/Login.js +++ b/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 ( <> - + {error && } @@ -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', -}; diff --git a/src/screens/Register.js b/src/screens/Register.js index 244dcdb..4a9ff70 100644 --- a/src/screens/Register.js +++ b/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 ( <> - + - Username - + Username + - Email - + Email + Timezone @@ -42,16 +32,13 @@ export default function Register() { Password - + Minimum password length is 8 characters - diff --git a/src/screens/Schedule/Schedule.js b/src/screens/Schedule.js similarity index 90% rename from src/screens/Schedule/Schedule.js rename to src/screens/Schedule.js index 31ea981..faced2d 100644 --- a/src/screens/Schedule/Schedule.js +++ b/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 ( <> - +
@@ -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)', -}; diff --git a/src/screens/index.js b/src/screens/index.js new file mode 100644 index 0000000..10ebe95 --- /dev/null +++ b/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'; diff --git a/src/screens/Availability/Availability.less b/src/screens/styles/Availability.less similarity index 100% rename from src/screens/Availability/Availability.less rename to src/screens/styles/Availability.less diff --git a/src/screens/Invite/Invite.less b/src/screens/styles/Invite.less similarity index 100% rename from src/screens/Invite/Invite.less rename to src/screens/styles/Invite.less diff --git a/src/screens/Schedule/Schedule.less b/src/screens/styles/Schedule.less similarity index 100% rename from src/screens/Schedule/Schedule.less rename to src/screens/styles/Schedule.less diff --git a/src/screens/styles/layout.less b/src/screens/styles/layout.less new file mode 100644 index 0000000..9ee510f --- /dev/null +++ b/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; +}