feat: add import files frontend routing and file input

Author: oshankkkk

frontend/src/Puffnote.tsx

@@ -17,6 +17,7 @@ function NotesApp() {
     activeNote,
     setActiveIndex,
     createNote,
+    handleImportNotes,
     updateNoteContent,
     renameNote,
     deleteNote,
@@ -36,7 +37,7 @@ function NotesApp() {
         onToggle={() => setSidebarOpen(!sidebarOpen)}
       />
       <main className={`flex-1 transition-[margin] duration-300 ease min-h-screen w-full relative ${sidebarOpen ? "ml-[250px]" : "ml-0"}`}>
-        <Options />
+        <Options onImportNotes={handleImportNotes} />
 
         <div className="h-full pt-16 md:pt-4">
           <Editor activeNote={activeNote} updateNoteContent={updateNoteContent} />

frontend/src/components/Options.tsx

@@ -1,6 +1,34 @@
-export function Options() {
+import { useRef, type ChangeEvent } from "react";
+
+type Props = {
+  onImportNotes: (file: File) => Promise<void> | void;
+};
+
+export function Options({ onImportNotes }: Props) {
+  const fileInputRef = useRef<HTMLInputElement | null>(null);
+
+  function handleImportButtonClick() {
+    if (!fileInputRef.current) return;
+    fileInputRef.current.value = "";
+    fileInputRef.current.click();
+  }
+
+  function handleFileChange(event: ChangeEvent<HTMLInputElement>) {
+    const file = event.target.files?.[0];
+    if (!file) return;
+
+    void onImportNotes(file);
+    event.target.value = "";
+  }
+
   return (
     <div className="absolute top-4 right-5 z-50 md:right-15">
+      <input
+        ref={fileInputRef}
+        type="file"
+        className="hidden"
+        onChange={handleFileChange}
+      />
       <div className="flex items-center gap-3">
         <button
           type="button"
@@ -10,6 +38,7 @@ export function Options() {
         </button>
         <button
           type="button"
+          onClick={handleImportButtonClick}
           className="inline-flex items-center rounded-xl border border-border bg-card/95 px-4 py-2 text-sm font-medium text-foreground shadow-lg backdrop-blur transition hover:bg-accent"
         >
           Import notes

frontend/src/hooks/useNotes.ts

@@ -104,6 +104,30 @@ async function deleteNoteRequest(id: string, getToken: GetToken): Promise<void>
   }
 }
 
+async function importNotes(file: File, getToken: GetToken): Promise<void> {
+  const url = BASEURL + "/notes/imports";
+  const formData = new FormData();
+  formData.append("file", file);
+
+  const headers = await authHeaders(getToken);
+
+  try {
+    const response = await fetch(url, {
+      method: "POST",
+      headers,
+      credentials: "include",
+      body: formData,
+    });
+
+    if (!response.ok) {
+      throw new Error("request failed");
+    }
+  } catch (err) {
+    console.error(err);
+    throw err;
+  }
+}
+
 export function useNotes() {
   const { isLoaded, isSignedIn, getToken } = useAuth();
   const [notes, setNotes] = useState<Note[]>([]);
@@ -211,6 +235,21 @@ export function useNotes() {
     [getToken, notes]
   );
 
+  const handleImportNotes = useCallback(
+    async (file: File) => {
+      try {
+        await importNotes(file, getToken);
+
+        const loadedNotes = await loadNotes(getToken);
+        setNotes(loadedNotes);
+        setActiveIndex(Math.max(loadedNotes.length - 1, 0));
+      } catch (err) {
+        console.error(err);
+      }
+    },
+    [getToken]
+  );
+
   const activeNote = notes[activeIndex] ?? null;
 
   return {
@@ -219,6 +258,7 @@ export function useNotes() {
     activeNote,
     setActiveIndex,
     createNote,
+    handleImportNotes,
     updateNoteContent,
     renameNote,
     deleteNote,