diff --git a/apps/mobile/app/components/sheets/publish-note/index.tsx b/apps/mobile/app/components/sheets/publish-note/index.tsx index 58b7fa15b..992bee604 100644 --- a/apps/mobile/app/components/sheets/publish-note/index.tsx +++ b/apps/mobile/app/components/sheets/publish-note/index.tsx @@ -45,6 +45,25 @@ import { IconButton } from "../../ui/icon-button"; import Input from "../../ui/input"; import Heading from "../../ui/typography/heading"; import Paragraph from "../../ui/typography/paragraph"; +import { useAsync } from "react-async-hook"; +import { isFeatureAvailable, useIsFeatureAvailable } from "@notesnook/common"; + +async function fetchMonographData(noteId: string) { + const monographId = db.monographs.monograph(noteId); + const monograph = monographId + ? await db.monographs.get(monographId) + : undefined; + const analyticsFeature = await isFeatureAvailable("monographAnalytics"); + const analytics = + monographId && analyticsFeature + ? await db.monographs.analytics(monographId) + : undefined; + return { + monograph, + monographId, + analytics + }; +} const PublishNoteSheet = ({ note @@ -56,20 +75,20 @@ const PublishNoteSheet = ({ const attachmentDownloads = useAttachmentStore((state) => state.downloading); const downloading = attachmentDownloads?.[`monograph-${note.id}`]; const [selfDestruct, setSelfDestruct] = useState(false); + const isFeatureAvailable = useIsFeatureAvailable("monographAnalytics"); const [isLocked, setIsLocked] = useState(false); - const [monograph, setMonograph] = useState(); const [publishing, setPublishing] = useState(false); - const publishUrl = monograph && `${hosts.MONOGRAPH_HOST}/${monograph?.id}`; - const isPublished = !!monograph; const pwdInput = useRef(null); const passwordValue = useRef(undefined); + const monographData = useAsync(async () => { + return fetchMonographData(note?.id); + }, []); + const monograph = monographData.result?.monograph; + const publishUrl = monograph && `${hosts.MONOGRAPH_HOST}/${monograph?.id}`; + const isPublished = db.monographs.monograph(note?.id); useEffect(() => { (async () => { - const monograph = await db.monographs.get( - db.monographs.monograph(note.id) - ); - setMonograph(monograph); if (monograph) { setSelfDestruct(!!monograph?.selfDestruct); if (monograph.password) { @@ -80,7 +99,7 @@ const PublishNoteSheet = ({ } } })(); - }, []); + }, [monograph]); const publishNote = async () => { if (publishing) return; @@ -94,7 +113,7 @@ const PublishNoteSheet = ({ password: isLocked ? passwordValue.current : undefined }); - setMonograph(await db.monographs.get(db.monographs.monograph(note.id))); + await monographData.execute(); Navigation.queueRoutesForUpdate(); setPublishLoading(false); } @@ -121,7 +140,7 @@ const PublishNoteSheet = ({ try { if (note?.id) { await db.monographs.unpublish(note.id); - setMonograph(undefined); + monographData.execute(); Navigation.queueRoutesForUpdate(); setPublishLoading(false); } @@ -145,12 +164,15 @@ const PublishNoteSheet = ({ gap: DefaultAppStyles.GAP_VERTICAL }} > - + {isPublished && + (monographData?.result?.monograph || monographData?.loading) ? null : ( + + )} - {publishing ? ( + {publishing || monographData.loading ? ( {isPublished && publishUrl ? ( - { + try { + await openLinkInBrowser(publishUrl); + } catch (e) { + console.error(e); + } + }} style={{ flexDirection: "row", alignItems: "center", @@ -198,23 +227,6 @@ const PublishNoteSheet = ({ {publishUrl} - { - try { - await openLinkInBrowser(publishUrl); - } catch (e) { - console.error(e); - } - }} - size={AppFontSize.xs} - style={{ - marginTop: DefaultAppStyles.GAP_VERTICAL_SMALL, - color: colors.primary.paragraph - }} - > - {" "} - {strings.openInBrowser()} - - + ) : null} - + {strings.monographPassHeading()} - + - {strings.monographPassDesc()} + {/* {strings.monographPassDesc()} */} {isLocked ? ( <> @@ -319,9 +331,9 @@ const PublishNoteSheet = ({ justifyContent: "space-between" }} > - + {strings.monographSelfDestructHeading()} - + - {strings.monographSelfDestructDesc()} + {/* {strings.monographSelfDestructDesc()} */} + {isFeatureAvailable?.isAllowed ? ( + + + + {strings.views()} + + {monographData?.result?.analytics?.totalViews || 0} + + + + + ) : null} +