Merge pull request #18 from oslabs-beta/group/Newsletter

Group/newsletter

Author: jemzir

www/prisma/migrations/20221219231117_init/migration.sql

@@ -0,0 +1,9 @@
+-- CreateTable
+CREATE TABLE "User" (
+    "id" TEXT NOT NULL PRIMARY KEY,
+    "name" TEXT NOT NULL,
+    "email" TEXT NOT NULL,
+    "admin" BOOLEAN NOT NULL DEFAULT false,
+    "createdAt" DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updatedAt" DATETIME NOT NULL
+);

www/prisma/migrations/migration_lock.toml

@@ -0,0 +1,3 @@
+# Please do not edit this file manually
+# It should be added in your version-control system (i.e. Git)
+provider = "sqlite"

www/prisma/schema.prisma

@@ -10,8 +10,11 @@ datasource db {
   url      = env("DATABASE_URL")
 }
 
-model Example {
-  id        String   @id @default(cuid())
+model User {
+  id        String   @id @default(cuid()) 
+  name      String
+  email     String
+  admin     Boolean  @default(false)
   createdAt DateTime @default(now())
   updatedAt DateTime @updatedAt
 }

www/src/pages/components/LandingPage.tsx

@@ -4,9 +4,23 @@ import TeamSection from '../components/TeamSection';
 import FeaturesSection from '../components/FeaturesSection';
 import Image from 'next/image';
 import Blogs from './Blogs';
+import { useState } from 'react';
+import { trpc } from '../../utils/trpc';
+
+export default function LandingPage() {
+  const [name, setName] = useState('');
+  const [email, setEmail] = useState('');
+  const { mutate } = trpc.user.createUser.useMutation();
+  
+  const handleSubmit = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
+    e.preventDefault();
+    // grab the information of name and email
+    // bundle those together to be an object to be sent to backend
+    mutate({name, email});
+  }
 
-export default function LandingPage():any {
   return (
+    <>
     <div className="bg-gray-50">
       <main>
         {/* Hero section */}
@@ -42,6 +56,18 @@ export default function LandingPage():any {
                 </div>
                 <form action="#" className="mt-12 sm:flex sm:w-full sm:max-w-lg">
                   <div className="min-w-0 flex-1">
+                    <label htmlFor="name" className="sr-only">
+                      Name
+                    </label>
+                    <input
+                      id="name"
+                      type="text"
+                      className="block w-full rounded-md border border-gray-300 px-5 mb-2 py-3 text-base text-gray-900 placeholder-gray-500 shadow-sm focus:border-rose-500 focus:ring-rose-500"
+                      placeholder="Enter your name"
+                      required
+                      value = {name}
+                      onChange ={(e) => {setName(e.target.value)}}
+                    />
                     <label htmlFor="hero-email" className="sr-only">
                       Email address
                     </label>
@@ -50,12 +76,16 @@ export default function LandingPage():any {
                       type="email"
                       className="block w-full rounded-md border border-gray-300 px-5 py-3 text-base text-gray-900 placeholder-gray-500 shadow-sm focus:border-rose-500 focus:ring-rose-500"
                       placeholder="Enter your email"
+                      required
+                      value = {email}
+                      onChange = {(e) => {setEmail(e.target.value)}}
                     />
                   </div>
                   <div className="mt-4 sm:mt-0 sm:ml-3">
                     <button
                       type="submit"
-                      className="block w-full rounded-md border border-transparent bg-rose-500 px-5 py-3 text-base font-medium text-white shadow hover:bg-rose-600 focus:outline-none focus:ring-2 focus:ring-rose-500 focus:ring-offset-2 sm:px-10"
+                      className="block w-full rounded-md border border-transparent bg-rose-500 mt-8 px-5 py-3 text-base font-medium text-white shadow hover:bg-rose-600 focus:outline-none focus:ring-2 focus:ring-rose-500 focus:ring-offset-2 sm:px-10"
+                      onClick={(e)=> handleSubmit(e)}
                     >
                       Notify me
                     </button>
@@ -130,5 +160,6 @@ export default function LandingPage():any {
         </div>
       </footer>
     </div>
+  </>
   )
 }

www/src/pages/index.tsx

@@ -7,8 +7,6 @@ import Blogs from "./components/Blogs";
 import { trpc } from "../utils/trpc";
 
 const Home: NextPage = () => {
-  const hello = trpc.example.hello.useQuery({ text: "from tRPC" });
-
   return (
     <>
       <NavBar />

www/src/server/trpc/router/_app.ts

@@ -1,8 +1,8 @@
 import { router } from "../trpc";
-import { exampleRouter } from "./example";
+import { userRouter } from "./user";
 
 export const appRouter = router({
-  example: exampleRouter,
+  user : userRouter,
 });
 
 // export type definition of API

www/src/server/trpc/router/example.ts

@@ -0,0 +1,31 @@
+import { z } from "zod";
+
+import { router, publicProcedure } from "../trpc";
+
+export const userRouter = router({
+  createUser: publicProcedure
+    .input(z.object({ 
+      name: z.string(), 
+      email: z.string().email()}),
+      
+    ) // name and email
+    .mutation(async ({ input, ctx }) => {
+      // we want to add to our database with the name, email, admin defaulted to false as column values
+      return await ctx.prisma.user.create({
+        data: {
+          name: input.name,
+          email: input.email,
+        }
+      })
+    })
+});
+
+
+//const greeting = trpc.userRouter.hello({text: ""});
+
+/**
+ * hello -- name of endpoint api
+ * .input will be what we are going to be expecting
+ * .query/.mutation will be what is going to happen once we go to this endpoint api
+ * (differentiation is that query and mutation should be adjusted for read and CUD functionality)
+ */