bug fix + ux improvements

2023-08-22 00:43:34 -04:00
parent 09ea45eec0
commit acc974ecfe
8 changed files with 168 additions and 105 deletions
@@ -47,7 +47,6 @@ export default function CollectionSelection({ onChange, defaultValue }: Props) {
      isClearable
      className="react-select-container"
      classNamePrefix="react-select"
-      placeholder="Default: Unnamed Collection"
      onChange={onChange}
      options={options}
      styles={styles}
@@ -7,12 +7,13 @@ import useLinkStore from "@/store/links";
 import { faPlus } from "@fortawesome/free-solid-svg-icons";
 import RequiredBadge from "../../RequiredBadge";
 import { useSession } from "next-auth/react";
-import useCollectionStore from "@/store/collections";
-import { useRouter } from "next/router";
+// import useCollectionStore from "@/store/collections";
+// import { useRouter } from "next/router";
 import SubmitButton from "../../SubmitButton";
 import { toast } from "react-hot-toast";
 import Link from "next/link";
 import TextInput from "@/components/TextInput";
+import unescapeString from "@/lib/client/unescapeString";

 type Props =
  | {
@@ -33,6 +34,10 @@ export default function AddOrEditLink({
 }: Props) {
  const [submitLoader, setSubmitLoader] = useState(false);

+  const [optionsExpanded, setOptionsExpanded] = useState(
+    method === "UPDATE" ? true : false
+  );
+
  const { data } = useSession();

  const [link, setLink] = useState<LinkIncludingShortenedCollectionAndTags>(
@@ -50,27 +55,27 @@ export default function AddOrEditLink({

  const { updateLink, addLink } = useLinkStore();

-  const router = useRouter();
+  // const router = useRouter();

-  const { collections } = useCollectionStore();
+  // const { collections } = useCollectionStore();

-  useEffect(() => {
-    if (router.query.id) {
-      const currentCollection = collections.find(
-        (e) => e.id == Number(router.query.id)
-      );
+  // useEffect(() => {
+  //   if (router.query.id) {
+  //     const currentCollection = collections.find(
+  //       (e) => e.id == Number(router.query.id)
+  //     );

-      if (currentCollection && currentCollection.ownerId)
-        setLink({
-          ...link,
-          collection: {
-            id: currentCollection.id,
-            name: currentCollection.name,
-            ownerId: currentCollection.ownerId,
-          },
-        });
-    }
-  }, []);
+  //     if (currentCollection && currentCollection.ownerId)
+  //       setLink({
+  //         ...link,
+  //         collection: {
+  //           id: currentCollection.id,
+  //           name: currentCollection.name,
+  //           ownerId: currentCollection.ownerId,
+  //         },
+  //       });
+  //   }
+  // }, []);

  const setTags = (e: any) => {
    const tagNames = e.map((e: any) => {
@@ -116,7 +121,7 @@ export default function AddOrEditLink({
    <div className="flex flex-col gap-3 sm:w-[35rem] w-80">
      {method === "UPDATE" ? (
        <p
-          className="text-gray-500 dark:text-gray-300 my-2 text-center truncate w-full"
+          className="text-gray-500 dark:text-gray-300 text-center truncate w-full"
          title={link.url}
        >
          <Link href={link.url} target="_blank" className="font-bold">
@@ -126,80 +131,128 @@ export default function AddOrEditLink({
      ) : null}

      {method === "CREATE" ? (
-        <div>
-          <p className="text-sm text-black dark:text-white mb-2 font-bold">
-            Address (URL)
-            <RequiredBadge />
-          </p>
-          <TextInput
-            value={link.url}
-            onChange={(e) => setLink({ ...link, url: e.target.value })}
-            placeholder="e.g. http://example.com/"
-          />
+        <div className="grid grid-flow-row-dense sm:grid-cols-5 gap-3">
+          <div className="sm:col-span-3 col-span-5">
+            <p className="text-sm text-black dark:text-white mb-2 font-bold">
+              Address (URL)
+              <RequiredBadge />
+            </p>
+            <TextInput
+              value={link.url}
+              onChange={(e) => setLink({ ...link, url: e.target.value })}
+              placeholder="e.g. http://example.com/"
+            />
+          </div>
+          <div className="sm:col-span-2 col-span-5">
+            <p className="text-sm text-black dark:text-white mb-2">
+              Collection
+            </p>
+            <CollectionSelection
+              onChange={setCollection}
+              // defaultValue={{
+              //   label: link.collection.name,
+              //   value: link.collection.id,
+              // }}
+              defaultValue={
+                link.collection.id
+                  ? {
+                      value: link.collection.id,
+                      label: link.collection.name,
+                    }
+                  : {
+                      value: null as unknown as number,
+                      label: "Unorganized",
+                    }
+              }
+            />
+          </div>
        </div>
      ) : null}
-      <hr className="dark:border-neutral-700" />
-      <div className="grid sm:grid-cols-2 gap-3">
+
+      {optionsExpanded ? (
        <div>
-          <p className="text-sm text-black dark:text-white mb-2">Collection</p>
-          <CollectionSelection
-            onChange={setCollection}
-            // defaultValue={{
-            //   label: link.collection.name,
-            //   value: link.collection.id,
-            // }}
-            defaultValue={
-              link.collection.name && link.collection.id
-                ? {
-                    value: link.collection.id,
-                    label: link.collection.name,
+          <hr className="mb-3 border border-sky-100 dark:border-neutral-700" />
+          <div className="grid sm:grid-cols-2 gap-3">
+            <div className={`${method === "UPDATE" ? "sm:col-span-2" : ""}`}>
+              <p className="text-sm text-black dark:text-white mb-2">Name</p>
+              <TextInput
+                value={link.name}
+                onChange={(e) => setLink({ ...link, name: e.target.value })}
+                placeholder="e.g. Example Link"
+              />
+            </div>
+
+            {method === "UPDATE" ? (
+              <div>
+                <p className="text-sm text-black dark:text-white mb-2">
+                  Collection
+                </p>
+                <CollectionSelection
+                  onChange={setCollection}
+                  defaultValue={
+                    link.collection.name && link.collection.id
+                      ? {
+                          value: link.collection.id,
+                          label: link.collection.name,
+                        }
+                      : {
+                          value: null as unknown as number,
+                          label: "Unorganized",
+                        }
                  }
-                : undefined
-            }
-          />
+                />
+              </div>
+            ) : undefined}
+
+            <div>
+              <p className="text-sm text-black dark:text-white mb-2">Tags</p>
+              <TagSelection
+                onChange={setTags}
+                defaultValue={link.tags.map((e) => {
+                  return { label: e.name, value: e.id };
+                })}
+              />
+            </div>
+
+            <div className="sm:col-span-2">
+              <p className="text-sm text-black dark:text-white mb-2">
+                Description
+              </p>
+              <textarea
+                value={unescapeString(link.description) as string}
+                onChange={(e) =>
+                  setLink({ ...link, description: e.target.value })
+                }
+                placeholder={
+                  method === "CREATE"
+                    ? "Will be auto generated if nothing is provided."
+                    : ""
+                }
+                className="resize-none w-full rounded-md p-2 border-sky-100 dark:border-neutral-700 focus:border-sky-300 dark:focus:border-sky-600 border-solid border outline-none duration-100 dark:bg-neutral-950"
+              />
+            </div>
+          </div>
+        </div>
+      ) : undefined}
+
+      <div className="flex justify-between items-center mt-2">
+        <div
+          onClick={() => setOptionsExpanded(!optionsExpanded)}
+          className={`${
+            method === "UPDATE" ? "hidden" : ""
+          } rounded-md cursor-pointer hover:bg-slate-200 hover:dark:bg-neutral-700 duration-100 py-1 px-2 w-fit text-sm`}
+        >
+          {optionsExpanded ? "Hide" : "More"} Options
        </div>

-        <div>
-          <p className="text-sm text-black dark:text-white mb-2">Tags</p>
-          <TagSelection
-            onChange={setTags}
-            defaultValue={link.tags.map((e) => {
-              return { label: e.name, value: e.id };
-            })}
-          />
-        </div>
-
-        <div className="sm:col-span-2">
-          <p className="text-sm text-black dark:text-white mb-2">Name</p>
-          <TextInput
-            value={link.name}
-            onChange={(e) => setLink({ ...link, name: e.target.value })}
-            placeholder="e.g. Example Link"
-          />
-        </div>
-
-        <div className="sm:col-span-2">
-          <p className="text-sm text-black dark:text-white mb-2">Description</p>
-          <textarea
-            value={link.description}
-            onChange={(e) => setLink({ ...link, description: e.target.value })}
-            placeholder={
-              method === "CREATE"
-                ? "Will be auto generated if nothing is provided."
-                : ""
-            }
-            className="resize-none w-full rounded-md p-2 border-sky-100 dark:border-neutral-700 focus:border-sky-300 dark:focus:border-sky-600 border-solid border outline-none duration-100 dark:bg-neutral-950"
-          />
-        </div>
+        <SubmitButton
+          onClick={submit}
+          label={method === "CREATE" ? "Add" : "Save"}
+          icon={method === "CREATE" ? faPlus : faPenToSquare}
+          loading={submitLoader}
+          className={`${method === "CREATE" ? "" : "mx-auto"}`}
+        />
      </div>
-
-      <SubmitButton
-        onClick={submit}
-        label={method === "CREATE" ? "Add" : "Save"}
-        icon={method === "CREATE" ? faPlus : faPenToSquare}
-        loading={submitLoader}
-        className={`mx-auto mt-2`}
-      />
    </div>
  );
 }
@@ -21,12 +21,14 @@ import {
 } from "@fortawesome/free-regular-svg-icons";
 import isValidUrl from "@/lib/client/isValidUrl";
 import { useTheme } from "next-themes";
+import unescapeString from "@/lib/client/unescapeString";

 type Props = {
  link: LinkIncludingShortenedCollectionAndTags;
+  isOwnerOrMod: boolean;
 };

-export default function LinkDetails({ link }: Props) {
+export default function LinkDetails({ link, isOwnerOrMod }: Props) {
  const { theme, setTheme } = useTheme();

  const [imageError, setImageError] = useState<boolean>(false);
@@ -123,7 +125,9 @@ export default function LinkDetails({ link }: Props) {
  return (
    <div
      id="link-banner-outside"
-      className="flex flex-col gap-3 sm:w-[35rem] w-80"
+      className={`flex flex-col gap-3 sm:w-[35rem] w-80 ${
+        isOwnerOrMod ? "" : "mt-12"
+      }`}
    >
      {!imageError && (
        <div id="link-banner" className="link-banner h-32 -mx-5 -mt-5 relative">
@@ -140,7 +144,7 @@ export default function LinkDetails({ link }: Props) {
            height={42}
            alt=""
            id={"favicon-" + link.id}
-            className="select-none mt-2 rounded-md shadow border-[3px] border-white dark:border-neutral-900 bg-white dark:bg-neutral-900 aspect-square"
+            className="select-none mt-2 w-10 rounded-md shadow border-[3px] border-white dark:border-neutral-900 bg-white dark:bg-neutral-900 aspect-square"
            draggable="false"
            onLoad={(e) => {
              try {
@@ -159,15 +163,17 @@ export default function LinkDetails({ link }: Props) {
            }}
          />
        )}
-        <div className="flex flex-col min-h-[3rem] justify-end drop-shadow">
+        <div className="flex w-full flex-col min-h-[3rem] justify-center drop-shadow">
          <p className="text-2xl text-black dark:text-white capitalize break-words hyphens-auto">
-            {link.name}
+            {unescapeString(link.name)}
          </p>
          <Link
            href={link.url}
            target="_blank"
            rel="noreferrer"
-            className="text-sm text-gray-500 dark:text-gray-300 break-all hover:underline cursor-pointer w-fit"
+            className={`${
+              link.name ? "text-sm" : "text-xl"
+            } text-gray-500 dark:text-gray-300 break-all hover:underline cursor-pointer w-fit`}
          >
            {url ? url.host : link.url}
          </Link>
@@ -204,7 +210,7 @@ export default function LinkDetails({ link }: Props) {
      {link.description && (
        <>
          <div className="text-black dark:text-white max-h-[20rem] my-3 rounded-md overflow-y-auto hyphens-auto">
-            {link.description}
+            {unescapeString(link.description)}
          </div>
        </>
      )}
@@ -37,11 +37,7 @@ export default function LinkModal({
            New Link
          </p>
        )}
-        <Tab.List
-          className={`flex justify-center flex-col max-w-[15rem] sm:max-w-[30rem] mx-auto sm:flex-row gap-2 sm:gap-3 mb-5 text-black dark:text-white ${
-            isOwnerOrMod ? "" : "pb-8"
-          }`}
-        >
+        <Tab.List className="flex justify-center flex-col max-w-[15rem] sm:max-w-[30rem] mx-auto sm:flex-row gap-2 sm:gap-3 mb-5 text-black dark:text-white">
          {method === "UPDATE" && isOwnerOrMod && (
            <>
              <Tab
@@ -68,7 +64,7 @@ export default function LinkModal({
        <Tab.Panels>
          {activeLink && method === "UPDATE" && (
            <Tab.Panel>
-              <LinkDetails link={activeLink} />
+              <LinkDetails link={activeLink} isOwnerOrMod={isOwnerOrMod} />
            </Tab.Panel>
          )}

@@ -21,7 +21,7 @@ export default async function postLink(
  }

  if (!link.collection.name) {
-    link.collection.name = "Unnamed Collection";
+    link.collection.name = "Unorganized";
  }

  link.collection.name = link.collection.name.trim();
@@ -35,8 +35,13 @@ export default async function updateLink(
    link.collection.ownerId === userId &&
    targetLink?.collection.ownerId === userId;

+  const authorizedSwitchCollection =
+    !isCollectionOwner && targetLink?.collection.id === link.collection.id;
+
+  console.log(authorizedSwitchCollection);
+
  // Makes sure collection members (non-owners) cannot move a link to/from a collection.
-  if (!isCollectionOwner)
+  if (!authorizedSwitchCollection)
    return {
      response: "You can't move a link to/from a collection you don't own.",
      status: 401,
@@ -125,7 +125,7 @@ const fileNotFoundTemplate = `<!DOCTYPE html>
                                <h2>It is possible that the file you're looking for either doesn't exist or hasn't been created yet.</h2>
                                <h3>Some possible reasons are:</h3>
                                <ul>
-                                  <li>You are trying to access a file too early, before it has been fully archived.</li>
+                                  <li>You are trying to access a file too early, before it has been fully archived. In this case, refreshing the page might resolve the issue.</li>
                                  <li>The file doesn't exist either because it encountered an error while being archived, or it simply doesn't exist.</li>
                                </ul>
                              </body>
@@ -0,0 +1,4 @@
+export default function htmlDecode(input: string) {
+  var doc = new DOMParser().parseFromString(input, "text/html");
+  return doc.documentElement.textContent;
+}