fix: fix next middleware

.babelrc

@@ -0,0 +1,4 @@
+{
+  "presets": ["next/babel"],
+  "plugins": ["superjson-next"]
+}

.eslintrc.json

@@ -1,3 +1,44 @@
 {
-  "extends": "next/core-web-vitals"
+  "extends": ["next/core-web-vitals", "airbnb", "airbnb/hooks", "prettier"],
+  "plugins": ["react", "@typescript-eslint", "prettier"],
+  "env": {
+    "browser": true,
+    "es2021": true,
+    "node": true
+  },
+  "parser": "@typescript-eslint/parser",
+  "parserOptions": {
+    "ecmaFeatures": {
+      "jsx": true
+    },
+    "ecmaVersion": 13,
+    "sourceType": "module"
+  },
+  "rules": {
+    "react/react-in-jsx-scope": "off",
+    "react/prop-types": "off",
+    "react/jsx-props-no-spreading": "off",
+    "import/prefer-default-export": "off",
+    "no-param-reassign": "off",
+    "import/extensions": [
+      "error",
+      "ignorePackages",
+      {
+        "ts": "never",
+        "tsx": "never"
+      }
+    ],
+    "consistent-return": "off",
+    "arrow-body-style": "on",
+    "prefer-arrow-callback": "off",
+    "react/jsx-filename-extension": "off",
+    "react/function-component-definition": [
+      "error",
+      {
+        "namedComponents": "arrow-function",
+        "unnamedComponents": "arrow-function"
+      }
+    ],
+    "prettier/prettier": "warn"
+  }
 }

.gitignore

@@ -30,3 +30,4 @@ yarn-error.log*
 
 # vercel
 .vercel
+.env

components/authForm.tsx

@@ -0,0 +1,73 @@
+import { Button, Input, Box, Flex } from "@chakra-ui/react";
+import { useRouter } from "next/router";
+import React from "react";
+import { useSWRConfig } from "swr";
+import { auth } from "../lib/mutations";
+import NextImage from "next/image";
+
+type Props = {
+  mode: "signin" | "signup";
+};
+
+type LoadingState = "loading" | "idle";
+
+const AuthForm: React.FC<Props> = ({ mode }) => {
+  const [email, setEmail] = React.useState("");
+  const [password, setPassword] = React.useState("");
+  const [loading, setLoading] = React.useState<LoadingState>("idle");
+
+  const router = useRouter();
+
+  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    setLoading("loading");
+    const user = await auth(mode, { email, password });
+
+    setLoading('idle')
+    router.push('/')
+  };
+
+  return (
+    <Box height="100vh" width="100vw" bg="black" color="white">
+      <Flex
+        justify="center"
+        align="center"
+        height="100px"
+        borderBottom="white 1px solid"
+      >
+        <NextImage src="/logo.svg" height={60} width={120} />
+      </Flex>
+      <Flex justify="center" align="center" height="calc(100vh - 100px)">
+        <Box padding="50px" bg="gray.900" borderRadius="6px">
+          <form onSubmit={handleSubmit}>
+            <Input
+              placeholder="email"
+              type="email"
+              onChange={(e) => setEmail(e.target.value)}
+            />
+            <Input
+              placeholder="password"
+              type="password"
+              onChange={(e) => setPassword(e.target.value)}
+            />
+
+            <Button
+              type="submit"
+              bg="green.500"
+              isLoading={loading === "loading"}
+              sx={{
+                "&:hover": {
+                  bg: "green.300",
+                },
+              }}
+            >
+              {mode}
+            </Button>
+          </form>
+        </Box>
+      </Flex>
+    </Box>
+  );
+};
+
+export default AuthForm;

components/playerLayout.tsx

@@ -0,0 +1,25 @@
+import { Box } from "@chakra-ui/layout";
+import React from "react";
+import Sidebar from "./sidebar";
+
+type Props = {
+  children: React.ReactNode;
+};
+
+const PlayerLayout: React.FC<Props> = ({ children }) => {
+  return (
+    <Box width="100vw" height="100vh">
+      <Box position={"absolute"} top="0" width={"250px"} left="0">
+        <Sidebar />
+      </Box>
+      <Box marginLeft={"250px"} marginBottom="100px">
+        {children}
+      </Box>
+      <Box position={"absolute"} left="0" bottom="0">
+        player
+      </Box>
+    </Box>
+  );
+};
+
+export default PlayerLayout;

components/sidebar.tsx

@@ -0,0 +1,136 @@
+import {
+  Box,
+  Center,
+  Divider,
+  LinkBox,
+  LinkOverlay,
+  List,
+  ListIcon,
+  ListItem,
+} from "@chakra-ui/layout";
+import {
+  MdHome,
+  MdLibraryMusic,
+  MdSearch,
+  MdPlaylistAdd,
+  MdFavorite,
+} from "react-icons/md";
+import NextImage from "next/image";
+import NextLink from "next/link";
+
+import { IconType } from "react-icons/lib";
+
+type navProps = {
+  name: string;
+  icon: IconType;
+  route: string;
+};
+
+const menu: navProps[] = [
+  {
+    name: "Home",
+    icon: MdHome,
+    route: "/",
+  },
+  {
+    name: "Search",
+    icon: MdSearch,
+    route: "/search",
+  },
+  {
+    name: "Library",
+    icon: MdLibraryMusic,
+    route: "/library",
+  },
+];
+
+const musicMenu = [
+  {
+    name: "Create Playlist",
+    icon: MdPlaylistAdd,
+    route: "/",
+  },
+  {
+    name: "Favorites",
+    icon: MdFavorite,
+    route: "/favorites",
+  },
+];
+
+const playlists = new Array(30).fill(1).map((_, i) => `Playlist ${i + 1}`);
+
+const Sidebar = () => {
+  return (
+    <Box
+      width={"100%"}
+      height="calc(100vh - 100px)"
+      bg={"black"}
+      paddingX="5px"
+      color="gray"
+    >
+      <Box paddingY={"20px"} height="100%">
+        <Box width={"120px"} marginBottom="20px" paddingX={"20px"}>
+          <NextImage src={"/logo.svg"} height={60} width={120} />
+        </Box>
+
+        <Box marginBottom={"20px"}>
+          <List spacing={2}>
+            {menu.map((item) => (
+              <ListItem key={item.name} paddingX="20px" fontSize={"16px"}>
+                <LinkBox>
+                  <NextLink href={item.route} passHref>
+                    <LinkOverlay>
+                      <ListIcon
+                        as={item.icon}
+                        color="white"
+                        marginRight={"20px"}
+                      />
+                      {item.name}
+                    </LinkOverlay>
+                  </NextLink>
+                </LinkBox>
+              </ListItem>
+            ))}
+          </List>
+        </Box>
+        <Box marginBottom={"20px"}>
+          <List spacing={2}>
+            {musicMenu.map((item) => (
+              <ListItem key={item.name} paddingX="20px" fontSize={"16px"}>
+                <LinkBox>
+                  <NextLink href={item.route} passHref>
+                    <LinkOverlay>
+                      <ListIcon
+                        as={item.icon}
+                        color="white"
+                        marginRight={"20px"}
+                      />
+                      {item.name}
+                    </LinkOverlay>
+                  </NextLink>
+                </LinkBox>
+              </ListItem>
+            ))}
+          </List>
+        </Box>
+        <Divider color="gray.700" width={"90%"} marginX="auto" />
+
+        <Box height="66%" overflowY="auto" paddingY="20px">
+          <List spacing={2}>
+            {playlists.map((playlist) => (
+              <ListItem paddingX="20px" key={playlist}>
+                <LinkBox>
+                  <NextLink href={"/"} passHref>
+                    <LinkOverlay>{playlist}</LinkOverlay>
+                  </NextLink>
+                </LinkBox>
+              </ListItem>
+            ))}
+          </List>
+        </Box>
+      </Box>
+    </Box>
+  );
+};
+
+export default Sidebar;

lib/auth.ts

@@ -0,0 +1,33 @@
+import jwt from "jsonwebtoken";
+import { NextApiRequest, NextApiResponse } from "next";
+import prisma from "./prisma";
+
+export const validateRoutes = async (handler: any) => {
+  return async (req: NextApiRequest, res: NextApiResponse) => {
+    const { token } = req.cookies;
+
+    if (token) {
+      let user;
+
+      try {
+        const { id } = jwt.verify(token, String(process.env.JWT_SECRET)) as {
+          id: number;
+        };
+
+        user = await prisma.user.findUnique({
+          where: { id },
+        });
+
+        if (!user) {
+          throw new Error("User not found");
+        }
+      } catch (error) {
+        return res.status(401).json({ error: "Not Authorized" });
+      }
+
+      return handler(req, res, user);
+    }
+
+    return res.status(401).json({ error: "Not Authorized" });
+  };
+};

lib/fetcher.ts

@@ -0,0 +1,10 @@
+export default function fetcher(url: string, data?: any) {
+  return fetch(`${window.location.origin}/api${url}`, {
+    method: data ? "POST" : "GET",
+    credentials: "include",
+    headers: {
+      "Content-Type": "application/json",
+    },
+    body: data ? JSON.stringify(data) : null,
+  });
+}

lib/mutations.ts

@@ -0,0 +1,8 @@
+import fetcher from "./fetcher";
+
+export const auth = (
+  mode: "signin" | "signup",
+  body: { email: string; password: string }
+) => {
+  return fetcher(`/${mode}`, body);
+};

lib/prisma.ts

@@ -0,0 +1,3 @@
+import { PrismaClient } from "@prisma/client";
+
+export default new PrismaClient();

next-env.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.