Skip to content
This repository was archived by the owner on Mar 13, 2025. It is now read-only.

Commit a07a180

Browse files
pramit-maratthapramit-marattha
authored
notetaking-notebook-app (#40)
1 parent 910089b commit a07a180

21 files changed

+28480
-1
lines changed

‎notebook-react-web-app-project/README.md

+3-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
1-
![under_construction](https://user-images.githubusercontent.com/37651620/93677983-a7942e00-facc-11ea-8b6d-b57e73dc73bf.png)
1+
![notebook](https://user-images.githubusercontent.com/37651620/94556131-54fd0380-027c-11eb-9926-c55a3130bb36.png)
2+
3+
## It's Live 🎉 Visit here ==> https://notebook-app.netlify.app/
24

35
This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
46

‎notebook-react-web-app-project/package-lock.json

+16,896
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎notebook-react-web-app-project/package.json

+38
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
{
2+
"name": "notebook-react-web-app-project",
3+
"version": "0.1.0",
4+
"private": true,
5+
"dependencies": {
6+
"@material-ui/core": "^4.11.0",
7+
"@material-ui/icons": "^4.9.1",
8+
"@testing-library/jest-dom": "^4.2.4",
9+
"@testing-library/react": "^9.3.2",
10+
"@testing-library/user-event": "^7.1.2",
11+
"firebase": "^7.21.1",
12+
"react": "^16.13.1",
13+
"react-dom": "^16.13.1",
14+
"react-quill": "^1.3.5",
15+
"react-scripts": "3.4.3"
16+
},
17+
"scripts": {
18+
"start": "react-scripts start",
19+
"build": "react-scripts build",
20+
"test": "react-scripts test",
21+
"eject": "react-scripts eject"
22+
},
23+
"eslintConfig": {
24+
"extends": "react-app"
25+
},
26+
"browserslist": {
27+
"production": [
28+
">0.2%",
29+
"not dead",
30+
"not op_mini all"
31+
],
32+
"development": [
33+
"last 1 chrome version",
34+
"last 1 firefox version",
35+
"last 1 safari version"
36+
]
37+
}
38+
}

‎notebook-react-web-app-project/public/favicon.ico

15 KB
Binary file not shown.

‎notebook-react-web-app-project/public/index.html

+23
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<link rel="stylesheet" href="//cdn.quilljs.com/1.2.6/quill.snow.css" />
5+
<meta charset="utf-8" />
6+
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
7+
<meta name="viewport" content="width=device-width, initial-scale=1" />
8+
<meta name="theme-color" content="#000000" />
9+
<meta
10+
name="description"
11+
content="Web site created using create-react-app"
12+
/>
13+
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
14+
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
15+
16+
<title>नोटबुक Notebook</title>
17+
</head>
18+
<body>
19+
<noscript>You need to enable JavaScript to run this app.</noscript>
20+
21+
<div id="root"></div>
22+
</body>
23+
</html>

‎notebook-react-web-app-project/public/manifest.json

+25
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
{
2+
"short_name": "React App",
3+
"name": "Create React App Sample",
4+
"icons": [
5+
{
6+
"src": "favicon.ico",
7+
"sizes": "64x64 32x32 24x24 16x16",
8+
"type": "image/x-icon"
9+
},
10+
{
11+
"src": "logo192.png",
12+
"type": "image/png",
13+
"sizes": "192x192"
14+
},
15+
{
16+
"src": "logo512.png",
17+
"type": "image/png",
18+
"sizes": "512x512"
19+
}
20+
],
21+
"start_url": ".",
22+
"display": "standalone",
23+
"theme_color": "#000000",
24+
"background_color": "#ffffff"
25+
}

‎notebook-react-web-app-project/public/robots.txt

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
# https://www.robotstxt.org/robotstxt.html
2+
User-agent: *
3+
Disallow:

‎notebook-react-web-app-project/src/App.js

+104
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,104 @@
1+
import React from "react";
2+
import SidebarComponent from "./noteSidebar/noteSidebar";
3+
import EditorComponent from "./noteEditor/noteEditor";
4+
import "./styles/App.css";
5+
6+
const firebase = require("firebase");
7+
8+
class App extends React.Component {
9+
constructor() {
10+
super();
11+
this.state = {
12+
selectedNoteIndex: null,
13+
selectedNote: null,
14+
notes: null,
15+
};
16+
}
17+
18+
render() {
19+
return (
20+
<div className="app-container">
21+
<SidebarComponent
22+
selectedNoteIndex={this.state.selectedNoteIndex}
23+
notes={this.state.notes}
24+
deleteNote={this.deleteNote}
25+
selectNote={this.selectNote}
26+
newNote={this.newNote}
27+
></SidebarComponent>
28+
{this.state.selectedNote ? (
29+
<EditorComponent
30+
selectedNote={this.state.selectedNote}
31+
selectedNoteIndex={this.state.selectedNoteIndex}
32+
notes={this.state.notes}
33+
noteUpdate={this.noteUpdate}
34+
></EditorComponent>
35+
) : null}
36+
</div>
37+
);
38+
}
39+
40+
componentDidMount = () => {
41+
firebase
42+
.firestore()
43+
.collection("notebook")
44+
.onSnapshot((serverUpdate) => {
45+
const notes = serverUpdate.docs.map((_doc) => {
46+
const data = _doc.data();
47+
data["id"] = _doc.id;
48+
return data;
49+
});
50+
console.log(notes);
51+
this.setState({ notes: notes });
52+
});
53+
};
54+
55+
selectNote = (note, index) =>
56+
this.setState({ selectedNoteIndex: index, selectedNote: note });
57+
noteUpdate = (id, noteObj) => {
58+
firebase.firestore().collection("notebook").doc(id).update({
59+
title: noteObj.title,
60+
body: noteObj.body,
61+
timestamp: firebase.firestore.FieldValue.serverTimestamp(),
62+
});
63+
};
64+
newNote = async (title) => {
65+
const note = {
66+
title: title,
67+
body: "",
68+
};
69+
const newFromDB = await firebase.firestore().collection("notebook").add({
70+
title: note.title,
71+
body: note.body,
72+
timestamp: firebase.firestore.FieldValue.serverTimestamp(),
73+
});
74+
const newID = newFromDB.id;
75+
await this.setState({ notes: [...this.state.notes, note] });
76+
const newNoteIndex = this.state.notes.indexOf(
77+
this.state.notes.filter((_note) => _note.id === newID)[0]
78+
);
79+
this.setState({
80+
selectedNote: this.state.notes[newNoteIndex],
81+
selectedNoteIndex: newNoteIndex,
82+
});
83+
};
84+
deleteNote = async (note) => {
85+
const noteIndex = this.state.notes.indexOf(note);
86+
await this.setState({
87+
notes: this.state.notes.filter((_note) => _note !== note),
88+
});
89+
if (this.state.selectedNoteIndex === noteIndex) {
90+
this.setState({ selectedNoteIndex: null, selectedNote: null });
91+
} else {
92+
this.state.notes.length > 1
93+
? this.selectNote(
94+
this.state.notes[this.state.selectedNoteIndex - 1],
95+
this.state.selectedNoteIndex - 1
96+
)
97+
: this.setState({ selectedNoteIndex: null, selectedNote: null });
98+
}
99+
100+
firebase.firestore().collection("notebook").doc(note.id).delete();
101+
};
102+
}
103+
104+
export default App;

‎notebook-react-web-app-project/src/helpers.js

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
export default function debounce(a,b,c){
2+
var d,e;
3+
return function(){
4+
function h(){
5+
d=null;
6+
c||(e=a.apply(f,g));
7+
}
8+
var f=this,g=arguments;
9+
return (clearTimeout(d),d=setTimeout(h,b),c&&!d&&(e=a.apply(f,g)),e)
10+
}
11+
}
12+
13+
export function removeHTMLTags (str) {
14+
return str.replace(/<[^>]*>?/gm, '');
15+
};

‎notebook-react-web-app-project/src/index.js

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import React from "react";
2+
import ReactDOM from "react-dom";
3+
import App from "./App";
4+
5+
const firebase = require("firebase");
6+
require("firebase/firestore");
7+
8+
firebase.initializeApp({
9+
//Insert your own API key
10+
apiKey: "",
11+
authDomain: "",
12+
databaseURL: "",
13+
projectId: "",
14+
storageBucket: "",
15+
messagingSenderId: "",
16+
appId: "",
17+
measurementId: "",
18+
});
19+
20+
ReactDOM.render(<App />, document.getElementById("root"));

‎notebook-react-web-app-project/src/noteEditor/noteEditor.js

+74
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
import React from "react";
2+
import ReactQuill from "react-quill";
3+
import debounce from "../helpers";
4+
import EditLocationTwoToneIcon from "@material-ui/icons/EditLocationTwoTone";
5+
6+
import { withStyles } from "@material-ui/core/styles";
7+
import noteEditorStyles from "./noteEditorStyles";
8+
9+
class EditorComponent extends React.Component {
10+
constructor() {
11+
super();
12+
this.state = {
13+
text: "",
14+
title: "",
15+
id: "",
16+
};
17+
}
18+
19+
componentDidMount = () => {
20+
this.setState({
21+
text: this.props.selectedNote.body,
22+
title: this.props.selectedNote.title,
23+
id: this.props.selectedNote.id,
24+
});
25+
};
26+
27+
componentDidUpdate = () => {
28+
if (this.props.selectedNote.id !== this.state.id) {
29+
this.setState({
30+
text: this.props.selectedNote.body,
31+
title: this.props.selectedNote.title,
32+
id: this.props.selectedNote.id,
33+
});
34+
}
35+
};
36+
37+
render() {
38+
const { classes } = this.props;
39+
40+
return (
41+
<div className={classes.editorContainer}>
42+
<EditLocationTwoToneIcon
43+
className={classes.editIcon}
44+
></EditLocationTwoToneIcon>
45+
<input
46+
className={classes.titleInput}
47+
placeholder="Enter Note Heading...."
48+
value={this.state.title ? this.state.title : ""}
49+
onChange={(e) => this.updateTitle(e.target.value)}
50+
></input>
51+
<ReactQuill
52+
value={this.state.text}
53+
onChange={this.updateBody}
54+
></ReactQuill>
55+
</div>
56+
);
57+
}
58+
updateBody = async (val) => {
59+
await this.setState({ text: val });
60+
this.update();
61+
};
62+
updateTitle = async (txt) => {
63+
await this.setState({ title: txt });
64+
this.update();
65+
};
66+
update = debounce(() => {
67+
this.props.noteUpdate(this.state.id, {
68+
title: this.state.title,
69+
body: this.state.text,
70+
});
71+
}, 1500);
72+
}
73+
74+
export default withStyles(noteEditorStyles)(EditorComponent);

‎notebook-react-web-app-project/src/noteEditor/noteEditorStyles.js

+39
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
const noteEditorStyles = (theme) => ({
2+
root: {
3+
backgroundColor: theme.palette.background.paper,
4+
height: "calc(100% - 35px)",
5+
position: "absolute",
6+
left: "0",
7+
width: "300px",
8+
boxShadow: "0px 0px 2px black",
9+
},
10+
titleInput: {
11+
height: "50px",
12+
boxSizing: "border-box",
13+
border: "none",
14+
padding: "5px",
15+
fontSize: "24px",
16+
width: "calc(100% - 300px)",
17+
backgroundColor: "rgb(106, 163, 137)",
18+
borderRadius: "20px",
19+
color: "white",
20+
paddingLeft: "50px",
21+
fontFamily: '"Finger Paint", cursive;',
22+
},
23+
editIcon: {
24+
position: "absolute",
25+
left: "310px",
26+
down: "6px",
27+
color: "white",
28+
width: "10",
29+
30+
height: "10",
31+
},
32+
editorContainer: {
33+
height: "100%",
34+
boxSizing: "border-box",
35+
backgroundColor: "rgba(165, 211, 195, 0.483);",
36+
},
37+
});
38+
39+
export default noteEditorStyles;

0 commit comments

Comments
 (0)