text: import React, { useEffect } from "react";
  import { Accordion, Button, Card } from "react-bootstrap";
  import MainScreen from "../../components/MainScreen";
  import { Link } from "react-router-dom";
  import ReactMarkdown from "react-markdown";
  import { useDispatch, useSelector } from "react-redux";
  import { deleteNoteAction, listNotes } from "../../actions/notesActions";
  import Loading from "../../components/Loading";
  import ErrorMessage from "../../components/ErrorMessage";
  import { toast } from 'react-toastify';
  import 'react-toastify/dist/ReactToastify.css';
  
  toast.configure()
  
  function MyNotes({ history, search }) {
    const dispatch = useDispatch();
    const noteList = useSelector((state) => state.noteList);
    const { loading, error, notes } = noteList;
    const userLogin = useSelector((state) => state.userLogin);
    const { userInfo } = userLogin;
  
    const noteDelete = useSelector((state) => state.noteDelete);
    const {
      loading: loadingDelete,
      error: errorDelete,
      success: successDelete,
    } = noteDelete;
  
    const noteCreate = useSelector((state) => state.noteCreate);
    const { success: successCreate } = noteCreate;
  
    const noteUpdate = useSelector((state) => state.noteUpdate);
    const { success: successUpdate } = noteUpdate;
  
    useEffect(() => {
      dispatch(listNotes());
      if (!userInfo) {
        history.push("/");
      }
    }, [
      dispatch,
      history,
      userInfo,
      successDelete,
      successCreate,
      successUpdate,
    ]);
  
    const deleteHandler = (id) => {
      if (window.confirm("Are you sure?")) {
        dispatch(deleteNoteAction(id));
        history.push("/myarticles");
        toast.success(`Content deleted!`, {
          position: "bottom-right",
          autoClose: 4000,
          hideProgressBar: false,
          closeOnClick: true,
          pauseOnHover: true,
          draggable: true,
          progress: undefined,
        });
      }
      else {
        return;
      }
    };
  
    return (
      <MainScreen title={`Written by you`}>
        <Link to="/create">
          <Button variant="outline-primary" style={{ marginBottom: '40px', marginTop: '50px' }} size="md">
            Create an article
          </Button>
        </Link>
        {error && <ErrorMessage variant="danger">{error}</ErrorMessage>}
        {errorDelete && (
          <ErrorMessage variant="danger">{errorDelete}</ErrorMessage>
        )}
        {loading && <Loading />}
        {loadingDelete && <Loading />}
        {notes &&
          notes
            .filter((filteredNote) =>
              filteredNote.title.toLowerCase().includes(search.toLowerCase())
            )
            .reverse()
            .map((note) => (
              <Accordion>
                <Card style={{ margin: 10 }} key={note._id}>
                  <Card.Header style={{ display: "flex" }}>
                    <span
                      style={{
                        color: "black",
                        textDecoration: "none",
                        flex: 1,
                        cursor: "pointer",
                        alignSelf: "center",
                        fontSize: 18,
                      }}>
                      <Accordion.Toggle
                        as={Card.Text}
                        variant="link"
                        eventKey="0">
                        {note.title}
                      </Accordion.Toggle>
                    </span>
                    <div>
                      <Button href={`/note/${note._id}`}>Edit</Button>
                      <Button
                        className="mx-2"
                        onClick={() => deleteHandler(note._id)}
                      >
                        Delete
                      </Button>
                    </div>
                  </Card.Header>
                  <Accordion.Collapse eventKey="0">
                    <Card.Body>
                      <blockquote className="blockquote mb-0">
                        <ReactMarkdown className="text-center" style={{ fontSize: '12px' }}>{note.content}</ReactMarkdown>
                        <footer className="blockquote-footer text-center" style={{ marginTop: '20px' }}>
                          Created:{" "}
                          <cite title="Source Title">
                            {note.createdAt.substring(0, 10)}
                          </cite>
                        </footer>
                      </blockquote>
                    </Card.Body>
                  </Accordion.Collapse>
                </Card>
              </Accordion>
            ))}
      </MainScreen>
    );
  }
  
  export default MyNotes;
  