Author Archives: Chen Jian

Enable google analytics with react-router

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() {
        ...
    }
}

My first react HOC + Redux component in Typescript

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>
    }
}

Springfox for 204 response

What you need to,

  • Return ResponseEntity<Void>
  • Set the @ResponseStatus for your rest controller’s method

If you don’t do that, you will get ResponseEntity as the response class in your swagger json, and you will get both 200 and 204 as your successful response code, which is not correct because your method only returns 204, no 200.

    @RequestMapping(value = "...", method = RequestMethod.POST)
    @ApiOperation(value = "...")
    @ApiResponses(value = {
            @ApiResponse(code = 204, message = "success")
    })
    @ResponseStatus(HttpStatus.NO_CONTENT)
    public ResponseEntity<Void> someMethod(){}

IOS Safari showing a blank page when coming back to a React Component

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

Jetty’s start.jar forks a new JVM to run the app if logback module is enabled

Jetty is too smart. If there is any JVM option provided, Jetty will spawn a new JVM instance to do the real work, even if you don’t use “–exec” option in start.ini

And jetty’s logback module introduces a JVM option. See here

You will see:

-Dorg.eclipse.jetty.util.log.class?=org.eclipse.jetty.util.log.Slf4jLog 

So does it matter?

It matters a lot because all the JVM options you passed to start.jar will stay on the process of start.jar. They are not passed to the forked JVM process.

What’s the solution ?

Since you have to let it fork a new JVM because of logback, you can just put all the JVM options in start.ini. Like,


--exec
-server
-Xms2g
-Xmx2g
-XX:+UseZGC


Miscellaneous tips while developing in WSL (Windows Subsystem for Linux)

File change monitoring doesn’t work, such as the auto-refresh of create-react-app

Use the following before your "npm start" or put it on env file:

CHOKIDAR_USEPOLLING=true

And if you are using Intellij, you need to explicitly "ctrl + s" to save the changes on your code files

Integrate beyond compare with git diff

export TMPDIR='/mnt/c/Users/yourName/AppData/Local/Temp'
alias gitdiff='git difftool -y --no-symlinks &'
#In your ~/.gitconfig  , add the following

[diff]
            tool = BCompare
[difftool "BCompare"]
            path = "/mnt/c/Program Files/Beyond Compare 4/BCompare.exe"
            cmd = \"/mnt/c/Program Files/Beyond Compare 4/BCompare.exe\" -expandall \"`echo $LOCAL | sed 's_/mnt/c_C:_'`\" \"`echo $REMOTE | sed 's_/mnt/c_C:_'`\"

To run it,

$ gitdiff

Install terminator

Click here

Change the font family globally in Material-UI 3.x

Some say you should use the jsx-global-plugin like “@global body{fontFamily:’someFont’}” , but it doesn’t work in my project. The global CSS still has the lower CSS speciality than MUI components’ CSS because this global CSS is using a type selector.

You should use a theme instead

//create a theme 

const myTheme = createMuiTheme({
    typography: {
        fontFamily: "Roboto Condensed" 
    }
}


// use the theme

class MyComponent extends React.Component<Props> {

	... 
    render() {
        
            return (
                    <MuiThemeProvider theme={this.props.theme}>
                        <CssBaseline/>
                        <p>Some content</p>
                    </MuiThemeProvider>
                );
        
    }
}



Code snippet: Swagger + Spring Boot

compile 'io.springfox:springfox-swagger2:2.9.2'
compile 'io.springfox:springfox-swagger-ui:2.9.2'
/**
 See https://www.baeldung.com/swagger-2-documentation-for-spring-rest-api
 */
 @Configuration
 @EnableSwagger2
 public class SwaggerConfig {
 @Value("${enable.swagger}")  //You may want to disabled it in PROD
 boolean enableSwagger;
 @Bean
 public Docket api() {
     Docket api = new Docket(DocumentationType.SWAGGER_2)
             .select()
             .apis(RequestHandlerSelectors.basePackage("your.package"))
             .paths(PathSelectors.any())
             .build();
        ApiInfo apiInfo = new ApiInfoBuilder()		
                .version("xxx")
                .description("xxx")
                .termsOfServiceUrl("xxx")
                .title("Xxx Doc")
                .build();

        api.useDefaultResponseMessages(false).apiInfo(apiInfo);

        api.enable(enableSwagger);

        return api;
    }
}