Freshers bingo

.gitignore

@@ -32,3 +32,5 @@ yarn-error.log*
 
 # vercel
 .vercel
+
+.env

components/SubmitGuesses.js

@@ -0,0 +1,62 @@
+import { useState } from "react";
+import { useSession } from "next-auth/react";
+
+import TextBox from "./textbox";
+
+const GUESS_COUNT = 10;
+
+export default function SubmitGuesses() {
+  let [guesses, setGuesses] = useState(Array(GUESS_COUNT).fill(""));
+
+  const placeholders =
+    "what do you think we'll talk about in today's orientation".split(" ");
+
+  const { data: session } = useSession();
+  console.log(session);
+
+  return (
+    <>
+      <div className="mb-10">
+        {session ? (
+          guesses.map((guess, i) => {
+            return (
+              <>
+                <div className="pt-5 dark:text-gray-50/80">Guess {i + 1}</div>
+                <TextBox
+                  placeholder={placeholders[i]}
+                  value={guess}
+                  onChange={(e) => {
+                    const copiedArray = Array.from(guesses);
+                    copiedArray[i] = e.target.value;
+                    setGuesses(copiedArray);
+                  }}
+                />
+              </>
+            );
+          })
+        ) : (
+          <>
+            Not signed in <br />
+            <button
+              type="button"
+              class="text-white bg-[#4285F4] hover:bg-[#4285F4]/90 focus:ring-4 focus:outline-none focus:ring-[#4285F4]/50 font-medium rounded-lg text-sm px-5 py-2.5 text-center inline-flex items-center mr-2 mb-2"
+              onClick={() => signIn()}
+            >
+              Sign in with Google
+            </button>
+          </>
+        )}
+        {}
+      </div>
+      <div className="mb-5">
+        <button
+          type="button"
+          className="px-4 py-2 bg-neutral-900 dark:text-gray-50/80 rounded-3xl"
+          onClick={() => uploadGuesses(guesses)}
+        >
+          Submit
+        </button>
+      </div>
+    </>
+  );
+}

components/ViewGuesses.js

@@ -0,0 +1,21 @@
+export default function ViewGuesses({ guesses, correctGuesses }) {
+  console.log("correctGuesses", correctGuesses);
+  console.log("guesses", guesses);
+  return (
+    <>
+      {guesses.map((guess, i) => {
+        const color =
+          correctGuesses[0]["Words"].indexOf(guess) > -1
+            ? "bg-green-700"
+            : "bg-yellow-400";
+        return (
+          <>
+            <div className={`${color} m-3 rounded p-1 text-center`}>
+              {`${guess}`}
+            </div>
+          </>
+        );
+      })}
+    </>
+  );
+}

components/alert.js

@@ -1,41 +1,42 @@
-import Container from './container'
-import cn from 'classnames'
+import Container from "./container";
+import cn from "classnames";
+import Link from "next/link";
 
 export default function Alert({ preview }) {
   return (
     <div
-      className={cn('border-b', {
-        'bg-accent-7 border-accent-7 text-white': preview,
-        'bg-accent-1 border-accent-2': !preview,
+      className={cn("border-b", {
+        "bg-accent-7 border-accent-7 text-white": preview,
+        "bg-accent-1 border-accent-2": !preview,
       })}
     >
       <Container>
         <div className="py-2 text-center text-sm">
           {preview ? (
             <>
-              This page is a preview.{' '}
-              <a
+              This page is a preview.{" "}
+              <Link
                 href="/api/exit-preview"
                 className="underline hover:text-cyan duration-200 transition-colors"
               >
                 Click here
-              </a>{' '}
+              </Link>{" "}
               to exit preview mode.
             </>
           ) : (
             <>
-              The source code for this blog is{' '}
-              <a
+              The source code for this blog is{" "}
+              <Link
                 href={`https://github.com/vercel/next.js/tree/canary/examples/${EXAMPLE_PATH}`}
                 className="underline hover:text-success duration-200 transition-colors"
               >
                 available on GitHub
-              </a>
+              </Link>
               .
             </>
           )}
         </div>
       </Container>
     </div>
-  )
+  );
 }

components/textbox.js

@@ -0,0 +1,10 @@
+export default function TextBox({ placeholder, onChange, value }) {
+  return <div>
+    <input className="form-control p-2 m-2 rounded-3xl text-center"
+      type="text"
+      placeholder={placeholder}
+      value={value}
+      onChange={onChange}
+    />
+  </div>
+}

lib/mongodb.js

@@ -0,0 +1,29 @@
+import { MongoClient } from "mongodb";
+
+const uri = process.env.MONGODB_URI;
+const options = {
+  useUnifiedTopology: true,
+  useNewUrlParser: true,
+};
+
+console.log("uri", uri);
+
+let client;
+let clientPromise;
+
+if (!process.env.MONGODB_URI) {
+  throw new Error("Add Mongo URI to .env");
+}
+
+if (process.env.NODE_ENV === "development") {
+  if (!global._mongoClientPromise) {
+    client = new MongoClient(uri, options);
+    global._mongoClientPromise = client.connect();
+  }
+  clientPromise = global._mongoClientPromise;
+} else {
+  client = new MongoClient(uri, options);
+  clientPromise = client.connect();
+}
+
+export default clientPromise;