-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
12 changed files
with
2,970 additions
and
2,969 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,24 +1,24 @@ | ||
| # Logs | ||
| logs | ||
| *.log | ||
| npm-debug.log* | ||
| yarn-debug.log* | ||
| yarn-error.log* | ||
| pnpm-debug.log* | ||
| lerna-debug.log* | ||
|
|
||
| node_modules | ||
| dist | ||
| dist-ssr | ||
| *.local | ||
|
|
||
| # Editor directories and files | ||
| .vscode/* | ||
| !.vscode/extensions.json | ||
| .idea | ||
| .DS_Store | ||
| *.suo | ||
| *.ntvs* | ||
| *.njsproj | ||
| *.sln | ||
| *.sw? | ||
| # Logs | ||
| logs | ||
| *.log | ||
| npm-debug.log* | ||
| yarn-debug.log* | ||
| yarn-error.log* | ||
| pnpm-debug.log* | ||
| lerna-debug.log* | ||
|
|
||
| node_modules | ||
| dist | ||
| dist-ssr | ||
| *.local | ||
|
|
||
| # Editor directories and files | ||
| .vscode/* | ||
| !.vscode/extensions.json | ||
| .idea | ||
| .DS_Store | ||
| *.suo | ||
| *.ntvs* | ||
| *.njsproj | ||
| *.sln | ||
| *.sw? |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,127 +1,128 @@ | ||
| import React from "react" | ||
| import Sidebar from "./components/Sidebar" | ||
| import Editor from "./components/Editor" | ||
| import Split from "react-split" | ||
| import { addDoc, onSnapshot, doc, deleteDoc, setDoc } from "firebase/firestore" | ||
| import { notesCollection, db } from './firebase' | ||
|
|
||
| export default function App() { | ||
| // Setting up the state | ||
| const [notes, setNotes] = React.useState([]) | ||
| const [currentNoteId, setCurrentNoteId] = React.useState("") | ||
| const [tempNoteText, setTempNoteText] = React.useState("") | ||
|
|
||
| const sortedNotes = notes.slice(); | ||
| sortedNotes.sort((a, b) => b.updatedAt - a.updatedAt); | ||
|
|
||
| console.log(currentNoteId) | ||
| // yesy sdfdhfk test | ||
|
|
||
| const currentNote = | ||
| notes.find(note => note.id === currentNoteId) | ||
| || notes[0] | ||
|
|
||
|
|
||
|
|
||
| React.useEffect(() => { | ||
| const unsubscribe = onSnapshot(notesCollection, function(snapshot) { | ||
| // Sync up our local notes array with the snapshot data | ||
| console.log("this are changing!") | ||
| const notesArr = snapshot.docs.map(doc => ({ | ||
| ...doc.data(), | ||
| id: doc.id | ||
| })) | ||
|
|
||
| setNotes(notesArr) | ||
| }) | ||
| return unsubscribe | ||
| }, []) | ||
|
|
||
| // If notes array changes, check if there is no currentId | ||
| React.useEffect(() => { | ||
| if (!currentNoteId) { | ||
| setCurrentNoteId(notes[0]?.id) | ||
| } | ||
| }, [notes]) | ||
|
|
||
| React.useEffect(() => { | ||
| if (currentNote) { | ||
| setTempNoteText(currentNote.body) | ||
| } | ||
| }, [currentNote]) | ||
|
|
||
|
|
||
| React.useEffect(() => { | ||
| const timeoutId = setTimeout(() => { | ||
| updateNote(tempNoteText) | ||
| }, 500) | ||
| return () => clearTimeout(timeoutId) | ||
| }, [tempNoteText]) | ||
|
|
||
|
|
||
| async function createNewNote() { | ||
| const newNote = { | ||
| body: "# Type your markdown note's title here", | ||
| createdAt: Date.now(), | ||
| updatedAt: Date.now() | ||
| } | ||
| // Pushing the notes to firestore | ||
| // addDoc returns promise | ||
| const newNoteRef = await addDoc(notesCollection, newNote) | ||
| // setNotes(prevNotes => [newNote, ...prevNotes]) | ||
| setCurrentNoteId(newNoteRef.id) | ||
| } | ||
|
|
||
| async function updateNote(text) { | ||
| const docRef = doc(db, "notes", currentNoteId) | ||
| await setDoc(docRef, | ||
| { body: text, updatedAt: Date.now() }, | ||
| { merge: true} | ||
| ) | ||
| } | ||
|
|
||
| async function deleteNote(noteId) { | ||
| // Get a ref for the doc to be deleted | ||
| const docRef = doc(db, "notes", noteId) | ||
| await deleteDoc(docRef) | ||
| } | ||
|
|
||
| return ( | ||
| <main> | ||
| { | ||
| notes.length > 0 | ||
| ? | ||
| <Split | ||
| sizes={[30, 70]} | ||
| direction="horizontal" | ||
| className="split" | ||
| > | ||
| <Sidebar | ||
| notes={sortedNotes} | ||
| currentNote={currentNote} | ||
| setCurrentNoteId={setCurrentNoteId} | ||
| newNote={createNewNote} | ||
| deleteNote={deleteNote} | ||
| /> | ||
| { | ||
| <Editor | ||
| tempNoteText={tempNoteText} | ||
| setTempNoteText={setTempNoteText} | ||
| /> | ||
| } | ||
| </Split> | ||
| : | ||
| <div className="no-notes"> | ||
| <h1>You have no notes</h1> | ||
| <button | ||
| className="first-note" | ||
| onClick={createNewNote} | ||
| > | ||
| Create one now | ||
| </button> | ||
| </div> | ||
|
|
||
| } | ||
| </main> | ||
| ) | ||
| } | ||
| import React from "react" | ||
| import Sidebar from "./components/Sidebar" | ||
| import Editor from "./components/Editor" | ||
| import Split from "react-split" | ||
| import { addDoc, onSnapshot, doc, deleteDoc, setDoc } from "firebase/firestore" | ||
| import { notesCollection, db } from './firebase' | ||
|
|
||
| export default function App() { | ||
| // Setting up the state | ||
| const [notes, setNotes] = React.useState([]) | ||
| const [currentNoteId, setCurrentNoteId] = React.useState("") | ||
| const [tempNoteText, setTempNoteText] = React.useState("") | ||
|
|
||
| const sortedNotes = notes.slice(); | ||
| sortedNotes.sort((a, b) => b.updatedAt - a.updatedAt); | ||
|
|
||
| console.log(currentNoteId) | ||
| // yesy sdfdhfk test | ||
| // Comment from WSL | ||
|
|
||
| const currentNote = | ||
| notes.find(note => note.id === currentNoteId) | ||
| || notes[0] | ||
|
|
||
|
|
||
|
|
||
| React.useEffect(() => { | ||
| const unsubscribe = onSnapshot(notesCollection, function(snapshot) { | ||
| // Sync up our local notes array with the snapshot data | ||
| console.log("this are changing!") | ||
| const notesArr = snapshot.docs.map(doc => ({ | ||
| ...doc.data(), | ||
| id: doc.id | ||
| })) | ||
|
|
||
| setNotes(notesArr) | ||
| }) | ||
| return unsubscribe | ||
| }, []) | ||
|
|
||
| // If notes array changes, check if there is no currentId | ||
| React.useEffect(() => { | ||
| if (!currentNoteId) { | ||
| setCurrentNoteId(notes[0]?.id) | ||
| } | ||
| }, [notes]) | ||
|
|
||
| React.useEffect(() => { | ||
| if (currentNote) { | ||
| setTempNoteText(currentNote.body) | ||
| } | ||
| }, [currentNote]) | ||
|
|
||
|
|
||
| React.useEffect(() => { | ||
| const timeoutId = setTimeout(() => { | ||
| updateNote(tempNoteText) | ||
| }, 500) | ||
| return () => clearTimeout(timeoutId) | ||
| }, [tempNoteText]) | ||
|
|
||
|
|
||
| async function createNewNote() { | ||
| const newNote = { | ||
| body: "# Type your markdown note's title here", | ||
| createdAt: Date.now(), | ||
| updatedAt: Date.now() | ||
| } | ||
| // Pushing the notes to firestore | ||
| // addDoc returns promise | ||
| const newNoteRef = await addDoc(notesCollection, newNote) | ||
| // setNotes(prevNotes => [newNote, ...prevNotes]) | ||
| setCurrentNoteId(newNoteRef.id) | ||
| } | ||
|
|
||
| async function updateNote(text) { | ||
| const docRef = doc(db, "notes", currentNoteId) | ||
| await setDoc(docRef, | ||
| { body: text, updatedAt: Date.now() }, | ||
| { merge: true} | ||
| ) | ||
| } | ||
|
|
||
| async function deleteNote(noteId) { | ||
| // Get a ref for the doc to be deleted | ||
| const docRef = doc(db, "notes", noteId) | ||
| await deleteDoc(docRef) | ||
| } | ||
|
|
||
| return ( | ||
| <main> | ||
| { | ||
| notes.length > 0 | ||
| ? | ||
| <Split | ||
| sizes={[30, 70]} | ||
| direction="horizontal" | ||
| className="split" | ||
| > | ||
| <Sidebar | ||
| notes={sortedNotes} | ||
| currentNote={currentNote} | ||
| setCurrentNoteId={setCurrentNoteId} | ||
| newNote={createNewNote} | ||
| deleteNote={deleteNote} | ||
| /> | ||
| { | ||
| <Editor | ||
| tempNoteText={tempNoteText} | ||
| setTempNoteText={setTempNoteText} | ||
| /> | ||
| } | ||
| </Split> | ||
| : | ||
| <div className="no-notes"> | ||
| <h1>You have no notes</h1> | ||
| <button | ||
| className="first-note" | ||
| onClick={createNewNote} | ||
| > | ||
| Create one now | ||
| </button> | ||
| </div> | ||
|
|
||
| } | ||
| </main> | ||
| ) | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,6 +1,6 @@ | ||
| Quick start: | ||
|
|
||
| ``` | ||
| $ npm install | ||
| $ npm run dev | ||
| ``` | ||
| Quick start: | ||
|
|
||
| ``` | ||
| $ npm install | ||
| $ npm run dev | ||
| ``` |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,30 +1,30 @@ | ||
| import React from "react"; | ||
| import ReactMde from "react-mde"; | ||
| import Showdown from "showdown"; | ||
|
|
||
| export default function Editor({ tempNoteText, setTempNoteText }) { | ||
| const [selectedTab, setSelectedTab] = React.useState("write"); | ||
|
|
||
| const converter = new Showdown.Converter({ | ||
| tables: true, | ||
| simplifiedAutoLink: true, | ||
| strikethrough: true, | ||
| tasklists: true, | ||
| }); | ||
|
|
||
| return ( | ||
| <section className="pane editor"> | ||
| <ReactMde | ||
| value={tempNoteText} | ||
| onChange={setTempNoteText} | ||
| selectedTab={selectedTab} | ||
| onTabChange={setSelectedTab} | ||
| generateMarkdownPreview={(markdown) => | ||
| Promise.resolve(converter.makeHtml(markdown)) | ||
| } | ||
| minEditorHeight={80} | ||
| heightUnits="vh" | ||
| /> | ||
| </section> | ||
| ); | ||
| } | ||
| import React from "react"; | ||
| import ReactMde from "react-mde"; | ||
| import Showdown from "showdown"; | ||
|
|
||
| export default function Editor({ tempNoteText, setTempNoteText }) { | ||
| const [selectedTab, setSelectedTab] = React.useState("write"); | ||
|
|
||
| const converter = new Showdown.Converter({ | ||
| tables: true, | ||
| simplifiedAutoLink: true, | ||
| strikethrough: true, | ||
| tasklists: true, | ||
| }); | ||
|
|
||
| return ( | ||
| <section className="pane editor"> | ||
| <ReactMde | ||
| value={tempNoteText} | ||
| onChange={setTempNoteText} | ||
| selectedTab={selectedTab} | ||
| onTabChange={setSelectedTab} | ||
| generateMarkdownPreview={(markdown) => | ||
| Promise.resolve(converter.makeHtml(markdown)) | ||
| } | ||
| minEditorHeight={80} | ||
| heightUnits="vh" | ||
| /> | ||
| </section> | ||
| ); | ||
| } |
Oops, something went wrong.