Business Requirement:

I have the following requirements for my invoice entity:

1. The Invoice entity has a collection of InvoiceDetail entity.

2. User should be able to append, remove, move up and down InvoiceDetails

3. InvoiceDetail’s order needs to be consistent because they are listed in the printout of the invoice

Other documents such as contract and purchase order would have similar requirements.

The above translate to the below technical requirements:

1. On appending, set InvoiceDetail’s foreign key `InvoiceId` value to its parent Invoice’s id on appending.

2. On appending, set InvoiceDetail’s…


HMR offer many benefits. Here is a quote from the official webpack website:

Hot Module Replacement (HMR) exchanges, adds, or removes modules while an application is running, without a full reload. This can significantly speed up development in a few ways:

If you are here reading this post, I guess that you are using…


If you are here, you must have searched why the TinyMCE editor rendered in Material-Ui Dialog doesn’t work as expected. For example, TinyMCE dialog component fields are not selectable; the…


I love automation, and I hate repeating mindlessly. For data-centric applications, I do not want to handcraft master-detail for every entity repeatedly. So I spent some time designing a module with reusable components that define the look and handle most of the CRUD behaviours. The aim is that for each entity CRUD, I only need to do some configurations specific to the entity.

As a result, I have a few components composed together in four files for each entity. Nrwl/Nx has bundled a set of schematics to generate code, such as generating lib and components. Nx spoils me, and I…


I promised myself I would write a blog post if I could find out why one of my controllers kept receiving null when I clearly sent a matching body in the request to it. And here I am, after 30 or so minutes of trying and experimenting, I found out why: I have a Guid? property, and I send an empty string for it! Dotnet tried to parse the empty string to Guid and failed, so it silently returns null. That is it. There isn’t much to write about at all!

This might be an idiotic mistake on my part…


Today I spent about an hour trying to help one of my friends sign in her account to Microsoft Teams. I cannot believe how bugged is the login process. It…


Ag-Grid is a powerful data table library with tons of features. It requires some learning and doc reading, but I think it is worth it.

This post will share an Ag-Grid wrapper component that will resize columns sizes to fit its container’s width automatically. If its container size changes, it will resize the columns to fit the new width.

The trick is straightforward, it watches its container’s width, and window.resize event and call sizeColumnsToFit from AgGrid’s API within anuseEffect hook.

The component props of this component extend AgGridReactProps so we can use it the same way as we use the…


To use Material-ui dialog component, the official way is to add the dialog component to the component where you would open or close it by setting a open flag to true or false. The problem with this approach is that React will always render the modal. If the user never opens the modal, it is a waste. This is not a problem we should worry about until we have rarely used and expensive modal. For example, a modal uses a hook to get a large list of data and requires some computation. The computation will take place every time, even…


I am relatively new to React, but I found that extending react components are straightforward and amazingly neat and powerful.

Today I made a responsive wrapper button component with hardly any code or logic. It will show a full button on big screens and only show an icon button on a small screen. It accepts all material-ui Button component’s props make its usage the same as a material-ui button.

Here is the code:


React Hook Form(RHF) has a Controller wrapper to help work with external controlled components like material-ui components. So far, I managed to use Controller wrapper element or useController hook to develop my forms without issues, until material-ui/pickers. When I wrap KeyboardDatePicker, all functions work with one annoying warning:

Warning: A component is changing an uncontrolled input to be controlled

Inspired by the comment here, I figured out how to remove the above warning.

The idea is to manage a separate state for the date picker and manually wire it up RHF with useEffect.

  1. Setup a state and wire it up…

Z Ye

.net, Angular, React

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store