minor change

components/AnnouncementBar.tsx

@@ -12,11 +12,11 @@ export default function AnnouncementBar({ toggleAnnouncementBar }: Props) {
         <div className="w-fit font-semibold">
           🎉️ See what&apos;s new in{" "}
           <Link
-            href="https://blog.linkwarden.app/releases/v2.4"
+            href="https://blog.linkwarden.app/releases/v2.5"
             target="_blank"
             className="underline hover:opacity-50 duration-100"
           >
-            Linkwarden v2.4
+            Linkwarden v2.5
           </Link>
           ! 🥳️
         </div>

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

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>
   );

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>
   );
 }

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>
   );
 }

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]" />

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>
   );
 }

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}

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"

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();
 

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 };
 }

lib/api/checkSubscriptionByEmail.ts

@@ -32,11 +32,12 @@ export default async function checkSubscriptionByEmail(email: string) {
     customer.subscriptions?.data.some((subscription) => {
       subscription.current_period_end;
 
-      active = subscription.items.data.some(
-        (e) =>
-          (e.price.id === MONTHLY_PRICE_ID && e.price.active === true) ||
-          (e.price.id === YEARLY_PRICE_ID && e.price.active === true)
-      );
+      active =
+        subscription.items.data.some(
+          (e) =>
+            (e.price.id === MONTHLY_PRICE_ID && e.price.active === true) ||
+            (e.price.id === YEARLY_PRICE_ID && e.price.active === true)
+        ) || false;
       stripeSubscriptionId = subscription.id;
       currentPeriodStart = subscription.current_period_start * 1000;
       currentPeriodEnd = subscription.current_period_end * 1000;
@@ -44,7 +45,7 @@ export default async function checkSubscriptionByEmail(email: string) {
   });
 
   return {
-    active,
+    active: active || false,
     stripeSubscriptionId,
     currentPeriodStart,
     currentPeriodEnd,

lib/api/paymentCheckout.ts

@@ -16,8 +16,11 @@ export default async function paymentCheckout(
 
   const isExistingCustomer = listByEmail?.data[0]?.id || undefined;
 
+  console.log("isExistingCustomer", listByEmail?.data[0]);
+
   const NEXT_PUBLIC_TRIAL_PERIOD_DAYS =
-    process.env.NEXT_PUBLIC_TRIAL_PERIOD_DAYS;
+    Number(process.env.NEXT_PUBLIC_TRIAL_PERIOD_DAYS) || 14;
+
   const session = await stripe.checkout.sessions.create({
     customer: isExistingCustomer ? isExistingCustomer : undefined,
     line_items: [
@@ -34,9 +37,9 @@ export default async function paymentCheckout(
       enabled: true,
     },
     subscription_data: {
-      trial_period_days: NEXT_PUBLIC_TRIAL_PERIOD_DAYS
-        ? Number(NEXT_PUBLIC_TRIAL_PERIOD_DAYS)
-        : 14,
+      trial_period_days: isExistingCustomer
+        ? undefined
+        : NEXT_PUBLIC_TRIAL_PERIOD_DAYS,
     },
   });
 

lib/api/verifySubscription.ts

@@ -17,15 +17,7 @@ export default async function verifySubscription(
 
   const currentDate = new Date();
 
-  if (
-    subscription &&
-    currentDate > subscription.currentPeriodEnd &&
-    !subscription.active
-  ) {
-    return null;
-  }
-
-  if (!subscription || currentDate > subscription.currentPeriodEnd) {
+  if (!subscription?.active || currentDate > subscription.currentPeriodEnd) {
     const {
       active,
       stripeSubscriptionId,
@@ -59,15 +51,21 @@ export default async function verifySubscription(
           },
         })
         .catch((err) => console.log(err));
-    }
+    } else if (!active) {
+      const subscription = await prisma.subscription.findFirst({
+        where: {
+          userId: user.id,
+        },
+      });
 
-    if (!active) {
-      if (user.username)
-        // await prisma.user.update({
-        //   where: { id: user.id },
-        //   data: { username: null },
-        // });
-        return null;
+      if (subscription)
+        await prisma.subscription.delete({
+          where: {
+            userId: user.id,
+          },
+        });
+
+      return null;
     }
   }
 

lib/api/verifyUser.ts

@@ -52,7 +52,7 @@ export default async function verifyUser({
   }
 
   if (STRIPE_SECRET_KEY) {
-    const subscribedUser = verifySubscription(user);
+    const subscribedUser = await verifySubscription(user);
 
     if (!subscribedUser) {
       res.status(401).json({

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>",
@@ -10,10 +10,10 @@
     "seed": "node ./prisma/seed.js"
   },
   "scripts": {
-    "dev": "concurrently -k \"next dev\" \"yarn worker:dev\"",
+    "dev": "concurrently -k -P \"next dev {@}\" \"yarn worker:dev\" --",
     "worker:dev": "nodemon --skip-project scripts/worker.ts",
     "worker:prod": "ts-node --transpile-only --skip-project scripts/worker.ts",
-    "start": "concurrently \"next start\" \"yarn worker:prod\"",
+    "start": "concurrently -k -P \"next start {@}\" \"yarn worker:prod\" --",
     "build": "next build",
     "lint": "next lint",
     "format": "prettier --write \"**/*.{ts,tsx,js,json,md}\""
@@ -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",

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)}

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);

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>

pages/subscribe.tsx

@@ -5,6 +5,7 @@ import { useRouter } from "next/router";
 import CenteredForm from "@/layouts/CenteredForm";
 import { Plan } from "@/types/global";
 import AccentSubmitButton from "@/components/AccentSubmitButton";
+import useAccountStore from "@/store/account";
 
 export default function Subscribe() {
   const [submitLoader, setSubmitLoader] = useState(false);
@@ -12,6 +13,8 @@ export default function Subscribe() {
 
   const [plan, setPlan] = useState<Plan>(1);
 
+  const { account } = useAccountStore();
+
   const router = useRouter();
 
   async function submit() {
@@ -27,9 +30,13 @@ export default function Subscribe() {
 
   return (
     <CenteredForm
-      text={`Start with a ${
-        process.env.NEXT_PUBLIC_TRIAL_PERIOD_DAYS || 14
-      }-day free trial, cancel anytime!`}
+      text={
+        account.username
+          ? ""
+          : `Start with a ${
+              process.env.NEXT_PUBLIC_TRIAL_PERIOD_DAYS || 14
+            }-day free trial, cancel anytime!`
+      }
     >
       <div className="p-4 mx-auto flex flex-col gap-3 justify-between max-w-[30rem] min-w-80 w-full bg-base-200 rounded-2xl shadow-md border border-neutral-content">
         <p className="sm:text-3xl text-2xl text-center font-extralight">
@@ -37,7 +44,6 @@ export default function Subscribe() {
         </p>
 
         <div className="divider my-0"></div>
-
         <div>
           <p>
             You will be redirected to Stripe, feel free to reach out to us at{" "}
@@ -47,7 +53,6 @@ export default function Subscribe() {
             in case of any issue.
           </p>
         </div>
-
         <div className="flex gap-3 border border-solid border-neutral-content w-4/5 mx-auto p-1 rounded-xl relative">
           <button
             onClick={() => setPlan(Plan.monthly)}
@@ -74,7 +79,6 @@ export default function Subscribe() {
             25% Off
           </div>
         </div>
-
         <div className="flex flex-col gap-2 justify-center items-center">
           <p className="text-3xl">
             ${plan === Plan.monthly ? "4" : "3"}
@@ -89,13 +93,20 @@ export default function Subscribe() {
             </legend>
 
             <p className="text-sm">
-              {process.env.NEXT_PUBLIC_TRIAL_PERIOD_DAYS}-day free trial, then $
-              {plan === Plan.monthly ? "4 per month" : "36 annually"}
+              {account.username
+                ? ""
+                : `${process.env.NEXT_PUBLIC_TRIAL_PERIOD_DAYS}-day free trial, then `}
+              ${plan === Plan.monthly ? "4 per month" : "36 annually"}
             </p>
             <p className="text-sm">+ VAT if applicable</p>
           </fieldset>
-        </div>
 
+          <p className="text-sm mb-5">
+            {account.username
+              ? "Please note that since your trial has been previously ended, your subscription will start immediately. You can cancel anytime."
+              : ""}
+          </p>
+        </div>
         <AccentSubmitButton
           type="button"
           label="Complete Subscription!"
@@ -103,7 +114,6 @@ export default function Subscribe() {
           onClick={submit}
           loading={submitLoader}
         />
-
         <div
           onClick={() => signOut()}
           className="w-fit mx-auto cursor-pointer text-neutral font-semibold "

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");

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");

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 {

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"