Untitled

import React, { useState } from 'react';

const Notes = () => {
  const [notes, setNotes] = useState([]);
  const [noteName, setNoteName] = useState('');
  const [noteStatus, setNoteStatus] = useState('');
  const [filter, setFilter] = useState('All');

  const handleAddNote = () => {
    if (noteName && noteStatus) {
      const newNote = { name: noteName, status: noteStatus.toLowerCase() };
      setNotes([...notes, newNote]);
      setNoteName('');
      setNoteStatus('');
    }
  };

  const filteredNotes = () => {
    if (filter === 'Active') {
      return notes.filter(note => note.status === 'active');
    } else if (filter === 'Completed') {
      return notes.filter(note => note.status === 'completed');
    } else {
      return [...notes]
        .sort((a, b) => {
          if (a.status === 'active' && b.status !== 'active') return -1;
          if (b.status === 'active' && a.status !== 'active') return 1;
          if (a.status === 'completed' && b.status !== 'completed') return -1;
          if (b.status === 'completed' && a.status !== 'completed') return 1;
          return 0; // Maintain the order for other statuses
        });
    }
  };

  return (
    <div>
      <input
        data-testid="input-note-name"
        value={noteName}
        onChange={(e) => setNoteName(e.target.value)}
        placeholder="Note Title"
      />
      <input
        data-testid="input-note-status"
        value={noteStatus}
        onChange={(e) => setNoteStatus(e.target.value)}
        placeholder="Note Status"
      />
      <button data-testid="submit-button" onClick={handleAddNote}>Add Note</button>

      <div>
        <button data-testid="allButton" onClick={() => setFilter('All')}>All</button>
        <button data-testid="activeButton" onClick={() => setFilter('Active')}>Active</button>
        <button data-testid="completedButton" onClick={() => setFilter('Completed')}>Completed</button>
      </div>

      <table>
        <tbody data-testid="noteList">
          {filteredNotes().map((note, index) => (
            <tr key={index}>
              <td>{note.name}</td>
              <td>{note.status}</td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
};

export default Notes;