From 2003888f2b6c7cd4f929d6051cf66e50db8894c3 Mon Sep 17 00:00:00 2001
From: Divyam <ahujadivyam@gmail.com>
Date: Tue, 3 Oct 2023 17:56:09 +0530
Subject: [PATCH] refactor code

---
 lib/fauna-client.ts   | 10 +++++++
 pages/api/get/[id].ts | 10 ++-----
 pages/api/new.ts      | 65 ++++++++++---------------------------------
 pages/index.tsx       | 26 ++++++++++++++---
 4 files changed, 48 insertions(+), 63 deletions(-)
 create mode 100644 lib/fauna-client.ts

diff --git a/lib/fauna-client.ts b/lib/fauna-client.ts
new file mode 100644
index 0000000..df87bdd
--- /dev/null
+++ b/lib/fauna-client.ts
@@ -0,0 +1,10 @@
+import faunadb from "faunadb";
+
+const client = new faunadb.Client({
+  secret: process.env.FAUNA_ADMIN_KEY || "",
+  domain: "db.fauna.com",
+  port: 443,
+  scheme: "https",
+});
+
+export default client;
diff --git a/pages/api/get/[id].ts b/pages/api/get/[id].ts
index aa63b0a..c5eba8b 100644
--- a/pages/api/get/[id].ts
+++ b/pages/api/get/[id].ts
@@ -1,5 +1,6 @@
 import type { NextApiRequest, NextApiResponse } from "next";
-import faunadb, { Collection, Get, Ref, Time } from "faunadb";
+import { Collection, Get, Ref, Time } from "faunadb";
+import client from "../../../lib/fauna-client";
 
 type Data = {
   code: string;
@@ -11,13 +12,6 @@ type FaunaQueryResponse = {
   data?: Data;
 };
 
-const client = new faunadb.Client({
-  secret: process.env.FAUNA_ADMIN_KEY || "",
-  domain: "db.fauna.com",
-  port: 443,
-  scheme: "https",
-});
-
 export default async function handler(
   req: NextApiRequest,
   res: NextApiResponse<Data>
diff --git a/pages/api/new.ts b/pages/api/new.ts
index f1ea528..06b046f 100644
--- a/pages/api/new.ts
+++ b/pages/api/new.ts
@@ -1,64 +1,27 @@
 import type { NextApiRequest, NextApiResponse } from "next";
-import faunadb from 'faunadb'
+import faunadb from "faunadb";
+import client from "../../lib/fauna-client";
 
-let q = faunadb.query
+const q = faunadb.query;
 
 type Data = {
   id: string;
 };
 
-const client = new faunadb.Client({
-  secret: process.env.FAUNA_ADMIN_KEY || "",
-  domain: 'db.fauna.com', 
-  port: 443,
-  scheme: 'https'
-})
-
-
 export default async function handler(
   req: NextApiRequest,
   res: NextApiResponse<Data>
 ) {
-  if (req.method !== 'POST') res.status(404).send({id: ""});
-  
-  const code = req.body.data;
-  
-  client.query<any>(
-    q.Create(
-      q.Collection('data'),
-      { data: { 'code': code } }
-    )
-  ).then((response) => {
-    res.status(200).json({id: response?.ref?.id})
-  }).catch((error) => {
-    res.status(404).send({id: ""})
-  })
+  if (req.method !== "POST") res.status(404).send({ id: "" });
 
-  /*  // Mongodb
-  let data = JSON.stringify({
-    collection: "data",
-    database: "fastbin",
-    dataSource: "Cluster0",
-    document: {
-      "code": code
-    },
-  })
-  
-  fetch("https://data.mongodb-api.com/app/data-gizgg/endpoint/data/beta/action/insertOne", {
-    method: 'POST',
-    headers: {
-      "Content-Type": "application/json",
-      "Access-Control-Request-Headers": "*",
-      "api-key": process.env.MONGO_API_KEY || "",
-    },
-    body: data
-  })
-  .then((response) => response.json())
-  .then((data) => {
-    res.status(200).json({id: data['insertedId']})
-  })
-  .catch((error) => {
-    res.status(404).send({id: ""})
-  })
-  */
+  const code = req.body.data;
+
+  client
+    .query<any>(q.Create(q.Collection("data"), { data: { code: code } }))
+    .then((response) => {
+      res.status(200).json({ id: response?.ref?.id });
+    })
+    .catch((_error) => {
+      res.status(404).send({ id: "" });
+    });
 }
diff --git a/pages/index.tsx b/pages/index.tsx
index 3717d19..39e4118 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useRef, useState } from 'react'
+import { KeyboardEventHandler, useCallback, useEffect, useRef, useState } from 'react'
 import type { NextPage } from 'next'
 import Head from 'next/head'
 import { useRouter } from 'next/router'
@@ -32,7 +32,7 @@ const Home: NextPage = () => {
   }, [router])
 
   useEffect(() => {
-    const listener = (event : KeyboardEvent) => {
+    const listener = (event: KeyboardEvent) => {
       if (event.code === "KeyS" && event.ctrlKey === true) {
         event.preventDefault()
         save()
@@ -50,6 +50,23 @@ const Home: NextPage = () => {
     }
   }, [save, router])
 
+  const keyDownHandler: KeyboardEventHandler<HTMLTextAreaElement> = (e) => {
+    if (e.key === "Tab") {
+      e.preventDefault()
+      e.currentTarget.setRangeText(
+        '\t',
+        e.currentTarget.selectionStart,
+        e.currentTarget.selectionStart,
+        'end'
+      )
+    }
+  }
+
+  useEffect(() => {
+    if (codeRef.current)
+      codeRef.current.focus();
+  }, [codeRef])
+
   return (
     <div className={styles.container}>
       <Head>
@@ -81,14 +98,15 @@ const Home: NextPage = () => {
           {">"}
         </span>
         <textarea
-          autoFocus
+          onKeyDown={keyDownHandler}
+          spellCheck={false}
           wrap="off"
           ref={codeRef}
           placeholder={"Type Someting Here...\nCtrl + S to Save Document\nShift + N for New Document\n:)"}
           className={styles["code-editor"]}>
         </textarea>
       </div>
-      <Snackbar open={uploading}><div className={styles.toast}>Uploading document...</div></Snackbar>
+      <Snackbar open={uploading}><div className={styles.toast}>Uploading Document ...</div></Snackbar>
     </div>
   )
 }