#How can I run a function in client component from another client component, when the parent is a RSC

11 messages · Page 1 of 1 (latest)

unborn pebbleBOT
#
Post created!

🔎 This post has been indexed in our web forum and will be seen by search engines so other users can find it outside Discord

      🕵️ Your user profile is private by default and won't be visible to users outside Discord, if you want to be visible in the web forum you can add the "Public Profile" role in <id:customize>

      ✅ You can mark a message as the answer for your post with `Right click -> Apps -> Mark Solution`
      (if you don't see the option, try refreshing Discord with Ctrl + R)
spark obsidian
#

Code for the filtering form:

export const FilterOptionsFormSchema = z
  .object({
    dateRange: z
      .object({
        from: z.number().optional(),
        to: z.number().optional(),
      })
      .optional(),
    ordering: z.enum(["asc", "desc"]).optional(),
    message: z.string().optional(),
    category: z.string().optional(),
  })
  .strict();

type FormSchema = z.infer<typeof FilterOptionsFormSchema>;

export default function FilteringForm({
  categories,
  serverId,
}: {
  categories: string[] | undefined;
  serverId: string;
}) {
  const [filters, setFilters] = useAtom(loggingFiltersAtom);
  const [selectedParticipants, setSelectedParticipants] = useAtom(selectedParticipantsAtom);

  const form = useForm<FormSchema>({
    resolver: zodResolver(FilterOptionsFormSchema),
  });

  const debouncedRequest = useDebounce(() => {
    console.log("Debounced Request Ran!", { ...form.getValues(), participants: selectedParticipants });

    const { dateRange, message, ordering, category } = form.getValues();

    const newFilters: GetLogs = {
      ...filters,
      message: message || undefined,
      participants: selectedParticipants?.length ? selectedParticipants.map((p) => p.id) : undefined,
      categories: category ? [category] : undefined,
      ordering: ordering || undefined,
      // Timestamps in the API are in seconds, not MS!
      startTimestamp: Math.floor((dateRange?.from || 0) / 1000),
      endTimestamp: Math.floor((dateRange?.to || endOfDay(new Date()).getTime()) / 1000),
    };

    if (JSON.stringify(newFilters) !== JSON.stringify(filters)) {
      setFilters(newFilters);
    }
  }, 500);

  const clearFilters = () => {
    // ...
  };

  // ? On selected participants change, submit filters. - NOT WORKING RIGHT NOW - SUBMITS ON PAGE LOAD (BAD)!
  useEffect(() => {
    debouncedRequest();
  }, [debouncedRequest, selectedParticipants]);

  return (
// ... render comp.
#

How can I run a function in client component from another client component, when the parent is a RSC

spark obsidian
#

-bump

tawny chasm
spark obsidian
#

Yeah I actually know that, don't know why I didn't think of that lmao

tawny chasm
#

Usually you would gate the initial run by checking the state for undefinedness, or just a latch ref

#

Also your atom has a default state

#

Also also useHydrateAtoms

spark obsidian
#

Yeah alright, understood.

#

Thanks.