Note Zipper provides you one safe place for all your notes. |
Here is a working live demo : https://notezipper.herokuapp.com/
You can register a new account or login with an existing one.
MIT © Piyush Agarwal
Watch Full Tutorial for this App on YouTube
Home Page: https://www.youtube.com/watch?v=IQXjO0t4XRM&list=PLKhlp2qtUcSYC7EffnHzD-Ws2xG-j3aYo
Note Zipper provides you one safe place for all your notes. |
Here is a working live demo : https://notezipper.herokuapp.com/
You can register a new account or login with an existing one.
MIT © Piyush Agarwal
how it is getting the data form backend with out bearer token!. please explain.
Thanks for your help!
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]);
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
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.
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.
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');
}
});
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;
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
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.