improved UX + improved performance

2024-03-10 06:08:28 -04:00 · 2024-03-10 06:08:28 -04:00 · 4a0e75c6e5
parent 3feeecdc1d
commit 4a0e75c6e5
18 changed files with 135 additions and 57 deletions
--- a/components/CollectionListing.tsx
+++ b/components/CollectionListing.tsx
@ -47,7 +47,10 @@ const CollectionListing = () => {

  useEffect(() => {
    if (account.username) {
-      if (!account.collectionOrder || account.collectionOrder.length === 0)
+      if (
+        (!account.collectionOrder || account.collectionOrder.length === 0) &&
+        collections.length > 0
+      )
        updateAccount({
          ...account,
          collectionOrder: collections
--- a/components/FilterSearchDropdown.tsx
+++ b/components/FilterSearchDropdown.tsx
@ -26,7 +26,7 @@ export default function FilterSearchDropdown({
      >
        <i className="bi-funnel text-neutral text-2xl"></i>
      </div>
-      <ul className="dropdown-content z-[30] menu shadow bg-base-200 border border-neutral-content rounded-box w-44 mt-1">
+      <ul className="dropdown-content z-[30] menu shadow bg-base-200 border border-neutral-content rounded-box w-56 mt-1">
        <li>
          <label
            className="label cursor-pointer flex justify-start"
@ -84,27 +84,6 @@ export default function FilterSearchDropdown({
            <span className="label-text">Description</span>
          </label>
        </li>
-        <li>
-          <label
-            className="label cursor-pointer flex justify-start"
-            tabIndex={0}
-            role="button"
-          >
-            <input
-              type="checkbox"
-              name="search-filter-checkbox"
-              className="checkbox checkbox-primary"
-              checked={searchFilter.textContent}
-              onChange={() => {
-                setSearchFilter({
-                  ...searchFilter,
-                  textContent: !searchFilter.textContent,
-                });
-              }}
-            />
-            <span className="label-text">Full Content</span>
-          </label>
-        </li>
        <li>
          <label
            className="label cursor-pointer flex justify-start"
@ -126,6 +105,29 @@ export default function FilterSearchDropdown({
            <span className="label-text">Tags</span>
          </label>
        </li>
+        <li>
+          <label
+            className="label cursor-pointer flex justify-between"
+            tabIndex={0}
+            role="button"
+          >
+            <input
+              type="checkbox"
+              name="search-filter-checkbox"
+              className="checkbox checkbox-primary"
+              checked={searchFilter.textContent}
+              onChange={() => {
+                setSearchFilter({
+                  ...searchFilter,
+                  textContent: !searchFilter.textContent,
+                });
+              }}
+            />
+            <span className="label-text">Full Content</span>
+
+            <div className="ml-auto badge badge-sm badge-neutral">Slower</div>
+          </label>
+        </li>
      </ul>
    </div>
  );
--- a/components/LinkViews/Layouts/CardView.tsx
+++ b/components/LinkViews/Layouts/CardView.tsx
@ -1,14 +1,16 @@
 import LinkCard from "@/components/LinkViews/LinkCard";
 import { LinkIncludingShortenedCollectionAndTags } from "@/types/global";
+import { link } from "fs";
+import { GridLoader } from "react-spinners";

 export default function CardView({
  links,
-  showCheckbox = true,
  editMode,
+  isLoading,
 }: {
  links: LinkIncludingShortenedCollectionAndTags[];
-  showCheckbox?: boolean;
  editMode?: boolean;
+  isLoading?: boolean;
 }) {
  return (
    <div className="grid min-[1900px]:grid-cols-4 xl:grid-cols-3 sm:grid-cols-2 grid-cols-1 gap-5">
@ -23,6 +25,15 @@ export default function CardView({
          />
        );
      })}
+
+      {isLoading && links.length > 0 && (
+        <GridLoader
+          color="oklch(var(--p))"
+          loading={true}
+          size={20}
+          className="fixed top-5 right-5 opacity-50 z-30"
+        />
+      )}
    </div>
  );
 }
--- a/components/LinkViews/Layouts/ListView.tsx
+++ b/components/LinkViews/Layouts/ListView.tsx
@ -1,12 +1,15 @@
 import LinkList from "@/components/LinkViews/LinkList";
 import { LinkIncludingShortenedCollectionAndTags } from "@/types/global";
+import { GridLoader } from "react-spinners";

 export default function ListView({
  links,
  editMode,
+  isLoading,
 }: {
  links: LinkIncludingShortenedCollectionAndTags[];
  editMode?: boolean;
+  isLoading?: boolean;
 }) {
  return (
    <div className="flex gap-1 flex-col">
@ -21,6 +24,15 @@ export default function ListView({
          />
        );
      })}
+
+      {isLoading && links.length > 0 && (
+        <GridLoader
+          color="oklch(var(--p))"
+          loading={true}
+          size={20}
+          className="fixed top-5 right-5 opacity-50 z-30"
+        />
+      )}
    </div>
  );
 }
--- a/components/LinkViews/LinkCard.tsx
+++ b/components/LinkViews/LinkCard.tsx
@ -162,12 +162,18 @@ export default function LinkCard({ link, flipDropdown, editMode }: Props) {
            {unescapeString(link.name || link.description) || link.url}
          </p>

-          <div title={link.url || ""} className="w-fit">
-            <div className="flex gap-1 item-center select-none text-neutral mt-1">
-              <i className="bi-link-45deg text-lg mt-[0.15rem] leading-none"></i>
-              <p className="text-sm truncate">{shortendURL}</p>
-            </div>
-          </div>
+          <Link
+            href={link.url || ""}
+            target="_blank"
+            title={link.url || ""}
+            onClick={(e) => {
+              e.stopPropagation();
+            }}
+            className="flex gap-1 item-center select-none text-neutral mt-1 hover:opacity-70 duration-100"
+          >
+            <i className="bi-link-45deg text-lg mt-[0.10rem] leading-none"></i>
+            <p className="text-sm truncate">{shortendURL}</p>
+          </Link>
        </div>

        <hr className="divider mt-2 mb-1 last:hidden border-t border-neutral-content h-[1px]" />
--- a/components/LinkViews/LinkComponents/LinkCollection.tsx
+++ b/components/LinkViews/LinkComponents/LinkCollection.tsx
@ -2,6 +2,7 @@ import {
  CollectionIncludingMembersAndLinkCount,
  LinkIncludingShortenedCollectionAndTags,
 } from "@/types/global";
+import Link from "next/link";
 import { useRouter } from "next/router";
 import React from "react";

@ -15,12 +16,12 @@ export default function LinkCollection({
  const router = useRouter();

  return (
-    <div
+    <Link
+      href={`/collections/${link.collection.id}`}
      onClick={(e) => {
-        e.preventDefault();
-        router.push(`/collections/${link.collection.id}`);
+        e.stopPropagation();
      }}
-      className="flex items-center gap-1 max-w-full w-fit hover:opacity-70 duration-100"
+      className="flex items-center gap-1 max-w-full w-fit hover:opacity-70 duration-100 select-none"
      title={collection?.name}
    >
      <i
@ -28,6 +29,6 @@ export default function LinkCollection({
        style={{ color: collection?.color }}
      ></i>
      <p className="truncate capitalize">{collection?.name}</p>
-    </div>
+    </Link>
  );
 }
--- a/components/LinkViews/LinkList.tsx
+++ b/components/LinkViews/LinkList.tsx
@ -144,10 +144,18 @@ export default function LinkCardCompact({
                  <LinkCollection link={link} collection={collection} />
                ) : undefined}
                {link.url ? (
-                  <div className="flex items-center gap-1 w-fit text-neutral truncate">
-                    <i className="bi-link-45deg text-lg" />
-                    <p className="truncate w-full select-none">{shortendURL}</p>
-                  </div>
+                  <Link
+                    href={link.url || ""}
+                    target="_blank"
+                    title={link.url || ""}
+                    onClick={(e) => {
+                      e.stopPropagation();
+                    }}
+                    className="flex gap-1 item-center select-none text-neutral mt-1 hover:opacity-70 duration-100"
+                  >
+                    <i className="bi-link-45deg text-lg mt-[0.1rem] leading-none"></i>
+                    <p className="text-sm truncate">{shortendURL}</p>
+                  </Link>
                ) : (
                  <div className="badge badge-primary badge-sm my-1 select-none">
                    {link.type}
--- a/components/Navbar.tsx
+++ b/components/Navbar.tsx
@ -65,7 +65,7 @@ export default function Navbar() {
        <ToggleDarkMode className="hidden sm:inline-grid" />

        <div className="dropdown dropdown-end sm:inline-block hidden">
-          <div className="tooltip tooltip-bottom z-10" data-tip="Create New...">
+          <div className="tooltip tooltip-bottom" data-tip="Create New...">
            <div
              tabIndex={0}
              role="button"
--- a/components/SettingsSidebar.tsx
+++ b/components/SettingsSidebar.tsx
@ -4,7 +4,7 @@ import { useRouter } from "next/router";
 import React, { useEffect, useState } from "react";

 export default function SettingsSidebar({ className }: { className?: string }) {
-  const LINKWARDEN_VERSION = "v2.5.0";
+  const LINKWARDEN_VERSION = "v2.5.1";

  const { collections } = useCollectionStore();

--- a/hooks/useLinks.tsx
+++ b/hooks/useLinks.tsx
@ -1,5 +1,5 @@
 import { LinkRequestQuery } from "@/types/global";
-import { useEffect } from "react";
+import { useEffect, useState } from "react";
 import useDetectPageBottom from "./useDetectPageBottom";
 import { useRouter } from "next/router";
 import useLinkStore from "@/store/links";
@ -22,6 +22,8 @@ export default function useLinks(
    useLinkStore();
  const router = useRouter();

+  const [isLoading, setIsLoading] = useState(true);
+
  const { reachedBottom, setReachedBottom } = useDetectPageBottom();

  const getLinks = async (isInitialCall: boolean, cursor?: number) => {
@ -61,10 +63,14 @@ export default function useLinks(
      basePath = "/api/v1/public/collections/links";
    } else basePath = "/api/v1/links";

+    setIsLoading(true);
+
    const response = await fetch(`${basePath}?${queryString}`);

    const data = await response.json();

+    setIsLoading(false);
+
    if (response.ok) setLinks(data.response, isInitialCall);
  };

@ -92,4 +98,6 @@ export default function useLinks(

    setReachedBottom(false);
  }, [reachedBottom]);
+
+  return { isLoading };
 }
--- a/package.json
+++ b/package.json
@ -1,6 +1,6 @@
 {
  "name": "linkwarden",
-  "version": "2.5.0",
+  "version": "2.5.1",
  "main": "index.js",
  "repository": "https://github.com/linkwarden/linkwarden.git",
  "author": "Daniel31X13 <daniel31x13@gmail.com>",
@ -61,6 +61,7 @@
    "react-hot-toast": "^2.4.1",
    "react-image-file-resizer": "^0.4.8",
    "react-select": "^5.7.4",
+    "react-spinners": "^0.13.8",
    "socks-proxy-agent": "^8.0.2",
    "stripe": "^12.13.0",
    "vaul": "^0.8.8",
--- a/pages/dashboard.tsx
+++ b/pages/dashboard.tsx
@ -168,10 +168,7 @@ export default function Dashboard() {
        >
          {links[0] ? (
            <div className="w-full">
-              <LinkComponent
-                links={links.slice(0, showLinks)}
-                showCheckbox={false}
-              />
+              <LinkComponent links={links.slice(0, showLinks)} />
            </div>
          ) : (
            <div
@ -282,7 +279,6 @@ export default function Dashboard() {
          {links.some((e) => e.pinnedBy && e.pinnedBy[0]) ? (
            <div className="w-full">
              <LinkComponent
-                showCheckbox={false}
                links={links
                  .filter((e) => e.pinnedBy && e.pinnedBy[0])
                  .slice(0, showLinks)}
--- a/pages/public/collections/[id].tsx
+++ b/pages/public/collections/[id].tsx
@ -60,8 +60,8 @@ export default function PublicCollections() {
    name: true,
    url: true,
    description: true,
-    textContent: true,
    tags: true,
+    textContent: false,
  });

  const [sortBy, setSortBy] = useState<Sort>(Sort.DateNewestFirst);
--- a/pages/search.tsx
+++ b/pages/search.tsx
@ -5,12 +5,13 @@ import MainLayout from "@/layouts/MainLayout";
 import useLinkStore from "@/store/links";
 import { Sort, ViewMode } from "@/types/global";
 import { useRouter } from "next/router";
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import ViewDropdown from "@/components/ViewDropdown";
 import CardView from "@/components/LinkViews/Layouts/CardView";
 // import GridView from "@/components/LinkViews/Layouts/GridView";
 import ListView from "@/components/LinkViews/Layouts/ListView";
 import PageHeader from "@/components/PageHeader";
+import { GridLoader, PropagateLoader } from "react-spinners";

 export default function Search() {
  const { links } = useLinkStore();
@ -21,8 +22,8 @@ export default function Search() {
    name: true,
    url: true,
    description: true,
-    textContent: true,
    tags: true,
+    textContent: false,
  });

  const [viewMode, setViewMode] = useState<string>(
@ -30,7 +31,7 @@ export default function Search() {
  );
  const [sortBy, setSortBy] = useState<Sort>(Sort.DateNewestFirst);

-  useLinks({
+  const { isLoading } = useLinks({
    sort: sortBy,
    searchQueryString: decodeURIComponent(router.query.q as string),
    searchByName: searchFilter.name,
@ -40,6 +41,10 @@ export default function Search() {
    searchByTags: searchFilter.tags,
  });

+  useEffect(() => {
+    console.log("isLoading", isLoading);
+  }, [isLoading]);
+
  const linkView = {
    [ViewMode.Card]: CardView,
    // [ViewMode.Grid]: GridView,
@ -51,7 +56,7 @@ export default function Search() {

  return (
    <MainLayout>
-      <div className="p-5 flex flex-col gap-5 w-full">
+      <div className="p-5 flex flex-col gap-5 w-full h-full">
        <div className="flex justify-between">
          <PageHeader icon={"bi-search"} title={"Search Results"} />

@ -67,15 +72,24 @@ export default function Search() {
          </div>
        </div>

-        {links[0] ? (
-          <LinkComponent links={links} />
-        ) : (
+        {!isLoading && !links[0] ? (
          <p>
            Nothing found.{" "}
            <span className="font-bold text-xl" title="Shruggie">
              ¯\_(ツ)_/¯
            </span>
          </p>
+        ) : links[0] ? (
+          <LinkComponent links={links} isLoading={isLoading} />
+        ) : (
+          isLoading && (
+            <GridLoader
+              color="oklch(var(--p))"
+              loading={true}
+              size={20}
+              className="m-auto py-10"
+            />
+          )
        )}
      </div>
    </MainLayout>
--- a/prisma/migrations/20240310062152_added_indexes/migration.sql
+++ b/prisma/migrations/20240310062152_added_indexes/migration.sql
@ -0,0 +1,5 @@
+-- CreateIndex
+CREATE INDEX "Collection_ownerId_idx" ON "Collection"("ownerId");
+
+-- CreateIndex
+CREATE INDEX "UsersAndCollections_userId_idx" ON "UsersAndCollections"("userId");
--- a/prisma/migrations/20240310062318_added_index_to_ownerid_on_tag_model/migration.sql
+++ b/prisma/migrations/20240310062318_added_index_to_ownerid_on_tag_model/migration.sql
@ -0,0 +1,2 @@
+-- CreateIndex
+CREATE INDEX "Tag_ownerId_idx" ON "Tag"("ownerId");
--- a/prisma/schema.prisma
+++ b/prisma/schema.prisma
@ -93,6 +93,8 @@ model Collection {
  links           Link[]
  createdAt       DateTime              @default(now())
  updatedAt       DateTime              @default(now()) @updatedAt
+  
+  @@index([ownerId])
 }

 model UsersAndCollections {
@ -107,6 +109,7 @@ model UsersAndCollections {
  updatedAt    DateTime   @default(now()) @updatedAt

  @@id([userId, collectionId])
+  @@index([userId])
 }

 model Link {
@ -139,6 +142,7 @@ model Tag {
  updatedAt DateTime @default(now()) @updatedAt

  @@unique([name, ownerId])
+  @@index([ownerId])
 }

 model Subscription {
--- a/yarn.lock
+++ b/yarn.lock
@ -5211,6 +5211,11 @@ react-select@^5.7.4:
    react-transition-group "^4.3.0"
    use-isomorphic-layout-effect "^1.1.2"

+react-spinners@^0.13.8:
+  version "0.13.8"
+  resolved "https://registry.yarnpkg.com/react-spinners/-/react-spinners-0.13.8.tgz#5262571be0f745d86bbd49a1e6b49f9f9cb19acc"
+  integrity sha512-3e+k56lUkPj0vb5NDXPVFAOkPC//XyhKPJjvcGjyMNPWsBKpplfeyialP74G7H7+It7KzhtET+MvGqbKgAqpZA==
+
 react-style-singleton@^2.2.1:
  version "2.2.1"
  resolved "https://registry.yarnpkg.com/react-style-singleton/-/react-style-singleton-2.2.1.tgz#f99e420492b2d8f34d38308ff660b60d0b1205b4"