Dynmic routing

"use client"

import { useEffect, useState } from 'react';
import { useRouter, useSearchParams } from 'next/navigation';

import React from 'react';
import { supabase } from '@/app/libs/supabase';


interface User {
  id: number;
  name: string;
  email: string;
}

function User() {
    const router = useRouter();
  const searchParams = useSearchParams();
  const id = searchParams?.get('id');
  const [user, setUser] = useState<User | null>(null);

  useEffect(() => {
   fetchUser()
  }, );

//   if (!user) {
//     return <div>Loading...</div>;
//   }
async function fetchUser() {
    const { data, error } = await supabase.from('profiles').select('*').eq('id', id).single();

    if (data) {
      setUser(data.data);
      console.log(data.data)
    } else if (error) {
      console.error(error);
    }
  }

  if (id) {
    fetchUser();
  }

  return (
    <div>
      <h1>User ID: {id}</h1>
      {/* <p>Name: {user.name}</p>
      <p>Email: {user.email}</p> */}
    </div>
  );
}

export default User;

"use client"

import { useEffect, useState } from 'react';
import { useRouter, useSearchParams } from 'next/navigation';

import React from 'react';
import { supabase } from '@/app/libs/supabase';


interface User {
  id: number;
  name: string;
  email: string;
}

function User() {
    const router = useRouter();
  const searchParams = useSearchParams();
  const id = searchParams?.get('id');
  const [user, setUser] = useState<User | null>(null);

  useEffect(() => {
   fetchUser()
  }, );

//   if (!user) {
//     return <div>Loading...</div>;
//   }
async function fetchUser() {
    const { data, error } = await supabase.from('profiles').select('*').eq('id', id).single();

    if (data) {
      setUser(data.data);
      console.log(data.data)
    } else if (error) {
      console.error(error);
    }
  }

  if (id) {
    fetchUser();
  }

  return (
    <div>
      <h1>User ID: {id}</h1>
      {/* <p>Name: {user.name}</p>
      <p>Email: {user.email}</p> */}
    </div>
  );
}

export default User;