Fixed routing for profile, now uses initials from route

HBTGmbH · Apr 29, 2024 · 7ab0e4f · 7ab0e4f
1 parent 6a4cda4
commit 7ab0e4f
Show file tree

Hide file tree

Showing 17 changed files with 112 additions and 142 deletions.
diff --git a/src/OIDCService.ts b/src/OIDCService.ts
@@ -13,7 +13,6 @@ export class OIDCService {
         this.msalInstance = MSALInstance.instance();
         this.msalInstance.accessMsal().handleRedirectPromise()
             .then(tokenResponse => {
-                console.log('Response: ', tokenResponse);
                 if (!tokenResponse) {
                     return;
                 }
@@ -22,7 +21,6 @@ export class OIDCService {
                 }
                 this.msalInstance.accessMsal().setActiveAccount(tokenResponse.account);
                 store.dispatch(CrossCuttingAsyncActionCreator.AsyncLogInUser(tokenResponse) as any);
-                console.log('Login success');
             })
             .catch(error => {
                 console.log('Login error', error);

diff --git a/src/Paths.ts b/src/Paths.ts
@@ -16,17 +16,25 @@ export class Paths {
 
     public static readonly USER_SPECIAL_LOGOUT = '##LOGOUT_USER##';
 
-    public static readonly USER_BASE = CONFIG.APP_PATH + '/app/';
+    public static readonly USER_BASE = CONFIG.APP_PATH + '/app/:initials';
     public static readonly PROFILE_SELECT = CONFIG.APP_PATH + '/profilauswahl';
-    public static readonly USER_HOME = CONFIG.APP_PATH + '/app/home';
-    public static readonly USER_VIEW_PROFILE = CONFIG.APP_PATH + '/app/view/:id';
-    public static readonly USER_PROFILE = CONFIG.APP_PATH + '/app/profile';
-    public static readonly USER_REPORTS = CONFIG.APP_PATH + '/app/reports';
-    public static readonly USER_SEARCH = CONFIG.APP_PATH + '/app/search';
-    public static readonly USER_STATISTICS_CLUSTERINFO = CONFIG.APP_PATH + '/app/statistics/clusterinfo';
-    public static readonly USER_STATISTICS_SKILLS = CONFIG.APP_PATH + '/app/statistics/skills';
+    public static readonly USER_HOME = CONFIG.APP_PATH + '/app/:initials/home';
+    public static readonly USER_VIEW_PROFILE = CONFIG.APP_PATH + '/app/:initials/view/:id';
+    public static readonly USER_PROFILE = CONFIG.APP_PATH + '/app/:initials/profile';
+    public static readonly USER_REPORTS = CONFIG.APP_PATH + '/app/:initials/reports';
+    public static readonly USER_SEARCH = CONFIG.APP_PATH + '/app/:initials/search';
+    public static readonly USER_STATISTICS_CLUSTERINFO = CONFIG.APP_PATH + '/app/:initials/statistics/clusterinfo';
+    public static readonly USER_STATISTICS_SKILLS = CONFIG.APP_PATH + '/app/:initials/statistics/skills';
 
     constructor() {
 
     }
+
+    public static build(path: string, params: Record<string, string>): string {
+        let result = path;
+        for (let key in params) {
+            result = result.replace(`:${key}`, params[key]);
+        }
+        return result;
+    }
 }
diff --git a/src/clients/PowerHttpClient.ts b/src/clients/PowerHttpClient.ts
@@ -61,7 +61,6 @@ export class PowerHttpClient {
      * Override this if you want to change the behavior of request beginning
      */
     beginRequest = () => {
-        //console.log(store.getState().adminReducer.adminPass());
         store.dispatch(CrossCuttingActionCreator.startRequest());
     };
 

diff --git a/src/modules/general/skill/localization-table_module.tsx b/src/modules/general/skill/localization-table_module.tsx
@@ -103,7 +103,6 @@ export class LocalizationTable extends React.Component<LocalizationTableProps, L
     };
 
     private invokeAdd = () => {
-        //console.log(LanguageUtils.getISO639_2LanguageCode(this.state.locale));
         this.props.onLocaleAdd(this.state.locale, this.state.qualifier);
         this.closeDialog();
     };

diff --git a/src/modules/home/dashboard/base-data-dahboard-element_module.tsx b/src/modules/home/dashboard/base-data-dahboard-element_module.tsx
@@ -10,6 +10,7 @@ import {PwrRaisedButton} from '../../general/pwr-raised-button';
 import Edit from '@material-ui/icons/Edit';
 import {ThunkDispatch} from 'redux-thunk';
 import {ProfileServiceClient} from '../../../clients/ProfileServiceClient';
+import {withRouter} from 'react-router-dom';
 
 interface BaseDataDashboardElementProps {
     profilePictureSrc: string;
@@ -19,6 +20,7 @@ interface BaseDataDashboardElementProps {
 
 interface BaseDataDashboardElementLocalProps {
     greeting: string;
+    match?: any; // From react-router
 }
 interface BaseDataDashboardElementDispatch {
     navigateTo(target: string): void;
@@ -42,7 +44,8 @@ class BaseDataDashboardElementModule extends React.Component<BaseDataDashboardEl
     }
 
     private handleEditButtonClick = () => {
-        this.props.navigateTo(Paths.USER_PROFILE);
+        const initials = this.props.match.params.initials;
+        this.props.navigateTo(Paths.build(Paths.USER_PROFILE, {initials}));
     };
 
     render() {
@@ -72,9 +75,11 @@ class BaseDataDashboardElementModule extends React.Component<BaseDataDashboardEl
     }
 }
 
+const WithRouterComponent = withRouter(props => <BaseDataDashboardElementModule {...props}/>);
+
 /**
  * @see BaseDataDashboardElementModule
  * @author nt
  * @since 27.09.2017
  */
-export const BaseDataDashboardElement = connect(BaseDataDashboardElementModule.mapStateToProps, BaseDataDashboardElementModule.mapDispatchToProps)(BaseDataDashboardElementModule);
+export const BaseDataDashboardElement = connect(BaseDataDashboardElementModule.mapStateToProps, BaseDataDashboardElementModule.mapDispatchToProps)(WithRouterComponent);
diff --git a/src/modules/home/power-client_module.tsx b/src/modules/home/power-client_module.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import {PowerToolbar} from './power-toolbar_module';
 import {ProfileLoadingSpinner} from './profile/profile-loading-spinner_module';
-import {Route} from 'react-router-dom';
+import {Route, useParams} from 'react-router-dom';
 import {ViewProfileOverview} from './view/view-profile-overview_module';
 import {ConsultantSkillSearch} from '../general/search/consultant-skill-search_module.';
 import {SkillStatistics} from './statistics/skill-statistics_module';
@@ -10,22 +10,29 @@ import {ConsultantProfile} from './profile/profile_module';
 import {PowerOverview} from './power-overview_module';
 import {Paths} from '../../Paths';
 import {ReportHistory} from './reportHistory/report_history-module';
+import {CrossCuttingAsyncActionCreator} from "../../reducers/crosscutting/CrossCuttingAsyncActionCreator";
+import {useEffect} from "react";
+import {useDispatch} from "react-redux";
 
 
-export class PowerClient extends React.Component<{}, {}> {
-    render() {
-        return <div>
-            <PowerToolbar/>
-            <div style={{marginTop: '70px'}}>
-                <Route path={Paths.USER_HOME} component={PowerOverview}/>
-                <Route path={Paths.USER_PROFILE} component={ConsultantProfile}/>
-                <Route path={Paths.USER_STATISTICS_CLUSTERINFO} component={ClusterResult}/>
-                <Route path={Paths.USER_STATISTICS_SKILLS} component={SkillStatistics}/>
-                <Route path={Paths.USER_SEARCH} component={ConsultantSkillSearch}/>
-                <Route path={Paths.USER_VIEW_PROFILE} component={ViewProfileOverview}/>
-                <Route path={Paths.USER_REPORTS} component={ReportHistory}/>
-            </div>
-            <ProfileLoadingSpinner/>
-        </div>;
-    }
+export const PowerClient = () => {
+    const dispatch = useDispatch();
+    const {initials} = useParams();
+    useEffect(() => {
+        dispatch(CrossCuttingAsyncActionCreator.AsyncLoadProfile(initials));
+    }, [initials])
+
+    return <div>
+        <PowerToolbar/>
+        <div style={{marginTop: '70px'}}>
+            <Route path={Paths.USER_HOME} component={PowerOverview}/>
+            <Route path={Paths.USER_PROFILE} component={ConsultantProfile}/>
+            <Route path={Paths.USER_STATISTICS_CLUSTERINFO} component={ClusterResult}/>
+            <Route path={Paths.USER_STATISTICS_SKILLS} component={SkillStatistics}/>
+            <Route path={Paths.USER_SEARCH} component={ConsultantSkillSearch}/>
+            <Route path={Paths.USER_VIEW_PROFILE} component={ViewProfileOverview}/>
+            <Route path={Paths.USER_REPORTS} component={ReportHistory}/>
+        </div>
+        <ProfileLoadingSpinner/>
+    </div>;
 }
diff --git a/src/modules/home/power-overview_module.tsx b/src/modules/home/power-overview_module.tsx
@@ -19,6 +19,7 @@ import {Paths} from '../../Paths';
 import {PwrRaisedButton} from '../general/pwr-raised-button';
 import Add from '@material-ui/icons/Add';
 import {ThunkDispatch} from 'redux-thunk';
+import {withRouter} from 'react-router-dom';
 
 /**
  * Properties that are managed by react-redux.
@@ -40,7 +41,7 @@ interface PowerOverviewProps {
  * managed by redux.
  */
 interface PowerOverviewLocalProps {
-
+    match?: any; // from react-router
 }
 
 /**
@@ -93,13 +94,6 @@ class PowerOverviewModule extends React.Component<PowerOverviewProps
     }
 
     componentDidMount() {
-        // FIXME@nt get initials from path (Once we are able to restore paths again)
-        // const initials = window.localStorage.getItem(COOKIE_INITIALS_NAME);
-        // if (!this.props.loggedInUser || !initials) {
-        //     this.props.navigateTo(Paths.APP_ROOT);
-        // } else {
-        //     this.props.requestSingleProfile(initials);
-        // }
     }
 
     private setViewDialogOpen(isOpen: boolean) {
@@ -123,6 +117,7 @@ class PowerOverviewModule extends React.Component<PowerOverviewProps
 
 
     render() {
+        const initials = this.props.match.params.initials;
         return (
             <div>
                 <div className="col-md-5 col-md-offset-1">
@@ -166,7 +161,7 @@ class PowerOverviewModule extends React.Component<PowerOverviewProps
                                 </div>
                                 <div className={'col-md-6'}>
                                     <PwrRaisedButton color={'primary'}
-                                                     onClick={() => this.props.navigateTo(Paths.USER_REPORTS)}
+                                                     onClick={() => this.props.navigateTo(Paths.build(Paths.USER_REPORTS, {initials}))}
                                                      icon={<></>} text={PowerLocalize.get('Report.History')}/>
                                 </div>
                                 <div className="row">
@@ -186,9 +181,11 @@ class PowerOverviewModule extends React.Component<PowerOverviewProps
     }
 }
 
+const WithRouterComponent = withRouter(props => <PowerOverviewModule {...props}/>);
+
 /**
  * @see PowerOverviewModule
  * @author nt
  * @since 22.05.2017
  */
-export const PowerOverview = connect(PowerOverviewModule.mapStateToProps, PowerOverviewModule.mapDispatchToProps)(PowerOverviewModule);
+export const PowerOverview = connect(PowerOverviewModule.mapStateToProps, PowerOverviewModule.mapDispatchToProps)(WithRouterComponent);