Migrate to Next v13

.env.sample

@@ -1,5 +1,3 @@
 NEXT_PUBLIC_SUPABASE_URL=
-SUPABASE_JWT_SECRET=
-NEXT_PUBLIC_SUPABASE_KEY=
 NEXT_PUBLIC_SUPABASE_SERVICE_KEY=
-NEXT_PUBLIC_RANDOM_STRING=
+NEXT_PUBLIC_RANDOM_STRING=

.eslintrc.json

@@ -23,6 +23,7 @@
     "react/react-in-jsx-scope": "off",
     "react/prop-types": "off",
     "react/require-default-props": "off",
+    "import/prefer-default-export": "off",
     "jsx-a11y/anchor-is-valid": [
       "error",
       {

.gitignore

@@ -34,3 +34,5 @@ yarn-error.log*
 
 # typescript
 *.tsbuildinfo
+
+.vscode

.tool-versions

@@ -0,0 +1 @@
+nodejs 18.6.0

.vscode/settings.json

@@ -0,0 +1,4 @@
+{
+  "typescript.tsdk": "node_modules/typescript/lib",
+  "typescript.enablePromptUseWorkspaceTsdk": true
+}

app/about/page.tsx

@@ -0,0 +1,33 @@
+import Link from "next/link";
+import BackSVG from "@assets/back.svg";
+import GitHubSVG from "@assets/github.svg";
+
+export default function About() {
+  return (
+    <main className="flex h-full w-full flex-col items-center justify-between gap-8 bg-light-1 text-dark-1 dark:bg-dark-1 dark:text-light-3">
+      <Link href="/" title="Go back" className="m-6 self-start">
+        <BackSVG className="h-12 w-12 fill-transparent stroke-current hover:stroke-green hover:dark:stroke-pistachio" />
+      </Link>
+      <p className="mx-auto w-4/5 text-center leading-7 sm:w-3/5">
+        This is a simple note taking app that makes the most of crypto wallets
+        to anonymously store notes.
+        <br />
+        You can connect your MetaMask wallet, and then sign two simple strings -
+        the first will function as your unique identifier, the second as your
+        decryption key.
+        <br />
+        The notes are encrypted and stored on Supabase.
+      </p>
+      <a
+        className="mb-40 flex items-center gap-2 rounded-lg border border-current px-4 py-3 text-dark-1 hover:bg-green hover:text-light-1 dark:border-[.5px] dark:text-light-1 hover:dark:bg-pistachio hover:dark:text-dark-1"
+        title="GitHub"
+        target="_blank"
+        rel="noopener noreferrer"
+        href="https://github.com/finiam/notes-app"
+      >
+        <GitHubSVG className="h-8 w-8 fill-current" />
+        Github
+      </a>
+    </main>
+  );
+}

app/api/folders/route.ts

@@ -0,0 +1,60 @@
+import { catchError, ErrorResponse } from "@lib/apiHelper";
+import {
+  createFolder,
+  deleteFolder,
+  getFoldersBySig,
+  updateFolder,
+} from "@lib/db";
+import { NextRequest, NextResponse } from "next/server";
+
+export async function GET(req: NextRequest) {
+  return catchError(async () => {
+    const userSig = req.nextUrl.searchParams.get("userSig");
+
+    const { body } = await getFoldersBySig(userSig as string);
+
+    return NextResponse.json({ folders: body });
+  });
+}
+
+export async function POST(req: NextRequest) {
+  return catchError(async () => {
+    const { name, user } = await req.json();
+
+    const { data } = await createFolder({ name, user });
+
+    if (data) {
+      return NextResponse.json({ message: "Folder created", folder: data[0] });
+    }
+
+    return ErrorResponse("Something went wrong");
+  });
+}
+
+export async function DELETE(req: NextRequest) {
+  return catchError(async () => {
+    const id = req.nextUrl.searchParams.get("id");
+    const { data } = await deleteFolder(id as string);
+
+    if (data) {
+      return NextResponse.json({ message: "Folder deleted", folder: data[0] });
+    }
+
+    return ErrorResponse("Something went wrong");
+  });
+}
+
+export async function PUT(req: NextRequest) {
+  return catchError(async () => {
+    const id = req.nextUrl.searchParams.get("id");
+    const { name } = await req.json();
+
+    const { data } = await updateFolder(id as string, name);
+
+    if (data?.length) {
+      return NextResponse.json({ message: "Folder updated", folder: data[0] });
+    }
+
+    return ErrorResponse("Something went wrong");
+  });
+}

app/api/notes/route.ts

@@ -0,0 +1,64 @@
+import { catchError, ErrorResponse } from "@lib/apiHelper";
+import { createNote, deleteNote, getNotesBySig, updateNote } from "@lib/db";
+import { NextRequest, NextResponse } from "next/server";
+
+export async function GET(req: NextRequest) {
+  return catchError(async () => {
+    const userSig = req.nextUrl.searchParams.get("userSig");
+    const { body } = await getNotesBySig(userSig as string);
+
+    return NextResponse.json({
+      notes: body,
+    });
+  });
+}
+
+export async function POST(req: NextRequest) {
+  return catchError(async () => {
+    const { name, slug, folder, user } = await req.json();
+
+    const { data } = await createNote({ name, slug, folder, user });
+
+    if (data?.length) {
+      return NextResponse.json({ message: "Note created", note: data[0] });
+    }
+
+    return ErrorResponse("Something went wrong");
+  });
+}
+
+export async function DELETE(req: NextRequest) {
+  return catchError(async () => {
+    const id = req.nextUrl.searchParams.get("id");
+
+    const { data } = await deleteNote(id as string);
+
+    if (data) {
+      return NextResponse.json({ message: "Note deleted" });
+    }
+
+    return ErrorResponse("Something went wrong");
+  });
+}
+
+export async function PUT(req: NextRequest) {
+  return catchError(async () => {
+    const id = req.nextUrl.searchParams.get("id");
+    const { name, slug, tags, content } = await req.json();
+
+    const newNote = {
+      name,
+      slug,
+      tags,
+      content,
+    };
+
+    const { data } = await updateNote(id as string, newNote);
+
+    if (data?.length) {
+      return NextResponse.json({ message: "Note updated", note: data[0] });
+    }
+
+    return ErrorResponse("Something went wrong");
+  });
+}

app/api/public-notes/route.ts

@@ -0,0 +1,82 @@
+import { catchError, ErrorResponse } from "@lib/apiHelper";
+import {
+  createPublicNote,
+  deletePublicNote,
+  getPublicNotesBySig,
+  updatePublicNote,
+} from "@lib/db";
+import { NextRequest, NextResponse } from "next/server";
+
+export async function GET(req: NextRequest) {
+  return catchError(async () => {
+    const userSig = req.nextUrl.searchParams.get("userSig");
+
+    const { body } = await getPublicNotesBySig(userSig as string);
+
+    return NextResponse.json({
+      publicNotes: body,
+    });
+  });
+}
+
+export async function POST(req: NextRequest) {
+  return catchError(async () => {
+    const { name, content, tags, user, originalNote } = await req.json();
+    const { data } = await createPublicNote({
+      name,
+      content,
+      tags,
+      user,
+      originalNote,
+    });
+
+    if (data) {
+      return NextResponse.json({
+        message: "Public note created",
+        publicNote: data[0],
+      });
+    }
+
+    return ErrorResponse("Something went wrong");
+  });
+}
+
+export async function DELETE(req: NextRequest) {
+  return catchError(async () => {
+    const id = req.nextUrl.searchParams.get("id");
+
+    const { data } = await deletePublicNote(id as string);
+
+    if (data) {
+      return NextResponse.json({
+        message: "Public note deleted",
+      });
+    }
+
+    return ErrorResponse("Something went wrong");
+  });
+}
+
+export async function PUT(req: NextRequest) {
+  return catchError(async () => {
+    const id = req.nextUrl.searchParams.get("id");
+    const { name, tags, content } = await req.json();
+
+    const newPublicNote = {
+      name,
+      content,
+      tags,
+    };
+
+    const { data } = await updatePublicNote(id as string, newPublicNote);
+
+    if (data) {
+      return NextResponse.json({
+        message: "Public note updated",
+        publicNote: data[0],
+      });
+    }
+
+    return ErrorResponse("Something went wrong");
+  });
+}

app/api/users/route.ts

@@ -0,0 +1,38 @@
+import { catchError, ErrorResponse } from "@lib/apiHelper";
+import { createUser, getUser } from "@lib/db";
+import { NextRequest, NextResponse } from "next/server";
+
+export async function GET(req: NextRequest) {
+  return catchError(async () => {
+    const userSig = req.nextUrl.searchParams.get("userSig");
+
+    const { data } = await getUser(userSig as string);
+
+    if (data?.length) {
+      return NextResponse.json({ message: "User found", userData: data[0] });
+    }
+
+    return NextResponse.json(
+      { message: "User not found" },
+      {
+        status: 404,
+      },
+    );
+  });
+}
+
+export async function POST(req: NextRequest) {
+  return catchError(async () => {
+    const body = await req.json();
+
+    const { userSig, key } = body;
+
+    const { data } = await createUser(userSig, key);
+
+    if (data?.length) {
+      return NextResponse.json({ message: "User created", userData: data[0] });
+    }
+
+    return ErrorResponse("Something went wrong");
+  });
+}

app/layout.tsx

@@ -0,0 +1,18 @@
+import "../styles/globals.scss";
+
+export const metadata = {
+  title: "Notes app",
+  description: "Secure notes app",
+};
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <html lang="en">
+      <body>{children}</body>
+    </html>
+  );
+}

app/page.tsx

@@ -0,0 +1,53 @@
+"use client";
+
+import { Theme, useStore } from "@lib/store";
+import Logo from "@components/logo";
+import Menu from "@components/menu";
+import NoteEditor from "@components/note-editor";
+import Connect from "@components/connect";
+import Link from "next/link";
+
+export default function Root() {
+  const {
+    session: { isConnected, openNote },
+    preferences: { theme },
+  } = useStore();
+
+  return (
+    <div
+      className={`h-screen w-screen antialiased ${
+        theme === Theme.Dark ? "dark" : "light"
+      }`}
+    >
+      <main
+        className={`h-full bg-light-1 font-studio font-light text-dark-1 dark:bg-dark-1 dark:text-light-2 `}
+      >
+        {isConnected ? (
+          <div className="sm:grid sm:grid-cols-[max(15rem,_30%),_1fr] lg:grid-cols-[20rem,_1fr]">
+            <div className={`${openNote && "hidden"} sm:block`}>
+              <Menu />
+            </div>
+            <div className={`${!openNote ? "hidden" : ""} sm:block`}>
+              <NoteEditor />
+            </div>
+          </div>
+        ) : (
+          <div className="flex flex-col text-center">
+            <Link
+              href="/about"
+              className="self-end p-6 text-dark-3 hover:text-green dark:text-light-3 hover:dark:text-pistachio"
+            >
+              About
+            </Link>
+            <div className="mx-auto mt-24">
+              <Link href="/">
+                <Logo />
+              </Link>
+              <Connect />
+            </div>
+          </div>
+        )}
+      </main>
+    </div>
+  );
+}

components/folder.tsx

@@ -2,7 +2,6 @@ import { useState, useEffect, useMemo } from "react";
 import NotesList from "./notes-list";
 import { useStore } from "../lib/store";
 import useFilteredStore from "../lib/hooks/useFilteredStore";
-import { FolderType } from "..";
 import ChevronSVG from "../assets/chevron.svg";
 import FolderSVG from "../assets/folder.svg";