Reactjs - How can i add hidden notes Functionality in an notes app made using MERN stack, in Mongoose(for mongodb)

Garvitpareek
May 22, 2023
316 views
1 vote
2 Answers

I want to add a hidden notes funcionality in which when i click the hide note button the note should be removed from that place and get added to hidden notes, and when i click on hidden notes i should see them, and even get the option to unhide it, Please help,

Here is the webpage i currently have done(The button for hidden notes is in the all Notes dropdown):

(https://i.stack.imgur.com/Pm3Dx.png)
(https://i.stack.imgur.com/rr5OL.png)
(https://i.stack.imgur.com/TEY07.png)
(https://i.stack.imgur.com/wzKN8.png)

Here is the code for the notes app done till now – (drive File), (without node_modules as it is very heavy):

Code IN Drive

this is app.js:

    import './App.css';
    import {
    BrowserRouter as Router,
    Routes,
    Route,
    Link
    } from "react-router-dom";
    import Navbar from './components/Navbar';
    import Home from './components/Home';
    import AddNote from "./components/AddNote"
    import About from './components/About';
    import NoteState from './context/notes/NoteState';
    import Alert from './components/Alert';
    import Footer from './components/Footer';
    import DropDown from './components/DropDown';
    
    function App() {
     return (
        <>
          <NoteState>
            <Router>
              <Navbar />
              <DropDown></DropDown>
              <div className="container">
               <Routes>
                  <Route exact path="/" element={<Home />} />
                  <Route exact path="/about" element={<About />} />
                  <Route exact path="/addnote" element={<AddNote/>} />
                </Routes>
              </div>
              <Alert message="This is amazing React course" />
              <Footer></Footer>
            </Router>
          </NoteState>
    
        </>
      );
    }

    export default App;

Please Help

Answers

- JunYan
- May 22, 2023 at 9:17 am
- 0 votes
0
It depends how you want to save the data, I would normally write the logic like this:
1. get the id of the item you want to hide
2. push the item id to the hidden list (save it to the database)
3. before you load the notes data, you should filter out the id based on the id stored in the hidden list.
```
       let currNotesData = notesData.filter((notes) => {
         return hiddenList.includes(notes) })
```
1. Then, you can loop through the currNotesData and render the available component.
There are more ways to do this too
Login or Signup to reply.

- MrGandhi
- May 22, 2023 at 3:21 pm
- 0 votes
0
1. Create a table named "notes"
  
  1.1. The table should have a field named "isVisible". The data type of this field will be boolean and by default the value is set to true.
2. Create an API to change the visibility of the note, the method should be "PATCH".
3. Create an API to fetch the list of all the notes. In request parameters you have to add one parameter i.e.,isVisible and based on the value of the parameter the API will return the data.
  
  For example if you want to show all the hidden notes then your backend URL will look like http://localhost:3000/api/notes?isVisible=false
Login or Signup to reply.