Added the save button and Added validation for note title/content and toast alert

src/components/NoteEditor.tsx

@@ -1,9 +1,10 @@
-import { useState, useEffect } from "react";
-import { Note, formatTimestamp, getRelativeTime } from "@/types/note";
-import { Input } from "@/components/ui/input";
-import { Textarea } from "@/components/ui/textarea";
-import { Button } from "@/components/ui/button";
-import { Trash2, Calendar, Clock } from "lucide-react";
+import { useState, useEffect } from 'react';
+import { Note, formatTimestamp, getRelativeTime } from '@/types/note';
+import { Input } from '@/components/ui/input';
+import { Textarea } from '@/components/ui/textarea';
+import { Button } from '@/components/ui/button';
+import { Trash2, Calendar, Clock, Save } from 'lucide-react';
+
 import {
   AlertDialog,
   AlertDialogAction,
@@ -14,7 +15,9 @@
   AlertDialogHeader,
   AlertDialogTitle,
   AlertDialogTrigger,
-} from "@/components/ui/alert-dialog";
+} from '@/components/ui/alert-dialog';
+import { toast } from "sonner";
+
 
 interface NoteEditorProps {
   note: Note;
@@ -28,56 +31,97 @@
 export function NoteEditor({ note, onUpdate, onDelete }: NoteEditorProps) {
   const [title, setTitle] = useState(note.title);
   const [content, setContent] = useState(note.content);
+  const [hasInteracted, setHasInteracted] = useState(false);
+
 
   useEffect(() => {
     setTitle(note.title);
     setContent(note.content);
+    setHasInteracted(false);
   }, [note.id, note.title, note.content]);
 
   useEffect(() => {
     const timer = setTimeout(() => {
-      if (title !== note.title || content !== note.content) {
-        onUpdate(note.id, { title, content });
+
+      const trimmedTitle = title.trim();
+      const trimmedContent = content.trim();
+
+      const isValid =
+        trimmedTitle &&
+        trimmedContent;
+
+      const hasChanged =
+        trimmedTitle !== note.title || trimmedContent !== note.content;
+
+
+      if (!isValid && hasInteracted) {
+        toast.warning('Please use a non-Empty title and non-empty content to save your note.');
+        return;
+      }
+
+
+      if (hasInteracted && isValid && hasChanged) {
+        onUpdate(note.id, {
+          title: trimmedTitle,
+          content: trimmedContent,
+        });
       }
     }, 500);
 
     return () => clearTimeout(timer);
   }, [title, content, note.id, note.title, note.content, onUpdate]);
 
+
   return (
     <div className="flex flex-col h-full">
       <div className="flex items-center justify-between">
         <Input
           value={title}
-          onChange={(e) => setTitle(e.target.value)}
+          onChange={(e) => {
+            setTitle(e.target.value);
+            setHasInteracted(true);
+          }
+          }
           className="text-2xl font-semibold border-none shadow-none focus-visible:ring-0 px-0"
           placeholder="Note title..."
         />
+        <Button
+          variant="ghost"
+          size="icon"
+          title="Save Note"
+          className="text-teal-600 hover:text-white hover:bg-teal-600"
+          onClick={() => {
+            const trimmedTitle = title.trim();
+            const trimmedContent = content.trim();
+
+            if (!trimmedTitle || !trimmedContent) {
+              toast.error('Cannot save: Content and Title can not be empty ');
+              return;
+            }
+
+
+            onUpdate(note.id, { title: trimmedTitle, content: trimmedContent });
+            toast.success('Note saved successfully!');
+          }}
+        >
+          <Save className="h-5 w-5" />
+        </Button>
         <AlertDialog>
           <AlertDialogTrigger asChild>
-            <Button
-              variant="ghost"
-              size="icon"
-              className="text-destructive hover:text-white"
-              title="Delete Note"
-            >
+            <Button variant="ghost" size="icon" className="text-destructive hover:text-white" title="Delete Note">
               <Trash2 className="h-5 w-5" />
             </Button>
           </AlertDialogTrigger>
           <AlertDialogContent>
             <AlertDialogHeader>
               <AlertDialogTitle>Delete Note</AlertDialogTitle>
               <AlertDialogDescription>
-                Are you sure you want to delete this note? This action cannot be
-                undone.
+                Are you sure you want to delete this note? This action cannot be undone.
               </AlertDialogDescription>
             </AlertDialogHeader>
             <AlertDialogFooter>
               <AlertDialogCancel>Cancel</AlertDialogCancel>
-              <AlertDialogAction
-                onClick={() => onDelete(note.id)}
-                className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
-              >
+              <AlertDialogAction onClick={() => onDelete(note.id)} className="bg-destructive text-destructive-foreground hover:bg-destructive/90">
                 Delete
               </AlertDialogAction>
             </AlertDialogFooter>
@@ -86,7 +130,7 @@
       </div>
 
       {/* Timestamp Display */}
-      <div className="flex items-center gap-4 text-sm text-muted-foreground pb-2">
+      <div className="flex items-center gap-4 text-sm text-muted-foreground">
         <div className="flex items-center gap-1.5">
           <Calendar className="w-4 h-4" />
           <span>Created: {formatTimestamp(note.createdAt)}</span>
@@ -99,7 +143,11 @@
       </div>
       <Textarea
         value={content}
-        onChange={(e) => setContent(e.target.value)}
+        onChange={(e) => {
+          setContent(e.target.value);
+          setHasInteracted(true);
+        }
+        }
         className="flex-1 resize-none border-none shadow-none focus-visible:ring-0 text-base leading-relaxed"
         placeholder="Start writing..."
       />

src/hooks/useNotes.ts

@@ -1,8 +1,19 @@
 import { useState, useEffect } from 'react';
 import { Note } from '@/types/note';
-
+import { toast } from "sonner";
+import { title } from 'process';
 const STORAGE_KEY = 'notes-app-data';
 
+//Add validation : Avanish
+
+
+function isValidNote(note: Note): boolean {
+  const trimmedTitle = note.title.trim().toLowerCase();
+  const trimmedContent = note.content.trim();
+  return trimmedTitle !== '' && trimmedContent !== '';
+}
+
+
 export function useNotes() {
   const [notes, setNotes] = useState<Note[]>([]);
 
@@ -26,7 +37,8 @@ export function useNotes() {
 
   // Save notes to localStorage whenever they change
   useEffect(() => {
-    localStorage.setItem(STORAGE_KEY, JSON.stringify(notes));
+    const validNotes = notes.filter(isValidNote);
+    localStorage.setItem(STORAGE_KEY, JSON.stringify(validNotes));
   }, [notes]);
 
   const getUniqueTitle = (baseTitle: string, excludeId?: string) => {
@@ -52,7 +64,13 @@ export function useNotes() {
     return baseTitle;
   };
 
-  const createNote = () => {
+  const createNote = (currentNote?: Note) => {
+
+    if (currentNote && !isValidNote(currentNote)) {
+      toast.warning('Please enter a valid title and non-empty content before creating a new note.');
+      return null; // Prevent creation
+    }
+
     const title = getUniqueTitle('Untitled Note');
     const newNote: Note = {
       id: crypto.randomUUID(),
@@ -66,6 +84,24 @@ export function useNotes() {
   };
 
   const updateNote = (id: string, updates: Partial<Pick<Note, 'title' | 'content'>>) => {
+
+    //Validate fro the emppty title ans empty content : Avanish
+
+    const trimmedTitle = updates.title?.trim();
+    const trimmedContent = updates.content?.trim();
+
+    if ((trimmedTitle !== undefined || trimmedContent !== undefined) && !isValidNote({
+      id,
+      title: trimmedTitle ?? '',
+      content: trimmedContent ?? '',
+      createdAt: new Date(),
+      updatedAt: new Date(),
+    })
+    ) {
+      toast.warning('Please enter a valid title and non-empty content to update the note.');
+      return;
+    }
+
     setNotes((prev) =>
       prev.map((note) => {
         if (note.id === id) {

src/pages/Index.tsx

@@ -89,6 +89,18 @@ const Index = () => {
             event.preventDefault();
             event.stopPropagation();
             const currentNote = notes.find((note) => note.id === activeNoteId);
+
+            if (!currentNote) return;
+
+            const trimmedTitle = currentNote.title.trim();
+            const trimmedContent = currentNote.content.trim();
+
+            if (!trimmedTitle || !trimmedContent) {
+              toast.error("Cannot save: Please enter a valid title and non-empty content.");
+              return;
+            }
+
+
             if (currentNote) {
               toast.success("Notes are saved automatically");
             }