piyush-eon / notezipper

Watch Full Tutorial for this App on YouTube

Note Zipper

Note Zipper provides you one safe place for all your notes.

Click Here to Watch Full tutorial on Youtube

Demo

Here is a working live demo : https://notezipper.herokuapp.com/

Site

Landing Page

Login Form

You can register a new account or login with an existing one.

Edit Profile

Create a Note

All Notes

Edit Note

Built with

• React JS
• Node JS
• Express JS
• Mongo DB
• Bootstrap

Team

MIT © Piyush Agarwal

notezipper's Issues

Note-Info Form not auto-populating on click on Edit

After clickcing on edit button the note information is not auto populating with the information. I have checked with everything but it is working the same in every case

useEffect(() => {
  const fetching = async () => {
    const { data } = await axios.get(`/api/notes/${match.params.id}`);

    setTitle(data.title);
    setContent(data.content);
    setCategory(data.category);
    setDate(data.updatedAt);
  };

  fetching();
}, [match.params.id, date]);

Update password not hashed during profile update.

The password is not getting hased before the update in the updateUserProfile function of userController.js.
It causes the user to update the password but cant login again.

• Updated Code

    const user = await User.findById(req.user._id);
    if(user){
        user.name=req.body.name||user.name;
        user.email=req.body.email||user.email;
        if(req.body.password){
            const hashedPassword=await bcrypt.hash(req.body.password,10);
            user.password=hashedPassword;
        }
        const updatedUser=await user.save();
        res.json({
            _id: updatedUser._id,
            name: updatedUser.name,
            email: updatedUser.email,
            isAdmin: updatedUser.isAdmin,
            pic: updatedUser.pic,
            token: generateToken(updatedUser._id)
        })

    }else{
        res.status(404);
        throw new Error('User not found');
    }
});

Thumbnail

Drag & Drop Error

Hi @piyush-eon

I'm trying to implement the drag & drop function, but after dropping the card, it's giving me this error: TypeError: Object(...) is not a function.

I only made changes to MainScreen & MyNotes. Hope you can look into this. Thanks for the great tutorial!

MainScreen.js

import React from 'react'
import { Droppable } from 'react-beautiful-dnd';
import { Container, Row } from 'react-bootstrap'
import "./MainScreen.css"

const MainScreen = ({ title, children}) => {
  return (
    <div className="mainback">
      <Droppable droppableId="tdl">
        {(provided) => (
          <Container>
            <Row>
              <div
                className="page"
                ref={provided.innerRef}
                {...provided.droppableProps}
              >
                {title && (
                  <>
                    <h1 className="heading">{title}</h1>
                    <hr />
                  </>
                )}
                {children}
              </div>
            </Row>
          </Container>
        )}
      </Droppable>
    </div>
  );
}

export default MainScreen

MyNotes.js

import MainScreen from "../../components/MainScreen";
import { Accordion, Badge, Button, Card } from "react-bootstrap";
import { Link, useHistory } from "react-router-dom";
import axios from "axios";
import { useEffect, useState } from "react";
import { useDispatch, useSelector } from "react-redux";
import { deleteNoteAction, listNotes } from "../../actions/notesActions";
import Loading from "../../components/Loading";
import ErrorMessage from "../../components/ErrorMessage";
import ReactMarkdown from "react-markdown";
import { DragDropContext, Draggable, Droppable } from "react-beautiful-dnd";
import { noteListReducer } from "../../Reducer/notesReducers";
import { NOTES_LIST_REQUEST, NOTES_LIST_SUCCESS } from "../../constants/notesConstants";

const MyNotes = ({ search }) => {
  const dispatch = useDispatch();

  const noteList = useSelector((state) => state.noteList);
  const { loading, notes, error } = noteList;

  const userLogin = useSelector((state) => state.userLogin);
  const { userInfo } = userLogin;

  const noteCreate = useSelector((state) => state.noteCreate);
  const { success: successCreate } = noteCreate;

  const noteUpdate = useSelector((state) => state.noteUpdate);
  const { success: successUpdate } = noteUpdate;

  const noteDelete = useSelector((state) => state.noteDelete);
  const {
    loading: loadingDelete,
    error: errorDelete,
    success: successDelete,
  } = noteDelete;

  const deleteHandler = (id) => {
    if (window.confirm("Are you sure")) {
      dispatch(deleteNoteAction(id));
    }
  };

  const history = useHistory();

  useEffect(() => {
    dispatch(listNotes());
    if (!userInfo) {
      history.push("/");
    }
  }, [
    dispatch,
    successCreate,
    history,
    userInfo,
    successUpdate,
    successDelete,
  ]);

  function handleOnDragEnd(result) {
    if (!result.destination) return;

    const items = Array.from(notes);
    const [reorderedItem] = items.splice(result.source.index, 1);
    items.splice(result.destination.index, 0, reorderedItem);

    NOTES_LIST_SUCCESS(items);
  }

  return (
    <DragDropContext onDragEnd={handleOnDragEnd}>
      <MainScreen title={`Welcome Back ${userInfo.name}`}>
        <Link to="createnote">
          <Button style={{ marginLeft: 10, marginBottom: 6 }} size="lg">
            Create
          </Button>
        </Link>
        {errorDelete && (
          <ErrorMessage variant="danger">{errorDelete}</ErrorMessage>
        )}
        {error && <ErrorMessage variant="danger">{error}</ErrorMessage>}
        {loading && <Loading />}
        {notes
          ?.reverse()
          .filter((filteredNote) =>
            filteredNote.title.toLowerCase().includes(search.toLowerCase())
          )
          .map((note, index) => (
            <Accordion>
            <Draggable draggableId={note._id.toString()} index={index}>
              {(provided) => (
                <Card
                  style={{ margin: 10 }}
                  key={note._id}
                  index={index}
                  ref={provided.innerRef}
                  {...provided.draggableProps}
                  {...provided.dragHandleProps}
                >
                  <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
                        variant="danger"
                        className="mx-2"
                        onClick={() => deleteHandler(note._id)}
                      >
                        Delete
                      </Button>
                    </div>
                  </Card.Header>
                  <Accordion.Collapse eventKey="0">
                  <Card.Body>
                    <h4>
                      <Badge variant="success">
                        Category - {note.category}
                      </Badge>
                    </h4>

                    <blockquote className="blockquote mb-0">
                      <ReactMarkdown>{note.content}</ReactMarkdown>
                      <footer className="blockquote-footer">
                        
                        Created on{" "}
                        <cite title="Source Title">
                          {note.createdAt.substring(0, 10)}
                        </cite>
                      </footer>
                    </blockquote>
                  </Card.Body>
                  </Accordion.Collapse>
                </Card>
              )}
            </Draggable>
            </Accordion>
          ))}
      </MainScreen>
    </DragDropContext>
  );
};

export default MyNotes;

You App is vulnerable.

router.route("/").get(protect, getNotes);
router
  .route("/:id")
  .get(getNoteById)
  .delete(protect, DeleteNote)
  .put(protect, UpdateNote);
router.route("/create").post(protect, CreateNote);

The problem with this code is, if I am authenticated I can delete or edit someone's else post if I know post id.

User Image not uploading in database

when i try to upload my own picture while registering the image I've chosen is not stored in the database but the default image is stored in the database.
code:
const postDetails = (pics) => {
if (
pics ===
"https://icon-library.com/images/anonymous-avatar-icon/anonymous-avatar-icon-25.jpg"
) {
return setPicMessage("Please Select an Image");
}
setPicMessage(null);
if (pics.type === "image/jpeg" || pics.type === "image/png") {
const data = new FormData();
data.append("file", pics);
data.append("upload_preset", "noteit");
data.append("cloud_name", "mustafakhan");
fetch("https://api.cloudinary.com/v1_1/mustafakhan/image/upload", {
method: "post",
body: data,
})
.then((res) => res.json())
.then((data) => {
setPic(data.url.toString());
})
.catch((err) => {
console.log(err);
});
} else {
return setPicMessage("Please Select an Image");
}
};

neither the error message shows up when i don't select any image

Mongo DB Connection Error

useNewUrlParser, useUnifiedTopology, useFindAndModify, and useCreateIndex are no longer supported options. Mongoose 6 always behaves as if useNewUrlParser, useUnifiedTopology, and useCreateIndex are true, and useFindAndModify is false. Please remove these options from your code.
in db.js of the config file in backend.
Solution to the UseCreateIndex error

This is not issue. Doubt!!

notezipper/frontend/src/screens/SingleNote/SingleNote.js

Line 34 in 02c4683

const { data } = await axios.get(`/api/notes/${match.params.id}`);

how it is getting the data form backend with out bearer token!. please explain.

Thanks for your help!