e-zybkin/327/feat add invite popup

frontend/src/components/App/App.jsx

@@ -55,6 +55,7 @@ import {
 	PopupDialog,
 	PopupEditAvatar,
 	PopupAskToRegister,
+	PopupShareCalendar,
 } from '../Popups';
 
 const locales = {
@@ -83,6 +84,7 @@ function App() {
 	const [chosenCalendars, setChosenCalendars] = useState([]);
 	const [editableCalendar, setEditableCalendar] = useState({});
 	const [editableEvent, setEditableEvent] = useState({});
+	const [team, setTeam] = useState([]);
 
 	// Popups
 	const [visiblePopupLogin, setVisiblePopupLogin] = useState(false);
@@ -97,6 +99,8 @@ function App() {
 		useState(false);
 	const [visiblePopupAskToRegister, setVisiblePopupAskToRegister] =
 		useState(false);
+	const [visiblePopupShareCalendar, setVisiblePopupShareCalendar] =
+		useState(false);
 
 	// Helpers
 	const [showMessage, setShowMessage] = useState(false);
@@ -147,6 +151,7 @@ function App() {
 		setCurrentUser({});
 		setAllUserCalendars([]);
 		setAllUserEvents([]);
+		setTeam([]);
 		setChosenCalendars(holidaysCalendar.map((c) => c.id));
 		closeAllPopups();
 
@@ -157,7 +162,9 @@ function App() {
 
 	const handleErrors = useCallback(
 		({ error, res }) => {
-			if (error.code === 'token_not_valid') {
+			console.log({ error, res });
+
+			if (error.code && error.code === 'token_not_valid') {
 				logout();
 				showDialog(ErrorMessage.UNAUTHORIZED, true);
 			} else if (res.status === 401) {
@@ -302,6 +309,7 @@ function App() {
 			setEditableCalendar,
 			editableEvent,
 			setEditableEvent,
+			team,
 		}),
 		[
 			holidays,
@@ -310,6 +318,7 @@ function App() {
 			chosenCalendars,
 			editableCalendar,
 			editableEvent,
+			team,
 		]
 	);
 
@@ -660,6 +669,73 @@ function App() {
 			});
 	};
 
+	const handleShareCalendar = (data) => {
+		const newMate = {
+			email: data.email,
+			infoIcon: 'load',
+		};
+		setTeam([...team, newMate]);
+
+		calendarApi
+			.shareCalendar(data)
+			.then(() => {
+				newMate.infoIcon = 'success';
+
+				const index = team.findIndex((m) => m.email === data.email);
+				if (index !== -1) {
+					team.splice(index, 1);
+				}
+
+				setTeam([...team, newMate]);
+			})
+			.catch((/* { error, res } */) => {
+				newMate.infoIcon = 'denied';
+
+				const index = team.findIndex((m) => m.email === data.email);
+				if (index !== -1) {
+					team.splice(index, 1);
+				}
+
+				setTeam([...team, newMate]);
+				// handleErrors({ error, res });
+			});
+	};
+
+	const handleDeleteMate = ({ id, email }) => {
+		setIsLoading(true);
+		calendarApi
+			.deleteSharedCalendar({ id, email })
+			.then(() => {
+				const index = team.findIndex((m) => m.email === email);
+				if (index !== -1) {
+					team.splice(index, 1);
+				}
+			})
+			.catch(({ err, res }) => {
+				handleErrors({ err, res });
+			})
+			.finally(() => {
+				setIsLoading(false);
+			});
+	};
+
+	const handleShowSharePopup = (id) => {
+		setIsLoading(true);
+		calendarApi
+			.getSharedCalendarById(id)
+			.then((res) => {
+				setTeam(res.users);
+				setVisiblePopupShareCalendar(true);
+			})
+			.catch(({ error, res }) => {
+				console.log({ error, res });
+				handleErrors({ error, res });
+			})
+			.finally(() => {
+				setIsLoading(false);
+			});
+	};
+
 	return (
 		<LocalizationContext.Provider value={localizer}>
 			<CurrentUserContext.Provider value={user}>
@@ -683,6 +759,7 @@ function App() {
 											onEventDoubleClick={setVisiblePopupEditEvent}
 											onNewCalendarClick={setVisiblePopupNewCalendar}
 											onEditCalendarClick={setVisiblePopupEditCalendar}
+											onShareCalendarClick={handleShowSharePopup}
 											onNewEventClickUnauth={setVisiblePopupAskToRegister}
 											onEditEvent={handleEditEvent}
 										/>
@@ -757,6 +834,13 @@ function App() {
 							setIsFormLogin={setIsFormLogin}
 						/>
 
+						<PopupShareCalendar
+							visible={visiblePopupShareCalendar}
+							setVisible={setVisiblePopupShareCalendar}
+							handleShare={handleShareCalendar}
+							handleDeleteMate={handleDeleteMate}
+						/>
+
 						<Toast ref={toast} />
 
 						<PopupDialog

frontend/src/components/BackToTopButton/BackToTopButton.module.css

@@ -4,7 +4,7 @@
 	width: 60px;
 	font-size: 60px;
 	border: none;
-	transition: transform 0.25s linear;
+	transition: transform 0.1s linear;
 	cursor: pointer;
 }
 
@@ -21,7 +21,8 @@
 	top: 92vh;
 	right: 0px;
 	height: 50px;
-	width: 60px;
+	width: 56px;
+	visibility: hidden;
 }
 
 .button:hover {

frontend/src/components/CalendarSelect/CalendarSelect.jsx

@@ -10,7 +10,7 @@ import styles from './CalendarSelect.module.css';
 /* Components */
 import { CalendarBlock } from './CalendarsBlock';
 
-export function CalendarSelect({ onEditCalendarClick }) {
+export function CalendarSelect({ onEditCalendarClick, onShareCalendarClick }) {
 	const { allUserCalendars, setChosenCalendars, setEditableCalendar } =
 		useContext(CalendarsContext);
 
@@ -27,9 +27,13 @@ export function CalendarSelect({ onEditCalendarClick }) {
 		}
 	};
 
-	const handleClick = (calendar) => {
+	const handleClick = (calendar, isEdit) => {
 		setEditableCalendar(calendar);
-		onEditCalendarClick(true);
+		if (isEdit) {
+			onEditCalendarClick(true);
+		} else {
+			onShareCalendarClick(calendar.id);
+		}
 	};
 
 	// TODO: потом сюда добявятся пошаренные календари
@@ -57,4 +61,5 @@ export function CalendarSelect({ onEditCalendarClick }) {
 
 CalendarSelect.propTypes = {
 	onEditCalendarClick: PropTypes.func.isRequired,
+	onShareCalendarClick: PropTypes.func.isRequired,
 };

frontend/src/components/CalendarSelect/CalendarSelect.module.css

@@ -52,7 +52,7 @@
 
 .list {
 	display: grid;
-	grid-template-columns: 16px 1fr 16px;
+	grid-template-columns: 16px 1fr 44px;
 	grid-column-gap: 8px;
 	align-items: start;
 	cursor: pointer;
@@ -107,8 +107,14 @@ label input:checked ~ .checkbox::before {
 	cursor: pointer;
 	padding: 0;
 	transition: all 0.2s ease-out;
+	width: 16px;
+	height: 16px;
 }
 
 .edit:hover {
 	color: var(--surface-200);
 }
+
+.edit:first-child {
+	margin-right: 12px;
+}

frontend/src/components/CalendarSelect/CalendarsBlock.jsx

@@ -48,13 +48,30 @@ export function CalendarBlock(props) {
 							/>
 							<span className={styles.text}>{calendar.name}</span>
 							{editButton && (
-								<button
-									className={styles.edit}
-									type="button"
-									onClick={() => handleClick(calendar)}
-								>
-									<i className="pi pi-pencil" style={{ fontSize: '0.75rem' }} />
-								</button>
+								<div className="flex">
+									<button
+										className={styles.edit}
+										type="button"
+										onClick={() => handleClick(calendar, true)}
+									>
+										<i
+											className="pi pi-pencil"
+											style={{ fontSize: '0.75rem' }}
+										/>
+									</button>
+									<button
+										className={styles.edit}
+										type="button"
+										onClick={() => handleClick(calendar, false)}
+									>
+										<i
+											className={
+												calendar.shared ? 'pi pi-users' : 'pi pi-share-alt'
+											}
+											style={{ fontSize: '0.75rem' }}
+										/>
+									</button>
+								</div>
 							)}
 						</label>
 					))}