49 - Notes App

Description

Create a Notes App that displays a list of existing notes, enables adding new notes with title and content, allows editing existing notes, and provides functionality to delete notes.

Algorithm

1. Display a list of existing notes

2. Allow users to add new notes with title and content

3. Enable editing of existing notes

4. Provide functionality to delete notes

Classes

• NotesApp: The main app component

• Note: A single note component

• NoteForm: The form component for adding and editing notes

Code

NotesApp.js

import React, { useState, useEffect } from 'react';
import Note from './Note';
import NoteForm from './NoteForm';

const NotesApp = () => {
  const [notes, setNotes] = useState([]);
  const [currentNote, setCurrentNote] = useState(null);

  useEffect(() => {
    const storedNotes = localStorage.getItem('notes');
    if (storedNotes) {
      setNotes(JSON.parse(storedNotes));
    }
  }, []);

  const handleAddNote = (note) => {
    setNotes((prevNotes) => [...prevNotes, note]);
    localStorage.setItem('notes', JSON.stringify(notes));
  };

  const handleEditNote = (note) => {
    const updatedNotes = notes.map((n) => ((link unavailable) === (link unavailable) ? note : n));
    setNotes(updatedNotes);
    localStorage.setItem('notes', JSON.stringify(notes));
  };

  const handleDeleteNote = (noteId) => {
    const updatedNotes = notes.filter((n) => (link unavailable) !== noteId);
    setNotes(updatedNotes);
    localStorage.setItem('notes', JSON.stringify(notes));
  };

  return (
    <div>
      <h1>Notes App</h1>
      <ul>
        {notes.map((note) => (
          <Note
            key={(link unavailable)}
            note={note}
            onEdit={() => setCurrentNote(note)}
            onDelete={() => handleDeleteNote((link unavailable))}
          />
        ))}
      </ul>
      {currentNote && (
        <NoteForm
          note={currentNote}
          onSave={(note) => handleEditNote(note)}
          onCancel={() => setCurrentNote(null)}
        />
      )}
      <button onClick={() => setCurrentNote({ title: '', content: '' })}>
        Add New Note
      </button>
    </div>
  );
};

export default NotesApp;

Note.js

import React from 'react';

const Note = ({ note, onEdit, onDelete }) => {
  return (
    <li>
      <h2>{note.title}</h2>
      <p>{note.content}</p>
      <button onClick={onEdit}>Edit</button>
      <button onClick={onDelete}>Delete</button>
    </li>
  );
};

export default Note;

NoteForm.js

import React from 'react';

const NoteForm = ({ note, onSave, onCancel }) => {
  const [title, setTitle] = useState(note.title);
  const [content, setContent] = useState(note.content);

  const handleSubmit = (event) => {
    event.preventDefault();
    onSave({ id: (link unavailable), title, content });
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>Title:</label>
      <input
        type="text"
        value={title}
        onChange={(e) => setTitle(e.target.value)}
      />
      <br />
      <label>Content:</label>
      <textarea
        value={content}
        onChange={(e) => setContent(e.target.value)}
      />
      <br />
      <button type="submit">Save</button>
      <button onClick={onCancel}>Cancel</button>
    </form>
  );
};

export default NoteForm;

Explanation

This code creates a Notes App that displays a list of existing notes, enables adding new notes with title and content, allows editing existing notes, and provides functionality to delete notes.

Possible Future Enhancements

• Search functionality: Add a search bar to search for notes by title or content.

• Tagging system: Allow users to add tags to notes for better organization.

• Note sharing: Add functionality to share notes with other users.

• Note encryption: Add encryption to notes for secure storage.