nooobcoder · nooobcoder · Jun 14, 2022 · Jun 14, 2022
diff --git a/planetscale-prisma-tutorial/.eslintrc.json b/planetscale-prisma-tutorial/.eslintrc.json
@@ -0,0 +1,3 @@
+{
+  "extends": "next/core-web-vitals"
+}
diff --git a/planetscale-prisma-tutorial/.gitignore b/planetscale-prisma-tutorial/.gitignore
@@ -0,0 +1,36 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+package-lock.json
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+/dist
+/src/*.d.ts
diff --git a/planetscale-prisma-tutorial/README.md b/planetscale-prisma-tutorial/README.md
@@ -0,0 +1,5 @@
+Run a local proxy of the pscale database
+
+```bash
+pscale connect DB-NAME BRANCH-NAME --port 3309
+```
diff --git a/planetscale-prisma-tutorial/hoppscotch-docker-compose.yaml b/planetscale-prisma-tutorial/hoppscotch-docker-compose.yaml
@@ -0,0 +1,22 @@
+version: "3.7"
+
+services:
+  web:
+    image: hoppscotch/hoppscotch
+    volumes:
+      - "./hoppscotch/.hoppscotch:/app/.hoppscotch"
+      - "./hoppscotch/assets:/app/assets"
+      - "./hoppscotch/directives:/app/directives"
+      - "./hoppscotch/layouts:/app/layouts"
+      - "./hoppscotch/middleware:/app/middleware"
+      - "./hoppscotch/pages:/app/pages"
+      - "./hoppscotch/plugins:/app/plugins"
+      - "./hoppscotch/static:/app/static"
+      - "./hoppscotch/store:/app/store"
+      - "./hoppscotch/components:/app/components"
+      - "./hoppscotch/helpers:/app/helpers"
+    ports:
+      - "7777:3000"
+    environment:
+      HOST: 127.0.0.1
+    command: "npm run dev"
diff --git a/planetscale-prisma-tutorial/next.config.js b/planetscale-prisma-tutorial/next.config.js
@@ -0,0 +1,6 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  reactStrictMode: true,
+}
+
+module.exports = nextConfig
diff --git a/planetscale-prisma-tutorial/package.json b/planetscale-prisma-tutorial/package.json
@@ -0,0 +1,25 @@
+{
+	"name": "planetscale-prisma-tutorial",
+	"version": "0.1.0",
+	"private": true,
+	"scripts": {
+		"dev": "run-p dev:*",
+		"dev:nextjs": "PORT=4848 next dev",
+		"dev:studio": "prisma studio --port 5555",
+		"dev:db-proxy": "pscale connect test-database draft --port 3309",
+		"build": "PORT=4848 next build",
+		"start": "next start",
+		"lint": "next lint"
+	},
+	"dependencies": {
+		"next": "12.1.6",
+		"prisma": "^3.15.1",
+		"react": "18.1.0",
+		"react-dom": "18.1.0"
+	},
+	"devDependencies": {
+		"eslint": "8.17.0",
+		"eslint-config-next": "12.1.6",
+		"planetscale": "^2.1.0"
+	}
+}
diff --git a/planetscale-prisma-tutorial/pages/_app.js b/planetscale-prisma-tutorial/pages/_app.js
@@ -0,0 +1,7 @@
+import '../styles/globals.css'
+
+function MyApp({ Component, pageProps }) {
+  return <Component {...pageProps} />
+}
+
+export default MyApp
diff --git a/planetscale-prisma-tutorial/pages/api/hello.js b/planetscale-prisma-tutorial/pages/api/hello.js
@@ -0,0 +1,5 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+
+export default function handler(req, res) {
+  res.status(200).json({ name: 'John Doe' })
+}
diff --git a/planetscale-prisma-tutorial/pages/api/inquiry.js b/planetscale-prisma-tutorial/pages/api/inquiry.js
@@ -0,0 +1,31 @@
+import { PrismaClient } from '@prisma/client';
+
+const prisma = new PrismaClient();
+
+
+export default async function handler(req, res) {
+  if (req.method === 'POST') {
+    return await createInquiry(req, res);
+  }
+  else {
+    return res.status(405).json({ message: 'Method not allowed', success: false });
+  }
+}
+
+async function createInquiry(req, res) {
+  const body = req.body;
+  try {
+    const newEntry = await prisma.inquiry.create({
+      data: {
+        name: body.firstName,
+        email: body.email,
+        subject: body.subject,
+        message: body.message
+      }
+    });
+    return res.status(200).json(newEntry, { success: true });
+  } catch (error) {
+    console.error("Request error", error);
+    res.status(500).json({ error: "Error creating question", success: false });
+  }
+}
diff --git a/planetscale-prisma-tutorial/pages/index.js b/planetscale-prisma-tutorial/pages/index.js
@@ -0,0 +1,55 @@
+import styles from '../styles/Home.module.css';
+import React, { useState } from "react"
+
+export default function Home() {
+  const [firstName, setFirstName] = useState("");
+  const [email, setEmail] = useState("");
+  const [subject, setSubject] = useState("");
+  const [message, setMessage] = useState("");
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    const body = { firstName, email, subject, message }
+    try {
+      const response = await fetch("/api/inquiry", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify(body),
+      });
+      if (response.status !== 200) {
+        console.log("something went wrong");
+        //set an error banner here
+      } else {
+        resetForm();
+        console.log("form submitted successfully !!!")
+        //set a success banner here
+      }
+      //check response, if success is false, dont take them to success page
+    } catch (error) {
+      console.log("there was an error submitting", error);
+    }
+  }
+
+  const resetForm = () => {
+    setFirstName("");
+    setEmail("");
+    setSubject("");
+    setMessage("");
+  }
+
+  return (
+    <div className={styles.container}>
+      <form action="#" method="POST" onSubmit={(e) => handleSubmit(e)}>
+        <input
+          type="text"
+          name="first-name"
+          id="first-name"
+          autoComplete="given-name"
+          onChange={(e) => setFirstName(e.target.value)}
+          value={firstName}
+          className="bg-zinc-300 py-3 px-4 block w-full shadow-sm text-gray-200-900 focus:ring-indigo-400 focus:border-indigo-400 border-warm-gray-300 rounded-md"
+        />
+      </form>
+    </div >
+  )
+}