Added tag support + Post link and many more changes and optimizations.

2023-02-24 21:02:28 +03:30
parent e0f4c71eb2
commit 9b53608097
36 changed files with 1062 additions and 176 deletions
@@ -0,0 +1,100 @@
+import React, { useState } from "react";
+import CollectionSelection from "./InputSelect/CollectionSelection";
+import TagSelection from "./InputSelect/TagSelection";
+
+interface NewLink {
+  name: string;
+  url: string;
+  tags: string[];
+  collectionId:
+    | {
+        id: string | number;
+        isNew: boolean | undefined;
+      }
+    | object;
+}
+
+export default function () {
+  const [newLink, setNewLink] = useState<NewLink>({
+    name: "",
+    url: "",
+    tags: [],
+    collectionId: {},
+  });
+
+  const setTags = (e: any) => {
+    const tagNames = e.map((e: any) => {
+      return e.label;
+    });
+
+    setNewLink({ ...newLink, tags: tagNames });
+  };
+
+  const setCollection = (e: any) => {
+    const collection = { id: e?.value, isNew: e?.__isNew__ };
+
+    setNewLink({ ...newLink, collectionId: collection });
+  };
+
+  const postLink = async () => {
+    const response = await fetch("/api/routes/links", {
+      body: JSON.stringify(newLink),
+      headers: {
+        "Content-Type": "application/json",
+      },
+      method: "POST",
+    });
+
+    const data = await response.json();
+
+    console.log(newLink);
+
+    console.log(data);
+  };
+
+  return (
+    <div className="border-sky-100 border-solid border rounded-md shadow-lg p-5 bg-white flex flex-col gap-3">
+      <p className="font-bold text-sky-300 mb-2 text-center">New Link</p>
+
+      <div className="flex gap-5 items-center justify-between">
+        <p className="text-sm font-bold text-sky-300">Name</p>
+        <input
+          value={newLink.name}
+          onChange={(e) => setNewLink({ ...newLink, name: e.target.value })}
+          type="text"
+          placeholder="e.g. Example Link"
+          className="w-60 rounded p-2 border-sky-100 border-solid border text-sm outline-none focus:border-sky-500 duration-100"
+          autoFocus
+        />
+      </div>
+
+      <div className="flex gap-5 items-center justify-between">
+        <p className="text-sm font-bold text-sky-300">URL</p>
+        <input
+          value={newLink.url}
+          onChange={(e) => setNewLink({ ...newLink, url: e.target.value })}
+          type="text"
+          placeholder="e.g. http://example.com/"
+          className="w-60 rounded p-2 border-sky-100 border-solid border text-sm outline-none focus:border-sky-500 duration-100"
+        />
+      </div>
+
+      <div className="flex gap-5 items-center justify-between">
+        <p className="text-sm font-bold text-sky-300">Tags</p>
+        <TagSelection onChange={setTags} />
+      </div>
+
+      <div className="flex gap-5 items-center justify-between">
+        <p className="text-sm font-bold text-sky-300">Collection</p>
+        <CollectionSelection onChange={setCollection} />
+      </div>
+
+      <div
+        className="mx-auto mt-2 bg-sky-500 text-white py-2 px-5 rounded select-none font-bold cursor-pointer duration-100 hover:bg-sky-400"
+        onClick={() => postLink()}
+      >
+        Add Link
+      </div>
+    </div>
+  );
+}
@@ -20,19 +20,15 @@ function useOutsideAlerter(
      }
    }
    // Bind the event listener
-    document.addEventListener("mousedown", handleClickOutside);
+    document.addEventListener("mouseup", handleClickOutside);
    return () => {
      // Unbind the event listener on clean up
-      document.removeEventListener("mousedown", handleClickOutside);
+      document.removeEventListener("mouseup", handleClickOutside);
    };
  }, [ref, onClickOutside]);
 }

-export default function OutsideAlerter({
-  children,
-  onClickOutside,
-  className,
-}: Props) {
+export default function ({ children, onClickOutside, className }: Props) {
  const wrapperRef = useRef(null);
  useOutsideAlerter(wrapperRef, onClickOutside);

@@ -0,0 +1,21 @@
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faChevronRight } from "@fortawesome/free-solid-svg-icons";
+import { Collection } from "@prisma/client";
+
+export default function ({ collection }: { collection: Collection }) {
+  const formattedDate = new Date(collection.createdAt).toLocaleString("en-US", {
+    year: "numeric",
+    month: "short",
+    day: "numeric",
+  });
+
+  return (
+    <div className="p-5 bg-gray-100 m-2 h-40 w-60 rounded border-sky-100 border-solid border flex flex-col justify-between cursor-pointer hover:bg-gray-50 duration-100">
+      <div className="flex justify-between text-sky-900 items-center">
+        <p className="text-lg w-max">{collection.name}</p>
+        <FontAwesomeIcon icon={faChevronRight} className="w-3" />
+      </div>
+      <p className="text-sm text-sky-300 font-bold">{formattedDate}</p>
+    </div>
+  );
+}
@@ -1,32 +0,0 @@
-import useCollectionSlice from "@/store/collection";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faChevronRight } from "@fortawesome/free-solid-svg-icons";
-
-export default function Collections() {
-  const { collections } = useCollectionSlice();
-
-  return (
-    <div className="flex flex-wrap">
-      {collections.map((e, i) => {
-        const formattedDate = new Date(e.createdAt).toLocaleString("en-US", {
-          year: "numeric",
-          month: "short",
-          day: "numeric",
-        });
-
-        return (
-          <div
-            className="p-5 bg-gray-100 m-2 h-40 w-60 rounded border-sky-100 border-solid border flex flex-col justify-between cursor-pointer hover:shadow duration-100"
-            key={i}
-          >
-            <div className="flex justify-between text-sky-900">
-              <p className="text-lg w-max">{e.name}</p>
-              <FontAwesomeIcon icon={faChevronRight} className="w-3" />
-            </div>
-            <p className="text-sm text-sky-300">{formattedDate}</p>
-          </div>
-        );
-      })}
-    </div>
-  );
-}
@@ -0,0 +1,43 @@
+import useCollectionSlice from "@/store/collection";
+import { useRouter } from "next/router";
+import { useEffect, useState } from "react";
+import CreatableSelect from "react-select/creatable";
+import { styles } from "./styles";
+import { Options } from "./types";
+
+export default function ({ onChange }: any) {
+  const { collections } = useCollectionSlice();
+  const router = useRouter();
+
+  const [options, setOptions] = useState<Options[]>([]);
+
+  const collectionId = Number(router.query.id);
+
+  const activeCollection = collections.find((e) => {
+    return e.id === collectionId;
+  });
+
+  const defaultCollection = {
+    value: activeCollection?.id,
+    label: activeCollection?.name,
+  };
+
+  useEffect(() => {
+    const formatedCollections = collections.map((e) => {
+      return { value: e.id, label: e.name };
+    });
+
+    setOptions(formatedCollections);
+  }, [collections]);
+
+  return (
+    <CreatableSelect
+      isClearable
+      onChange={onChange}
+      options={options}
+      styles={styles}
+      defaultValue={defaultCollection}
+      menuPosition="fixed"
+    />
+  );
+}
@@ -0,0 +1,30 @@
+import useTagSlice from "@/store/tags";
+import { useEffect, useState } from "react";
+import CreatableSelect from "react-select/creatable";
+import { styles } from "./styles";
+import { Options } from "./types";
+
+export default function ({ onChange }: any) {
+  const { tags } = useTagSlice();
+
+  const [options, setOptions] = useState<Options[]>([]);
+
+  useEffect(() => {
+    const formatedCollections = tags.map((e) => {
+      return { value: e.id, label: e.name };
+    });
+
+    setOptions(formatedCollections);
+  }, [tags]);
+
+  return (
+    <CreatableSelect
+      isClearable
+      onChange={onChange}
+      options={options}
+      styles={styles}
+      menuPosition="fixed"
+      isMulti
+    />
+  );
+}
@@ -0,0 +1,64 @@
+import { StylesConfig } from "react-select";
+
+const font =
+  "ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji";
+
+export const styles: StylesConfig = {
+  option: (styles, state) => ({
+    ...styles,
+    fontFamily: font,
+    cursor: "pointer",
+    backgroundColor: state.isSelected ? "#0ea5e9" : "inherit",
+    "&:hover": {
+      backgroundColor: state.isSelected ? "#0ea5e9" : "#bae6fd",
+    },
+    transition: "all 50ms",
+  }),
+  control: (styles) => ({
+    ...styles,
+    fontFamily: font,
+    border: "none",
+  }),
+  container: (styles) => ({
+    ...styles,
+    width: "15rem",
+    border: "1px solid #e0f2fe",
+    borderRadius: "0.25rem",
+    fontSize: "0.875rem",
+    lineHeight: "1.25rem",
+  }),
+  input: (styles) => ({
+    ...styles,
+    cursor: "text",
+  }),
+  dropdownIndicator: (styles) => ({
+    ...styles,
+    cursor: "pointer",
+  }),
+  clearIndicator: (styles) => ({
+    ...styles,
+    cursor: "pointer",
+  }),
+  placeholder: (styles) => ({
+    ...styles,
+    borderColor: "black",
+  }),
+  multiValue: (styles) => {
+    return {
+      ...styles,
+      backgroundColor: "#0ea5e9",
+      color: "white",
+    };
+  },
+  multiValueLabel: (styles) => ({
+    ...styles,
+    color: "white",
+  }),
+  multiValueRemove: (styles) => ({
+    ...styles,
+    ":hover": {
+      color: "white",
+      backgroundColor: "#38bdf8",
+    },
+  }),
+};
@@ -0,0 +1,4 @@
+export interface Options {
+  value: string | number;
+  label: string;
+}
@@ -1,4 +1,4 @@
-export default function Loader() {
+export default function () {
  return (
    <div>
      <p>Loading...</p>
@@ -1,11 +1,59 @@
 import { signOut } from "next-auth/react";
+import { useRouter } from "next/router";
+import useCollectionSlice from "@/store/collection";
+import { Collection } from "@prisma/client";
+import ClickAwayHandler from "./ClickAwayHandler";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faPlus, faMagnifyingGlass } from "@fortawesome/free-solid-svg-icons";
+import { useState } from "react";
+import AddLinkModal from "./AddLinkModal";
+
+export default function () {
+  const router = useRouter();
+  const collectionId = router.query.id;
+
+  const { collections } = useCollectionSlice();
+
+  const activeCollection: Collection | undefined = collections.find(
+    (e) => e.id.toString() == collectionId
+  );
+
+  const [collectionInput, setCollectionInput] = useState(false);
+
+  const toggleCollectionInput = () => {
+    setCollectionInput(!collectionInput);
+  };

-export default function Navbar() {
  return (
-    <div className="flex justify-between p-5 border-solid border-b-sky-100 border border-l-white">
-      <p>Navbar</p>
-      <div onClick={() => signOut()} className="cursor-pointer w-max">
-        Sign Out
+    <div className="flex justify-between items-center p-5 border-solid border-b-sky-100 border border-l-white">
+      <p>{activeCollection?.name}</p>
+      <div className="flex items-center gap-3">
+        <FontAwesomeIcon
+          icon={faPlus}
+          onClick={toggleCollectionInput}
+          className="select-none cursor-pointer w-5 h-5 text-white bg-sky-500 p-2 rounded hover:bg-sky-400 duration-100"
+        />
+        <FontAwesomeIcon
+          icon={faMagnifyingGlass}
+          className="select-none cursor-pointer w-5 h-5 text-white bg-sky-500 p-2 rounded hover:bg-sky-400 duration-100"
+        />
+        <div
+          onClick={() => signOut()}
+          className="cursor-pointer w-max text-sky-900"
+        >
+          Sign Out
+        </div>
+
+        {collectionInput ? (
+          <div className="fixed top-0 bottom-0 right-0 left-0 bg-gray-500 bg-opacity-10 flex items-center">
+            <ClickAwayHandler
+              onClickOutside={toggleCollectionInput}
+              className="w-fit mx-auto"
+            >
+              <AddLinkModal />
+            </ClickAwayHandler>
+          </div>
+        ) : null}
      </div>
    </div>
  );
@@ -0,0 +1,26 @@
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { Collection } from "@prisma/client";
+import { IconProp } from "@fortawesome/fontawesome-svg-core";
+import { MouseEventHandler } from "react";
+
+interface TextObject {
+  name: string;
+}
+
+interface SidebarItemProps {
+  item: Collection | TextObject;
+  icon: IconProp;
+  onClick?: MouseEventHandler;
+}
+
+export default function ({ item, icon, onClick }: SidebarItemProps) {
+  return (
+    <div
+      onClick={onClick}
+      className="hover:bg-gray-50 duration-100 text-sky-900 rounded my-1 p-3 cursor-pointer flex items-center gap-2"
+    >
+      <FontAwesomeIcon icon={icon} className="w-4 text-sky-300" />
+      <p>{item.name}</p>
+    </div>
+  );
+}
@@ -3,20 +3,26 @@ import ClickAwayHandler from "@/components/ClickAwayHandler";
 import { useState } from "react";
 import useCollectionSlice from "@/store/collection";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faFolder, faUserCircle } from "@fortawesome/free-regular-svg-icons";
+import { faUserCircle } from "@fortawesome/free-regular-svg-icons";
 import {
-  faDatabase,
  faPlus,
  faChevronDown,
+  faFolder,
+  faHouse,
+  faHashtag,
 } from "@fortawesome/free-solid-svg-icons";
+import SidebarItem from "./SidebarItem";
+import useTagSlice from "@/store/tags";

-export default function Sidebar() {
+export default function () {
  const { data: session } = useSession();

  const [collectionInput, setCollectionInput] = useState(false);

  const { collections, addCollection } = useCollectionSlice();

+  const { tags } = useTagSlice();
+
  const user = session?.user;

  const toggleCollectionInput = () => {
@@ -36,7 +42,7 @@ export default function Sidebar() {

  return (
    <div className="fixed bg-gray-100 top-0 bottom-0 left-0 w-80 p-5 overflow-y-auto hide-scrollbar border-solid border-r-sky-100 border">
-      <div className="flex gap-3 items-center mb-5 cursor-pointer w-fit text-gray-600">
+      <div className="flex gap-3 items-center mb-5 p-3 cursor-pointer w-fit text-gray-600">
        <FontAwesomeIcon icon={faUserCircle} className="h-8" />
        <div className="flex items-center gap-1">
          <p>{user?.name}</p>
@@ -44,13 +50,10 @@ export default function Sidebar() {
        </div>
      </div>

-      <div className="hover:bg-sky-100 hover:shadow-sm duration-100 text-sky-900 rounded my-1 p-3 cursor-pointer flex items-center gap-2">
-        <FontAwesomeIcon icon={faDatabase} className="w-4" />
-        <p>All Collections</p>
-      </div>
+      <SidebarItem item={{ name: "All Collections" }} icon={faHouse} />

      <div className="text-gray-500 flex items-center justify-between mt-5">
-        <p>Collections</p>
+        <p className="text-sm p-3">Collections</p>
        {collectionInput ? (
          <ClickAwayHandler
            onClickOutside={toggleCollectionInput}
@@ -59,7 +62,7 @@ export default function Sidebar() {
            <input
              type="text"
              placeholder="Enter Collection Name"
-              className="w-44 rounded p-1"
+              className="w-44 rounded p-2 border-sky-100 border-solid border text-sm outline-none"
              onKeyDown={submitCollection}
              autoFocus
            />
@@ -68,21 +71,21 @@ export default function Sidebar() {
          <FontAwesomeIcon
            icon={faPlus}
            onClick={toggleCollectionInput}
-            className="select-none cursor-pointer rounded p-2 w-3"
+            className="select-none cursor-pointer p-2 w-3"
          />
        )}
      </div>
      <div>
        {collections.map((e, i) => {
-          return (
-            <div
-              className="hover:bg-sky-100 hover:shadow-sm duration-100 text-sky-900 rounded my-1 p-3 cursor-pointer flex items-center gap-2"
-              key={i}
-            >
-              <FontAwesomeIcon icon={faFolder} className="w-4" />
-              <p>{e.name}</p>
-            </div>
-          );
+          return <SidebarItem key={i} item={e} icon={faFolder} />;
+        })}
+      </div>
+      <div className="text-gray-500 flex items-center justify-between mt-5">
+        <p className="text-sm p-3">Tags</p>
+      </div>
+      <div>
+        {tags.map((e, i) => {
+          return <SidebarItem key={i} item={e} icon={faHashtag} />;
        })}
      </div>
    </div>