From 5d2330e87877d692b7d70c6fe1271a53a08d4bd9 Mon Sep 17 00:00:00 2001
From: Marc Itzenthaler <itzenthaler@web-mi.de>
Date: Tue, 7 Dec 2021 14:38:06 +0000
Subject: [PATCH] fix: changed route component to render to prevent unmounting
 problems

---
 src/components/app/AuthenticatedApp.tsx |  29 ++++---
 src/components/app/Routing.tsx          | 104 ++++++++++--------------
 2 files changed, 64 insertions(+), 69 deletions(-)

diff --git a/src/components/app/AuthenticatedApp.tsx b/src/components/app/AuthenticatedApp.tsx
index e36f71e40..be7da6f56 100644
--- a/src/components/app/AuthenticatedApp.tsx
+++ b/src/components/app/AuthenticatedApp.tsx
@@ -1,5 +1,11 @@
 import * as React from 'react';
-import { ComponentType, useContext, useEffect, useState } from 'react';
+import {
+	ComponentType,
+	useCallback,
+	useContext,
+	useEffect,
+	useState
+} from 'react';
 import { Routing } from './Routing';
 import { config } from '../../resources/scripts/config';
 import {
@@ -35,7 +41,11 @@ interface AuthenticatedAppProps {
 	legalComponent: ComponentType<LegalInformationLinksProps>;
 }
 
-export const AuthenticatedApp = (props: AuthenticatedAppProps) => {
+export const AuthenticatedApp = ({
+	onLogout,
+	onAppReady,
+	legalComponent
+}: AuthenticatedAppProps) => {
 	const { setConsultingTypes } = useContext(ConsultingTypesContext);
 	const { setAuthData } = useContext(AuthDataContext);
 	const [authDataRequested, setAuthDataRequested] = useState<boolean>(false);
@@ -44,6 +54,7 @@ export const AuthenticatedApp = (props: AuthenticatedAppProps) => {
 	const [userDataRequested, setUserDataRequested] = useState<boolean>(false);
 	const { notifications } = useContext(NotificationsContext);
 	const { sessionsData } = useContext(SessionsDataContext);
+	const sessionId = sessionsData?.mySessions?.[0]?.session?.id;
 
 	if (!authDataRequested) {
 		setAuthDataRequested(true);
@@ -78,27 +89,25 @@ export const AuthenticatedApp = (props: AuthenticatedAppProps) => {
 	}
 
 	useEffect(() => {
-		props.onAppReady();
+		onAppReady();
 	}, [appReady]); // eslint-disable-line react-hooks/exhaustive-deps
 
-	const handleLogout = () => {
+	const handleLogout = useCallback(() => {
 		if (hasUserAuthority(AUTHORITIES.ANONYMOUS_DEFAULT, userData)) {
-			apiFinishAnonymousConversation(
-				sessionsData?.mySessions[0].session.id
-			).catch((error) => {
+			apiFinishAnonymousConversation(sessionId).catch((error) => {
 				console.error(error);
 			});
 		}
-		props.onLogout();
+		onLogout();
 		logout();
-	};
+	}, [onLogout, sessionId, userData]);
 
 	if (appReady) {
 		return (
 			<>
 				<Routing
 					logout={handleLogout}
-					legalComponent={props.legalComponent}
+					legalComponent={legalComponent}
 				/>
 				{notifications && (
 					<Notifications notifications={notifications} />
diff --git a/src/components/app/Routing.tsx b/src/components/app/Routing.tsx
index 933ed3edb..c287fbe12 100644
--- a/src/components/app/Routing.tsx
+++ b/src/components/app/Routing.tsx
@@ -31,6 +31,8 @@ interface routingProps {
 export const Routing = (props: routingProps) => {
 	const { userData } = useContext(UserDataContext);
 	const { sessionsData } = useContext(SessionsDataContext);
+	const sessionGroupId = sessionsData?.mySessions?.[0]?.session?.groupId;
+	const sessionId = sessionsData?.mySessions?.[0]?.session?.id;
 
 	const routerConfig = useMemo(() => {
 		if (hasUserAuthority(AUTHORITIES.VIEW_ALL_PEER_SESSIONS, userData)) {
@@ -66,14 +68,13 @@ export const Routing = (props: routingProps) => {
 	// Redirect anonymous live chat users to their one and only session
 	useEffect(() => {
 		if (hasUserAuthority(AUTHORITIES.ANONYMOUS_DEFAULT, userData)) {
-			const groupId = sessionsData?.mySessions[0].session.groupId;
-			const id = sessionsData?.mySessions[0].session.id;
-
-			if (groupId && id) {
-				history.push(`/sessions/user/view/${groupId}/${id}`);
+			if (sessionGroupId && sessionId) {
+				history.push(
+					`/sessions/user/view/${sessionGroupId}/${sessionId}`
+				);
 			}
 		}
-	}, [sessionsData, userData]);
+	}, [sessionGroupId, sessionId, userData]);
 
 	return (
 		<div className="app__wrapper">
@@ -85,40 +86,32 @@ export const Routing = (props: routingProps) => {
 			<section className="contentWrapper">
 				<Header />
 				<div className="contentWrapper__list">
-					{useMemo(
-						() =>
-							routerConfig.listRoutes.map(
-								(route: any, index: any): JSX.Element => (
-									<Route
-										key={index}
-										path={route.path}
-										component={SessionsListWrapper}
-									/>
-								)
-							),
-						[routerConfig.listRoutes]
+					{routerConfig.listRoutes.map(
+						(route: any): JSX.Element => (
+							<Route
+								key={`list-${route.path}`}
+								path={route.path}
+								component={SessionsListWrapper}
+							/>
+						)
 					)}
 				</div>
 				<div className="contentWrapper__detail">
-					{useMemo(
-						() =>
-							routerConfig.detailRoutes.map(
-								(route: any, index: any): JSX.Element => (
-									<Route
-										exact
-										key={index}
-										path={route.path}
-										component={(componentProps) => (
-											<route.component
-												{...componentProps}
-												{...props}
-												type={route.type || null}
-											/>
-										)}
+					{routerConfig.detailRoutes.map(
+						(route: any): JSX.Element => (
+							<Route
+								exact
+								key={`detail-${route.path}`}
+								path={route.path}
+								render={(componentProps) => (
+									<route.component
+										{...componentProps}
+										{...props}
+										type={route.type || null}
 									/>
-								)
-							),
-						[routerConfig.detailRoutes, props]
+								)}
+							/>
+						)
 					)}
 
 					{((hasUserProfileRoutes) => {
@@ -126,15 +119,12 @@ export const Routing = (props: routingProps) => {
 							return (
 								<div className="contentWrapper__userProfile">
 									{routerConfig.userProfileRoutes.map(
-										(
-											route: any,
-											index: any
-										): JSX.Element => (
+										(route: any): JSX.Element => (
 											<Route
 												exact
-												key={index}
+												key={`userProfile-${route.path}`}
 												path={route.path}
-												component={(props) => (
+												render={(props) => (
 													<route.component
 														{...props}
 														type={
@@ -152,24 +142,20 @@ export const Routing = (props: routingProps) => {
 				</div>
 
 				<div className="contentWrapper__profile">
-					{useMemo(
-						() =>
-							routerConfig.profileRoutes?.map(
-								(route: any, index: any): JSX.Element => (
-									<Route
-										exact
-										key={index}
-										path={route.path}
-										component={() => (
-											<route.component
-												{...props}
-												type={route.type || null}
-											/>
-										)}
+					{routerConfig.profileRoutes?.map(
+						(route: any): JSX.Element => (
+							<Route
+								exact
+								key={`profile-${route.path}`}
+								path={route.path}
+								render={() => (
+									<route.component
+										{...props}
+										type={route.type || null}
 									/>
-								)
-							),
-						[routerConfig.profileRoutes, props]
+								)}
+							/>
+						)
 					)}
 				</div>
 			</section>