Always use interfaces instead

Problems of class:

• Lots of frameworks such as Redux don’t support class instances. They only support plain objects. There are tools that can convert plain objects to class instances, but the point below makes it awkward.
• Given a variable “someType: SomeType” in the code, you don’t know if it is a plain object or a class instance. So you don’t know if you can call its methods, or if it is OK to call plainToClass() to convert it to a class instance.

One way of doing this is to create your own Router class, which extends the one from the framework; and inside this Router class you put in the tracking logic:

class MyRouteComponent extends React.Component<Props, State> {

    constructor(props: Props) {
        super(props);
        this.state = {currentUserRefreshed: false};

        if (isProdEnv()) {
            ReactGA.initialize('UA-GOOGLE-ANAYLTICS-ID');
        }
    }

    trackPage(pageUrl:string) {
        ReactGA.set({page: pageUrl});
        ReactGA.pageview(pageUrl);
    }

    toPageUrl(location: Location) {
        return location.pathname + location.search;
    }

    componentDidMount() {
        this.props.refreshCurrentUser();

        if(isProdEnv() && this.props.location){
            this.trackPage(this.toPageUrl(this.props.location!));
        }
    }

    render() {
        ...
    }
}

window.history.pushState() won’t be recognised by react-router’s observer. So what will happen is that the url of the browser will be changed, but the corresponding component won’t be loaded.

React Router is based on History API, and History.push() will work.

The logic: Show a component only if the user logged in

import React from 'react';
import {connect} from "react-redux";

interface AuthenticatedUserOnlyProps {
    authenticated: boolean
}


function mapStateToProps(state: State) {    
    return {
        authenticated: state.authenticated
    };
}

export function authenticatedUserOnly<T>(WrappedComponent: React.ComponentType<T>) {
    class FinalComponent extends React.Component<AuthenticatedUserOnlyProps > {
        public render() {

            const {authenticated, ...otherProps} = this.props;
            if (authenticated) {
                return <WrappedComponent {...(otherProps as T)}/>
            } else {
                return null;
            }
        }
    };

    return connect(mapStateToProps, null)(FinalComponent);
}

To use it, just

render() {
    const someComponent = authenticatedUserOnly(SomeComponent); 

    return {
        <div>
           {someComponent }
        </div>
    }
}

Problem

When you go to a react component, then go to another, and finally come back, the react component is showing blank, or half-blank.

Investigation

If you inspect the page with the mobile safari inspector , you can see the elements are there, but safari just refuse to show the data on the screen.

In my case, this seems to be related with data reloading when I come back to the component. It reloads the data in its componentDidAmount() then re-render. Safari may not perform well enough to handle this kind of re-rendering.

Fix

A workaround is to not reload the data when you come back to the component. You can do this by checking if the data exists, and only loads the data if not existing.

It comes with a price: when you come back to the component, you are not seeing the data that’s up-to-data. There are a few things you can do to make it up:

• A delayed data re-loading
• Always reload the data 24 hours (e.g.) after last data loading
• Very important: destroy the data if a user logs out to make sure a different user won’t see the first user’s data

import * as someModule from "../SomeModule";



test("xxx", ()=>{
    const mockedModule = someModule as jest.Mocked < typeof someModule  >  ;
    mockedModule.someFunction = jest.fn(); 

    ...
    //reference the mocked function
    expect(mockedModule.someFunction.mock.calls.length).toBe(1);
 
});