Next.js Discord

Discord Forum

Someone can help me with server actions?

Unanswered
Sun bear posted this in #help-forum
Open in Discord
Sun bearOP
Someone can help me with server actions?

Hi there iam a little stuck with server actions, must to say that iam using next 13.5.4 because i dont wnat to rewrte he entire code relationated to supabase and it is just for learning purposes. This is my code... 


 
comment-form.tsx

​

'use client';

import { createReview } from '@/app/helpers/createReview';

import { MediaItem } from 'root/types';

import { SubmitButton } from './submit-fotm-button';

import { useFormState } from 'react-dom';

import toast, { Toaster } from 'react-hot-toast';

type Props = {

  mediaItem: MediaItem;

};

const initialState = {

  message: null

};

export const CommentForm = ({ mediaItem }: Props) => {

  const hanldeCreateReview = createReview.bind(null, mediaItem);

  const \[state, formAction\] = useFormState(hanldeCreateReview, initialState);

  if (state?.message) {

toast.error(state?.message);

  }

  return (

<>

<Toaster />

<form action={formAction}>

<textarea name='review' />

<SubmitButton />

</form>

</>

  );

};


is there any promblem? it gime an extrange error about using 'use client' in submit-button.tsx. It says that i cant using use 'use client' in server code but i pretty sure that i follow the next docs...

2 Replies

Sun bearOP
submit-button.tsx

'use client';

import { Button } from '@nextui-org/react';
import { useFormStatus } from 'react-dom';

export function SubmitButton() {
  const { pending } = useFormStatus();

  return (
    <Button
      type='submit'
      aria-disabled={pending}
      variant='flat'
      color='primary'
    >
      Post Review
    </Button>
  );
}
create-review.tsx

'use server';

import { cookies } from 'next/headers';
import { createServerActionClient } from '@supabase/auth-helpers-nextjs';
import { MediaItem } from 'root/types';
import { redirect } from 'next/navigation';
import { supabaseUpsertToMedia } from './supabaseUpsertToMedia';

export const createReview = async (
  mediaItem: MediaItem,
  prevState: any,
  formdata: FormData
) => {
  const cookieStore = cookies();
  const supabase = createServerActionClient({ cookies: () => cookieStore });

  const {
    data: { session }
  } = await supabase.auth.getSession();

  if (!session) {
    return redirect('/sign-in');
  }

  try {
    const upsertError = await supabaseUpsertToMedia(mediaItem, 'movies');

    if (upsertError) {
      throw new Error('Something went wrong');
    }

    const review = {
      user_id: session?.user.id,
      media_id: mediaItem.id,
      content: formdata.get('review')
    };

    const { error: reviewError } = await supabase
      .from('reviews')
      .insert(review);

    if (reviewError) {
      throw new Error('Something went wrong');
    }
  } catch (err) {
    console.log(err);
    return { message: 'Failed to create' };
  }
};