init optimiztion

components/DataGrid.tsx

@@ -1,3 +1,4 @@
+'use client'
 import UserAction from './UserAction';
 import { toast } from 'react-toastify';
 import EditButtons from './editButtons';
@@ -12,11 +13,10 @@ import { DataGrid, GridRowId, GridRowSpacingParams, gridClasses, GridRenderCellP
 
 interface DataTableProps {
   jobs: CrawledJob[];
-  refershData: () => void;
 }
 
 
-const DataTable = ( {jobs, refershData}:DataTableProps ) => {
+const DataTable = ( {jobs}:DataTableProps ) => {
 
   const [rowId, setRowId] = useState('')
   const [loading, setLoading] = useState<boolean>(false)
@@ -70,7 +70,7 @@ const DataTable = ( {jobs, refershData}:DataTableProps ) => {
       },
 
     ], [rowId])
-
+    // this should be called after the set render, avoiding the limit
       let rows = crawlerjobs.map((crawlerjobs:Job)=>{
         const {id,company,title,type,link,deadline,logo,skills}=crawlerjobs;
         return {
@@ -115,7 +115,6 @@ const DataTable = ( {jobs, refershData}:DataTableProps ) => {
       }
 
       const handleConfirm = async () => {
-        console.log('confirm')
         const res = await fetch ('/api/confirm', {
           method: 'POST',
           headers: { 'Content-Type': 'application/json' },
@@ -154,11 +153,6 @@ const DataTable = ( {jobs, refershData}:DataTableProps ) => {
 
       }
 
-      const handeelRefershData = async () => {
-        refershData()
-        setCrawlerSuccess(false)
-        setKey((prev) => prev + 1)
-      }
 
 
     return ( 
@@ -243,7 +237,6 @@ const DataTable = ( {jobs, refershData}:DataTableProps ) => {
 
             onRowSelectionModelChange={(params) => {
               setSelectedJobs(params)
-              console.log(params)
 
             }}
 
@@ -265,7 +258,6 @@ const DataTable = ( {jobs, refershData}:DataTableProps ) => {
                 <div className="text-4xl text-white self-start">Crawler finished successfully</div>
                 <div  className='self-center flex items-center justify-center '>
                 <button className="button  text-white bg-blue-400 py-3 px-5 rounded-2xl  "
-                onClick={handeelRefershData}
                 >Refresh table</button>
                 </div>
                 <p className='self-end text-xs text-white '>if you have unfinished business you can close the popup and refresh it manually later</p>

components/Header.tsx

@@ -1,3 +1,4 @@
+'use client'
 import Image from "next/image";
 
 const Header = ( ) => {

components/Layout.tsx

@@ -1,6 +1,8 @@
+'use client'
 import Header from "./Header";
 import { useTheme } from 'next-themes'
 
+
 interface LayoutProps {
     children: React.ReactNode;
 }

components/UserAction.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import { toast } from 'react-toastify';
 import { useState, useEffect } from 'react';
 import { green } from '@mui/material/colors';

components/editButtons.tsx

@@ -1,3 +1,4 @@
+'use client'
 import { useState } from 'react';
 import { GridRowId } from '@mui/x-data-grid';
 import { green } from '@mui/material/colors';

pages/api/delete.ts

@@ -4,7 +4,6 @@ import { CrawledJob, PrismaClient } from "@prisma/client";
 
 const prisma = new PrismaClient();
 
-
 export default async function handler(req: NextApiRequest, res: NextApiResponse) {
     if (req.method !== 'POST') {
       return res.status(405).json({ message: 'Method not allowed' });

pages/index.tsx

@@ -6,13 +6,8 @@ import DataTable from '@/components/DataGrid'
 import type { Job } from '@/Database/interface';
 
 
+
 export default function Home( {jobs}:{jobs:CrawledJob[]}) {
-
-  const router = useRouter();
-
-  const refershData = () => {
-    router.replace(router.asPath);
-  }
 
   return (
     <>
@@ -24,7 +19,7 @@ export default function Home( {jobs}:{jobs:CrawledJob[]}) {
     <main className="flex min-h-screen w-full flex-col items-center justify-between p-24">
 
 
-      <DataTable jobs={jobs} refershData={refershData} />
+      <DataTable jobs={jobs} />
 
     </main>
     </>