Chen Jian's Java Blog 

In typescript: use Jest mock a function from a module, and reference this mocked function

by Chen Jian

Posted on 2019-07-25 12:00 in Frontend

import * as someModule from "../SomeModule"; test("xxx", ()=>{ const mockedModule = someModule as jest.Mocked < typeof someModule > ; mockedModule.someFunction = jest.fn(); ... //reference the mocked function ...

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

by Chen Jian

Posted on 2019-06-29 12:00 in Frontend

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

Redux + Typescript: The type of the root state

by Chen Jian

Posted on 2019-06-14 12:00 in Frontend

You can get the type of the state from the root reducer // the reducer const appReducer = combineReducers({ global: globalStateReducer, example: exampleReducer }); type AppState = ReturnType<typeof appReducer> However the...

Redux + Typescript: Use class to define Actions

by Chen Jian

Posted on 2019-06-14 12:00 in Frontend

You want the actions to be typed. You should use interface or class. Class is better than interface because in interfaces you cannot define the action "type" as a constant, but in classes you can: class LoadingStartedAction implements...

React Component: A pair of componentDidMount() and componentWillUnmount() may cause infinite loop if error is thrown from render

by Chen Jian

Posted on 2019-04-18 12:00 in Frontend

The following will cause an infinite loop. The render() method will be called again and again. class ToDoItemEditComponentContainer extends React.Component { componentDidMount() { this.props.loadItem(); //load item remotely and...

JSON.stringify() won't work for ES6 Set

by Chen Jian

Posted on 2019-04-17 12:00 in Frontend

It will just return "{}", no matter if the Set is empty. This also means deep clone based on JSON won't work. If JSON.stringify() matters to you, use Array instead of Set

Material-UI: avoid RadioGroup if there are complex elements inside each radio

by Chen Jian

Posted on 2019-03-03 12:00 in Frontend

Just use seperate Radios The problem with RadioGroup with nested elements under Radios is that it messes up with your layout. RadioGroup is a child of FormGroup, which does a lot of styling itself. If you use it, you will lose a lot of freedom...

My practice of fetching data for List/Detail components in React/Redux

by Chen Jian

Posted on 2019-02-17 12:00 in Frontend

The user experience it should have When you go to a detail page from the list page or with a direct URL, the detail page should show the up-to-date data When you go to the list page with a direct URL, the list page should show the...

What happens to the redux store if I refresh the browser?

by Chen Jian

Posted on 2019-01-19 12:00 in Frontend

It will go away, and then be initialised. If you have this question, it means you have no exact idea of the lifespan of client-side state in a browser. First of all, a document is created under current tab of the browser when a url is first...

flexbox's "justify-content:center" doesn't do text-align

by Chen Jian

Posted on 2018-12-15 12:00 in Frontend

It only aligh the "items" to the center axis. Text inside each item is not aligned in center Here is an example provided by w3schools . You can see "1" is not in the center of the pink box.

Load data from backend before rendering a React component - best practice

by Chen Jian

Posted on 2018-12-02 12:00 in Frontend

Where to put the data fetching code? componentWillMount() ? Not any more. It's been deprecated. You have no choice but put it inside componentDidMount() , which is recomendded by React. However ther is a big issue. ...

html5 localStorage pitfalls

by Chen Jian

Posted on 2018-07-11 12:00 in Frontend

It doesn't disappear after window closed It doesn't expire The old standard of it only allow string to be saved. New standard is not like so, but all mainstream browsers still use the old standard.

Why is there white space above the header?

by Chen Jian

Posted on 2018-06-24 12:00 in Frontend

I set no margin or padding at all, but there is white space above the header. <header style="background-color:gray"> <h1>Test margin collapsing</h1> </header> There is no margin in the "header" or...

Ajax in Redux with Thunk - Can't be more weird

by Chen Jian

Posted on 2018-06-22 12:00 in Frontend

How can a ajax call fit into Redux paradigm? State: The state will be updated after ajax call is over. No problem. Reducer: Reducer will change the state when ajax call is over. No problem. Action: Action can be...