Added clickAwayHandler + POST functionality + Bug fixed.

Layouts/MainLayout.tsx

@@ -3,15 +3,15 @@ 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 Loader from "../components/Loader";
 import useRedirection from "@/hooks/useRedirection";
 import { useRouter } from "next/router";
 
-interface LayoutProps {
+interface Props {
   children: ReactNode;
 }
 
-export default function Layout({ children }: LayoutProps) {
+export default function Layout({ children }: Props) {
   const { status } = useSession();
   const router = useRouter();
 

components/ClickAwayHandler.tsx

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

components/Collections.tsx

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

components/Sidebar.tsx

@@ -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">
+    <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>
   );
 }

pages/_app.tsx

@@ -1,4 +1,4 @@
-import MainLayout from "@/components/Layouts/MainLayout";
+import MainLayout from "@/Layouts/MainLayout";
 import "@/styles/globals.css";
 import { SessionProvider } from "next-auth/react";
 import type { AppProps } from "next/app";

pages/api/auth/register.ts

@@ -18,6 +18,9 @@ export default async function handler(
 ) {
   const body: User = req.body;
 
+  if (!body.email || !body.password || !body.name)
+    return res.status(400).json({ message: "Please fill out all the fields." });
+
   const checkIfUserExists = await prisma.user.findFirst({
     where: {
       email: body.email,
@@ -50,7 +53,8 @@ export default async function handler(
     });
 
     res.status(201).json({ message: "User successfully created." });
-  } else {
+  } else if (checkIfUserExists) {
+    console.log(checkIfUserExists);
     res.status(400).json({ message: "User already exists." });
   }
 }