chore: Remove unused dependencies and update cache handling in Search…

…Results component

next.config.mjs

@@ -28,6 +28,22 @@ export default withSentryConfig(
       experimental: {
         serverComponentsExternalPackages: ['@electric-sql/pglite'],
       },
+      devIndicators: {
+        autoPrerender: false, // Disable auto-prerendering
+      },
+      async headers() {
+        return [
+          {
+            source: '/ws',
+            headers: [
+              {
+                key: 'Upgrade',
+                value: 'websocket',
+              },
+            ],
+          },
+        ];
+      },
     }),
   ),
   {
@@ -46,11 +62,8 @@ export default withSentryConfig(
     // Upload a larger set of source maps for prettier stack traces (increases build time)
     widenClientFileUpload: true,
 
-    // Route browser requests to Sentry through a Next.js rewrite to circumvent ad-blockers.
-    // This can increase your server load as well as your hosting bill.
-    // Note: Check that the configured route will not match with your Next.js middleware, otherwise reporting of client-
-    // side errors will fail.
-    tunnelRoute: '/monitoring',
+    // Disable tunnel route for Sentry to avoid WebSocket issues
+    tunnelRoute: false,
 
     // Hides source maps from generated client bundles
     hideSourceMaps: true,

sentry.client.config.ts

@@ -3,7 +3,6 @@
 // https://docs.sentry.io/platforms/javascript/guides/nextjs/
 
 import * as Sentry from '@sentry/nextjs';
-import * as Spotlight from '@spotlightjs/spotlight';
 
 Sentry.init({
   // Sentry DSN
@@ -20,17 +19,8 @@ Sentry.init({
   // This sets the sample rate to be 10%. You may want this to be 100% while
   // in development and sample at a lower rate in production
   replaysSessionSampleRate: 0.1,
-
-  // You can remove this option if you're not planning to use the Sentry Session Replay feature:
-  integrations: [
-    Sentry.replayIntegration({
-      // Additional Replay configuration goes in here, for example:
-      maskAllText: true,
-      blockAllMedia: true,
-    }),
-  ],
 });
 
 if (process.env.NODE_ENV === 'development') {
-  Spotlight.init();
+  // Spotlight.init();
 }

src/app/[locale]/(auth)/dashboard/collections/[id]/page.tsx

@@ -0,0 +1,5 @@
+const Collection = () => {
+  return <div>Collection</div>;
+};
+
+export default Collection;

src/app/[locale]/(auth)/dashboard/collections/page.tsx

@@ -0,0 +1,5 @@
+const Collections = () => {
+  return <div>Collections (a permanent playlist of entries)</div>;
+};
+
+export default Collections;

src/components/SearchResults.tsx

@@ -14,6 +14,39 @@ const SearchResults = () => {
   const [textAreaValue, setTextAreaValue] = useState('');
   const [showLoading, setShowLoading] = useState(false);
   const [searchResults, setSearchResults] = useState<any[]>([]);
+  const [checkedButtons, setCheckedButtons] = useState<{
+    [key: string]: boolean;
+  }>({});
+  const [buildingCollection, setBuildingCollection] = useState(false);
+
+  const addToCollection = (id: string, title: string) => {
+    // add to collection
+    // check if the id is already in the collection and skip if it is
+    if (localStorage.getItem('buildingCollection')) {
+      const collection = JSON.parse(
+        localStorage.getItem('buildingCollection') as string,
+      );
+      if (collection.find((entry: any) => entry.id === id)) {
+        return;
+      }
+      collection.push({
+        id,
+        title,
+        link: `https://ycb-companion.onrender.com/dashboard/entry/${id}`,
+      });
+      localStorage.setItem('buildingCollection', JSON.stringify(collection));
+    } else {
+      localStorage.setItem(
+        'buildingCollection',
+        JSON.stringify([{ id, title }]),
+      );
+    }
+    setCheckedButtons((prev) => ({
+      ...prev,
+      [id]: !prev[id],
+    }));
+  };
+
   const searchParams = useSearchParams();
   // const router = useRouter();
   const pathname = usePathname();
@@ -81,6 +114,13 @@ const SearchResults = () => {
     }
   }, [searchParams]);
 
+  // check local storage for collection being built (ar array of objects)
+  useEffect(() => {
+    if (localStorage.getItem('buildingCollection')) {
+      setBuildingCollection(true);
+    }
+  }, []);
+
   // when searchResults change, append to cache
   useEffect(() => {
     if (searchResults.length > 0)
@@ -176,84 +216,150 @@ const SearchResults = () => {
           {rndmBtnText}
         </button>
       </div>
+      {/* download collection btn only if buildingCollection is true */}
+      {buildingCollection && (
+        <button
+          type="button"
+          onClick={() => {
+            // clear the buildingCollection key from localStorage and download the collection as a json file
+            const collection = JSON.parse(
+              localStorage.getItem('buildingCollection') as string,
+            );
+            const blob = new Blob([JSON.stringify(collection)], {
+              type: 'application/json',
+            });
+            const url = URL.createObjectURL(blob);
+            const a = document.createElement('a');
+            a.href = url;
+            a.download = `collection-${new Date().toISOString()}.json`;
+            a.click();
+            URL.revokeObjectURL(url);
+            localStorage.removeItem('buildingCollection');
+            setBuildingCollection(false);
+          }}
+          className="mb-2 me-2 mt-4 w-full rounded-lg bg-blue-700 px-5 py-2.5 text-sm font-medium text-white hover:bg-blue-800 focus:outline-none focus:ring-4 focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
+        >
+          Download Collection
+        </button>
+      )}
       {showLoading && <div>Loading...</div>}
       {searchResults.map((result) => (
-        <div key={result.id} className="mb-4">
-          <Link
-            href={{
-              pathname: `/dashboard/entry/${result.id}`,
-            }}
-            className="block"
-            onClick={() => {
-              window.history.pushState(
-                {},
-                '',
-                createQueryString('query', textAreaValue, pathname),
-              );
-            }}
-          >
-            <div className="flex items-center text-blue-600 hover:underline">
-              <Image
-                src={result.favicon}
-                alt="favicon"
-                width={16}
-                height={16}
-                className="mr-2"
-              />
-              <span className="font-medium">
-                {result.data.split(' ').length > 12 ? (
-                  <>
-                    {splitIntoWords(result.data, 12, 0)}...
-                    <span className="mt-1 block text-sm text-gray-500">
-                      ...{splitIntoWords(result.data, 20, 12)}...
-                    </span>
-                  </>
-                ) : (
-                  result.data
+        <div key={result.id} className="mb-4 flex items-center justify-between">
+          <div className="grow">
+            <Link
+              href={{
+                pathname: `/dashboard/entry/${result.id}`,
+              }}
+              className="block"
+              onClick={() => {
+                window.history.pushState(
+                  {},
+                  '',
+                  createQueryString('query', textAreaValue, pathname),
+                );
+              }}
+            >
+              <div className="flex items-center text-blue-600 hover:underline">
+                <Image
+                  src={result.favicon}
+                  alt="favicon"
+                  width={16}
+                  height={16}
+                  className="mr-2"
+                />
+                <span className="font-medium">
+                  {result.data.split(' ').length > 12 ? (
+                    <>
+                      {splitIntoWords(result.data, 12, 0)}...
+                      <span className="mt-1 block text-sm text-gray-500">
+                        ...{splitIntoWords(result.data, 20, 12)}...
+                      </span>
+                    </>
+                  ) : (
+                    result.data
+                  )}
+                </span>
+              </div>
+              <div className="text-sm text-gray-500">
+                {result.parentData && (
+                  <span className="mt-1 block">{result.parentData.data}</span>
                 )}
-              </span>
-            </div>
+              </div>
+            </Link>
             <div className="text-sm text-gray-500">
-              {result.parentData && (
-                <span className="mt-1 block">{result.parentData.data}</span>
+              Created: {new Date(result.createdAt).toLocaleString()}
+              {result.createdAt !== result.updatedAt && (
+                <>
+                  {' '}
+                  | Last Updated: {new Date(
+                    result.updatedAt,
+                  ).toLocaleString()}{' '}
+                </>
               )}
             </div>
-          </Link>
-          {/* when was the entry created and updated */}
-          <div className="text-sm text-gray-500">
-            Created: {new Date(result.createdAt).toLocaleString()}
-            {result.createdAt !== result.updatedAt && (
-              <>
-                {' '}
-                | Last Updated: {new Date(
-                  result.updatedAt,
-                ).toLocaleString()}{' '}
-              </>
-            )}
+            <a
+              target="_blank"
+              href={result.metadata.author}
+              rel="noopener noreferrer"
+              className="inline-flex items-center font-medium text-blue-600 hover:underline"
+            >
+              {toHostname(result.metadata.author)}
+              <svg
+                className="ms-2.5 size-3 rtl:rotate-[270deg]"
+                aria-hidden="true"
+                xmlns="http://www.w3.org/2000/svg"
+                fill="none"
+                viewBox="0 0 18 18"
+              >
+                <path
+                  stroke="currentColor"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth="2"
+                  d="M15 11v4.833A1.166 1.166 0 0 1 13.833 17H2.167A1.167 1.167 0 0 1 1 15.833V4.167A1.166 1.166 0 0 1 2.167 3h4.618m4.447-2H17v5.768M9.111 8.889l7.778-7.778"
+                />
+              </svg>
+            </a>
           </div>
-          <a
-            target="_blank"
-            href={result.metadata.author}
-            rel="noopener noreferrer"
-            className="inline-flex items-center font-medium text-blue-600 hover:underline"
+          <button
+            type="button"
+            className={`ml-4 rounded-full p-2 text-white focus:outline-none focus:ring-2 focus:ring-blue-300 ${
+              checkedButtons[result.id] ? 'bg-green-500' : 'bg-blue-500'
+            }`}
+            onClick={() => addToCollection(result.id, result.data)}
           >
-            {toHostname(result.metadata.author)}
-            <svg
-              className="ms-2.5 size-3 rtl:rotate-[270deg]"
-              aria-hidden="true"
-              xmlns="http://www.w3.org/2000/svg"
-              fill="none"
-              viewBox="0 0 18 18"
-            >
-              <path
+            {checkedButtons[result.id] ? (
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke="currentColor"
+                className="size-5"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth="2"
+                  d="M5 13l4 4L19 7"
+                />
+              </svg>
+            ) : (
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                fill="none"
+                viewBox="0 0 24 24"
                 stroke="currentColor"
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                strokeWidth="2"
-                d="M15 11v4.833A1.166 1.166 0 0 1 13.833 17H2.167A1.167 1.167 0 0 1 1 15.833V4.167A1.166 1.166 0 0 1 2.167 3h4.618m4.447-2H17v5.768M9.111 8.889l7.778-7.778"
-              />
-            </svg>
-          </a>
+                className="size-5"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth="2"
+                  d="M12 4v16m8-8H4"
+                />
+              </svg>
+            )}
+          </button>
         </div>
       ))}
     </div>