Next.js Discord

Discord Forum

I am not using "use client"

Answered
Elm sawfly posted this in #help-forum
Open in Discord
Elm sawflyOP
           <form action={() => removeQuote(quote.id)} className='text-end'>
                  <Button variant={"destructive"}>Remove</Button>
            </form>
Answered by Ray
ok try this
 const removeQuote = async (data: FormData) => {
    "use server";
    const id = data.get("id")
    const remove = await xata.db.UserQuotes.delete(String(id));
    console.log(remove);
}

...

<form action={removeQuote} className='text-end'>
    <input type="hidden" name="id" value={quote.id} />
    <Button variant={"destructive"}>Remove</Button>
</form>
View full answer

46 Replies

Elm sawflyOP
    const removeQuote = async (id: string) => {
        "use server";

        const remove = await xata.db.UserQuotes.delete(id);
        console.log(remove);
    }
Can we use server components like this?
@Ray could you show the full code?
Elm sawflyOP
import React from 'react'
import { Button } from './ui/button'
import { Quote } from 'lucide-react';
import { currentUser } from '@clerk/nextjs'
import { getXataClient } from '@/src/xata'

const xata = getXataClient();

export default async function WrittenQuotes() {
    const user = await currentUser();

    const quotes = await xata.db.UserQuotes.filter({
        user_id: String(user?.id)
    }).getAll();

    const removeQuote = async (id: string) => {
        "use server";

        const remove = await xata.db.UserQuotes.delete(id);
        console.log(remove);
    }

    return (
        <div className='ml-auto md:w-[50%] w-full'>
            <div className='flex flex-col space-y-5'>

                <h3 className='text-xl font-semibold'>Quotes Written By You!</h3>

                <div className='grid space-y-5 grid-cols-1'>
                    {quotes.map(quote => (
                        <div key={quote.id} className="w-full p-6 bg-white border border-gray-200 rounded-lg shadow dark:bg-gray-800 dark:border-gray-700">

                            <Quote className='mb-3' />
                            <h5 className="mb-2 text-2xl font-semibold tracking-tight text-gray-900 dark:text-white">{quote.quote_title}</h5>

                            <p className="mb-3 font-normal text-gray-500 dark:text-gray-400">{quote.quote_content}</p>

                            <form action={() => removeQuote(quote.id)} className='text-end'>
                                <Button variant={"destructive"}>Remove</Button>
                            </form>
                        </div>
                    ))}
                </div>

            </div>
        </div>
    )
}
I am just trying diff things
To explore
Ray
ok try this
 const removeQuote = async (data: FormData) => {
    "use server";
    const id = data.get("id")
    const remove = await xata.db.UserQuotes.delete(String(id));
    console.log(remove);
}

...

<form action={removeQuote} className='text-end'>
    <input type="hidden" name="id" value={quote.id} />
    <Button variant={"destructive"}>Remove</Button>
</form>
Answer
Ray
oh wait
Elm sawflyOP
Ok
but a hidden input field works too
if the id is something you are fine with exposing on the client
Elm sawflyOP
trying trying
just give me a min
@Ray ok try this
Elm sawflyOP
Worked
U guys are a gems
Ray
const removeQuote = async (id: string) => {
  "use server";

  const remove = await xata.db.UserQuotes.delete(id);
  console.log(remove);
}

...

<form action={removeQuote.bind(null, quote.id)} className='text-end'>
  <Button variant={"destructive"}>Remove</Button>
</form>

this use bind
Elm sawflyOP
Tysmm
Ok
Ray
both should work
Elm sawflyOP
Tell me one thing more
How to revalidate the data on UI?
anything like refresh?
after performing this
Ray
revaliatePath("/currentPath")
in the server action
Elm sawflyOP
Ok
@Ray `revaliatePath("/currentPath")`
Elm sawflyOP
:salute_sirji: I salute u from the bottom of my heart
Amazing person :CB_ginger_love:
@RayCan i bother u with one more question?
Ray
sure
Elm sawflyOP
Thx
when someone adds a quote using server action
I want to show toast
By using shadcn toast
I tried using return but didn't worked
    const addQuote = async (e: FormData) => {
        "use server";

        const quote_title = e.get("quote_title") as string;
        const quote_content = e.get("quote_content") as string;

        const createQuote = await xata.db.UserQuotes.create({
            user_id: user?.id,
            quote_content,
            quote_title
        });

        console.log(createQuote);
    }
Any way to show that toast by using server functions
?
Ray
you need to turn the form to client component
Elm sawflyOP
:sadge: Ohh
ik how to do in client
I was thinking to do make it in server component only
Ray
and change the action to this
<form action={(data) => {
  await addQuote(data)
  toast.success("added")
}} />
Elm sawflyOP
Okie
Thx
@Elm sawfly <:sadge:823189145358827631> Ohh ik how to do in client I was thinking to do make it in server component only
Ray
you will need to use client component if you want to display a toast after the action
@Ray you will need to use client component if you want to display a toast after the action
Elm sawflyOP
ya
i was thinking if there is any way to do that using server actions
But np
I wont change that in the last moment
Doing this for a hackathon
Will just redirect the user to that path
Tysm buddy
You really helped me a lot
Ray
np