Added clickAwayHandler + POST functionality + Bug fixed.

2023-02-14 00:52:47 +03:30
parent eadf021939
commit cefeb5e7a9
6 changed files with 94 additions and 8 deletions
@@ -0,0 +1,35 @@
+import React, { useRef, useEffect, ReactNode, RefObject } from "react";
+
+interface Props {
+  children: ReactNode;
+  onClickOutside: Function;
+}
+
+function useOutsideAlerter(
+  ref: RefObject<HTMLElement>,
+  onClickOutside: Function
+) {
+  useEffect(() => {
+    function handleClickOutside(event: Event) {
+      if (
+        ref.current &&
+        !ref.current.contains(event.target as HTMLInputElement)
+      ) {
+        onClickOutside();
+      }
+    }
+    // Bind the event listener
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => {
+      // Unbind the event listener on clean up
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, [ref, onClickOutside]);
+}
+
+export default function OutsideAlerter({ children, onClickOutside }: Props) {
+  const wrapperRef = useRef(null);
+  useOutsideAlerter(wrapperRef, onClickOutside);
+
+  return <div ref={wrapperRef}>{children}</div>;
+}
@@ -18,7 +18,7 @@ export default function Collections() {
    <div className="flex flex-wrap">
      {collections.map((e, i) => {
        return (
-          <div className="p-5 bg-gray-100 m-2 w-max " key={i}>
+          <div className="p-5 bg-gray-200 m-2 w-max rounded" key={i}>
            <p>{e.name}</p>
          </div>
        );
@@ -1,53 +0,0 @@
-import Head from "next/head";
-import Navbar from "@/components/Navbar";
-import Sidebar from "@/components/Sidebar";
-import { ReactNode } from "react";
-import { useSession } from "next-auth/react";
-import Loader from "../Loader";
-import useRedirection from "@/hooks/useRedirection";
-import { useRouter } from "next/router";
-
-interface LayoutProps {
-  children: ReactNode;
-}
-
-export default function Layout({ children }: LayoutProps) {
-  const { status } = useSession();
-  const router = useRouter();
-
-  const redirection = useRedirection();
-
-  const routeExists = router.route === "/_error" ? false : true;
-
-  if (status === "authenticated" && !redirection && routeExists)
-    return (
-      <>
-        <Head>
-          <title>Linkwarden</title>
-          <meta name="viewport" content="width=device-width, initial-scale=1" />
-          <link rel="icon" href="/favicon.ico" />
-        </Head>
-        <div className="flex">
-          <Sidebar />
-          <div className="ml-80 w-full">
-            <div className="mx-auto w-full">
-              <Navbar />
-              {children}
-            </div>
-          </div>
-        </div>
-      </>
-    );
-  else if ((status === "unauthenticated" && !redirection) || !routeExists)
-    return (
-      <>
-        <Head>
-          <title>Linkwarden</title>
-          <meta name="viewport" content="width=device-width, initial-scale=1" />
-          <link rel="icon" href="/favicon.ico" />
-        </Head>
-        {children}
-      </>
-    );
-  else return <Loader />;
-}
@@ -1,13 +1,60 @@
 import { useSession } from "next-auth/react";
+import ClickAwayHandler from "@/components/ClickAwayHandler";
+import { useState } from "react";

 export default function Sidebar() {
  const { data: session, status } = useSession();

+  const [addCollection, setAddCollection] = useState(false);
+
  const user = session?.user;

+  const toggleAddCollection = () => {
+    setAddCollection(!addCollection);
+  };
+
+  const submitCollection = async (
+    event: React.KeyboardEvent<HTMLInputElement>
+  ) => {
+    const collectionName: string = (event.target as HTMLInputElement).value;
+
+    if (event.key === "Enter" && collectionName) {
+      await fetch("/api/routes/collections/postCollection", {
+        body: JSON.stringify({ collectionName }),
+        headers: {
+          "Content-Type": "application/json",
+        },
+        method: "POST",
+      })
+        .then((res) => res.json())
+        .then((data) => console.log(data));
+    }
+  };
+
  return (
-    <div className="fixed bg-gray-100 top-0 bottom-0 left-0 w-80">
-      <p>{user?.name}</p>
+    <div className="fixed bg-gray-200 top-0 bottom-0 left-0 w-80 p-5">
+      <div className="flex justify-between gap-5 items-center h-9">
+        <p>{user?.name}</p>
+
+        {addCollection ? (
+          <ClickAwayHandler onClickOutside={toggleAddCollection}>
+            <input
+              type="text"
+              placeholder="Enter Collection Name"
+              className="w-48 rounded p-2"
+              onKeyDown={submitCollection}
+              autoFocus
+            />
+          </ClickAwayHandler>
+        ) : (
+          <div
+            onClick={toggleAddCollection}
+            className="select-none cursor-pointer bg-white rounded p-2"
+          >
+            Create Collection +
+          </div>
+        )}
+      </div>
    </div>
  );
 }