Jiali's blog

Block user issue in React APP

Issue encountered when try to block user if they leave/refresh/close a page

During my work, I was asked to add a feature that pops up a dialogue and asks user if they would like to save their unsaved form as a draft when they are are leaving/refresh/close the page. As I st...

Posted by Jiali on March 8, 2023

Improve Formik performance with MUI

My project needs to render dynamic forms, which could be really big (according to the data in the database). I build them using Formik because it needs complex validation, data mapping, state contr...

Posted by Jiali on January 27, 2023

Year review

What I learned during 2022

I started my first job in 2022 after completeing my CS degree. I had three projects this year. I will roughly review my work in 2022. Warm up My first task is to help with a simple application tha...

Posted by Jiali on January 1, 2023

Encounter cyclic dependency error in Yup

Conditional validation using Yup

When using Yup to construct a schema to do a conditonal validation( either all fields are empty or all of them have values), it throws error: cyclic dependency within a schema. Check Explaination h...

Posted by Jiali on December 7, 2022

Debug

Using VS code

This is a note to record how to debug in VS code Debug node.js To debug in VS code, you need to create launch.json file. In VS Code, you can select Run and Debug on the left (the fourth icon). The...

Posted by Jiali on December 1, 2022

React Table learning note

Learning and customized React Table using MUI

React Table V7 is a powerful package to construct complex tables. I made few examples to implement some features it provides, such as pagination, columnHiding table, sorting, accordion row, subCom...

Posted by Jiali on November 15, 2022

Rest Client User Manual

A detailed guide

REST Client is a handy extension in VS code. Instead of opening Postman to call APIs, it enables you to fire API calls directly from the VS code. The extension is easy to use and is fairly light. I...

Posted by Jiali on November 1, 2022

Redux toolkit query (2)

A study note: Using RTK query in React (2)

Continue Redux toolkit query (1), adding more to the apiSlice to support POST, DELETE. It also includes build.mutation RTK query (2) Mutation // apiSlice.js import { createApi, fetchBaseQuery } ...

Posted by Jiali on August 30, 2022

Redux toolkit query (1)

A study note: Using RTK query in React (1)

This is a study note for an online course for RTK query, lesson 6. RTK Query is a powerful data fetching and caching tool. Other alternatives: Apollo Client, React Query, Urql, and SWR This articl...

Posted by Jiali on August 26, 2022

Redux toolkit query learning memo

A study note memo: Using RTK query in React

This is a study note memo for learning RTK query along with an online course for RTK query, lesson 6. RTK Query is a powerful data fetching and caching tool. Other alternatives: Apollo Client, Rea...

Posted by Jiali on August 25, 2022