Merge pull request #13 from conuko/develop

Feature: Authorization Page

.env.example

@@ -7,7 +7,7 @@
 # When adding additional env variables, the schema in /env/schema.mjs should be updated accordingly
 
 # Prisma
-DATABASE_URL="postgresql://conuko:conuko@localhost:5433/guest_and_chat_book"
+DATABASE_URL="DATABASE_URL=mysql://root:password@localhost:3306/testdb"
 
 # Next Auth
 # You can generate the secret via 'openssl rand -base64 32' on Linux

src/components/Form.tsx

@@ -1,49 +1,77 @@
 import { trpc } from "../utils/trpc";
 import { useState } from "react";
 import { useSession } from "next-auth/react";
+import Link from "next/link";
 
 const Form = () => {
   const { data: session } = useSession();
+
+  const { data: subscriptionStatus, isLoading } =
+    trpc.user.subscriptionStatus.useQuery();
+
   const [message, setMessage] = useState("");
   const utils = trpc.useContext();
+
   const postMessage = trpc.guestbook.postMessage.useMutation({
     // refetch messages after a message is added
     async onSuccess() {
       await utils.guestbook.getAll.invalidate();
     },
   });
 
-  return (
-    <form
-      className="flex gap-2"
-      onSubmit={(event) => {
-        event.preventDefault();
-        postMessage.mutate({
-          userId: session?.user?.id as string,
-          name: session?.user?.name as string,
-          message,
-        });
-        setMessage("");
-      }}
-    >
-      <input
-        type="text"
-        value={message}
-        placeholder="Your message..."
-        minLength={2}
-        maxLength={100}
-        onChange={(event) => setMessage(event.target.value)}
-        className="rounded-md border-2 border-zinc-800 bg-neutral-900 px-4 py-2 opacity-50 focus:opacity-100 focus:outline-none"
-      />
-      <button
-        type="submit"
-        className="rounded-md border-2 border-zinc-800 p-2 focus:outline-none"
-        disabled={message.length < 2 || postMessage.isLoading}
+  if (isLoading) {
+    return <div>Loading...</div>;
+  }
+
+  if (!session) {
+    return <div>Not signed in</div>;
+  }
+
+  if (subscriptionStatus === "active") {
+    return (
+      <form
+        className="flex gap-2"
+        onSubmit={(event) => {
+          event.preventDefault();
+          postMessage.mutate({
+            userId: session?.user?.id as string,
+            name: session?.user?.name as string,
+            message,
+          });
+          setMessage("");
+        }}
       >
-        Submit
-      </button>
-    </form>
-  );
+        <input
+          type="text"
+          value={message}
+          placeholder="Your message..."
+          minLength={2}
+          maxLength={100}
+          onChange={(event) => setMessage(event.target.value)}
+          className="rounded-md border-2 border-zinc-800 bg-neutral-900 px-4 py-2 opacity-50 focus:opacity-100 focus:outline-none"
+        />
+        <button
+          type="submit"
+          className="rounded-md border-2 border-zinc-800 p-2 focus:outline-none"
+          disabled={message.length < 2 || postMessage.isLoading}
+        >
+          Submit
+        </button>
+      </form>
+    );
+  } else {
+    return (
+      <div className="flex flex-col gap-2">
+        <p className="text-center">
+          You need an active{" "}
+          <Link className="text-yellow-200 hover:text-yellow-400" href="/user">
+            subscription
+          </Link>{" "}
+          to post or edit messages.
+        </p>
+      </div>
+    );
+  }
 };
 
 export default Form;

src/components/Messages.tsx

@@ -5,6 +5,7 @@ import { useState } from "react";
 
 const Messages = () => {
   const { data: messages, isLoading } = trpc.guestbook.getAll.useQuery();
+  const { data: subscriptionStatus } = trpc.user.subscriptionStatus.useQuery();
   const { data: session } = useSession();
   const [modalIsOpen, setModalIsOpen] = useState(false);
   const [messageId, setMessageId] = useState("");
@@ -54,10 +55,11 @@ const Messages = () => {
     <div className="flex flex-col gap-4">
       {messages?.map((msg, index) => {
         /* 
-        if the message belongs to the user,
+        if the message belongs to the subscribed user,
         make it possible to click and edit message and show delete button:
         */
-        return msg.userId === session?.user?.id ? (
+        return msg.userId === session?.user?.id &&
+          subscriptionStatus === "active" ? (
           <div
             className="flex cursor-pointer items-center justify-between gap-2 rounded-md border-2 border-zinc-800 p-6 hover:border-zinc-500"
             key={index}

src/pages/user.tsx

@@ -82,36 +82,41 @@ const User: NextPage = () => {
             <Link href="/">Return</Link>
           </button>
         </div>
-        <div className="mt-10">
+        <div className="mt-10 mb-10">
           <Image
             className="mb-4"
             src={`${session.user?.image}`}
             width={48}
             height={48}
             alt="User Image"
           ></Image>
-          <p>
+          <div>
             Username: <p className="text-yellow-200">{session.user?.name}</p>
-          </p>
-          <p>
-            Email: <p className="text-yellow-200">{session.user?.email}</p>
-          </p>
-          <SignoutButton />
+          </div>
+          <div>
+            Email:{" "}
+            <p className="mb-10 text-yellow-200">{session.user?.email}</p>
+          </div>
           {!isLoading && subscriptionStatus !== null && (
             <>
-              <p className="text-xl text-gray-700">
-                Your subscription is {subscriptionStatus}.
-              </p>
+              <div className="mt-5 mb-2 flex flex-col gap-2 text-xl">
+                <p>
+                  {subscriptionStatus === "active" &&
+                    "✅ You are subscribed ✅"}
+                </p>
+                <p>Your subscription is {subscriptionStatus}.</p>
+              </div>
               <ManageBillingButton />
             </>
           )}
           {!isLoading && subscriptionStatus === null && (
             <>
-              <p className="text-xl text-gray-700">You are not subscribed!!!</p>
+              <p className="mt-5 mb-2 text-xl">⛔ You are not subscribed ⛔</p>
               <UpgradeButton />
             </>
           )}
         </div>
+        <SignoutButton />
       </div>
     </main>
   );