From 623ee70f276005e44ef6ccd6883b81bbc507c444 Mon Sep 17 00:00:00 2001 From: Muhammad Ali Date: Tue, 25 Feb 2020 12:46:31 +0500 Subject: [PATCH] feat: impl full colors support (#14) * feat: added color tag feature * feat: completed adding color feat. to notes * feat: tags addition for new note btn& refactor --- apps/web/src/common/index.js | 4 +- apps/web/src/components/editor/index.js | 19 ++++--- apps/web/src/navigation/index.js | 2 +- .../navigation/navigators/rootnavigator.js | 51 ++++++++++++++++--- apps/web/src/navigation/routes.js | 10 +++- apps/web/src/views/Notes.js | 8 ++- apps/web/src/views/Tags.js | 4 +- 7 files changed, 77 insertions(+), 21 deletions(-) diff --git a/apps/web/src/common/index.js b/apps/web/src/common/index.js index f68333dd2..9145ca4f8 100644 --- a/apps/web/src/common/index.js +++ b/apps/web/src/common/index.js @@ -5,6 +5,6 @@ import events from "events"; export const db = new Database(StorageInterface); export const ev = new events.EventEmitter(); console.log("from common", db); -export function sendNewNoteEvent() { - ev.emit("onNewNote"); +export function sendNewNoteEvent(context) { + ev.emit("onNewNote", context); } diff --git a/apps/web/src/components/editor/index.js b/apps/web/src/components/editor/index.js index 36618dfb5..ff84c71d2 100644 --- a/apps/web/src/components/editor/index.js +++ b/apps/web/src/components/editor/index.js @@ -104,7 +104,7 @@ export default class Editor extends React.Component { this.setState({ pinned }); } - onNewNote(show = true, cb = null) { + onNewNote(context, show = true, cb = null) { clearTimeout(this.timeout); this.saveNote().then(() => { this.titleRef.value = ""; @@ -112,6 +112,12 @@ export default class Editor extends React.Component { this.title = undefined; this.titleRef.focus(); this.quill.setText("\n"); + this.setState({ + colors: [...this.state.colors, ...context.colors], + tags: [...this.state.tags, ...context.tags] + }); + console.log(this.state.colors); + ev.emit("refreshNotes"); cb && cb(); if (show) { showSnack("Let's start writing!", Icon.Edit2); @@ -121,14 +127,14 @@ export default class Editor extends React.Component { onClearNote(id = undefined) { if (id && id !== this.id) return; - this.onNewNote(false); + this.onNewNote(null, false); } onOpenNote(note) { if (!note) return; - this.onNewNote(false, async () => { + this.onNewNote(null, false, async () => { let dbNote = db.notes.note(note.id); - if (!dbNote) return this.onNewNote(false); + if (!dbNote) return this.onNewNote(null, false); this.id = note.id; this.title = note.title; this.titleRef.value = note.title; @@ -160,7 +166,7 @@ export default class Editor extends React.Component { id: this.id, favorite: this.favorite, pinned: this.pinned, - colors: this.state.colors, + colors: this.state.colors //tags: this.state.tags }; return await db.notes.add(note); @@ -244,8 +250,7 @@ export default class Editor extends React.Component { tags[this.state.tags.length] = tag; } this.setState({ tags }); - if (this.id) - await db.notes.note(this.id).tag(tag); + if (this.id) await db.notes.note(this.id).tag(tag); }} onLocked={state => {}} /> diff --git a/apps/web/src/navigation/index.js b/apps/web/src/navigation/index.js index 3e81f4656..e6fe95498 100644 --- a/apps/web/src/navigation/index.js +++ b/apps/web/src/navigation/index.js @@ -101,7 +101,7 @@ const NavigationContainer = props => { > - + {props.route.title || props.route.params.title} diff --git a/apps/web/src/navigation/navigators/rootnavigator.js b/apps/web/src/navigation/navigators/rootnavigator.js index ced8cc685..013f2392a 100644 --- a/apps/web/src/navigation/navigators/rootnavigator.js +++ b/apps/web/src/navigation/navigators/rootnavigator.js @@ -4,6 +4,7 @@ import { Favorites, Trash, NotebooksContainer, + Notes, TagsContainer } from "../../views"; import * as Icon from "react-feather"; @@ -16,18 +17,54 @@ import { import Navigator from "../index"; import { showSignInDialog } from "../../components/dialogs"; import { changeTheme, isDarkTheme } from "../../utils/theme"; +import { db } from "../../common"; /*For color Search*/ const colorRoutes = { - ...createColorRoute("red", "#ed2d37"), - ...createColorRoute("orange", "#ec6e05"), - ...createColorRoute("yellow", "yellow"), - ...createColorRoute("green", "green"), - ...createColorRoute("blue", "blue"), - ...createColorRoute("purple", "purple"), - ...createColorRoute("gray", "gray") + ...createColorRoute("Red", Notes, "#ed2d37", { + onClick: () => { + onClickMethod("Red", "red"); + } + }), + ...createColorRoute("Orange", Notes, "#ec6e05", { + onClick: () => { + onClickMethod("Orange", "orange"); + } + }), + ...createColorRoute("Yellow", Notes, "yellow", { + onClick: () => { + onClickMethod("Yellow", "yellow"); + } + }), + ...createColorRoute("Green", Notes, "green", { + onClick: () => { + onClickMethod("Green", "green"); + } + }), + ...createColorRoute("Blue", Notes, "blue", { + onClick: () => { + onClickMethod("Blue", "blue"); + } + }), + ...createColorRoute("Purple", Notes, "purple", { + onClick: () => { + onClickMethod("Purple", "purple"); + } + }), + ...createColorRoute("Gray", Notes, "gray", { + onClick: () => { + onClickMethod("Gray", "gray"); + } + }) }; +function onClickMethod(Title, label) { + RootNavigator.navigate(Title, { + notes: db.notes.colored(label), + context: { colors: [label] } + }); +} + const bottomRoutes = { ...createDeadRoute("nightmode", Icon.Moon, { onClick: () => changeTheme(), diff --git a/apps/web/src/navigation/routes.js b/apps/web/src/navigation/routes.js index f99b391ef..344476fd5 100644 --- a/apps/web/src/navigation/routes.js +++ b/apps/web/src/navigation/routes.js @@ -11,8 +11,14 @@ export function createRoute(key, component, props = {}, params = {}) { }; } -export function createColorRoute(key, color, props = {}) { - return createRoute(key, undefined, { icon: Icon.Circle, color, ...props }); +export function createColorRoute(key, component, color, props = {}) { + return createRoute(key, component, { + title: key, + titleColor: color, + icon: Icon.Circle, + color, + ...props + }); } export function createNormalRoute(key, component, icon, props = {}) { diff --git a/apps/web/src/views/Notes.js b/apps/web/src/views/Notes.js index 3b42d9831..eb5f7abc3 100644 --- a/apps/web/src/views/Notes.js +++ b/apps/web/src/views/Notes.js @@ -11,7 +11,13 @@ const Notes = props => { itemsLength={props.notes.length} button={{ content: "Make a new note", - onClick: sendNewNoteEvent + onClick: () => + sendNewNoteEvent({ + colors: [], + tags: [], + notebook: {}, + ...props.context + }) }} /> ); diff --git a/apps/web/src/views/Tags.js b/apps/web/src/views/Tags.js index c81fd827e..4e580e8c8 100644 --- a/apps/web/src/views/Tags.js +++ b/apps/web/src/views/Tags.js @@ -28,7 +28,9 @@ const Tags = props => { onClick={() => { const notesOfTag = db.notes.tagged(tags[index].title); props.navigator.navigate("notes", { - notes: notesOfTag,title:tags[index].title + notes: notesOfTag, + title: tags[index].title, + context: { tags: [tags[index].title] } }); }} />