Merge pull request #61 from HBTGmbH/feature/react-migration

Feature/react migration
HBTGmbH · Jan 25, 2024 · c4405d8 · c4405d8
2 parents 39d6b15 + 578b64c
commit c4405d8
Show file tree

Hide file tree

Showing 45 changed files with 1,118 additions and 2,502 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -4,53 +4,48 @@
   "private": true,
   "homepage": "",
   "dependencies": {
+    "@azure/msal-browser": "2.37.0",
     "@date-io/moment": "1.3.13",
     "@material-ui/core": "^4.11.0",
     "@material-ui/icons": "^4.9.1",
     "@material-ui/pickers": "^3.2.10",
     "autosuggest-highlight": "^3.1.1",
     "axios": "0.19.0",
-    "axios-middleware": "^0.3.1",
-    "cogo-toast": "^3.2.1",
+    "@successtar/cogo-toast": "^5.0.6",
     "doop": "2.2.1",
     "es6-promise": "4.2.8",
     "history": "4.10.1",
     "immutable": "3.8.2",
     "isomorphic-fetch": "2.2.1",
     "material-ui-chip-input": "^1.0.0-beta.7",
-    "moment": "^2.29.1",
-    "@azure/msal-browser": "2.37.0",
+    "moment": "^2.29.4",
     "randomcolor": "0.5.4",
-    "react": "^16.14.0",
-    "react-autosuggest": "^9.4.2",
-    "react-dom": "^16.14.0",
+    "react": "^18.2.0",
+    "react-autosuggest": "^10.1.0",
+    "react-dom": "^18.2.0",
     "react-dropzone": "4.2.0",
-    "react-iframe": "^1.3.3",
-    "react-redux": "^7.2.1",
-    "react-router-dom": "^5.2.0",
-    "react-sortable-hoc": "0.6.7",
-    "react-tagcloud": "1.2.0",
-    "recharts": "^1.8.5",
+    "react-redux": "^9.1.0",
+    "react-router-dom": "5.2.0",
+    "react-sortable-hoc": "2.0.0",
+    "react-tagcloud": "2.3.3",
+    "recharts": "2.7.3",
     "redux": "^4.0.5",
-    "redux-thunk": "^2.3.0",
-    "ts-comparator": "^1.1.2",
-    "vis": "^4.21.0"
+    "redux-thunk": "2.3.0",
+    "ts-comparator": "^1.1.2"
   },
   "devDependencies": {
     "@types/isomorphic-fetch": "0.0.34",
     "@types/jest": "20.0.2",
-    "@types/node": "8.0.5",
-    "@types/react": "^16.9.0",
-    "@types/react-dom": "^16.9.0",
+    "@types/node": "^20.11.5",
+    "@types/react": "^18.2.0",
+    "@types/react-dom": "^18.2.0",
     "@types/react-dropzone": "^5.1.0",
-    "@types/react-redux": "^7.1.3",
-    "@types/react-router-dom": "^5.1.6",
     "@types/react-sortable-hoc": "0.6.0",
     "@types/vis": "4.18.2",
     "react-scripts-ts": "2.13.0",
     "redux-devtools-extension": "^2.13.8",
     "source-map-explorer": "^2.0.1",
-    "typescript": "~3.7.2"
+    "typescript": "~5.3.3"
   },
   "scripts": {
     "analyze": "source-map-explorer 'build/static/js/*.js'",

diff --git a/src/Paths.ts b/src/Paths.ts
@@ -11,7 +11,6 @@ export class Paths {
     public static readonly ADMIN_CONSULTANTS = CONFIG.APP_PATH + '/admin/home/consultants';
     public static readonly ADMIN_TEMPLATES = CONFIG.APP_PATH + '/admin/home/templates';
     public static readonly ADMIN_STATISTICS_SKILL = CONFIG.APP_PATH + '/admin/home/statistics/skills';
-    public static readonly ADMIN_STATISTICS_NETWORK = CONFIG.APP_PATH + '/admin/home/statistics/network';
     public static readonly ADMIN_INFO_SKILLTREE = CONFIG.APP_PATH + '/admin/home/info/skilltree';
     public static readonly ADMIN_INFO_NAME_ENTITY = CONFIG.APP_PATH + '/admin/home/info/names';
 
@@ -24,7 +23,6 @@ export class Paths {
     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_NETWORK = CONFIG.APP_PATH + '/app/statistics/network';
     public static readonly USER_STATISTICS_CLUSTERINFO = CONFIG.APP_PATH + '/app/statistics/clusterinfo';
     public static readonly USER_STATISTICS_SKILLS = CONFIG.APP_PATH + '/app/statistics/skills';
 

diff --git a/src/app-wrapper-module.tsx b/src/app-wrapper-module.tsx
@@ -33,8 +33,8 @@ export class AppWrapper extends React.Component<{}, {}> {
         return (
             <MuiPickersUtilsProvider utils={MomentUtils}>
                 <MuiThemeProvider theme={POWER_MUI_THEME}>
-                    <Provider store={store}>
-                        <Router history={PWR_HISTORY}>
+                    <Router history={PWR_HISTORY}>
+                        <Provider store={store}>
                             <div>
                                 <Route exact path={Paths.APP_ROOT} component={LoginModule}/>
                                 <AuthenticatedRoute path={Paths.PROFILE_SELECT} component={ProfileSelect}/>
@@ -43,8 +43,8 @@ export class AppWrapper extends React.Component<{}, {}> {
                                 <ConfirmNavDialog/>
                                 <PwrConfirmDeferredActionDialog/>
                             </div>
-                        </Router>
-                    </Provider>
+                        </Provider>
+                    </Router>
                 </MuiThemeProvider>
             </MuiPickersUtilsProvider>
         );

diff --git a/src/clients/StatisticsServiceClient.ts b/src/clients/StatisticsServiceClient.ts
@@ -1,6 +1,6 @@
 import {PowerHttpClient} from './PowerHttpClient';
 import {AxiosRequestConfig} from 'axios';
-import {APIConsultantClusterInfo, APINetwork, APIProfileSkillMetric, APISkillUsageMetric} from '../model/statistics/ApiMetrics';
+import {APIConsultantClusterInfo, APIProfileSkillMetric, APISkillUsageMetric} from '../model/statistics/ApiMetrics';
 import {APIScatterSkill} from '../model/statistics/ScatterSkill';
 import {APIConsultant} from '../model/APIProfile';
 
@@ -53,16 +53,10 @@ export class StatisticsServiceClient extends PowerHttpClient {
         return this.get(url);
     };
 
-    public getKMedProfileNetwork = (): Promise<APINetwork> => {
-        const url = this.base() + '/statistics/network/kmed';
-        this.beginRequest();
-        return this.get(url);
-    };
-
     public headStatisticsServiceAvailable = () => {
-        const url = this.base() + '/statistics';
+        const url = this.base() + '/statistics/ping';
         this.beginRequest();
-        return this.head(url);
+        return this.get(url);
     };
 
     public getConsultantClusterInfo = (initials: string): Promise<APIConsultantClusterInfo> => {

diff --git a/src/index.tsx b/src/index.tsx
@@ -1,11 +1,12 @@
 import * as React from 'react';
-import * as ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
 
 import './index.css';
 import {ApplicationState, store} from './reducers/reducerIndex';
 import {AppWrapper} from './app-wrapper-module';
 import {storeHasUnsavedChanges} from './utils/PwrStoreUtils';
 import {OIDCService} from './OIDCService';
+import {Provider} from "react-redux";
 
 export function registerPageLeavePrevention() {
     // Prevents navigation
@@ -23,8 +24,7 @@ export function registerPageLeavePrevention() {
 registerPageLeavePrevention();
 // Init OIDC
 OIDCService.instance();
-ReactDOM.render(
-    (<AppWrapper/>),
-    document.getElementById('root')
-);
+const container = document.getElementById('root');
+const root = createRoot(container);
+root.render(<AppWrapper/>);
 
diff --git a/src/model/statistics/ApiMetrics.ts b/src/model/statistics/ApiMetrics.ts
@@ -14,26 +14,6 @@ export interface APIProfileSkillMetric {
     missing: Array<string>;
 }
 
-// == API Network == //
-
-export interface APINode {
-    id: number;
-    initials: string;
-    cluster: number;
-    matchFactor: number;
-}
-
-export interface APIEdge {
-    node1: number;
-    node2: number;
-    strength: number;
-}
-
-export interface APINetwork {
-    nodes: Array<APINode>;
-    edges: Array<APIEdge>;
-}
-
 // == API consultant Info == //
 
 export interface APIAveragedSkill {
@@ -50,4 +30,4 @@ export interface APIConsultantClusterInfo {
     clusterSkills: Array<APIAveragedSkill>;
     commonSkills: Array<string>;
     recommendations: Array<string>;
-}
+}
diff --git a/src/model/statistics/Network.ts b/src/model/statistics/Network.ts
diff --git a/src/model/statistics/NetworkEdge.ts b/src/model/statistics/NetworkEdge.ts
diff --git a/src/model/statistics/NetworkNode.ts b/src/model/statistics/NetworkNode.ts
diff --git a/src/model/statistics/StatisticsStore.ts b/src/model/statistics/StatisticsStore.ts
@@ -2,7 +2,6 @@ import {doop} from 'doop';
 import * as Immutable from 'immutable';
 import {SkillUsageMetric} from './SkillUsageMetric';
 import {ProfileSkillMetrics} from './ProfileSkillMetrics';
-import {Network} from './Network';
 import {ConsultantClusterInfo} from './ConsultantClusterInfo';
 import {ScatterSkill} from './ScatterSkill';
 import {ConsultantInfo} from '../ConsultantInfo';
@@ -29,11 +28,6 @@ export class StatisticsStore {
         return doop<ProfileSkillMetrics, this>();
     };
 
-    @doop
-    public get network() {
-        return doop<Network, this>();
-    };
-
     /**
      * Defines if the service is available or not
      * @returns {Doop<boolean, StatisticsStore>}
@@ -70,7 +64,6 @@ export class StatisticsStore {
     private constructor(skillUsages: Immutable.List<SkillUsageMetric>,
                         relativeSkillUsages: Immutable.List<SkillUsageMetric>,
                         activeProfileMetric: ProfileSkillMetrics,
-                        network: Network,
                         available: boolean,
                         consultantClusterInfo: ConsultantClusterInfo,
                         scatteredSkills: Immutable.List<ScatterSkill>,
@@ -80,7 +73,6 @@ export class StatisticsStore {
         return this.skillUsages(skillUsages)
             .relativeSkillUsages(relativeSkillUsages)
             .activeProfileMetric(activeProfileMetric)
-            .network(network)
             .available(available)
             .consultantClusterInfo(consultantClusterInfo)
             .scatteredSkills(scatteredSkills)
@@ -89,7 +81,7 @@ export class StatisticsStore {
     }
 
     public static createEmpty(): StatisticsStore {
-        return new StatisticsStore(Immutable.List<SkillUsageMetric>(), Immutable.List<SkillUsageMetric>(), null, null,
+        return new StatisticsStore(Immutable.List<SkillUsageMetric>(), Immutable.List<SkillUsageMetric>(), null,
             false, null, Immutable.List<ScatterSkill>(), Immutable.Map<NameEntity, Immutable.List<ConsultantInfo>>(),
             Immutable.Map<string, Immutable.List<ConsultantInfo>>());
     }

diff --git a/src/modules/admin/admin-client_module.tsx b/src/modules/admin/admin-client_module.tsx
@@ -18,7 +18,6 @@ import {NotificationInbox} from './notification/notification-inbox_module';
 import {NotificationTrashbox} from './notification/notification-trashbox_module';
 import {ConsultantGrid} from './consultants/consultant-grid_module';
 import {SkillStatistics} from '../home/statistics/skill-statistics_module';
-import {ProfileNetwork} from './statistics/profile-network_module';
 import {AdminSkillTree2} from './info/tree/admin-skill-tree2_module';
 import {AdminProfileOverview} from './info/admin-profile-overview_module.';
 import {NavigationActionCreator} from '../../reducers/navigation/NavigationActionCreator';
@@ -78,8 +77,6 @@ interface AdminClientDispatch {
 
     navigateToSkillStatistics(): void;
 
-    navigateToNetwork(): void;
-
     logOutAdmin(): void;
 }
 
@@ -114,9 +111,6 @@ class AdminClientModule extends React.Component<AdminClientProps
             },
             logOutAdmin: () => {
                 dispatch(AdminActionCreator.AsyncLogOutAdmin());
-            },
-            navigateToNetwork: () => {
-                dispatch(AdminActionCreator.AsyncNavigateToNetwork());
             }
         };
     }
@@ -238,16 +232,6 @@ class AdminClientModule extends React.Component<AdminClientProps
                                     </ListItemIcon>
                                     <ListItemText primary={PowerLocalize.get('AdminClient.Menu.Statistics.Skills')}/>
                                 </ListItem>
-                                <ListItem
-                                    button
-                                    key="AdminClient.Menu.Statistics.Network"
-                                    onClick={this.props.navigateToNetwork}
-                                >
-                                    <ListItemIcon>
-                                        <Icon className="material-icons">collections</Icon>
-                                    </ListItemIcon>
-                                    <ListItemText primary={PowerLocalize.get('AdminClient.Menu.Statistics.Network')}/>
-                                </ListItem>
                             </List>
                         </Paper>
                     </div>
@@ -257,7 +241,6 @@ class AdminClientModule extends React.Component<AdminClientProps
                         <Route path={Paths.ADMIN_TEMPLATES} component={ReportManager}/>
                         <Route path={Paths.ADMIN_TRASHBOX} component={NotificationTrashbox}/>
                         <Route path={Paths.ADMIN_STATISTICS_SKILL} component={SkillStatistics}/>
-                        <Route path={Paths.ADMIN_STATISTICS_NETWORK} component={ProfileNetwork}/>
                         <Route path={Paths.ADMIN_INFO_SKILLTREE} component={AdminSkillTree2}/>
                         <Route path={Paths.ADMIN_INFO_NAME_ENTITY} component={AdminProfileOverview}/>
                     </div>