✨ feat: Adding Auth and List of Links by User (#3)

* refactor
* setup nextjs-auth0
* store users on DB
* store shortlink with userId
* store links on user data
* fix bug on clipboard
* fix remove loading
* add table list

.env

@@ -0,0 +1 @@
+DATABASE_URL="postgresql://carlosazaustre:carlosazaustre@localhost:5432/links?schema=public"

components/FormAdd.js

@@ -21,8 +21,8 @@ export function FormAdd() {
   } = useForm();
 
   const toast = useToast();
-  const { hasCopied, onCopy } = useClipboard("TODO");
   const [link, setLink] = useState("");
+  const { hasCopied, onCopy } = useClipboard(link);
 
   const onSubmit = async (data) => {
     const response = await fetch("/api/shortUrl", {

components/Nav.js

@@ -0,0 +1,43 @@
+import { useUser } from "@auth0/nextjs-auth0";
+import { Flex, LinkBox, LinkOverlay, Text } from "@chakra-ui/react";
+
+export function Nav() {
+  const { user } = useUser();
+
+  if (!user) return null;
+
+  return (
+    <Flex
+      as="nav"
+      bg="white"
+      color="purple.500"
+      px={8}
+      py={4}
+      w="100%"
+      justify="flex-end"
+      align="center">
+      <Text mr={4}>Hi, {user.email}!</Text>
+      <LinkBox
+        borderWidth="1px"
+        borderColor="purple.500"
+        px={4}
+        py={2}
+        mr={4}
+        rounded="lg"
+        maxW="md"
+        _hover={{ bg: "purple.500", color: "white" }}>
+        <LinkOverlay href="/dashboard">My Links</LinkOverlay>
+      </LinkBox>
+      <LinkBox
+        borderWidth="1px"
+        borderColor="purple.500"
+        px={4}
+        py={2}
+        rounded="lg"
+        maxW="md"
+        _hover={{ bg: "purple.500", color: "white" }}>
+        <LinkOverlay href="/api/auth/logout">Logout</LinkOverlay>
+      </LinkBox>
+    </Flex>
+  );
+}

components/index.js

@@ -1,6 +1,7 @@
 // Layout
 export { Footer } from "./Footer";
 export { Header } from "./Header";
+export { Nav } from "./Nav";
 
 // Components
 export { FormAdd } from "./FormAdd";

lib/date.js

@@ -0,0 +1,3 @@
+import { format, parseISO } from "date-fns";
+
+export const formatDate = (date) => format(parseISO(date), "dd MMMM, yyyy");

lib/db.js

@@ -0,0 +1,70 @@
+import { PrismaClient } from "@prisma/client";
+
+// Link handlers
+export const createShortLink = async (url, shortUrl, userId) => {
+  const prisma = new PrismaClient();
+
+  const linkData = await prisma.link.create({
+    data: { url, shortUrl, userId },
+  });
+
+  await prisma.user.update({
+    where: { id: userId },
+    data: {
+      links: {
+        connect: {
+          id: linkData.id,
+        },
+      },
+    },
+  });
+
+  await prisma.$disconnect();
+  return linkData;
+};
+
+export const getURLbyShortLink = async (shortUrl) => {
+  const prisma = new PrismaClient();
+  const data = await prisma.link.findUnique({
+    where: { shortUrl },
+  });
+
+  if (!data) return null;
+
+  await prisma.$disconnect();
+  return data;
+};
+
+export const updateShortLinkClicks = async (shortUrl, data) => {
+  const prisma = new PrismaClient();
+  const response = await prisma.link.update({
+    where: { shortUrl },
+    data: { clicks: data.clicks++ },
+  });
+  await prisma.$disconnect();
+  return response;
+};
+
+// User handlers
+export const getUserByEmail = async (email) => {
+  const prisma = new PrismaClient();
+  const user = await prisma.user.findUnique({
+    where: {
+      email,
+    },
+    include: {
+      links: true,
+    },
+  });
+  await prisma.$disconnect();
+  return user;
+};
+
+export const createUser = async (email) => {
+  const prisma = new PrismaClient();
+  const user = await prisma.user.create({
+    data: { email },
+  });
+  await prisma.$disconnect();
+  return user;
+};