[client] fix navigation-related errors

Author: Tomasz Opalach

DemoServer/client/src/components/demoDisplay/sidebar/Controls.tsx

@@ -1,8 +1,8 @@
 import * as React from "react";
 import { IconLeft, IconCollapse, IconExpand } from "../../helpers/icons";
-import { Dispatch } from "redux";
 import { connect } from "react-redux";
 import { goToMainPage } from "../../../store/actions/navigation";
+import { DemoThunkDispatch } from "../../../store";
 
 interface DispatchProps {
     goToMainPage: () => void;
@@ -28,7 +28,7 @@ function ControlsComponent(props: Props) {
     </div>;
 }
 
-function mapDispatchToProps(dispatch: Dispatch): DispatchProps {
+function mapDispatchToProps(dispatch: DemoThunkDispatch): DispatchProps {
     return {
         goToMainPage: () => dispatch(goToMainPage())
     };

DemoServer/client/src/components/demoDisplay/sidebar/Heading.tsx

@@ -1,9 +1,9 @@
 import * as React from "react";
 import { connect } from "react-redux";
 import { AppState } from "../../../store/state";
-import { Dispatch } from "redux";
 import { IconLeft } from "../../helpers/icons";
 import { goToMainPage } from "../../../store/actions/navigation";
+import { DemoThunkDispatch } from "../../../store";
 
 interface StateProps {
     title: string;
@@ -34,7 +34,7 @@ function mapStateToProps({ demos }: AppState): StateProps {
     };
 }
 
-function mapDispatchToProps(dispatch: Dispatch): DispatchProps {
+function mapDispatchToProps(dispatch: DemoThunkDispatch): DispatchProps {
     return {
         goToMainPage: () => dispatch(goToMainPage())
     };

DemoServer/client/src/components/home/DemoItem.tsx

@@ -2,15 +2,16 @@ import * as React from "react";
 import * as classNames from "classnames";
 import { DemoWithProgress } from "../../models/demo";
 import { connect } from "react-redux";
-import { Dispatch } from "redux";
 import { goToDemoPage } from "../../store/actions/navigation";
+import { CategorySlug } from "../../models/slugs";
+import { DemoThunkDispatch } from "../../store";
 
 interface DispatchProps {
     goToDemoPage: () => void;
 }
 
 interface OwnProps {
-    category: string;
+    category: CategorySlug;
     demo: DemoWithProgress;
 }
 
@@ -29,7 +30,7 @@ function DemoItemComponent(props: Props) {
     </a>;
 }
 
-function mapDispatchToProps(dispatch: Dispatch, ownProps: OwnProps): DispatchProps {
+function mapDispatchToProps(dispatch: DemoThunkDispatch, ownProps: OwnProps): DispatchProps {
     const { demo, category } = ownProps;
 
     return {

DemoServer/client/src/components/layout/header/index.tsx

@@ -2,11 +2,11 @@ import * as React from "react";
 import * as bsn from "bootstrap.native/dist/bootstrap-native-v4";
 import { SelectDemoDropdown } from "./SelectDemoDropdown";
 import { connect } from "react-redux";
-import { Dispatch } from "redux";
 import { goToMainPage } from "../../../store/actions/navigation";
 import { AppState } from "../../../store/state";
 import { selectIsOnMainPage } from "../../../store/selectors/router";
 import { SettingsMenu } from "./settings/SettingsMenu";
+import { DemoThunkDispatch } from "../../../store";
 
 interface StateProps {
     isOnMainPage: boolean;
@@ -57,7 +57,7 @@ function mapStateToProps({ router }: AppState): StateProps {
     return { isOnMainPage };
 }
 
-function mapDispatchToProps(dispatch: Dispatch): DispatchProps {
+function mapDispatchToProps(dispatch: DemoThunkDispatch): DispatchProps {
     return {
         goToMainPage: () => dispatch(goToMainPage())
     };

DemoServer/client/src/models/demo.ts

@@ -1,7 +1,8 @@
 import { DemoParamsDto } from "./dtos/params";
+import { DemoSlug, CategorySlug } from "./slugs";
 
 export interface Demo {
-    slug: string;
+    slug: DemoSlug;
     title: string;
 }
 
@@ -10,7 +11,7 @@ export interface DemoWithProgress extends Demo {
 }
 
 export interface DemoCategory {
-    slug: string;
+    slug: CategorySlug;
     demos: DemoWithProgress[];
 }
 

DemoServer/client/src/store/actions/actionTypes.ts

@@ -38,3 +38,6 @@ export type SETTINGS_RESET_PROGRESS_DIALOG_SHOW = "SETTINGS_RESET_PROGRESS_DIALO
 export type SETTINGS_RESET_PROGRESS_DIALOG_CLOSE = "SETTINGS_RESET_PROGRESS_DIALOG_CLOSE";
 
 export type SETTINGS_CLEAR_PROGRESS = "SETTINGS_CLEAR_PROGRESS";
+
+export type NAVIGATION_WENT_TO_MAIN_PAGE = "NAVIGATION_WENT_TO_MAIN_PAGE";
+export type NAVIGATION_WENT_TO_DEMO_PAGE = "NAVIGATION_WENT_TO_DEMO_PAGE";

DemoServer/client/src/store/actions/index.ts

@@ -5,6 +5,10 @@ import { DemoAction } from "./demo";
 import { ParametersAction } from "./parameters";
 import { CallHistoryMethodAction } from "connected-react-router";
 import { SettingsAction } from "./settings";
+import { NavigationAction } from "./navigation";
+
+export type Action = ErrorAction
+    | DemoAction | ParametersAction | SettingsAction
+    | NavigationAction | CallHistoryMethodAction;
 
-export type Action = ErrorAction | DemoAction | ParametersAction | SettingsAction | CallHistoryMethodAction;
 export type DemoThunkAction = ThunkAction<void, AppState, null, Action>;

DemoServer/client/src/store/actions/navigation.ts

@@ -1,16 +1,49 @@
 import { push } from "connected-react-router";
+import * as actionTypes from "./actionTypes";
 import { createDemoWithWalkthroughPath } from "../../utils/paths";
 import { DemoSlug, CategorySlug } from "../../models/slugs";
+import { DemoThunkAction } from ".";
+import { DemoThunkDispatch } from "..";
 
-export const goToMainPage = () => push("/");
+interface WentToMainPage {
+    type: actionTypes.NAVIGATION_WENT_TO_MAIN_PAGE;
+}
+
+interface WentToDemoPage {
+    type: actionTypes.NAVIGATION_WENT_TO_DEMO_PAGE;
+    category: string;
+    demo: string;
+}
+
+export type NavigationAction = WentToMainPage | WentToDemoPage;
 
-export function goToDemoPage(category: string, demo: string) {
-    const url = createDemoWithWalkthroughPath({
-        category: category as CategorySlug,
-        demo: demo as DemoSlug
-    });
+const wentToMainPage = (): WentToMainPage => ({
+    type: "NAVIGATION_WENT_TO_MAIN_PAGE"
+});
+
+const wentToDemoPage = (category: CategorySlug, demo: DemoSlug): WentToDemoPage => ({
+    type: "NAVIGATION_WENT_TO_DEMO_PAGE",
+    category,
+    demo
+});
+
+export function goToMainPage(): DemoThunkAction {
+    return (dispatch: DemoThunkDispatch) => {
+        dispatch(push("/"));
+        dispatch(wentToMainPage());
+    };
+}
 
-    return push(url);
+export function goToDemoPage(category: CategorySlug, demo: DemoSlug): DemoThunkAction {
+    return (dispatch: DemoThunkDispatch) => {
+        const url = createDemoWithWalkthroughPath({
+            category,
+            demo
+        });
+    
+        dispatch(push(url));
+        dispatch(wentToDemoPage(category, demo));
+    };
 }
 
 export function goToDemoAssetPage(url: string) {

DemoServer/client/src/store/reducers/demo.ts

@@ -7,6 +7,7 @@ import { DemoEntry, WalkthroughEntry } from "../state/models";
 import { Progress } from "../../utils/localStorage/Progress";
 import { selectIsLastWalkthroughActive } from "../selectors/walkthroughs";
 import { selectDemoVersionInfo } from "../selectors/demos";
+import { NavigationAction } from "../actions/navigation";
 
 const initialState: DemoState = {
     language: "csharp",
@@ -56,7 +57,9 @@ const updateWalkthroughAndProgress = (state: DemoState) => {
     }
 };
 
-export function demoReducer(state: DemoState = initialState, action: DemoAction | LocationChangeAction): DemoState {
+export function demoReducer(state: DemoState = initialState,
+    action: DemoAction | LocationChangeAction | NavigationAction
+): DemoState {
     switch (action.type) {
         case "DEMO_GET_CONTEXT_REQUEST":
             return modifyState(state, s => {
@@ -141,6 +144,19 @@ export function demoReducer(state: DemoState = initialState, action: DemoAction
             return modifyState(state, s => {
                 s.showShareMessage = action.show;
             });
+
+        case "NAVIGATION_WENT_TO_MAIN_PAGE":
+            return modifyState(state, s => {
+                s.demo = null;
+                s.showResultsPanel = false;
+                s.runResults = null;
+            });
+
+        case "NAVIGATION_WENT_TO_DEMO_PAGE":
+            return modifyState(state, s => {
+                s.showResultsPanel = false;
+                s.runResults = null;
+            });
     }
 
     return state;