From 73ae33ae7b1d83e6da587af300ac72c3304bc416 Mon Sep 17 00:00:00 2001 From: Danny Lamarti Date: Sat, 11 Dec 2021 15:35:01 +0100 Subject: [PATCH] Organizes project and adds pretty random title to new notes --- src/Fire.ts | 11 +----- src/components/App.tsx | 2 +- src/components/Paper.tsx | 59 ---------------------------- src/components/paper/Header.tsx | 48 ++++++++++++++++++++++ src/components/{ => paper}/Paper.css | 0 src/components/paper/Paper.tsx | 25 ++++++++++++ src/components/sider/Sider.tsx | 5 ++- src/models/Note.ts | 18 +++++++++ src/models/Store.ts | 35 ++++++++++------- 9 files changed, 116 insertions(+), 87 deletions(-) delete mode 100644 src/components/Paper.tsx create mode 100644 src/components/paper/Header.tsx rename src/components/{ => paper}/Paper.css (100%) create mode 100644 src/components/paper/Paper.tsx diff --git a/src/Fire.ts b/src/Fire.ts index acebd03..c4fe63b 100644 --- a/src/Fire.ts +++ b/src/Fire.ts @@ -11,7 +11,7 @@ import { } from "firebase/firestore"; import {identity, Observable} from "rxjs"; import {collectionData} from "rxfire/firestore"; -import {Note, noteOf} from "./models/Note"; +import {Note} from "./models/Note"; const ofType = (): FirestoreDataConverter => ({ toFirestore: identity, @@ -19,7 +19,6 @@ const ofType = (): FirestoreDataConverter => ({ }); export type Notes = { - create: () => Promise, read: (id: string) => Promise, readAll: () => Promise, all: Observable, @@ -55,14 +54,6 @@ export function fireOf(config: FirebaseOptions): Fire { await setDoc(noteRef, note) }, - create: async () => { - const note = noteOf('0001 - new note'); - const noteRef = doc(notes, note.id); - - await setDoc(noteRef, note) - - return note - }, read: async (id: string) => { const ref = doc(notes, id); const snapshot = await getDoc(ref); diff --git a/src/components/App.tsx b/src/components/App.tsx index f12665b..7333feb 100644 --- a/src/components/App.tsx +++ b/src/components/App.tsx @@ -1,7 +1,7 @@ import React, {FunctionComponent} from 'react'; import {Col, Container, Row} from "reactstrap"; import {Sider} from "./sider/Sider"; -import {Paper} from "./Paper"; +import {Paper} from "./paper/Paper"; export const App: FunctionComponent = () => diff --git a/src/components/Paper.tsx b/src/components/Paper.tsx deleted file mode 100644 index 1ed70ed..0000000 --- a/src/components/Paper.tsx +++ /dev/null @@ -1,59 +0,0 @@ -import React, {FunctionComponent, useState} from "react"; -import {Button, ButtonGroup, Card, CardBody, Fade} from "reactstrap"; -import Editor from "rich-markdown-editor"; -import {useStore} from "../Store+utils"; -import {observer} from "mobx-react-lite"; -import './Paper.css'; -import * as Icon from "react-bootstrap-icons"; - -export const Paper: FunctionComponent = observer(() => { - const [isConfirmingDelete, setConfirmingDelete] = useState(false); - const store = useStore(); - const note = store.selectedNote; - - const deleteNote = () => { - setConfirmingDelete(false) - store.deleteNote() - } - - return <> -
- - - - - - Are you sure? - - - - - -
- - - store.updateSelectedNote(getValue())} - defaultValue={note?.content} - id="markdown-editor" - className="ps-5"/> - - - -}) \ No newline at end of file diff --git a/src/components/paper/Header.tsx b/src/components/paper/Header.tsx new file mode 100644 index 0000000..1899406 --- /dev/null +++ b/src/components/paper/Header.tsx @@ -0,0 +1,48 @@ +import React, {FunctionComponent, useState} from "react"; +import {Button, ButtonGroup} from "reactstrap"; +import classNames from "classnames"; +import * as Icon from "react-bootstrap-icons"; +import {useStore} from "../../Store+utils"; + + +export const Header: FunctionComponent = () => { + const [isConfirmingDelete, setConfirmingDelete] = useState(false); + const store = useStore(); + const deleteNote = () => { + setConfirmingDelete(false) + store.deleteNote() + } + const confirmButtonClasses = classNames('d-inline-flex', 'align-items-center', { + disabled: isConfirmingDelete + }) + + return
+ + + + Are you sure? + + + + + +
+} diff --git a/src/components/Paper.css b/src/components/paper/Paper.css similarity index 100% rename from src/components/Paper.css rename to src/components/paper/Paper.css diff --git a/src/components/paper/Paper.tsx b/src/components/paper/Paper.tsx new file mode 100644 index 0000000..f1da680 --- /dev/null +++ b/src/components/paper/Paper.tsx @@ -0,0 +1,25 @@ +import React, {FunctionComponent} from "react"; +import {Card, CardBody} from "reactstrap"; +import Editor from "rich-markdown-editor"; +import {observer} from "mobx-react-lite"; +import './Paper.css'; +import {useStore} from "../../Store+utils"; +import {Header} from "./Header"; + +export const Paper: FunctionComponent = observer(() => { + const store = useStore(); + const note = store.selectedNote; + + return <> +
+ + + store.updateNote(getValue())} + defaultValue={note?.content} + id="markdown-editor" + className="ps-5"/> + + + +}) \ No newline at end of file diff --git a/src/components/sider/Sider.tsx b/src/components/sider/Sider.tsx index 51c5298..a386a93 100644 --- a/src/components/sider/Sider.tsx +++ b/src/components/sider/Sider.tsx @@ -31,7 +31,9 @@ export const Sider: FunctionComponent = observer(() => { return
Index - +
{flatten(tree).map(item => fold(item, cases))} @@ -39,7 +41,6 @@ export const Sider: FunctionComponent = observer(() => {
}) - export function flatten(items: Item[]): Item[] { return chain(items) .flatMap(item => diff --git a/src/models/Note.ts b/src/models/Note.ts index 0c9af13..9d4febd 100644 --- a/src/models/Note.ts +++ b/src/models/Note.ts @@ -1,5 +1,6 @@ import {v4 as guid} from "uuid"; import {identity} from "rxjs"; +import {random} from "lodash"; export type Note = { id: string @@ -24,4 +25,21 @@ export function noteOf(content: string, id?: string): Note { return this.path[this.path.length - 1] ?? "" } } +} + +export function getRandomTitle(): string { + const titles = [ + 'My next creation', + 'My new idea', + 'My thriving future', + 'My world exploration', + 'My creative vision', + 'My expansive thought', + ] + const {length} = titles; + const index = random(0, length - 1, false) + const title = titles[index] + + console.log(length, index, title) + return `0001 ${title}` } \ No newline at end of file diff --git a/src/models/Store.ts b/src/models/Store.ts index 1869f1c..5b63c1f 100644 --- a/src/models/Store.ts +++ b/src/models/Store.ts @@ -1,6 +1,6 @@ import {fireOf} from "../Fire"; import {fromPromise, fromStream, IPromiseBasedObservable, IStreamListener, PENDING} from "mobx-utils"; -import {Note, noteOf} from "./Note"; +import {getRandomTitle, Note, noteOf} from "./Note"; export type Store = { selectedNoteId: string | undefined, @@ -9,9 +9,9 @@ export type Store = { addingNote: IPromiseBasedObservable | undefined, updatingNote: IPromiseBasedObservable | undefined, deletingNote: IPromiseBasedObservable | undefined, - newNote: () => void + addNote: () => void select: (noteId: string) => void - updateSelectedNote: (value: string) => void + updateNote: (value: string) => void deleteNote: () => void; } @@ -28,7 +28,7 @@ export const storeOf = (): Store => { return { selectedNoteId: undefined, - select(noteId: string): void { + select(noteId: string) { this.selectedNoteId = noteId }, notes: fromStream(fire.store.notes.all), @@ -37,30 +37,35 @@ export const storeOf = (): Store => { }, addingNote: undefined, updatingNote: undefined, - newNote() { - const adding = this.addingNote; + addNote() { + const {addingNote} = this; - if (adding?.state !== PENDING) - this.addingNote = fromPromise(fire.store.notes.create().then(undefined), adding) + if (addingNote?.state !== PENDING) { + const title = getRandomTitle() + const note = noteOf(title) + const promise = fire.store.notes.set(note); + + this.addingNote = fromPromise(promise, addingNote) + } }, - updateSelectedNote(content: string): void { - const {selectedNoteId} = this + updateNote(content: string): void { + const {selectedNoteId, updatingNote} = this - if ({selectedNoteId}) { + if (selectedNoteId) { const note = noteOf(content, selectedNoteId); const updateNote = fire.store.notes.set(note); - this.updatingNote = fromPromise(updateNote, this.updatingNote) + this.updatingNote = fromPromise(updateNote, updatingNote) } }, deletingNote: undefined, deleteNote(): void { - const {selectedNoteId} = this + const {selectedNoteId, deletingNote} = this - if (selectedNoteId) { + if (selectedNoteId && deletingNote?.state !== PENDING) { const promise = fire.store.notes.delete(selectedNoteId) - this.deletingNote = fromPromise(promise, this.deletingNote) + this.deletingNote = fromPromise(promise, deletingNote) } } };