Skip to content

Commit

Permalink
fix: changed route component to render to prevent unmounting problems
Browse files Browse the repository at this point in the history
  • Loading branch information
@web-mi
web-mi committed Dec 8, 2021
1 parent ec87ea8 commit 94294bb
Show file tree
Hide file tree
Showing 2 changed files with 65 additions and 69 deletions.
29 changes: 19 additions & 10 deletions src/components/app/AuthenticatedApp.tsx
View file
Original file line number Diff line number Diff line change
@@ -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 {
Expand Down Expand Up @@ -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);
Expand All @@ -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);
Expand Down Expand Up @@ -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} />
Expand Down
105 changes: 46 additions & 59 deletions src/components/app/Routing.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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)) {
Expand Down Expand Up @@ -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">
Expand All @@ -85,56 +86,46 @@ 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}
test="test"
render={(componentProps) => (
<route.component
{...componentProps}
{...props}
type={route.type || null}
/>
)
),
[routerConfig.detailRoutes, props]
)}
/>
)
)}

{((hasUserProfileRoutes) => {
if (hasUserProfileRoutes) {
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={
Expand All @@ -152,24 +143,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>
Expand Down

0 comments on commit 94294bb

Please sign in to comment.