From 887db8d0402362fc1ab199f7b10cf88c192d29b6 Mon Sep 17 00:00:00 2001
From: Ricardo Costa <rcosta.ms358@gmail.com>
Date: Mon, 8 Jul 2024 22:38:03 +0100
Subject: [PATCH] Minor Fixes

---
 code/client/dev-dist/sw.js                    |  2 +-
 .../src/ui/components/table/DataTable.tsx     |  4 +-
 code/client/src/ui/pages/search/Search.tsx    | 37 +++++++++++++------
 3 files changed, 29 insertions(+), 14 deletions(-)

diff --git a/code/client/dev-dist/sw.js b/code/client/dev-dist/sw.js
index 3c55ea79..acde9880 100644
--- a/code/client/dev-dist/sw.js
+++ b/code/client/dev-dist/sw.js
@@ -82,7 +82,7 @@ define(['./workbox-b5f7729d'], (function (workbox) { 'use strict';
     "revision": "3ca0b8505b4bec776b69afdba2768812"
   }, {
     "url": "index.html",
-    "revision": "0.hcukrbetkmo"
+    "revision": "0.bh39c7754p"
   }], {});
   workbox.cleanupOutdatedCaches();
   workbox.registerRoute(new workbox.NavigationRoute(workbox.createHandlerBoundToURL("index.html"), {
diff --git a/code/client/src/ui/components/table/DataTable.tsx b/code/client/src/ui/components/table/DataTable.tsx
index 021d781e..bb72bb7d 100644
--- a/code/client/src/ui/components/table/DataTable.tsx
+++ b/code/client/src/ui/components/table/DataTable.tsx
@@ -2,6 +2,7 @@ import { ReactNode, useState } from 'react';
 import { Checkbox } from '@mui/material';
 import { GoSortAsc, GoSortDesc } from 'react-icons/go';
 import './DataTable.scss';
+import { useAuth } from '@/contexts/auth/useAuth';
 
 type DataTableProps = {
   columns: string[];
@@ -25,6 +26,7 @@ function DataTable({
   const [selectedAll, setSelectedAll] = useState(false);
   const [sortColumn, setSortColumn] = useState('');
   const [ascending, setAscending] = useState(true);
+  const { isLoggedIn } = useAuth();
 
   function onSelectAllRows() {
     setSelectedAll(!selectedAll);
@@ -33,7 +35,7 @@ function DataTable({
 
   return (
     <div className="table">
-      {hasSelected ? deleteButton : createButton}
+      {isLoggedIn && (hasSelected ? deleteButton : createButton)}
       <div className="table-content">
         <div className="table-header">
           <Checkbox checked={selectedAll} onChange={onSelectAllRows} />
diff --git a/code/client/src/ui/pages/search/Search.tsx b/code/client/src/ui/pages/search/Search.tsx
index 89fa3d2b..991c2c9e 100644
--- a/code/client/src/ui/pages/search/Search.tsx
+++ b/code/client/src/ui/pages/search/Search.tsx
@@ -3,8 +3,9 @@ import { WorkspaceMeta } from '@notespace/shared/src/workspace/types/workspace';
 import { useEffect, useState } from 'react';
 import { useQueryParams } from '@/utils/utils';
 import useWorkspaceService from '@services/workspace/useWorkspaceService';
-import './Search.scss';
 import { FaArrowLeft, FaArrowRight } from 'react-icons/fa6';
+import useLoading from '@ui/hooks/useLoading';
+import './Search.scss';
 
 const PAGE_SIZE = 10;
 
@@ -12,29 +13,41 @@ function Search() {
   const [results, setResults] = useState<WorkspaceMeta[]>([]);
   const [page, setPage] = useState(0);
   const { query } = useQueryParams();
+  const { spinner, startLoading, stopLoading, loading } = useLoading();
   const service = useWorkspaceService();
 
   useEffect(() => {
     async function searchWorkspaces() {
+      startLoading();
       const results = await service.searchWorkspaces(query, page * PAGE_SIZE, PAGE_SIZE);
       setResults(results);
+      stopLoading();
     }
     searchWorkspaces();
-  }, [page, query, service]);
+  }, [page, query, service, startLoading, stopLoading]);
 
   return (
     <div className="search">
-      <h2>Search results for "{query}"</h2>
-      {results.length > 0 ? (
-        results.map(workspace => (
-          <div className="workspace">
-            <Link key={workspace.id} to={`/workspace/${workspace.id}`}>
-              {workspace.name}
-            </Link>
-          </div>
-        ))
+      {loading ? (
+        <>
+          <h2>Searching...</h2>
+          {spinner}
+        </>
       ) : (
-        <p>No results found</p>
+        <>
+          <h2>Search results for "{query}"</h2>
+          {results.length > 0 ? (
+            results.map(workspace => (
+              <div className="workspace">
+                <Link key={workspace.id} to={`/workspaces/${workspace.id}`}>
+                  {workspace.name}
+                </Link>
+              </div>
+            ))
+          ) : (
+            <p>No results found</p>
+          )}
+        </>
       )}
       <div className="pagination">
         <button onClick={() => setPage(page - 1)} disabled={page === 0}>