added note page and passkey validation

packages/dashboard/api/notes.ts

@@ -6,24 +6,25 @@ export class Notes {
 	constructor(axios: Axios) {
 		this.axios = axios;
 	}
-	async getAllNotes(search?:string) {
-		const res = await this.axios.get('/gist',{params:{search}});
+	async getAllNotes(search?: string) {
+		const res = await this.axios.get('/gist', { params: { search } });
 		const data = res.data.data as INote[];
 		return data;
 	}
+	async getSingleNote(id: string, passkey: string = '') {
+		const res = await this.axios.get(`/gist/${id}`, { params: { passkey } });
+		const data = res.data.data as INote;
+		return data;
+	}
 	async uploadSingleNote(data: AddNoteType) {
-        console.log("uploading")
-        if(!data.passkey){
-            delete data.passkey
-        }
+		console.log('uploading');
+		if (!data.passkey) {
+			delete data.passkey;
+		}
 		const res = await this.axios.post('/gist', data);
 		return res.data.data as INote;
 	}
-	async deleteSingleNote({
-		noteID,
-	}: {
-		noteID: string;
-	}) {
+	async deleteSingleNote({ noteID }: { noteID: string }) {
 		const res = await this.axios.delete(`/gist/${noteID}`);
 		return res;
 	}

packages/dashboard/app/notes/[id]/NoteContent.tsx

@@ -0,0 +1,53 @@
+'use client';
+
+import api from '@/api';
+import Button from '@/components/ui/Button';
+import Input from '@/components/ui/Input';
+import { Lock } from 'lucide-react';
+import React, { FormEventHandler, useState } from 'react';
+import { toast } from 'react-hot-toast';
+
+interface NoteContentProps {
+	data: INote | null;
+	id: string;
+}
+
+function NoteContent({ data, id }: NoteContentProps) {
+	const [note, setNote] = useState(data);
+	const [input, setInput] = useState('');
+	const onSubmit: FormEventHandler = async evt => {
+		evt.preventDefault();
+		try {
+			const data = await api.notes.getSingleNote(id, input);
+			setNote(data);
+		} catch (err) {
+			console.error(err);
+			toast.error('Wrong passkey');
+			setNote(null);
+		}
+	};
+	return (
+		<div className="w-1/2 p-10 border-primary border max-h-full overflow-y-auto">
+			{note?.content ?? (
+				<form
+					onSubmit={onSubmit}
+					className="flex items-center justify-between gap-4 w-full"
+				>
+					<Input
+						withLabel={true}
+						placeholder="Enter passkey"
+						label="Enter passkey"
+						className="w-full"
+						onChange={evt => setInput(evt.target.value)}
+						value={input}
+					/>
+					<Button size={'icon'}>
+						<Lock />
+					</Button>
+				</form>
+			)}
+		</div>
+	);
+}
+
+export default NoteContent;

packages/dashboard/app/notes/[id]/loading.tsx

@@ -0,0 +1,9 @@
+import React from 'react'
+
+function Loading() {
+  return (
+    <div>Loading</div>
+  )
+}
+
+export default Loading

packages/dashboard/app/notes/[id]/page.tsx

@@ -0,0 +1,25 @@
+import api from '@/api';
+import React from 'react';
+import NoteContent from './NoteContent';
+
+interface NotePageProps {
+	params: {
+		id: string;
+	};
+}
+
+async function Page({ params: { id } }: NotePageProps) {
+	let data: INote | null = null;
+	try {
+		data = await api.notes.getSingleNote(id);
+	} catch {
+		data = null;
+	}
+	return (
+		<div className="w-full h-screen p-20 flex justify-center items-center">
+			<NoteContent data={data} id={id} />
+		</div>
+	);
+}
+
+export default Page;