feat: implement add topic dialog (#96)

* firs commit

* added topic dialog

* making error changes

* merge lock

* comments resolved

* await error

apps/web/src/components/dialogs/topicdialog.js

@@ -0,0 +1,51 @@
+import React, { useState } from "react";
+import { Box } from "rebass";
+import { Input } from "@rebass/forms";
+import { db } from "../../common";
+import Dialog, { showDialog } from "./dialog";
+import { store } from "../../stores/notebook-store";
+
+const TopicDialog = props => {
+  const [topic, setTopic] = useState();
+  return (
+    <Dialog
+      isOpen={true}
+      title={props.title}
+      icon={props.icon}
+      content={
+        <Box my={1}>
+          <Input
+            variant="default"
+            placeholder="name"
+            onChange={e => {
+              setTopic(e.target.value);
+            }}
+          ></Input>
+        </Box>
+      }
+      positiveButton={{
+        text: "Add",
+        onClick: props.onYes.bind(this, topic)
+      }}
+      negativeButton={{ text: "Cancel", onClick: props.onNo }}
+    />
+  );
+};
+
+export const showTopicDialog = (icon, title, notebook) => {
+  return showDialog(perform => (
+    <TopicDialog
+      title={title}
+      icon={icon}
+      onNo={() => {
+        perform(false);
+      }}
+      onYes={async topic => {
+        if (!topic) return;
+        await db.notebooks.notebook(notebook).topics.add(topic);
+        store.getState().setSelectedNotebookTopics(notebook);
+        perform(true);
+      }}
+    />
+  ));
+};

apps/web/src/stores/notebook-store.js

@@ -27,6 +27,12 @@ function notebookStore(set, get) {
     pin: async function(notebook, index) {
       await db.notebooks.notebook(notebook).pin();
       get().refresh();
+    },
+    selectedNotebookTopics: [],
+    setSelectedNotebookTopics: function(id) {
+      set(state => {
+        state.selectedNotebookTopics = db.notebooks.notebook(id).topics.all;
+      });
     }
   };
 }

apps/web/src/views/Topics.js

@@ -1,19 +1,35 @@
-import React from "react";
+import React, { useState, useEffect } from "react";
 import Topic from "../components/topic";
 import ListContainer from "../components/list-container";
-import { useStore } from "../stores/note-store";
+import * as Icon from "react-feather";
+import { useStore as useNoteStore } from "../stores/note-store";
+import { useStore as useNbStore } from "../stores/notebook-store";
+import { showTopicDialog } from "../components/dialogs/topicdialog";
 
 const Topics = props => {
-  const setSelectedContext = useStore(store => store.setSelectedContext);
+  const setSelectedContext = useNoteStore(store => store.setSelectedContext);
+  const setSelectedNotebookTopics = useNbStore(
+    store => store.setSelectedNotebookTopics
+  );
+  const selectedNotebookTopics = useNbStore(
+    store => store.selectedNotebookTopics
+  );
+
+  const [topics, setTopics] = useState([]);
+  useEffect(() => {
+    setSelectedNotebookTopics(props.notebook.id);
+    setTopics(selectedNotebookTopics);
+  }, [selectedNotebookTopics]);
+
   return (
     <ListContainer
-      itemsLength={props.topics.length}
+      itemsLength={topics.length}
       item={index => (
         <Topic
           index={index}
-          item={props.topics[index]}
+          item={topics[index]}
           onClick={() => {
-            let topic = props.topics[index];
+            let topic = topics[index];
             setSelectedContext({
               type: "topic",
               value: topic.title,
@@ -27,7 +43,10 @@ const Topics = props => {
         />
       )}
       button={{
-        content: "Add more topics"
+        content: "Add more topics",
+        onClick: async () => {
+          await showTopicDialog(Icon.Book, "Topic", props.notebook.id);
+        }
       }}
     />
   );

apps/web/yarn.lock

@@ -6881,9 +6881,9 @@ normalize-url@^3.0.0, normalize-url@^3.0.1:
   resolved "https://registry.yarnpkg.com/normalize-url/-/normalize-url-3.3.0.tgz#b2e1c4dc4f7c6d57743df733a4f5978d18650559"
   integrity sha512-U+JJi7duF1o+u2pynbp2zXDW2/PADgC30f0GsHZtRh+HOcXHnw137TrNlyxxRvWW5fjKd3bcLHPxofWuCjaeZg==
 
-"notes-core@https://github.com/thecodrr/notes-core.git":
+"notes-core@https://906f774ee6db40be3bbf7816eecd2328db73b720@github.com/thecodrr/notes-core.git":
   version "1.2.0"
-  resolved "https://github.com/thecodrr/notes-core.git#30da62525362ecb89f735e915a6144be2224f08f"
+  resolved "https://906f774ee6db40be3bbf7816eecd2328db73b720@github.com/thecodrr/notes-core.git#e858b028761d39b008d4b42c74c73c2c887715f5"
   dependencies:
     fast-sort "^2.0.1"
     fuzzysearch "^1.0.3"