Use context for handling webview

ooni · Nov 7, 2024 · 7860298 · 7860298
1 parent b99aecb
commit 7860298
Show file tree

Hide file tree

Showing 5 changed files with 30 additions and 32 deletions.
diff --git a/components/measurement/CommonDetails.js b/components/measurement/CommonDetails.js
@@ -1,10 +1,10 @@
 import dynamic from 'next/dynamic'
 import { useRouter } from 'next/router'
-import { colors } from 'ooni-components'
 import PropTypes from 'prop-types'
-import { useState } from 'react'
+import { useContext, useState } from 'react'
 import { FormattedMessage, useIntl } from 'react-intl'
 
+import { EmbeddedViewContext } from '../../pages/m/[measurement_uid]'
 import { DetailsBox, DetailsBoxTable } from './DetailsBox'
 
 const LoadingRawData = () => {
@@ -45,10 +45,12 @@ const CommonDetails = ({
     resolver_network_name,
   } = measurement ?? {}
 
+  const isEmbeddedView = useContext(EmbeddedViewContext)
+
   const { query } = useRouter()
   const queryString = new URLSearchParams(query)
   const rawMsmtDownloadURL = `${process.env.NEXT_PUBLIC_OONI_API}/api/v1/raw_measurement?${queryString}`
-  const [collapsed, setCollapsed] = useState(query?.webview ? 50 : 1)
+  const [collapsed, setCollapsed] = useState(isEmbeddedView ? 50 : 1)
 
   const intl = useIntl()
   const unavailable = intl.formatMessage({
@@ -172,7 +174,7 @@ const CommonDetails = ({
                   id: 'Measurement.CommonDetails.RawMeasurement.Heading',
                 })}
               </div>
-              {!query.webview && (
+              {!isEmbeddedView && (
                 <div className="flex">
                   <a
                     className="text-blue-700"

diff --git a/components/measurement/CommonSummary.js b/components/measurement/CommonSummary.js
@@ -1,8 +1,10 @@
 import Link from 'next/link'
 import { useRouter } from 'next/router'
 import PropTypes from 'prop-types'
+import { useContext } from 'react'
 import { MdOutlineFactCheck } from 'react-icons/md'
 import { useIntl } from 'react-intl'
+import { EmbeddedViewContext } from '../../pages/m/[measurement_uid]'
 import ConditionalWrapper from '../ConditionalWrapper'
 import Flag from '../Flag'
 
@@ -16,9 +18,7 @@ const CommonSummary = ({
   hero,
   onVerifyClick,
 }) => {
-  const {
-    query: { webview },
-  } = useRouter()
+  const isEmbeddedView = useContext(EmbeddedViewContext)
   const intl = useIntl()
   const startTime = measurement_start_time
   const network = probe_asn
@@ -38,7 +38,7 @@ const CommonSummary = ({
       <div className="container">
         <div className="flex justify-between">
           <div className="text-base w-1/2">{formattedDate}</div>
-          {!webview && (
+          {!isEmbeddedView && (
             <div
               className="flex flex-col items-center cursor-pointer"
               onClick={onVerifyClick}
@@ -58,7 +58,7 @@ const CommonSummary = ({
         <div className="flex mt-2">
           <div className="lg:w-1/2">
             <ConditionalWrapper
-              condition={!webview}
+              condition={!isEmbeddedView}
               wrapper={(children) => (
                 <Link
                   className="text-white hover:text-white block underline"
@@ -76,7 +76,7 @@ const CommonSummary = ({
               </div>
             </ConditionalWrapper>
             <ConditionalWrapper
-              condition={!webview}
+              condition={!isEmbeddedView}
               wrapper={(children) => (
                 <Link
                   className="text-white hover:text-white block underline"

diff --git a/components/measurement/DetailsBox.js b/components/measurement/DetailsBox.js
@@ -1,8 +1,9 @@
 import { useRouter } from 'next/router'
 import PropTypes from 'prop-types'
-import { useCallback, useState } from 'react'
+import { useCallback, useContext, useState } from 'react'
 import { MdExpandLess } from 'react-icons/md'
 import { twMerge } from 'tailwind-merge'
+import { EmbeddedViewContext } from '../../pages/m/[measurement_uid]'
 
 export const DetailsBoxTable = ({ title, items, className }) => (
   <DetailsBox
@@ -36,9 +37,7 @@ export const DetailsBox = ({
   className,
   ...rest
 }) => {
-  const {
-    query: { webview },
-  } = useRouter()
+  const isEmbeddedView = useContext(EmbeddedViewContext)
 
   const [isOpen, setIsOpen] = useState(!collapsed)
 
@@ -52,7 +51,7 @@ export const DetailsBox = ({
       {...rest}
     >
       {title &&
-        (webview ? (
+        (isEmbeddedView ? (
           <div className="flex justify-between font-bold text-lg cursor-pointer px-4 py-2 bg-gray-200 items-center">
             {title}
           </div>

diff --git a/components/measurement/nettests/WebConnectivity.js b/components/measurement/nettests/WebConnectivity.js
@@ -4,10 +4,11 @@ import Link from 'next/link'
 import { useRouter } from 'next/router'
 import { Cross, Tick } from 'ooni-components/icons'
 import PropTypes from 'prop-types'
-import { Fragment } from 'react'
+import { Fragment, useContext } from 'react'
 import { FormattedMessage, defineMessages, useIntl } from 'react-intl'
 import url from 'url'
 
+import { EmbeddedViewContext } from '../../../pages/m/[measurement_uid]'
 import ConditionalWrapper from '../../ConditionalWrapper'
 import { DetailsBox } from '../DetailsBox'
 import StatusInfo from '../StatusInfo'
@@ -288,12 +289,11 @@ const StyledLink = ({ children, href }) => (
 )
 
 const UrlWrapper = ({ href }) => {
-  const {
-    query: { webview },
-  } = useRouter()
+  const isEmbeddedView = useContext(EmbeddedViewContext)
+
   return (
     <ConditionalWrapper
-      condition={!webview}
+      condition={!isEmbeddedView}
       wrapper={(children) => (
         <StyledLink href={getSearchHref(href)}>{children}</StyledLink>
       )}
@@ -329,9 +329,7 @@ const WebConnectivityDetails = ({
     },
   } = validateMeasurement(measurement ?? {})
 
-  const {
-    query: { webview },
-  } = useRouter()
+  const isEmbeddedView = useContext(EmbeddedViewContext)
 
   const intl = useIntl()
   const date = new Intl.DateTimeFormat(intl.locale, {
@@ -533,7 +531,7 @@ const WebConnectivityDetails = ({
           <StatusInfo
             title={
               <ConditionalWrapper
-                condition={!webview}
+                condition={!isEmbeddedView}
                 wrapper={(children) => (
                   <Link
                     className="text-white underline hover:text-white"

diff --git a/pages/m/[measurement_uid].js b/pages/m/[measurement_uid].js
@@ -3,7 +3,7 @@ import Head from 'next/head'
 import { useRouter } from 'next/router'
 import { colors } from 'ooni-components'
 import PropTypes from 'prop-types'
-import { useMemo, useState } from 'react'
+import { createContext, useMemo, useState } from 'react'
 import { useIntl } from 'react-intl'
 import useSWR from 'swr'
 
@@ -30,6 +30,8 @@ const pageColors = {
   confirmed: colors.red['700'],
 }
 
+export const EmbeddedViewContext = createContext(false)
+
 export async function getServerSideProps({ query, req }) {
   let initialProps = {
     error: null,
@@ -118,6 +120,7 @@ const Measurement = ({
   measurement_uid,
   report_id,
   scores,
+  isEmbeddedView,
   ...rest
 }) => {
   const intl = useIntl()
@@ -148,7 +151,7 @@ const Measurement = ({
   }
 
   return (
-    <>
+    <EmbeddedViewContext.Provider value={isEmbeddedView}>
       <Head>
         <title>{intl.formatMessage({ id: 'General.OoniExplorer' })}</title>
       </Head>
@@ -182,10 +185,6 @@ const Measurement = ({
               headMetadata,
               details,
             }) => {
-              const {
-                query: { webview },
-              } = useRouter()
-
               const color =
                 failure === true ? pageColors.error : pageColors[status]
               const info = scores?.msg ?? statusInfo
@@ -227,7 +226,7 @@ const Measurement = ({
                     onVerifyClick={() => setShowModal(true)}
                   />
                   <div className="container">
-                    {!webview && (
+                    {!isEmbeddedView && (
                       <DetailsHeader
                         testName={test_name}
                         runtime={raw_measurement?.test_runtime}
@@ -259,7 +258,7 @@ const Measurement = ({
           />
         </>
       )}
-    </>
+    </EmbeddedViewContext.Provider>
   )
 }