Next.js Discord

Discord Forum

Understanding server actions

Answered
African Slender-snouted Crocodil… posted this in #help-forum
Open in Discord
African Slender-snouted CrocodileOP
Hi, I have the following concept
{(!notSuperEditor(user?.role) ||
                          item?.userId === user?.uid) &&
                          item?.status === "video_uploaded" && (
                            <Button
                              disabled={loadingPost.includes(
                                item._firestore_id
                              )}
                              className=' duration-200 cursor-pointer button-gradient'
                              onClick={() => {
                                setLoadingPost((prevLoading) => [
                                  ...prevLoading,
                                  item._firestore_id,
                                ]);
                                postVideoToTiktok(
                                  item._firestore_id,
                                  user,
                                  setLoadingPost
                                );
                              }}
                            >
                              <span className='text-white'>
                                {loadingPost.includes(item._firestore_id)
                                  ? "Posting..."
                                  : "Post"}
                              </span>
                            </Button>
                          )}

But I need to call postVideoToTiktok from server-side. I don't wanna make an api endpoint and then make an api call to that. i want to make it easier somehow. can I make an action call, and then instead of button I use an "invisible form" that takes the "predefined" being the params for the function and show to the user only the button is that a good approach or maybe is there a better one?
Answered by LuisLl
Looks good to me, server actions already run inside a transition so I imagine you’re wrapping it in startTrasition to have access to the loading state while the function is running (tho I can’t see you actually using it)
View full answer

2 Replies

African Slender-snouted CrocodileOP
UPDATE: Just found a way using server actions with useTransition, tehnically I can do the following 
const handlePosting = async (video_id: string) => {
    startDownloadingTransition(async () => {
      await postVideoToTiktok(JSON.stringify(user), video_id);
    });
  };
<Button
                      onClick={() => handlePosting(item.video_id)}
                      className='duration-200 cursor-pointer button-gradient step-18'
                      type='submit'
                    >
                      <span className='text-white'>Post</span>
                    </Button>
is this correct?
LuisLl
Looks good to me, server actions already run inside a transition so I imagine you’re wrapping it in startTrasition to have access to the loading state while the function is running (tho I can’t see you actually using it)
Answer