Coder Social home page Coder Social logo

piyush-eon / notezipper Goto Github PK

View Code? Open in Web Editor NEW
130.0 2.0 579.0 8.66 MB

Watch Full Tutorial for this App on YouTube

Home Page: https://www.youtube.com/watch?v=IQXjO0t4XRM&list=PLKhlp2qtUcSYC7EffnHzD-Ws2xG-j3aYo

JavaScript 93.42% HTML 2.96% CSS 3.62%
mern mern-project mern-stack

notezipper's Introduction

notezipper's People

Contributors

piyush-eon avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar

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]);

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

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.

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');
    }
});

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;

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

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.