Table of Contents

Log

2023-03

What I did:

Set up project

What I learned:

configuring project correctly benefits quite a lot in long run
- prettier & eslint
- husky for pre-commit check
- Storybook

2023-04-06

What I did:

Move initialization of RegionPokemonIdRange and sortOptions into pokedexSlice. Removed unnecessary useEffect for initialization in Filter component

I apologize for the confusion earlier. I have reviewed the code again, and I believe the issue is related to the fact that the useEffect hook is running after the initial render of the component. In this case, since the component is only rendered once, the useEffect hook is triggered once, causing an additional pair of setSortList and setRegionPokemonIdsList actions to be dispatched.

Removed complicated handleChangexxx, and dispatch event directly into onChange property

What I learned:

If we use Redux in our application, then we probably want to design our FE as data oriented. So react component focus on rendering and visual effect, redux slice/state focus on data manipulation.
- Data initialization should not started within React component

2023-04-17

What I did:

Transformed over complicated Pokemon in pokedexSlice to PokemonCard, to save state footprint
Implemented search bar
Implemented framer-motion

What I learned:

javascript fetch() will not leave cache. Hence, I don't need manually clear cache after fetching
To lazy load image, react-lazy-load-image-component is a good way
Standard search bar is quite easy to implement given Github Copilot
Framer-motion is hard to decide and justify. AI cannot replace decision maker (designer are safe, not our developer)

npm i --save-dev @types/react-lazy-load-image-component

2023-05-07

What I did:

Move PokemonCard out out Pokedex feature into component directory.
Move Filter and related state control out of Pokedex feature, so it become a individual slice
- Benefit: more concentrated logic; Pokedex don't need rtk api anymore.
Move api into /service directory, as RTK Query should put all related endpoints together

What I learned:

Storybook is a fantastic tool to drive development cycle.
- We will try out best to containerize small component into pure React component
- A feature component = feature/slice + react component; If create storybook for the feature is too complicated, then there is something wrong

2023-05-17

What I did:

Finished InfoDialog feature: closing & opening

What I learned:

How to use createAsyncThunk in slice
How to properly use RTK Query endpoints in Async Thunk