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:
Retain application state which is lost during a full reload.
Save valuable development time by only updating what’s changed.
Instantly update the browser when modifications are made to CSS/JS in the source code, which is almost comparable to changing styles directly in the browser’s dev tools.
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 an
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
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
Button component’s props make its usage the same as a material-ui button.
Here is the code:
This example shows how we can wrap two similar components into one and cherry-pick props for each of them. This could be controversial to some, i.e…
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
.net, Angular, React