Server Actions

import { auth } from '@clerk/nextjs';

export default function AddToCart() {
  async function addItem(formData: FormData) {
    'use server';
    const { userId } = auth();
    if (!userId) {
      throw new Error('You must be signed in to add an item to your cart');
    }
    console.log('add item server action', formData);
  }

  return (
    <form action={addItem}>
      <input
        value={'test'}
        type='text'
        name='name'
      />
      <button type='submit'>Add to Cart</button>
    </form>
  );
}

import { currentUser } from '@clerk/nextjs';

export default function AddHobby() {
  async function addHobby(formData: FormData) {
    'use server';
    const user = await currentUser();

    if (!user) {
      throw new Error('You must be signed in to use this feature');
    }

    const serverData = {
      usersHobby: formData.get("hobby"),
      userId: user.id,
      profileImage: user.profileImageUrl
    };

    console.log('add item server action completed with user details ', serverData);
  }

  return (
    <form action={addHobby}>
      <input
        value={'soccer'}
        type='text'
        name='hobby'
      />
      <button type='submit'>Submit your hobby</button>
    </form>
  );
}

'use server'
import { auth } from '@clerk/nextjs';

export async function addItem(formData: FormData) {
  const { userId } = auth();

  if (!userId) {
    throw new Error('You must be signed in to add an item to your cart');
  }

  console.log('add item server action', formData);
}

import UI from "./UI";
import { addItem } from "./actions"
export default function Hobby() {
  return (
    <UI addItem={addItem} />
  );
}

"use client"

export default function UI({ addItem }) {
  return (
    <form action={addItem}>
      <input
        value={'test'}
        type='text'
        name='name'
      />
      <button type='submit'>Add to Cart</button>
    </form>
  )
}

'use server'
import { currentUser } from "@clerk/nextjs";

export async function addHobby(formData: FormData) {
  const user = await currentUser();

  if (!user) {
    throw new Error('You must be signed in to use this feature');
  }

  const serverData = {
    usersHobby: formData.get("hobby"),
    userId: user.id,
    profileImage: user.profileImageUrl
  };

  console.log('add Hobby completed with user details ', serverData);
}

import UI from "./ui";
import { addHobby } from "./actions"
export default function Hobby() {
  return (
    <UI addHobby={addHobby} />
  );
}

"use client"

export default function UI({ addHobby }) {

  return (
    <form action={addHobby}>
      <input
        value={'soccer'}
        type='text'
        name='hobby'
      />
      <button type='submit'>Submit your hobby</button>
    </form>
  )
}