Refactor API endpoints into Server Actions

[tednguyendev]

#106 (comment)

What happened 👀

• Add the new actions.tsx file to contains all actions for 4 Server Actions(Create, Update, Delete, Send)
• Modify client code to use Server Actions instead of calling APIs
• Add and modify tests
• Remove all the API codes and tests of 4 actions

Insight 📝

Purpose of PR

As discussed here, this is the PR to refactor all the API code that can be replaced by Next.js Server Actions.

API to Server Actions

It's surprising for me to see that it's very easy to refactor a flow that's using API to using Server Action in Next.js v13.

For example, for this sending newsletter feature, to use Server Action, based on the refactored code here, we just need to:

• Replace the axios call without our server action(the function sendNewsletter in this example)
• Wrap the whole calling server action thing in startTransition(startTransition is 1 of the 3 ways to use Server Action in Nextjs, along with action and formAction)
• Everything else stays the same

Cons

It is easy to use this new Server Action feature, but since this is still a new feature, there are some difficulties I faced while trying it, such as:

• Not very compatible with NextAuth(when try to get user session on server side, NextAuth raise errors), but luckily, there is this work around
• When we run tests, it raises some import errors, resulting in having to do a lot of import mock like this to make it works.
• It also raises errors when running tests if we import server actions from a file that has "use server" to test files. So instead of only having 2 file, actions/newsletter.tsx, I have to create a new actions/actions.tsx file that contains the server actions but not the "use server", and when I need to use the server actions on client components, I use it through this actions/newsletter.tsx(which only to import actions from actions.tsx AND ADD the "use server").

Refs

• This is a very easy to understand introduction about Server Actions: Next.js Server Actions... 5 awesome things you can do

Proof Of Work 📹

N/A

[olivierobert]

Just one minor comment but this looks good.

I am unsure about grouping all actions into the same file (actions.tsx) if the application was larger but the decoupling into a separate directory is a great idea. It looks similar to Redux.