feat: implement use anonymous for creating a paste

Author: tbdsux

src/components/Editor.tsx

@@ -4,7 +4,7 @@ import _ from 'lodash';
 import Router from 'next/router';
 import { ApiCreatePasteResponse } from 'pages/api/pastes/create';
 import { ApiUpdatePasteResponse } from 'pages/api/pastes/update/[refid]';
-import { ChangeEvent, useCallback, useEffect, useRef, useState } from 'react';
+import { ChangeEvent, MutableRefObject, useCallback, useEffect, useRef, useState } from 'react';
 import DatePicker from 'react-datepicker';
 import 'react-datepicker/dist/react-datepicker.css';
 import { useDropzone } from 'react-dropzone';
@@ -18,6 +18,7 @@ type EditorProps = {
   refid?: string;
   data?: Paste; // comes in with update,
   queryData?: RouterPasteQueryData; // queryData is for custom data from url query (only applicable to index)
+  isAnonymousRef?: MutableRefObject<HTMLInputElement>;
 };
 
 // convert the date to iso ?
@@ -29,7 +30,7 @@ const convertDateForInput = (date: string) => {
   }
 };
 
-const MainEditor = ({ update, refid, data, queryData }: EditorProps) => {
+const MainEditor = ({ update, refid, data, queryData, isAnonymousRef }: EditorProps) => {
   const [pDate, setPDate] = useState<Date>(
     update ? (data.expiryDate ? new Date(convertDateForInput(data.expiryDate)) : null) : null
   );
@@ -88,13 +89,20 @@ const MainEditor = ({ update, refid, data, queryData }: EditorProps) => {
     onCreateNotify(update ? 'Updating paste...' : 'Creating paste...');
 
     // contact api
-    fetch(`${update ? `/api/pastes/update/${refid}` : '/api/pastes/create'}`, {
-      method: 'PUT',
-      headers: {
-        'Content-Type': 'application/json'
-      },
-      body: JSON.stringify(pasteData)
-    })
+    fetch(
+      `${
+        update
+          ? `/api/pastes/update/${refid}`
+          : `/api/pastes/create?isAnonymous=${String(isAnonymousRef.current?.checked)}`
+      }`,
+      {
+        method: 'PUT',
+        headers: {
+          'Content-Type': 'application/json'
+        },
+        body: JSON.stringify(pasteData)
+      }
+    )
       .then((res) => res.json())
       .then((r: ApiCreatePasteResponse | ApiUpdatePasteResponse) => {
         if (r.error) {

src/pages/api/pastes/create.ts

@@ -2,21 +2,18 @@
   NOTE: /api/pastes/create -> endpoint for creating a paste
 */
 
-import type { NextApiRequest, NextApiResponse } from 'next';
-
-import { nanoid } from 'nanoid';
-
-import { PasteModel } from '@lib/models/paste';
-import methodHandler from '@lib/middleware/methods';
-import { getTokenAPI } from '@lib/hooks/useTokenAPI';
+import { errParseBody } from '@lib/body-parse';
 import { getCodeLanguage } from '@lib/code';
 import { getUser } from '@lib/hooks/getUser';
+import { getTokenAPI } from '@lib/hooks/useTokenAPI';
+import methodHandler from '@lib/middleware/methods';
+import { PasteModel } from '@lib/models/paste';
 import { schemaValidate } from '@lib/validate';
-
-import { errParseBody } from '@lib/body-parse';
+import { ApiCreatePasteBody, Paste } from '@utils/interfaces/paste';
 import { CreatePasteQuery, QueryErrorResponse } from '@utils/interfaces/query';
 import { ApiCreateBodySchema } from '@utils/schema/createBody';
-import { ApiCreatePasteBody, Paste } from '@utils/interfaces/paste';
+import { nanoid } from 'nanoid';
+import type { NextApiRequest, NextApiResponse } from 'next';
 
 export type ApiCreatePasteResponse = CreatePasteQuery;
 type ValidateCreateProps = { rdata: ApiCreatePasteBody; ok: boolean; err?: QueryErrorResponse };
@@ -31,7 +28,7 @@ const createPaste = async (req: NextApiRequest, res: NextApiResponse<ApiCreatePa
   }
 
   const token = getTokenAPI(req, res);
-  const { isUser, name } = await getUser(req, res);
+  const { isUser, name } = await handleUser(req, res);
 
   const data: Paste = {
     createdDate: new Date().toISOString(),
@@ -50,6 +47,19 @@ const createPaste = async (req: NextApiRequest, res: NextApiResponse<ApiCreatePa
   res.status(q.code).json(q);
 };
 
+const handleUser = async (req: NextApiRequest, res: NextApiResponse): Promise<{ isUser: boolean; name: string }> => {
+  const { isAnonymous } = req.query;
+  if (isAnonymous === 'true') {
+    return {
+      isUser: false,
+      name: 'anonymous'
+    };
+  }
+
+  const { isUser, name } = await getUser(req, res);
+  return { isUser, name };
+};
+
 // Getter and Validator for req.body
 const getPostCreateData = async (req: NextApiRequest): Promise<ValidateCreateProps> => {
   const d: ApiCreatePasteBody = req.body;

src/pages/index.tsx

@@ -1,24 +1,39 @@
+import { useUser } from '@auth0/nextjs-auth0';
 import MainEditor from '@components/Editor';
 import Layout from '@components/Layout';
 import { joinString } from '@ootiq/blank';
 import { useRouter } from 'next/router';
+import { useRef } from 'react';
 
 export default function Home() {
   const router = useRouter();
 
   const { filename, description, content } = router.query;
+  const { user } = useUser();
+
+  const isAnonymousRef = useRef<HTMLInputElement>(null);
 
   return (
     <Layout title="Welcome ">
-      <div className="w-5/6 mx-auto mt-8">
+      <div className="w-5/6 mx-auto mt-8 flex items-center justify-between">
         <p className="tracking-wide text-primary-500 opacity-90 text-lg font-bold">Create A New Paste</p>
+
+        {user && (
+          <div className="inline-flex items-center" title="Publish this paste as anonymous user">
+            <input ref={isAnonymousRef} type="checkbox" name="" id="" />
+            <label className="lowercase ml-2 text-sm text-secondary-700" htmlFor="use-anonymouse">
+              Use Anonymous
+            </label>
+          </div>
+        )}
       </div>
       <MainEditor
         queryData={{
           filename: joinString(filename),
           description: joinString(description),
           content: joinString(content)
         }}
+        isAnonymousRef={isAnonymousRef}
       />
     </Layout>
   );