React tutorial: blog app using easy-peasy

Note: This post is a details-post for the post: Learning web app development through free online tutorials – Organized Notes and Log, https://raviswdev.blogspot.com/2024/03/learning-web-app-development-through.html .

Quick Start tutorial: https://easy-peasy.vercel.app/docs/tutorials/quick-start.html . This quick start tutorial seems to be enough to cover most of the easy peasy usage in the React tutorial. Additional info. needed: helpers and helpers.getState: https://easy-peasy.vercel.app/docs/api/thunk.html

A more detailed tutorial: https://easy-peasy.vercel.app/docs/tutorials/primary-api.html . I have not gone through it as of now. May do so later.

To refactor my code variation to use easy-peasy, I used cawv-1101-blog-useContext folder source code (which uses useContext but does not have DataProvider class) as the base.

I don’t think thunks are required in my code variation as the functions to add, delete and update posts are not shared across components. But just to try things out I moved deletePost function from SinglePost component to the Store as any async thunk.

To fix footer showing 0 blog posts even on fetch error or while posts are loading, I decided to move arePostsLoading to the store. I also added a new postsLoadingError state variable in the store which is set to axiosGetError in App.js with a useEffect. As useAxiosGet is a utility hook, I was not sure whether I should put its state variable in the store.

….

For date formatting, I am trying out Day.js, https://day.js.org/ . Format docs page: https://day.js.org/docs/en/display/format
Tried below code where date-var holds a date. Code works producing Feb 06, 2024 as displayed date.
dayjs(date-var).format(‘MMM DD, YYYY’)

Comments

Post a Comment

Archive