import React, { createContext, useState } from "react";
export const dataContext = createContext([]);

const Context = ({ children }) => {
  const [addData, setAddData] = useState([]); //to store all the values of the state data
  const [archive, setArchive] = useState([]);
  const [deleteNotes, setDeleteNotes] = useState([]);

  return (
    <>
      <dataContext.Provider
        value={{
          addData,
          setAddData,
          archive,
          setArchive,
          deleteNotes,
          setDeleteNotes,
        }}
      >
        {children}
      </dataContext.Provider>
    </>
  );
};

export default Context;
// export { dataContext };

import React, { useContext, useState } from "react";
import Inputbox from "../Components/Inputbox";
import { dataContext } from "../Components/Context";
import { v4 as uuid } from "uuid";
import SingleNote from "../Components/SingleNote";

const Notes = () => {
  const [loading, setLoading] = useState(true);
  const { addData, setAddData, setArchive, setDeleteNotes } =
    useContext(dataContext);
  //Math.random can also be used here but to make things simpler we have used a npm package as we don't know how many notes will a person will save
  const [show, setShow] = useState(false); //to toggle between between the main note and the big note

  const [data, setData] = useState({
    //to stores all the values given by the user
    id: uuid(),
    title: "",
    description: "",
  });

  const addNote = () => {
    setAddData((oldData) => {
      return [...oldData, data]; // Calling the done function using the addNote function
    });
  };

  const Delete = (index) => {
    const DelArray = addData.filter((Val) => {
      return index !== Val.id;
    });
    setAddData(DelArray);
    setDeleteNotes((preArr) => [addData, ...preArr]);
  };

  const Archive = (index) => {
    const ArchiveArray = addData.filter((Val) => {
      return index !== Val.id;
    });
    setAddData(ArchiveArray);
    setArchive((preArr) => [addData, ...preArr]);
  };

  const handleClickAway = (e, val) => {
    e.preventDefault();
    setShow(false); //if data filed is blank, close the input fields
    //if data field is not empty
    if (data.title || data.description) {
      setLoading(false);
      addNote(val);
      setData({
        title: "",
        description: "",
      });
    }
  };
  return (
    <>
      <Inputbox
        handleClickAway={handleClickAway}
        data={data}
        setData={setData}
        setAddData={setAddData}
        show={show}
        setShow={setShow}
      />
      {loading ? (
        <div style={{ marginLeft: "30%", marginTop: "5%" }}>
          <div className="icon-1">
            <i class="fa-regular fa-note-sticky"></i>
          </div>
          <div className="fs-3 fw-bold opacity-50">
            Your Notes will Appear Here
          </div>
        </div>
      ) : (
        <SingleNote addData={addData} Delete={Delete} Archive={Archive} />
      )}
    </>
  );
};

export default Notes;

import React from "react";

const SingleNote = ({ addData, Delete, Archive }) => {
  return (
    <>
      <div className="row mt-5 d-flex">
        {addData &&
          addData.map((Val, index) => {
            const { title, description, id } = Val;
            return (
              <>
                <div className="note m-3" key={index} id={index}>
                  <div className="fs-4 fw-bold">{title}</div>
                  <br />
                  <p>{description}</p>
                  <div className="d-flex flex-row-reverse">
                    <div
                      onClick={() => Delete(id)}
                      style={{ cursor: "pointer" }}
                      title="Delete"
                    >
                      <i className="fa-regular fa-trash-can fs-4 py-2 text-danger mx-3"></i>
                    </div>
                    <div
                      onClick={() => Archive(id)}
                      style={{ cursor: "pointer" }}
                      title="Archive"
                    >
                      <i className="fa-solid fa-boxes-stacked fs-4 py-2 text-success"></i>
                    </div>
                  </div>
                </div>
              </>
            );
          })}
      </div>
    </>
  );
};

export default SingleNote;

import React, { useContext } from "react";
import { dataContext } from "../Components/Context";

const Archive = () => {
  const { archive, setAddData, setArchive, setDeleteNotes } =
    useContext(dataContext);

  const Delete = (index) => {
    const DelArray = archive[0].filter((Val) => {
      return index !== Val.id;
    });
    setDeleteNotes(DelArray);
    setAddData((preArr) => [archive, ...preArr]);
  };

  const UnArchive = (index) => {
    const ArchiveArray = archive[0].filter((Val) => {
      return Val.id !== index;
    });
    setArchive(ArchiveArray);
    setAddData((preArr) => [...preArr, archive]);
  };
  return (
    <>
      <div className="row mt-5 d-flex">
        {archive.map((Val, index) => {
          const entry = Val[0];
          const { title, description, id } = entry;
          return (
            <>
              <div className="note m-3" key={index} id={index}>
                <div className="fs-4 fw-bold">{title}</div>
                <br />
                <p>{description}</p>
                <div className="d-flex flex-row-reverse">
                  <div
                    onClick={() => Delete(id)}
                    style={{ cursor: "pointer" }}
                    title="Delete"
                  >
                    <i className="fa-regular fa-trash-can fs-4 py-2 text-danger mx-3"></i>
                  </div>
                  <div
                    onClick={() => UnArchive(id)}
                    style={{ cursor: "pointer" }}
                    title="Unarchive"
                  >
                    <i className="fa-solid fa-arrow-up-from-ground-water fs-4 py-2 text-success"></i>
                  </div>
                </div>
              </div>
            </>
          );
        })}
      </div>
    </>
  );
};

export default Archive;