Untitled

import React, { useState } from "react";
import "./index.css";

function NotesApp() {
  // State to hold notes and input values
  const [notes, setNotes] = useState([]);
  const [noteName, setNoteName] = useState('');
  const [noteStatus, setNoteStatus] = useState('');
  const [filter, setFilter] = useState('All');

  // Function to add a note
  const handleAddNote = () => {
    if (noteName && noteStatus) {
      const newNote = { name: noteName, status: noteStatus.toLowerCase() };
      setNotes([...notes, newNote]);
      setNoteName(''); // Reset the note name input
      setNoteStatus(''); // Reset the note status input
    }
  };

  // Function to filter notes based on selected filter
  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 className="layout-column align-items-center justify-content-start">
      <section className="layout-row align-items-center justify-content-center mt-30">
        <input
          data-testid="input-note-name"
          type="text"
          className="large mx-8"
          placeholder="Note Title"
          value={noteName}
          onChange={(e) => setNoteName(e.target.value)}
        />
        <input
          data-testid="input-note-status"
          type="text"
          className="large mx-8"
          placeholder="Note Status"
          value={noteStatus}
          onChange={(e) => setNoteStatus(e.target.value)}
        />
        <button
          className=""
          data-testid="submit-button"
          onClick={handleAddNote}
        >
          Add Note
        </button>
      </section>

      <div className="mt-50">
        <ul className="tabs">
          <li
            className="tab-item slide-up-fade-in"
            data-testid="allButton"
            onClick={() => setFilter('All')}
          >
            All
          </li>
          <li
            className="tab-item slide-up-fade-in"
            data-testid="activeButton"
            onClick={() => setFilter('Active')}
          >
            Active
          </li>
          <li
            className="tab-item slide-up-fade-in"
            data-testid="completedButton"
            onClick={() => setFilter('Completed')}
          >
            Completed
          </li>
        </ul>
      </div>

      <div className="card w-40 pt-30 pb-8">
        <table>
          <thead>
            <tr>
              <th>Title</th>
              <th>Status</th>
            </tr>
          </thead>
          <tbody data-testid="noteList">
            {filteredNotes().map((note, index) => (
              <tr key={index}>
                <td>{note.name}</td>
                <td>{note.status}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  );
}

export default NotesApp;