hh

Author: gottasellemall69

components/LoadingSpinner.js

@@ -1,4 +1,5 @@
 // @/components/LoadingSpinner.js
+"use client";
 const LoadingSpinner = () => {
   return (
     <div className="z-50 w-24 h-24 backdrop-opacity-0 spinner">

components/Navigation/SideNav.js

@@ -78,7 +78,7 @@ export default function SideNav() {
     };
 
     checkAuth();
-  }, [] );
+  }, [ router ] );
 
   useEffect( () => {
     const currentPath = normalizePath( router.asPath ?? router.pathname ?? "" );

components/Notification.js

@@ -1,3 +1,4 @@
+"use client";
 import React, { useState, useEffect } from 'react';
 import { XMarkIcon } from '@heroicons/react/20/solid';
 
@@ -12,7 +13,7 @@ const Notification = ( { show, setShow, message } ) => {
   return (
     <div
       aria-live="assertive"
-      className={ `pointer-events-none fixed inset-0 flex items-end px-4 py-6 sm:items-start sm:p-6 transition duration-300 ${ show ? 'opacity-100 translate-y-0 sm:translate-x-0' : 'opacity-0 translate-y-2 sm:translate-y-0 sm:translate-x-2' }` }
+      className={ `pointer-events-none relative inset-0 flex items-end px-4 py-6 sm:items-start sm:p-6 transition duration-300 ${ show ? 'opacity-100 translate-y-0 sm:translate-x-0' : 'opacity-0 translate-y-2 sm:translate-y-0 sm:translate-x-2' }` }
     >
       <div className="flex w-full flex-col items-center space-y-4 sm:items-center">
         <div className="pointer-events-auto w-full max-w-sm overflow-hidden rounded-lg bg-white shadow-lg ring-1 ring-black ring-opacity-5">

components/Yugioh/AlphabeticalIndex.js

@@ -1,3 +1,4 @@
+"use client";
 import Link from 'next/link';
 import { useRouter } from 'next/router';
 import { SpeedInsights } from "@vercel/speed-insights/next";

components/Yugioh/Buttons/FiltersButton.js

@@ -1,3 +1,4 @@
+"use client";
 import CardFilter from '@/components/Yugioh/CardFilter.js';
 import { useState } from 'react';
 

components/Yugioh/Card.js

@@ -1,3 +1,4 @@
+"use client";
 import Image from "next/image";
 import Link from 'next/link';
 import { useRouter } from 'next/router';

components/Yugioh/PriceHistoryChart.js

@@ -1,3 +1,4 @@
+"use client";
 import { LineChart, Line, XAxis, YAxis, Tooltip, ResponsiveContainer } from "recharts";
 
 const PriceHistoryChart = ( { selectedVersion, priceHistory } ) => {

components/Yugioh/TableView.js

@@ -1,3 +1,4 @@
+"use client";
 import { useMemo, useState } from 'react';
 import { useRouter } from 'next/router';
 import Notification from '@/components/Notification';
@@ -134,8 +135,8 @@ const TableView = ( { aggregatedData, onDeleteCard, onUpdateCard, handleSortChan
   return (
     <>
 
-      <div class="flex flex-col overflow-x-auto glass">
-        <div class="mx-auto max-w-[90%] bg-none rounded-lg ">
+      <div className="flex flex-col overflow-x-auto glass">
+        <div className="mx-auto max-w-[90%] bg-none rounded-lg ">
 
 
           <table className="responsive-table text-sm text-white">

components/Yugioh/YugiohCardDataTable.js

@@ -28,6 +28,23 @@ const YugiohCardDataTable = ( {
     const [ lastCheckedKey, setLastCheckedKey ] = useState( null );
     const [ notification, setNotification ] = useState( { show: false, message: '' } );
     const [ internalCollection, setInternalCollection ] = useState( {} );
+    const [ isAuthenticated, setIsAuthenticated ] = useState( false );
+
+    useMemo( () => {
+        const checkAuth = async () => {
+            try {
+                const res = await fetch( "/api/auth/validate", {
+                    method: "GET",
+                    credentials: "include",
+                } );
+                setIsAuthenticated( res.ok );
+            } catch {
+                setIsAuthenticated( false );
+            }
+        };
+
+        checkAuth();
+    }, [ router ] );
 
     const cardIndex = useMemo( () => {
         const map = {};
@@ -348,23 +365,18 @@ const YugiohCardDataTable = ( {
     ], [] );
 
     return (
-        <div class="mx-auto bg-none rounded-lg">
-
-
-
-
-            { sortedAndPaginatedData.currentItems.length > 0 && (
+        <div className="mx-auto bg-none rounded-lg">
+            <Notification
+                show={ notification.show }
+                setShow={ ( show ) => setNotification( { ...notification, show } ) }
+                message={ notification.message }
+            />
+            { sortedAndPaginatedData.currentItems.length > 0 && isAuthenticated && (
                 <div className="mx-auto w-full mb-10 min-h-fit">
                     <div>
                         <div className="w-full -mt-5">
-                            <div className="w-fit mx-auto">
-                                <YugiohPagination
-                                    currentPage={ currentPage }
-                                    itemsPerPage={ itemsPerPage }
-                                    totalItems={ sortedAndPaginatedData.totalCount }
-                                    handlePageClick={ setCurrentPage }
-                                />
-                            </div>
+
+
                             <div className="max-h-fit w-full mt-4 flex flex-wrap justify-center gap-3">
                                 <button
                                     type="button"
@@ -389,7 +401,6 @@ const YugiohCardDataTable = ( {
                                 </button>
                             </div>
 
-
                             { selectedKeys.size > 0 && (
                                 <div className="flex flex-wrap items-center justify-between gap-3 border-b border-white/5 px-4 py-3 text-sm text-indigo-100">
                                     <div>
@@ -401,8 +412,15 @@ const YugiohCardDataTable = ( {
                                     </div>
                                 </div>
                             ) }
-
                             <div className="overflow-x-auto">
+                                <div className="w-fit mx-auto">
+                                    <YugiohPagination
+                                        currentPage={ currentPage }
+                                        itemsPerPage={ itemsPerPage }
+                                        totalItems={ sortedAndPaginatedData.totalCount }
+                                        handlePageClick={ setCurrentPage }
+                                    />
+                                </div>
                                 <table className="glass min-w-full text-sm text-white mt-10">
                                     <thead>
                                         <tr className="bg-white/5 text-xs uppercase tracking-wide text-white/80">
@@ -495,11 +513,7 @@ const YugiohCardDataTable = ( {
                             </div>
                         </div>
                     </div>
-                    <Notification
-                        show={ notification.show }
-                        setShow={ ( show ) => setNotification( { ...notification, show } ) }
-                        message={ notification.message }
-                    />
+
                 </div>
             ) }
         </div>

components/Yugioh/YugiohPagination.js

@@ -1,3 +1,4 @@
+"use client";
 import { useEffect, useState } from 'react';
 
 const YugiohPagination = ( { currentPage, itemsPerPage, totalItems, handlePageClick } ) => {