Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – How to pass a parameter from a "client side" component to a "server side" using react/nextjs?

I need to pass the ‘token’ parameter from the ‘Vendas’ component (client side) to the ‘Home’ component (server side). I’m trying to use cookies, but it’s not working in Chrome when it’s inside an iframe. I’ve already set the cookie to "sameSite: none" and it doesn’t work. The ‘Home’ component when trying to get the cookie, the cookie does not exist.

What possibilities do I have to do this? I’ve tried several ways to use localStorage, but as the Home component is ‘server side’, it doesn’t work.

How can I do this?

‘Vendas’ component

"use client";

import { useRouter } from "next/navigation";
import { jwtDecode } from "jwt-decode";
import { useEffect } from "react";
import Lottie from "lottie-react";
import animationData from "@/animations/spinner.json";
import { setCookie } from "nookies";
interface TokenProps {
  PROFILE: string;
  WORKPLACE_ID: string;
  sub: string;
  exp: number;
}

export default function Vendas({
  searchParams,
}: {
  searchParams: { [key: string]: string | string[] | undefined };
}) {
  const token = searchParams.token;

  const router = useRouter();

  useEffect(() => {
    if (token != undefined && typeof token === "string") {
      const decoded = jwtDecode<TokenProps>(token);
      setCookie(undefined, "token", token, {
        maxAge: 60 * 60 * 1,
        sameSite: "none",
        secure: true,
      });

      if (decoded.PROFILE === "GENERAL") {
        router.push(`/vendas-varejo/geral`);
      } else if (decoded.PROFILE === "SELLER") {
        router.push(`/vendas-varejo/vendedor`);
      } else {
        router.push(`/vendas-varejo/loja`);
      }
    } else {
      throw new Error("Token de acesso não encontrado");
    }
  });
  return (
    <div className="flex h-screen items-center justify-center bg-blue-700">
      <div className="flex h-[70%]">
        <Lottie animationData={animationData} />
      </div>
    </div>
  );
}

‘Home’ component

import { GeneralProps } from "@/@types/vendas-varejo/general";
import { fetcher } from "@/utils/api";
import Body from "./components/Body";
import { jwtDecode } from "jwt-decode";
import { cookies } from "next/headers";

interface TokenProps {
  PROFILE: string;
  WORKPLACE_ID: string;
  sub: string;
  exp: number;
}


export default async function Home() {
  const cookieStore = cookies();
  const token = cookieStore.get("token");
  if (token?.value != undefined && typeof token === "string") {
    const decoded = jwtDecode<TokenProps>(token);
    if (decoded.PROFILE != "GENERAL") {
      throw new Error("Você não tem permissão para acessar esta página");
    }
  }

  async function getData() {
    const data = await fetcher("/retail-sales", {
      token: token?.value,
    });

    return data;
  }

  const data: GeneralProps = await getData();

  return (
    <>
      <h1 className="mx-3 mt-2">
        Última Atualização: {data.lastUpdate}
      </h1>
      <div>
        <Body data={data} token={token?.value} />
      </div>
    </>
  );
}

I’m not a react/nextjs programmer. I’ve already tried using localStorage and I couldn’t because I don’t have the knowledge to do so. I’ve already tried sending via query using router.push, but I don’t think I did it the right way and I also don’t know how to get the parameter received in the ‘HOME’ component.

Tags:

2

Answers


  1. 0

    I’m assuming you’re referring to the Vendas component receiving the ‘token’ parameter through searchParams.

    The ‘Home’ component can utilize the same approach to access these searchParams.

    
    // Assuming the URL is '/home?token=dummytoken'
    export default async function Home({ searchParams }) {
      const token = searchParams.token;
    
      // Rest of your code using the token variable...
    }

    And in client component you should use useSearchParams from next/navigation

    Login or Signup to reply.
  2. 0

    I guess you’re not getting the cookie in the right way. cookieStore.get() returns an object with two elements: name and value. to get the token value, try this:

    const token = cookieStore.get("token")?.value;

    hope this will work.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search