Next.js Discord

Discord Forum

Did i do this the right way?

Answered
In&Out posted this in #help-forum
Open in Discord
In&OutOP
Hey, i have a modal, that is a client component, that has props data which gives it data that is sensitive to modal component (client component), and i put it in server file and i am wondering if i did this the correct way, making sure
Answered by Bengal
Looks alright. Not exactly sure what you're worried about. You take in data: any[] but I don't see you passing through anything in the <AddModal />. Are you worried about that data being exposed to the client?

btw you don't need 'use server' on your page.tsx files
View full answer

19 Replies

In&OutOP
Modal file
"use client";

import { useEffect, useState, Suspense } from "react";
import { motion } from "framer-motion";
import styles from "./css/AddModal.module.css";
import useWatchlistModalStore from "../store/watchlistStore";
import { create } from "../../actions";

type AddModalProps = {
  data: any[];
};

function AddModal() {
  const { stateModal, closeModal } = useWatchlistModalStore();
  const [loading, setLoading] = useState(false);
  const [data, setData] = useState<any[]>([]);

  useEffect(() => {
    if (stateModal) {
      setLoading(true);
      create().then((fetchedData) => {
        setData(fetchedData);
        setLoading(false);
      });
    }
  }, [stateModal]);
rest of code...
main page
"use server";
import {
  Block,
  PageWelcome,
  SummaryTitle,
} from "@/app/(dashboard)/_components/helpers/DashHelpers";
import styles from "./_components/Main.module.css";
import { MainTooltip } from "@/components/utils/MainTooltip";
import AddModal from "./_components/utils/AddModal";
// import useWatchlistModalStore from "./_components/store/watchlistStore";
// import { create } from "./actions";
import ModalWrapper from "./_components/utils/ModalWrapper";

async function page() {
  // const { openModal } = useWatchlistModalStore();
  // const data = await create();

  return (
    <div className={styles.Container}>
      <AddModal />
and actions file
"use server";

export async function create() {
  return [1, 2, 3];
}
Is everything safely done?
Bengal
Looks alright. Not exactly sure what you're worried about. You take in data: any[] but I don't see you passing through anything in the <AddModal />. Are you worried about that data being exposed to the client?

btw you don't need 'use server' on your page.tsx files
Answer
Bengal
I'm not a fan of calling a server action inside a useEffect, can't think of anything inherently wrong with that as it should work fine, just a practice I would avoid
tho that actions file is just a placeholder, it will be used to communicate with db
even tho not much sensitive stuff will be in there, its a precaution
and ik i dont need to put use server, but gotta, for myself lol
@Bengal I'm not a fan of calling a server action inside a useEffect, can't think of anything inherently wrong with that as it should work fine, just a practice I would avoid
In&OutOP
only reason for use effect is to give it a delay, as you can see there is a loading state in there that triggers small animation
  useEffect(() => {
    if (stateModal) {
      setLoading(true);
      const fetchDataWithDelay = async () => {
        await new Promise((resolve) => setTimeout(resolve, 3000));
        const fetchedData = await create();
        setData(fetchedData);
        setLoading(false);
      };
      fetchDataWithDelay();
    }
  }, [stateModal]);
but yeah, thanks
just making sure
i modified the whole script, nothing too big but if you want you can see it