Organizes project and adds pretty random title to new notes

src/Fire.ts

@@ -11,15 +11,14 @@ 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 = <T extends {}>(): FirestoreDataConverter<T> => ({
     toFirestore: identity,
     fromFirestore: (snapshot, options): T => (snapshot.data(options) as T)
 });
 
 export type Notes = {
-    create: () => Promise<Note>,
     read: (id: string) => Promise<Note | undefined>,
     readAll: () => Promise<Note[]>,
     all: Observable<Note[]>,
@@ -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);

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 = () =>
     <Container fluid className="p-0 m-0">

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 <div className="d-flex flex-row-reverse mt-2 align-items-center pe-2">
+        <Button
+            color="danger"
+            onClick={() => setConfirmingDelete(!isConfirmingDelete)}
+            className={confirmButtonClasses}>
+            <Icon.Trash2/>
+        </Button>
+        <span className="p-1"/>
+        <span className={classNames({visible: isConfirmingDelete, invisible: !isConfirmingDelete})}>
+                <span className="lead text-center flex-fill me-2">Are you sure?</span>
+                <ButtonGroup>
+                    <Button
+                        size="sm"
+                        color="danger"
+                        outline onClick={() => deleteNote()}
+                        className="d-inline-flex align-items-center">
+                        Yes
+                    </Button>
+                    <Button
+                        size="sm"
+                        color="danger"
+                        outline
+                        onClick={() => setConfirmingDelete(false)}
+                        className="d-inline-flex align-items-center">
+                        No
+                    </Button>
+                </ButtonGroup>
+            </span>
+    </div>
+}

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 <>
+        <Header/>
+        <Card className="my-4 mx-2 border-0 shadow">
+            <CardBody>
+                <Editor key={note?.id}
+                        onChange={getValue => store.updateNote(getValue())}
+                        defaultValue={note?.content}
+                        id="markdown-editor"
+                        className="ps-5"/>
+            </CardBody>
+        </Card>
+    </>
+})

src/components/sider/Sider.tsx

@@ -31,15 +31,16 @@ export const Sider: FunctionComponent = observer(() => {
     return <div>
         <div className="d-flex flex-row my-2 align-items-center">
             <span className="lead text-center flex-fill">Index</span>
-            <Button onClick={() => store.newNote()} className="d-inline-flex align-items-center"><Icon.Plus /></Button>
+            <Button onClick={() => store.addNote()} className="d-inline-flex align-items-center">
+                <Icon.Plus/>
+            </Button>
         </div>
         <ListGroup flush>
             {flatten(tree).map(item => fold(item, cases))}
         </ListGroup>
     </div>
 })
 
-
 export function flatten(items: Item[]): Item[] {
     return chain(items)
         .flatMap(item =>

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}`
 }

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<void> | undefined,
     updatingNote: IPromiseBasedObservable<void> | undefined,
     deletingNote: IPromiseBasedObservable<void> | 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)
             }
         }
     };