web: use monograph stats api

Signed-off-by: 01zulfi <85733202+01zulfi@users.noreply.github.com>

apps/web/src/components/publish-view/index.tsx

@@ -27,7 +27,7 @@ import { db } from "../../common/db";
 import { writeText } from "clipboard-polyfill";
 import { ScopedThemeProvider } from "../theme-provider";
 import { showToast } from "../../utils/toast";
-import { EV, EVENTS, hosts } from "@notesnook/core";
+import { EV, EVENTS, hosts, MonographStats } from "@notesnook/core";
 import { useStore } from "../../stores/monograph-store";
 import ReactModal from "react-modal";
 import { DialogButton } from "../dialog";
@@ -45,7 +45,7 @@ function PublishView(props: PublishViewProps) {
   );
   const [isPasswordProtected, setIsPasswordProtected] = useState(false);
   const [selfDestruct, setSelfDestruct] = useState(false);
-  const [viewCount, setViewCount] = useState<number | undefined>();
+  const [stats, setStats] = useState<MonographStats | undefined>();
   const [isPublishing, setIsPublishing] = useState(false);
   const [processingStatus, setProcessingStatus] = useState<{
     total?: number;
@@ -65,7 +65,9 @@ function PublishView(props: PublishViewProps) {
         setPublishId(monographId);
         setIsPasswordProtected(!!monograph.password);
         setSelfDestruct(!!monograph.selfDestruct);
-        setViewCount(monograph.viewCount);
+
+        const stats = await db.monographs.stats(monographId);
+        setStats(stats);
 
         if (monograph.password) {
           const password = await db.monographs.decryptPassword(
@@ -155,7 +157,7 @@ function PublishView(props: PublishViewProps) {
                   >
                     {strings.publishedAt()}
                   </Text>
-                  {typeof viewCount === "number" && (
+                  {typeof stats?.viewCount === "number" && (
                     <Text
                       variant="subBody"
                       sx={{
@@ -167,10 +169,18 @@ function PublishView(props: PublishViewProps) {
                         fontSize: "subBody",
                         fontWeight: "bold",
                         border: "1px solid",
-                        borderColor: "accent"
+                        borderColor: "accent",
+                        cursor: "pointer"
+                      }}
+                      title={`${strings.views(
+                        stats.viewCount
+                      )} (${strings.clickToUpdate()})`}
+                      onClick={async () => {
+                        const stats = await db.monographs.stats(publishId);
+                        setStats(stats);
                       }}
                     >
-                      {strings.views(viewCount)}
+                      {strings.views(stats.viewCount)}
                     </Text>
                   )}
                 </Flex>

packages/core/src/api/monographs.ts

@@ -37,6 +37,9 @@ type EncryptedMonograph = MonographApiRequestBase & {
 type MonographApiRequest = (UnencryptedMonograph | EncryptedMonograph) & {
   userId: string;
 };
+export type MonographStats = {
+  viewCount: number;
+};
 
 export type PublishOptions = { password?: string; selfDestruct?: boolean };
 export class Monographs {
@@ -187,4 +190,17 @@ export class Monographs {
     if (!monographPasswordsKey) return "";
     return this.db.storage().decrypt(monographPasswordsKey, password);
   }
+
+  async stats(monographId: string) {
+    const token = await this.db.tokenManager.getAccessToken();
+    const { viewCount } = (await http.get(
+      `${Constants.API_HOST}/monographs/${monographId}/stats`,
+      token
+    )) as MonographStats;
+    await this.db.monographsCollection.add({
+      id: monographId,
+      viewCount
+    });
+    return { viewCount };
+  }
 }

packages/intl/locale/en.po

@@ -1604,6 +1604,10 @@ msgstr "Click to remove"
 msgid "Click to reset {title}"
 msgstr "Click to reset {title}"
 
+#: src/strings.ts:2614
+msgid "Click to update"
+msgstr "Click to update"
+
 #: src/strings.ts:1380
 msgid "Close"
 msgstr "Close"

packages/intl/locale/pseudo-LOCALE.po

@@ -1593,6 +1593,10 @@ msgstr ""
 msgid "Click to reset {title}"
 msgstr ""
 
+#: src/strings.ts:2614
+msgid "Click to update"
+msgstr ""
+
 #: src/strings.ts:1380
 msgid "Close"
 msgstr ""

packages/intl/src/strings.ts

@@ -2610,5 +2610,6 @@ Use this if changes from other devices are not appearing on this device. This wi
     plural(count, {
       one: `1 view`,
       other: `# views`
-    })
+    }),
+  clickToUpdate: () => t`Click to update`
 };