Merge pull request #77 from pantheon-systems/od/use-preview-active-ts

Using `previewActiveUntil` field for showing preview active indicator
pantheon-systems · Oct 12, 2023 · 61eb46f · 61eb46f
2 parents 8c6f598 + a766c18
commit 61eb46f
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 23 deletions.
diff --git a/packages/core/src/lib/gql.ts b/packages/core/src/lib/gql.ts
@@ -24,6 +24,7 @@ export const GET_ARTICLE_QUERY = gql`
       publishingLevel
       contentType
       updatedAt
+      previewActiveUntil
     }
   }
 `;
@@ -50,6 +51,7 @@ export const ARTICLE_UPDATE_SUBSCRIPTION = gql`
       publishingLevel
       contentType
       updatedAt
+      previewActiveUntil
     }
   }
 `;
@@ -75,6 +77,7 @@ export const LIST_ARTICLES_QUERY = gql`
       publishingLevel
       contentType
       updatedAt
+      previewActiveUntil
     }
   }
 `;
diff --git a/packages/core/src/types/index.ts b/packages/core/src/types/index.ts
@@ -11,6 +11,7 @@ export interface Article {
   title: string | null;
   updatedAt: number | null;
   metadata: unknown | null;
+  previewActiveUntil: number | null;
 }
 
 export type ArticleWithoutContent = Omit<Article, "content">;

diff --git a/packages/react-sdk/__tests__/data/article.json b/packages/react-sdk/__tests__/data/article.json
@@ -10,5 +10,6 @@
   "contentType": "TREE_PANTHEON",
   "publishingLevel": "PRODUCTION",
   "updatedAt": 1692108114379,
+  "previewActiveUntil": null,
   "metadata": {}
 }
diff --git a/packages/react-sdk/src/components/Preview/Preview.tsx b/packages/react-sdk/src/components/Preview/Preview.tsx
@@ -1,5 +1,4 @@
 import "../../index.css";
-import { parseJwt } from "@pantheon-systems/pcc-sdk-core";
 import { Article } from "@pantheon-systems/pcc-sdk-core/types";
 import { AnimatePresence, motion } from "framer-motion";
 import { setup, styled } from "goober";
@@ -12,9 +11,6 @@ import { IconHamburger } from "../Icons/IconHamburger";
 import { IconUp } from "../Icons/IconUp";
 import { LivePreviewIndicator } from "./LivePreviewIndicator";
 
-// Default timeout for live preview: 10 minutes
-const LIVE_PREVIEW_TIMEOUT_MS = 1000 * 60 * 5;
-
 setup(React.createElement);
 
 interface Props {
@@ -24,10 +20,6 @@ interface Props {
 
 const pccGrant = getCookie("PCC-GRANT");
 
-function calculateTimePassed(iat: number) {
-  return Date.now() - iat * 1000;
-}
-
 export const PreviewBar = ({ article, previewBarOverride }: Props) => {
   const [isHidden, setIsHidden] = React.useState(false);
   const [isLive, setIsLive] = React.useState(false);
@@ -36,23 +28,17 @@ export const PreviewBar = ({ article, previewBarOverride }: Props) => {
     React.useState<NodeJS.Timeout | null>(null);
 
   useEffect(() => {
-    try {
-      // If there's no grant, then we can leave isLive as the default false.
-      if (!pccGrant) return;
-      const { iat } = parseJwt(pccGrant);
-      const livePreviewTimeRemaining =
-        LIVE_PREVIEW_TIMEOUT_MS - calculateTimePassed(iat);
+    // If no preview is active, then we can leave isLive as the default false.
+    if (!article.previewActiveUntil) return;
 
-      if (livePreviewTimeRemaining >= 100) {
-        setIsLive(true);
-        setTimeout(() => {
-          setIsLive(false);
-        }, livePreviewTimeRemaining);
-      }
-    } catch {
-      // Pass
+    const livePreviewTimeRemaining = article.previewActiveUntil - Date.now();
+    if (livePreviewTimeRemaining >= 100) {
+      setIsLive(true);
+      setTimeout(() => {
+        setIsLive(false);
+      }, livePreviewTimeRemaining);
     }
-  }, []);
+  }, [article]);
 
   React.useEffect(() => {
     if (typeof window !== "undefined" && typeof location !== "undefined") {