From cfb4a7ad0f9953ba90478cc35e8d41be5a0bf4bf Mon Sep 17 00:00:00 2001 From: rui hildt Date: Fri, 14 Aug 2020 13:54:36 +0200 Subject: [PATCH] Add Invite screen --- src/components/Navbar/MenuDropdown.js | 11 +- src/screens/App.js | 26 +++-- src/screens/Availability/Availability.js | 6 +- src/screens/Invite/Invite.js | 141 +++++++++++++++++++++++ src/screens/Invite/Invite.less | 28 +++++ src/screens/Schedule/Schedule.js | 1 - 6 files changed, 193 insertions(+), 20 deletions(-) create mode 100644 src/screens/Invite/Invite.js create mode 100644 src/screens/Invite/Invite.less diff --git a/src/components/Navbar/MenuDropdown.js b/src/components/Navbar/MenuDropdown.js index 14cc006..5d9baf6 100644 --- a/src/components/Navbar/MenuDropdown.js +++ b/src/components/Navbar/MenuDropdown.js @@ -15,11 +15,14 @@ export default function MenuDropdown() { const MenuPopover = ({ onSelect, ...rest }) => ( - Login - Register Dashboard - Schedule a Meeting - Account Settings + Register + Login + 1 - Schedule a meeting + 2 - Invite participants + 3 - Add your availability + 4 - Confirm meeting date + Settings Log Out diff --git a/src/screens/App.js b/src/screens/App.js index 0c89750..2f6a6d8 100644 --- a/src/screens/App.js +++ b/src/screens/App.js @@ -5,36 +5,42 @@ import { BrowserRouter as Router, Switch, Route } from 'react-router-dom'; import Dashboard from './Dashboard'; import Schedule from './Schedule/Schedule'; import Availability from './Availability/Availability'; +import Invite from './Invite/Invite'; import Login from './Login'; import Register from './Register'; const titles = { schedule: 'Schedule a meeting', - availability: 'Add you availability', + invite: 'Invite participants', + availability: 'Add your availability', + confirm: 'Confirm meeting date', dashboard: 'Dashboard', login: 'Login', - register: 'Registration', - settings: 'Settings' + register: 'Register', + settings: 'Settings', }; export default function App() { return ( - - - - - + + + + + + + + - + - + diff --git a/src/screens/Availability/Availability.js b/src/screens/Availability/Availability.js index ee9a50f..d8d4c9c 100644 --- a/src/screens/Availability/Availability.js +++ b/src/screens/Availability/Availability.js @@ -1,4 +1,4 @@ -import React, { useState, useEffect } from 'react'; +import React, { useState } from 'react'; import { Panel, @@ -20,10 +20,6 @@ import './Availability.less'; export default function Availability({ title }) { const [availability, setAvailability] = useState([...availabilityList]); - useEffect(() => { - console.log(availability); - }, [availability]); - const handleClear = () => { setAvailability([]); }; diff --git a/src/screens/Invite/Invite.js b/src/screens/Invite/Invite.js new file mode 100644 index 0000000..45407cd --- /dev/null +++ b/src/screens/Invite/Invite.js @@ -0,0 +1,141 @@ +import React, { useState, useEffect } 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'; + +export default function Invite({ title }) { + const [participants, setParticipants] = useState([]); + const [contactDropdown, setContactDropdown] = useState([]); + + 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 + // TODO Verify if email is already in the participants + let updatedContactDropdown = [...contactDropdown]; + + if (value.length > 0) { + // Find emails in text input + let emailRegex = /[-.\w]+@([\w-]+\.)+[\w-]+/g; + let emailsRaw = value[value.length - 1].match(emailRegex); + // Remove duplicates from the text input + let emails = [...new Set(emailsRaw)]; + + if (emails && emails.length > 1) { + // Delete input from participants + value.pop(); + emails.forEach((email) => { + // add each email to participants + value.push(email); + + // Create new contact and add it to dropdown + let newContact = { + label: email, + value: email, + // TODO add contact groups here + // see rsuite TagPicker doc + }; + // Add it to the updated dropdown + updatedContactDropdown.push(newContact); + }); + } + // Update dropdown + setContactDropdown(updatedContactDropdown); + } + }; + + const handleChange = (value) => { + setParticipants(value); + }; + + const handleClear = () => { + setContactDropdown([]); + setParticipants([]); + }; + + return ( + <> + + +
+
+ + handleSelect(value)} + onChange={(value) => handleChange(value)} + /> + + + + +
+
+ + + +
+
+ + + ); +} + +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/Invite/Invite.less b/src/screens/Invite/Invite.less new file mode 100644 index 0000000..2c97310 --- /dev/null +++ b/src/screens/Invite/Invite.less @@ -0,0 +1,28 @@ +.av-container { + display: grid; + grid-template-columns: 6fr 3fr; + grid-template-rows: 1fr; + grid-template-areas: + 'selector details'; + + column-gap: 2em; + row-gap: 2em; + grid-column-gap: 2em; + grid-row-gap: 2em; +} + +.av-details { + grid-area: details; + margin: 1em 0 3em 0; +} + +.interval-selector { + grid-area: selector; + margin: 1em 0 3em 0; +} + +// Fix button alignment bug +// TODO Check if still needed +.rs-btn-block + .rs-btn-block { + margin-top: unset; +} \ No newline at end of file diff --git a/src/screens/Schedule/Schedule.js b/src/screens/Schedule/Schedule.js index d25709d..dd26355 100644 --- a/src/screens/Schedule/Schedule.js +++ b/src/screens/Schedule/Schedule.js @@ -65,7 +65,6 @@ export default function Schedule({ title }) { // Add selected event to the list updatedEvents = [...eventsList, selectedEvent]; } - // setEventsList(updatedEvents); } else { // When a range of dates is selected let currentDate = start;