diff --git a/apps/web/src/components/editor/toolbar.jsx b/apps/web/src/components/editor/toolbar.jsx
index 2304e5e4b..fe32318a3 100644
--- a/apps/web/src/components/editor/toolbar.jsx
+++ b/apps/web/src/components/editor/toolbar.jsx
@@ -104,7 +104,7 @@ function Toolbar() {
icon: isNotePublished ? Published : Publish,
hidden: !sessionId || isDeleted,
enabled: !isLocked,
- onClick: () => showPublishView(store.get().session.id, "top")
+ onClick: () => showPublishView(store.get().session, "top")
}
],
[sessionId, isLocked, isNotePublished, isDeleted]
diff --git a/apps/web/src/components/note/index.tsx b/apps/web/src/components/note/index.tsx
index e60c8c64c..8c000dd1e 100644
--- a/apps/web/src/components/note/index.tsx
+++ b/apps/web/src/components/note/index.tsx
@@ -427,7 +427,7 @@ const menuItems: (
onClick: async () => {
const isPublished = db.monographs.isPublished(note.id);
if (isPublished) await db.monographs.unpublish(note.id);
- else await showPublishView(note.id, "bottom");
+ else await showPublishView(note, "bottom");
}
},
{
diff --git a/apps/web/src/components/properties/index.tsx b/apps/web/src/components/properties/index.tsx
index 1b4728101..e6fc70546 100644
--- a/apps/web/src/components/properties/index.tsx
+++ b/apps/web/src/components/properties/index.tsx
@@ -209,7 +209,7 @@ function Colors({ noteId }: { noteId: string }) {
px={2}
sx={{
cursor: "pointer",
- justifyContent: "center"
+ justifyContent: "start"
}}
>
{result.status === "fulfilled" &&
diff --git a/apps/web/src/components/publish-view/index.jsx b/apps/web/src/components/publish-view/index.tsx
similarity index 84%
rename from apps/web/src/components/publish-view/index.jsx
rename to apps/web/src/components/publish-view/index.tsx
index 0dcbd5e69..24a47d27c 100644
--- a/apps/web/src/components/publish-view/index.jsx
+++ b/apps/web/src/components/publish-view/index.tsx
@@ -17,9 +17,9 @@ You should have received a copy of the GNU General Public License
along with this program. If not, see .
*/
-import { useEffect, useMemo, useState } from "react";
+import { useEffect, useRef, useState } from "react";
import ReactDOM from "react-dom";
-import { Flex, Text, Button } from "@theme-ui/components";
+import { Flex, Text, Button, Link } from "@theme-ui/components";
import { Copy } from "../icons";
import Toggle from "../toggle";
import Field from "../field";
@@ -31,29 +31,34 @@ import { EV, EVENTS } from "@notesnook/core/dist/common";
import { useStore } from "../../stores/monograph-store";
import ReactModal from "react-modal";
import { DialogButton } from "../dialog";
+import { Note } from "@notesnook/core";
-function PublishView(props) {
- const { noteId, onClose } = props;
- const [publishId, setPublishId] = useState();
+type PublishViewProps = {
+ note: Note;
+ onClose: (result: boolean) => void;
+};
+function PublishView(props: PublishViewProps) {
+ const { note, onClose } = props;
+ const [publishId, setPublishId] = useState(
+ db.monographs.monograph(note.id)
+ );
const [isPasswordProtected, setIsPasswordProtected] = useState(false);
const [selfDestruct, setSelfDestruct] = useState(false);
const [isPublishing, setIsPublishing] = useState(false);
- const [processingStatus, setProcessingStatus] = useState();
+ const [processingStatus, setProcessingStatus] = useState<{
+ total?: number;
+ current: number;
+ }>();
+ const passwordInput = useRef(null);
const publishNote = useStore((store) => store.publish);
const unpublishNote = useStore((store) => store.unpublish);
- const noteTitle = useMemo(() => db.notes.note(noteId)?.title, [noteId]);
-
- useEffect(() => {
- setPublishId(db.monographs.monograph(noteId));
- }, [noteId]);
-
useEffect(() => {
const fileDownloadedEvent = EV.subscribe(
EVENTS.fileDownloaded,
({ total, current, groupId }) => {
- if (!groupId || !groupId.includes(noteId)) return;
- if (current === total) setProcessingStatus();
+ if (!groupId || !groupId.includes(note.id)) return;
+ if (current === total) setProcessingStatus(undefined);
else setProcessingStatus({ total, current });
}
);
@@ -61,7 +66,7 @@ function PublishView(props) {
return () => {
fileDownloadedEvent.unsubscribe();
};
- }, [noteId]);
+ }, [note.id]);
return (
- {noteTitle}
+ {note.title}
{isPublishing ? (
-
{`https://monogr.ph/${publishId}`}
-
+
{isPasswordProtected && (
{
try {
setIsPublishing(true);
- const password =
- document.getElementById("publishPassword")?.value;
+ const password = passwordInput.current?.value;
- const publishId = await publishNote(noteId, {
+ const publishId = await publishNote(note.id, {
selfDestruct,
password
});
@@ -202,7 +207,10 @@ function PublishView(props) {
showToast("success", "Note published.");
} catch (e) {
console.error(e);
- showToast("error", "Note could not be published: " + e.message);
+ showToast(
+ "error",
+ "Note could not be published: " + (e as Error).message
+ );
} finally {
setIsPublishing(false);
}
@@ -216,15 +224,15 @@ function PublishView(props) {
onClick={async () => {
try {
setIsPublishing(true);
- await unpublishNote(noteId);
- setPublishId();
+ await unpublishNote(note.id);
+ setPublishId(undefined);
onClose(true);
showToast("success", "Note unpublished.");
} catch (e) {
console.error(e);
showToast(
"error",
- "Note could not be unpublished: " + e.message
+ "Note could not be unpublished: " + (e as Error).message
);
} finally {
setIsPublishing(false);
@@ -249,12 +257,12 @@ function PublishView(props) {
export default PublishView;
-export function showPublishView(noteId, location = "top") {
+export function showPublishView(note: Note, location = "top") {
const root = document.getElementById("dialogContainer");
if (root) {
return new Promise((resolve) => {
- const perform = (result) => {
+ const perform = (result: boolean) => {
ReactDOM.unmountComponentAtNode(root);
closePublishView();
resolve(result);
@@ -262,7 +270,7 @@ export function showPublishView(noteId, location = "top") {
ReactDOM.render(
perform(false)}
preventScroll={false}
shouldCloseOnOverlayClick
shouldCloseOnEsc
@@ -283,7 +291,7 @@ export function showPublishView(noteId, location = "top") {
}
}}
>
-
+
,
root
);