From 15773c66a6b8c14f1a9731013304b31907069009 Mon Sep 17 00:00:00 2001 From: Roshaan Siddiqui Date: Wed, 26 Jul 2023 14:27:11 -0500 Subject: [PATCH] DPLT-1066 feat: add fallback to old feed (#148) --- .../feed/src/QueryApi.Feed.ActivityPage.jsx | 167 +++++++++++++++ .../examples/feed/src/QueryApi.Feed.jsx | 192 +++++------------- .../examples/feed/src/QueryApi.dev.Feed.jsx | 189 +++++------------ 3 files changed, 266 insertions(+), 282 deletions(-) create mode 100644 frontend/widgets/examples/feed/src/QueryApi.Feed.ActivityPage.jsx diff --git a/frontend/widgets/examples/feed/src/QueryApi.Feed.ActivityPage.jsx b/frontend/widgets/examples/feed/src/QueryApi.Feed.ActivityPage.jsx new file mode 100644 index 000000000..52b2afc52 --- /dev/null +++ b/frontend/widgets/examples/feed/src/QueryApi.Feed.ActivityPage.jsx @@ -0,0 +1,167 @@ +const GRAPHQL_ENDPOINT = + "https://near-queryapi.api.pagoda.co"; +const APP_OWNER = "dataplatform.near"; + +let accountsFollowing = undefined; + +if (context.accountId) { + const graph = Social.keys(`${context.accountId}/graph/follow/*`, "final"); + if (graph !== null) { + accountsFollowing = Object.keys(graph[context.accountId].graph.follow || {}); + } +} + +State.init({ + selectedTab: props.tab || "posts", +}); + +if (props.tab && props.tab !== state.selectedTab) { + State.update({ + selectedTab: props.tab, + }); +} + +const activityUrl = `/#/${APP_OWNER}/widget/QueryApi.Feed`; + +const Wrapper = styled.div` + margin-top: calc(var(--body-top-padding) * -1); + padding-bottom: 48px; +`; + +const Main = styled.div` + display: grid; + grid-template-columns: 290px minmax(0, 1fr) 290px; + grid-gap: 16px; + + @media (max-width: 1200px) { + display: block; + } +`; + +const Section = styled.div` + padding-top: 24px; + border-left: ${(p) => (p.primary ? "1px solid #ECEEF0" : "none")}; + border-right: ${(p) => (p.primary ? "1px solid #ECEEF0" : "none")}; + + > div { + padding-bottom: 24px; + margin-bottom: 24px; + border-bottom: 1px solid #ECEEF0; + + &:last-child { + padding-bottom: 0; + margin-bottom: 0; + border-bottom: none; + } + } + + @media (max-width: 1200px) { + padding-top: 0px; + border-left: none; + border-right: none; + display: ${(p) => (p.active ? "block" : "none")}; + margin: ${(p) => (p.negativeMargin ? "0 -12px" : "0")}; + } +`; + +const Tabs = styled.div` + display: none; + height: 48px; + background: #F8F9FA; + border-bottom: 1px solid #ECEEF0; + margin-bottom: ${(p) => (p.noMargin ? "0" : p.halfMargin ? "24px" : "24px")}; + overflow: auto; + scroll-behavior: smooth; + + @media (max-width: 1200px) { + display: flex; + margin-left: -12px; + margin-right: -12px; + + > * { + flex: 1; + } + } +`; + +const TabsButton = styled.a` + display: inline-flex; + align-items: center; + justify-content: center; + height: 100%; + font-weight: 600; + font-size: 12px; + padding: 0 12px; + position: relative; + color: ${(p) => (p.selected ? "#11181C" : "#687076")}; + background: none; + border: none; + outline: none; + text-align: center; + text-decoration: none !important; + + &:hover { + color: #11181C; + } + + &::after { + content: ''; + display: ${(p) => (p.selected ? "block" : "none")}; + position: absolute; + bottom: 0; + left: 0; + right: 0; + height: 3px; + background: #59E692; + } +`; + +return ( + + + + Posts + + + + Components + + + + Explore + + + +
+
+ + +
+
+ +
+
+ +
+
+ +); + diff --git a/frontend/widgets/examples/feed/src/QueryApi.Feed.jsx b/frontend/widgets/examples/feed/src/QueryApi.Feed.jsx index 52b2afc52..e800bf49e 100644 --- a/frontend/widgets/examples/feed/src/QueryApi.Feed.jsx +++ b/frontend/widgets/examples/feed/src/QueryApi.Feed.jsx @@ -1,167 +1,75 @@ -const GRAPHQL_ENDPOINT = - "https://near-queryapi.api.pagoda.co"; +const GRAPHQL_ENDPOINT = "https://near-queryapi.api.pagoda.co"; const APP_OWNER = "dataplatform.near"; -let accountsFollowing = undefined; - -if (context.accountId) { - const graph = Social.keys(`${context.accountId}/graph/follow/*`, "final"); - if (graph !== null) { - accountsFollowing = Object.keys(graph[context.accountId].graph.follow || {}); - } -} +let lastPostSocialApi = Social.index("post", "main", { + limit: 1, + order: "desc", +}); State.init({ - selectedTab: props.tab || "posts", + shouldFallback: props.shouldFallback ?? false, }); -if (props.tab && props.tab !== state.selectedTab) { - State.update({ - selectedTab: props.tab, +function fetchGraphQL(operationsDoc, operationName, variables) { + return asyncFetch(`${GRAPHQL_ENDPOINT}/v1/graphql`, { + method: "POST", + headers: { "x-hasura-role": "dataplatform_near" }, + body: JSON.stringify({ + query: operationsDoc, + variables: variables, + operationName: operationName, + }), }); } -const activityUrl = `/#/${APP_OWNER}/widget/QueryApi.Feed`; - -const Wrapper = styled.div` - margin-top: calc(var(--body-top-padding) * -1); - padding-bottom: 48px; -`; - -const Main = styled.div` - display: grid; - grid-template-columns: 290px minmax(0, 1fr) 290px; - grid-gap: 16px; - - @media (max-width: 1200px) { - display: block; +const lastPostQuery = ` +query IndexerQuery { + dataplatform_near_social_feed_posts( limit: 1, order_by: { block_height: desc }) { + block_height } +} `; -const Section = styled.div` - padding-top: 24px; - border-left: ${(p) => (p.primary ? "1px solid #ECEEF0" : "none")}; - border-right: ${(p) => (p.primary ? "1px solid #ECEEF0" : "none")}; +fetchGraphQL(lastPostQuery, "IndexerQuery", {}) + .then((feedIndexerResponse) => { + if (feedIndexerResponse && feedIndexerResponse.body.data.dataplatform_near_social_feed_posts.length > 0) { + const nearSocialBlockHeight = lastPostSocialApi[0].blockHeight; + const feedIndexerBlockHeight = + feedIndexerResponse.body.data.dataplatform_near_social_feed_posts[0] + .block_height; - > div { - padding-bottom: 24px; - margin-bottom: 24px; - border-bottom: 1px solid #ECEEF0; - - &:last-child { - padding-bottom: 0; - margin-bottom: 0; - border-bottom: none; - } - } - - @media (max-width: 1200px) { - padding-top: 0px; - border-left: none; - border-right: none; - display: ${(p) => (p.active ? "block" : "none")}; - margin: ${(p) => (p.negativeMargin ? "0 -12px" : "0")}; - } -`; + const lag = nearSocialBlockHeight - feedIndexerBlockHeight; -const Tabs = styled.div` - display: none; - height: 48px; - background: #F8F9FA; - border-bottom: 1px solid #ECEEF0; - margin-bottom: ${(p) => (p.noMargin ? "0" : p.halfMargin ? "24px" : "24px")}; - overflow: auto; - scroll-behavior: smooth; + let shouldFallback = lag > 2 || !feedIndexerBlockHeight; - @media (max-width: 1200px) { - display: flex; - margin-left: -12px; - margin-right: -12px; + // console.log(`Social API block height: ${nearSocialBlockHeight}`); + // console.log(`Feed block height: ${feedIndexerBlockHeight}`); + // console.log(`Lag: ${lag}`); + // console.log(`Fallback to old widget? ${shouldFallback}`); - > * { - flex: 1; + State.update({ shouldFallback }); + } else { + console.log("Falling back to old widget."); + State.update({ shouldFallback: true }); } - } -`; - -const TabsButton = styled.a` - display: inline-flex; - align-items: center; - justify-content: center; - height: 100%; - font-weight: 600; - font-size: 12px; - padding: 0 12px; - position: relative; - color: ${(p) => (p.selected ? "#11181C" : "#687076")}; - background: none; - border: none; - outline: none; - text-align: center; - text-decoration: none !important; - - &:hover { - color: #11181C; - } - - &::after { - content: ''; - display: ${(p) => (p.selected ? "block" : "none")}; - position: absolute; - bottom: 0; - left: 0; - right: 0; - height: 3px; - background: #59E692; - } -`; + }) + .catch((error) => { + console.log("Error while fetching GraphQL(falling back to old widget): ", error); + State.update({ shouldFallback: true }); + }); return ( - - - - Posts - - - - Components - - - - Explore - - - -
-
- - -
-
- + {state.shouldFallback == true ? ( + + ) : ( + -
-
- -
-
- + )} + ); - diff --git a/frontend/widgets/examples/feed/src/QueryApi.dev.Feed.jsx b/frontend/widgets/examples/feed/src/QueryApi.dev.Feed.jsx index a3b0e3d18..f3e95cd02 100644 --- a/frontend/widgets/examples/feed/src/QueryApi.dev.Feed.jsx +++ b/frontend/widgets/examples/feed/src/QueryApi.dev.Feed.jsx @@ -2,166 +2,75 @@ const GRAPHQL_ENDPOINT = "https://near-queryapi.dev.api.pagoda.co"; const APP_OWNER = "dev-queryapi.dataplatform.near"; -let accountsFollowing = undefined; - -if (context.accountId) { - const graph = Social.keys(`${context.accountId}/graph/follow/*`, "final"); - if (graph !== null) { - accountsFollowing = Object.keys(graph[context.accountId].graph.follow || {}); - } -} +let lastPostSocialApi = Social.index("post", "main", { + limit: 1, + order: "desc", +}); State.init({ - selectedTab: props.tab || "posts", + shouldFallback: props.shouldFallback ?? false, }); -if (props.tab && props.tab !== state.selectedTab) { - State.update({ - selectedTab: props.tab, +function fetchGraphQL(operationsDoc, operationName, variables) { + return asyncFetch(`${GRAPHQL_ENDPOINT}/v1/graphql`, { + method: "POST", + headers: { "x-hasura-role": "dataplatform_near" }, + body: JSON.stringify({ + query: operationsDoc, + variables: variables, + operationName: operationName, + }), }); } -const activityUrl = `/#/${APP_OWNER}/widget/QueryApi.dev.Feed`; - -const Wrapper = styled.div` - margin-top: calc(var(--body-top-padding) * -1); - padding-bottom: 48px; -`; - -const Main = styled.div` - display: grid; - grid-template-columns: 290px minmax(0, 1fr) 290px; - grid-gap: 16px; - - @media (max-width: 1200px) { - display: block; +const lastPostQuery = ` +query IndexerQuery { + dataplatform_near_social_feed_posts( limit: 1, order_by: { block_height: desc }) { + block_height } +} `; -const Section = styled.div` - padding-top: 24px; - border-left: ${(p) => (p.primary ? "1px solid #ECEEF0" : "none")}; - border-right: ${(p) => (p.primary ? "1px solid #ECEEF0" : "none")}; +fetchGraphQL(lastPostQuery, "IndexerQuery", {}) + .then((feedIndexerResponse) => { + if (feedIndexerResponse && feedIndexerResponse.body.data.dataplatform_near_social_feed_posts.length > 0) { + const nearSocialBlockHeight = lastPostSocialApi[0].blockHeight; + const feedIndexerBlockHeight = + feedIndexerResponse.body.data.dataplatform_near_social_feed_posts[0] + .block_height; - > div { - padding-bottom: 24px; - margin-bottom: 24px; - border-bottom: 1px solid #ECEEF0; - - &:last-child { - padding-bottom: 0; - margin-bottom: 0; - border-bottom: none; - } - } - - @media (max-width: 1200px) { - padding-top: 0px; - border-left: none; - border-right: none; - display: ${(p) => (p.active ? "block" : "none")}; - margin: ${(p) => (p.negativeMargin ? "0 -12px" : "0")}; - } -`; + const lag = nearSocialBlockHeight - feedIndexerBlockHeight; -const Tabs = styled.div` - display: none; - height: 48px; - background: #F8F9FA; - border-bottom: 1px solid #ECEEF0; - margin-bottom: ${(p) => (p.noMargin ? "0" : p.halfMargin ? "24px" : "24px")}; - overflow: auto; - scroll-behavior: smooth; + let shouldFallback = lag > 2 || !feedIndexerBlockHeight; - @media (max-width: 1200px) { - display: flex; - margin-left: -12px; - margin-right: -12px; + // console.log(`Social API block height: ${nearSocialBlockHeight}`); + // console.log(`Feed block height: ${feedIndexerBlockHeight}`); + // console.log(`Lag: ${lag}`); + // console.log(`Fallback to old widget? ${shouldFallback}`); - > * { - flex: 1; + State.update({ shouldFallback }); + } else { + console.log("Falling back to old widget."); + State.update({ shouldFallback: true }); } - } -`; - -const TabsButton = styled.a` - display: inline-flex; - align-items: center; - justify-content: center; - height: 100%; - font-weight: 600; - font-size: 12px; - padding: 0 12px; - position: relative; - color: ${(p) => (p.selected ? "#11181C" : "#687076")}; - background: none; - border: none; - outline: none; - text-align: center; - text-decoration: none !important; - - &:hover { - color: #11181C; - } - - &::after { - content: ''; - display: ${(p) => (p.selected ? "block" : "none")}; - position: absolute; - bottom: 0; - left: 0; - right: 0; - height: 3px; - background: #59E692; - } -`; + }) + .catch((error) => { + console.log("Error while fetching GraphQL(falling back to old widget): ", error); + State.update({ shouldFallback: true }); + }); return ( - - - - Posts - - - - Components - - - - Explore - - - -
-
- - -
-
- + {state.shouldFallback == true ? ( + + ) : ( + -
-
- -
-
- + )} + ); -