diff --git a/packages/core/src/lib/gql.ts b/packages/core/src/lib/gql.ts index add69f1f..a092790f 100644 --- 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 index e939f0e3..7aa4c0a6 100644 --- 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; diff --git a/packages/react-sdk/__tests__/data/article.json b/packages/react-sdk/__tests__/data/article.json index 0f852264..ac7b02e8 100644 --- 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 index b2bb2875..5a9abc16 100644 --- 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(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") {