Revert "[pull] develop from Onlineberatung:develop"

src/api/apiGetUserData.ts

@@ -2,15 +2,12 @@ import { endpoints } from '../resources/scripts/endpoints';
 import { UserDataInterface } from '../globalState';
 import { fetchData, FETCH_METHODS } from './fetchData';
 
-export const apiGetUserData = async (
-	responseHandling?: string[]
-): Promise<UserDataInterface> => {
+export const apiGetUserData = async (): Promise<UserDataInterface> => {
 	const url = endpoints.userData;
 
 	return fetchData({
 		url: url,
 		rcValidation: true,
-		responseHandling,
 		method: FETCH_METHODS.GET
 	});
 };

src/api/apiLogoutKeycloak.ts

@@ -1,20 +1,37 @@
 import { endpoints } from '../resources/scripts/endpoints';
 import { getValueFromCookie } from '../components/sessionCookie/accessSessionCookie';
+import {
+	getErrorCaseForStatus,
+	redirectToErrorPage
+} from '../components/error/errorHandling';
 
-export const apiKeycloakLogout = async (): Promise<any> => {
-	const url = endpoints.keycloakLogout;
-	const refreshToken = getValueFromCookie('refreshToken');
-	const data = `client_id=app&grant_type=refresh_token&refresh_token=${refreshToken}`;
+export const apiKeycloakLogout = (): Promise<any> =>
+	new Promise((resolve, reject) => {
+		const url = endpoints.keycloakLogout;
+		const refreshToken = getValueFromCookie('refreshToken');
+		const data = `client_id=app&grant_type=refresh_token&refresh_token=${refreshToken}`;
 
-	return fetch(
-		new Request(url, {
+		const req = new Request(url, {
 			method: 'POST',
 			headers: {
 				'Content-Type': 'application/x-www-form-urlencoded',
 				'cache-control': 'no-cache'
 			},
 			credentials: 'include',
 			body: data
-		})
-	);
-};
+		});
+
+		fetch(req)
+			.then((response) => {
+				if (response.status === 204) {
+					resolve(response);
+				} else {
+					const error = getErrorCaseForStatus(response.status);
+					redirectToErrorPage(error);
+					reject(new Error('keycloakLogout'));
+				}
+			})
+			.catch((error) => {
+				reject(error);
+			});
+	});

src/api/apiStartVideoCall.ts

@@ -1,28 +1,21 @@
 import { endpoints } from '../resources/scripts/endpoints';
-import {
-	fetchData,
-	FETCH_METHODS,
-	FETCH_SUCCESS,
-	FETCH_ERRORS
-} from './fetchData';
+import { fetchData, FETCH_METHODS, FETCH_SUCCESS } from './fetchData';
 
 export const apiStartVideoCall = async (
 	sessionId: number,
-	initiatorDisplayName: string,
-	groupId?: number
+	initiatorDisplayName: string
 ): Promise<{ moderatorVideoCallUrl: string }> => {
 	const url = endpoints.startVideoCall;
 	const videoCallData = JSON.stringify({
 		sessionId: sessionId,
-		groupChatId: groupId,
 		initiatorDisplayName: initiatorDisplayName
 	});
 
 	return fetchData({
 		url: url,
 		method: FETCH_METHODS.POST,
 		bodyData: videoCallData,
-		responseHandling: [FETCH_SUCCESS.CONTENT, FETCH_ERRORS.CATCH_ALL],
+		responseHandling: [FETCH_SUCCESS.CONTENT],
 		rcValidation: true
 	});
 };

src/api/index.ts

@@ -26,7 +26,6 @@ export * from './apiPostAnonymousRegistration';
 export * from './apiPostRegistration';
 export * from './apiPutArchive';
 export * from './apiPutDearchive';
-export * from './apiJoinGroupChat';
 export * from './apiPutGroupChat';
 export * from './apiPatchConsultantData';
 export * from './apiPutConsultantData';

src/components/E2EEncryptionSupportBanner/E2EEncryptionSupportBanner.tsx

@@ -42,11 +42,6 @@ export const E2EEncryptionSupportBanner = () => {
 		}
 	}, [userData, consultingTypes, sessions]);
 
-	useEffect(() => {
-		const fn = showBanner ? 'add' : 'remove';
-		document.body.classList[fn]('banner-open');
-	}, [showBanner]);
-
 	if (!showBanner) {
 		return null;
 	}

src/components/app/AuthenticatedApp.tsx

@@ -4,6 +4,7 @@ import { useCallback, useContext, useEffect, useState } from 'react';
 import { Routing } from './Routing';
 import {
 	UserDataContext,
+	NotificationsContext,
 	hasUserAuthority,
 	AUTHORITIES,
 	ConsultingTypesContext,
@@ -15,6 +16,7 @@ import { apiGetConsultingTypes } from '../../api';
 import { Loading } from './Loading';
 import { handleTokenRefresh } from '../auth/auth';
 import { logout } from '../logout/logout';
+import { Notifications } from '../notifications/Notifications';
 import './authenticatedApp.styles';
 import './navigation.styles';
 import { requestPermissions } from '../../utils/notificationHelpers';
@@ -46,6 +48,7 @@ export const AuthenticatedApp = ({
 	const [appReady, setAppReady] = useState<boolean>(false);
 	const [loading, setLoading] = useState<boolean>(true);
 	const [userDataRequested, setUserDataRequested] = useState<boolean>(false);
+	const { notifications } = useContext(NotificationsContext);
 
 	useEffect(() => {
 		// When the user has a group chat id that means that we need to join the user in the group chat
@@ -121,6 +124,11 @@ export const AuthenticatedApp = ({
 									<RocketChatUserStatusProvider>
 										<E2EEncryptionSupportBanner />
 										<Routing logout={handleLogout} />
+										{notifications && (
+											<Notifications
+												notifications={notifications}
+											/>
+										)}
 									</RocketChatUserStatusProvider>
 								</RocketChatUnreadProvider>
 							</RocketChatSubscriptionsProvider>

src/components/app/app.tsx

@@ -1,7 +1,7 @@
 import '../../polyfill';
 import * as React from 'react';
 import { useHistory } from 'react-router-dom';
-import { ComponentType, useState, lazy, Suspense, useContext } from 'react';
+import { ComponentType, useState, lazy, Suspense } from 'react';
 import {
 	BrowserRouter as Router,
 	Switch,
@@ -22,7 +22,6 @@ import {
 	InformalProvider,
 	LegalLinkInterface,
 	LocaleProvider,
-	NotificationsContext,
 	TenantProvider
 } from '../../globalState';
 import { LegalLinksProvider } from '../../globalState/provider/LegalLinksProvider';
@@ -32,7 +31,6 @@ import { PreConditions, preConditionsMet } from './PreConditions';
 import { Loading } from './Loading';
 import { GlobalComponentContext } from '../../globalState/provider/GlobalComponentContext';
 import { UrlParamsProvider } from '../../globalState/provider/UrlParamsProvider';
-import { Notifications } from '../notifications/Notifications';
 
 const Login = lazy(() =>
 	import('../login/Login').then((m) => ({ default: m.Login }))
@@ -208,20 +206,10 @@ const RouterWrapper = ({ extraRoutes, entryPoint }: RouterWrapperProps) => {
 									}
 								/>
 							</Switch>
-							<NotificationsContainer />
 						</Suspense>
 					</ContextProvider>
 				</Route>
 			</Switch>
 		</Router>
 	);
 };
-
-const NotificationsContainer = () => {
-	const { notifications } = useContext(NotificationsContext);
-	return (
-		notifications.length > 0 && (
-			<Notifications notifications={notifications} />
-		)
-	);
-};

src/components/banUser/BanUser.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { apiPostBanUser } from '../../api/apiPostBanUser';
 import { BUTTON_TYPES } from '../button/Button';
@@ -14,39 +14,15 @@ interface BanUserProps {
 	handleUserBan?: (username: string) => void;
 }
 
-interface BanUserOverlayProps {
-	overlayActive: boolean;
-	userName: string;
-	handleOverlay?: () => void;
-}
-
-export const BanUser: React.VFC<BanUserProps> = ({
+export const BanUser: React.FC<BanUserProps> = ({
 	rcUserId,
 	chatId,
 	userName,
 	handleUserBan
 }) => {
 	const { t: translate } = useTranslation();
-
-	const banUser = () => {
-		apiPostBanUser({ rcUserId, chatId }).then(() => {
-			if (handleUserBan) handleUserBan(userName);
-		});
-	};
-
-	return (
-		<button className="banUser" onClick={banUser}>
-			{translate('banUser.ban.trigger')}
-		</button>
-	);
-};
-
-export const BanUserOverlay: React.VFC<BanUserOverlayProps> = ({
-	overlayActive,
-	userName,
-	handleOverlay
-}) => {
-	const { t: translate } = useTranslation();
+	const [overlayActive, setOverlayActive] = useState(false);
+	const [overlayItem, setOverlayItem] = useState<OverlayItem>();
 
 	const banSuccessOverlay = (userName): OverlayItem => {
 		const compositeText =
@@ -63,21 +39,32 @@ export const BanUserOverlay: React.VFC<BanUserOverlayProps> = ({
 			),
 			buttonSet: [
 				{
-					type: BUTTON_TYPES.PRIMARY,
+					type: BUTTON_TYPES.AUTO_CLOSE,
 					label: translate('banUser.ban.overlay.close')
 				}
 			]
 		};
 	};
 
+	const banUser = () => {
+		apiPostBanUser({ rcUserId, chatId }).then(() => {
+			setOverlayItem(banSuccessOverlay(userName));
+			setOverlayActive(true);
+			if (handleUserBan) handleUserBan(userName);
+		});
+	};
+
 	return (
 		<>
+			<button className="banUser" onClick={banUser}>
+				{translate('banUser.ban.trigger')}
+			</button>
 			{overlayActive && (
 				<Overlay
 					className="banUser__overlay"
-					item={banSuccessOverlay(userName)}
-					handleOverlayClose={handleOverlay}
-					handleOverlay={handleOverlay}
+					item={overlayItem}
+					handleOverlayClose={() => setOverlayActive(false)}
+					handleOverlay={() => setOverlayActive(false)}
 				/>
 			)}
 		</>

src/components/banner/Banner.tsx

@@ -40,7 +40,7 @@ export const Banner = ({
 	const { t: translate } = useTranslation();
 	const getBannersHeight = useCallback(() => {
 		let bannersHeight = 0;
-		const banner = bannerContainer?.children ?? [];
+		const banner = bannerContainer.children;
 		for (let i = 0; i < banner.length; i++) {
 			const style = window.getComputedStyle(banner[i]);
 
@@ -66,7 +66,7 @@ export const Banner = ({
 			element.classList.add(className);
 		}
 		element.classList.add('banner__element');
-		bannerContainer?.appendChild(element);
+		bannerContainer.appendChild(element);
 
 		if (style) {
 			Object.keys(style).forEach((s) => {

src/components/button/Button.tsx

@@ -30,8 +30,7 @@ export interface ButtonItem {
 		| 'yellow'
 		| 'grey'
 		| 'alternate'
-		| 'secondary'
-		| 'transparent';
+		| 'secondary';
 	title?: string;
 	type: string;
 }
@@ -125,20 +124,20 @@ export const Button = (props: ButtonProps) => {
 				title={item.title}
 				aria-label={item.title}
 				className={`
-					button__item
-					${getButtonClassName(item.type)}
+					button__item 
+					${getButtonClassName(item.type)} 
 					${
 						item.type === BUTTON_TYPES.SMALL_ICON
 							? getButtonClassName(item.type) +
 							  '--' +
 							  item.smallIconBackgroundColor
 							: ''
-					}
+					} 
 					${
 						item.type === BUTTON_TYPES.SMALL_ICON && item.label
 							? getButtonClassName(item.type) + '--withLabel'
 							: ''
-					}
+					} 
 					${props.disabled || props.item.disabled ? ' button__item--disabled' : ''}
 				`}
 				data-cy={props.testingAttribute}

src/components/button/button.styles.scss

@@ -287,17 +287,6 @@ $buttonMaxWidth: 400px;
 				}
 			}
 		}
-
-		&--transparent {
-			border-width: 2px;
-			background-color: transparent;
-			border-color: transparent;
-
-			&:hover {
-				background-color: $hover-primary;
-				border-color: $hover-primary;
-			}
-		}
 	}
 
 	&__item--disabled {