Skip to content

Commit

Permalink
Introduce webview on measurement pages
Browse files Browse the repository at this point in the history
  • Loading branch information
majakomel committed Nov 6, 2024
1 parent 9375a27 commit 883ca7e
Show file tree
Hide file tree
Showing 15 changed files with 232 additions and 156 deletions.
15 changes: 6 additions & 9 deletions components/Chart.js
Original file line number Diff line number Diff line change
Expand Up @@ -95,16 +95,13 @@ const Chart = memo(function Chart({
)}
{error && (
<DetailsBox
collapsed={false}
content={
<>
<details>
<summary>
<span>Error: {error.message}</span>
</summary>
<pre>{JSON.stringify(error, null, 2)}</pre>
</details>
</>
<details>
<summary>
<span>Error: {error.message}</span>
</summary>
<pre>{JSON.stringify(error, null, 2)}</pre>
</details>
}
/>
)}
Expand Down
12 changes: 12 additions & 0 deletions components/ConditionalWrapper.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
// import type { ReactNode } from 'react'

// type ConditionalWrapperProps = {
// condition: boolean
// wrapper: (children: ReactNode) => ReactNode
// children: ReactNode
// }

const ConditionalWrapper = ({ condition, wrapper, children }) =>
condition ? wrapper(children) : children

export default ConditionalWrapper
15 changes: 6 additions & 9 deletions components/DomainChart.js
Original file line number Diff line number Diff line change
Expand Up @@ -75,16 +75,13 @@ const Chart = memo(function Chart({ queryParams = {}, setState }) {
</div>
{error && (
<DetailsBox
collapsed={false}
content={
<>
<details>
<summary>
<span>Error: {error.message}</span>
</summary>
<pre>{JSON.stringify(error, null, 2)}</pre>
</details>
</>
<details>
<summary>
<span>Error: {error.message}</span>
</summary>
<pre>{JSON.stringify(error, null, 2)}</pre>
</details>
}
/>
)}
Expand Down
27 changes: 18 additions & 9 deletions components/Layout.js
Original file line number Diff line number Diff line change
Expand Up @@ -4,12 +4,16 @@ import { useMemo } from 'react'
import { StyledStickyNavBar } from 'components/SharedStyledComponents'
import { UserProvider } from 'hooks/useUser'
import { useRouter } from 'next/router'
import ConditionalWrapper from './ConditionalWrapper'
import Footer from './Footer'
import Header from './Header'
import NavBar from './NavBar'

const Layout = ({ children }) => {
const { pathname } = useRouter()
const {
pathname,
query: { webview },
} = useRouter()

const navbarColor = useMemo(() => {
return pathname === '/' ||
Expand All @@ -34,20 +38,25 @@ const Layout = ({ children }) => {
<div className="site text-sm flex flex-col min-h-[100vh]">
<div className="flex-[1_0_auto]">
<Header />
{navbarSticky ? (
<StyledStickyNavBar>
{!webview && (
<ConditionalWrapper
condition={!!navbarSticky}
wrapper={(children) => (
<StyledStickyNavBar>{children}</StyledStickyNavBar>
)}
>
<NavBar color={navbarColor} />
</StyledStickyNavBar>
) : (
<NavBar color={navbarColor} />
</ConditionalWrapper>
)}
<div className={`content ${!navbarColor && 'mt-[-66px]'}`}>
{children}
</div>
</div>
<div className="flex-shrink-0">
<Footer />
</div>
{!webview && (
<div className="flex-shrink-0">
<Footer />
</div>
)}
</div>
</UserProvider>
)
Expand Down
5 changes: 1 addition & 4 deletions components/aggregation/mat/Filters.js
Original file line number Diff line number Diff line change
Expand Up @@ -312,10 +312,7 @@ const Filters = ({ data = [], tableData, setDataForCharts, query }) => {
})

return (
<DetailsBox
title={intl.formatMessage({ id: 'MAT.Table.Filters' })}
collapsed={false}
>
<DetailsBox title={intl.formatMessage({ id: 'MAT.Table.Filters' })}>
<div className="flex flex-col">
<div className="flex mb-4 items-center">
<button
Expand Down
2 changes: 1 addition & 1 deletion components/aggregation/mat/Help.js
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ const boxTitle = (

const Help = () => {
return (
<DetailsBox title={boxTitle} collapsed={false}>
<DetailsBox title={boxTitle}>
<FormattedMarkdown id="MAT.Help.Content" />
<div className="flex flex-col">
{[...getCategoryCodesMap().values()].map(
Expand Down
51 changes: 23 additions & 28 deletions components/country/ConfirmedBlockedCategory.js
Original file line number Diff line number Diff line change
Expand Up @@ -56,37 +56,32 @@ const ConfirmedBlockedCategory = () => {
id: 'Country.Websites.ConfirmedBlockedCategories',
})}
</h3>
<>
{!blockedCategoriesData && !error ? (
<div> Loading ...</div>
) : blockedCategoriesData === null ||
blockedCategoriesData.length === 0 ? (
<h5>
<FormattedMessage id="General.NoData" />
</h5>
) : (
<div className="flex flex-wrap gap-2">
{blockedCategoriesData?.map((category) => (
<CategoryBadge
key={category.category_code}
categoryCode={category.category_code}
/>
))}
</div>
)}
</>
{!blockedCategoriesData && !error ? (
<div> Loading ...</div>
) : blockedCategoriesData === null ||
blockedCategoriesData.length === 0 ? (
<h5>
<FormattedMessage id="General.NoData" />
</h5>
) : (
<div className="flex flex-wrap gap-2">
{blockedCategoriesData?.map((category) => (
<CategoryBadge
key={category.category_code}
categoryCode={category.category_code}
/>
))}
</div>
)}
{error && (
<DetailsBox
collapsed={false}
content={
<>
<details>
<summary>
<span>Error: {error.message}</span>
</summary>
<pre>{JSON.stringify(error, null, 2)}</pre>
</details>
</>
<details>
<summary>
<span>Error: {error.message}</span>
</summary>
<pre>{JSON.stringify(error, null, 2)}</pre>
</details>
}
/>
)}
Expand Down
20 changes: 8 additions & 12 deletions components/dashboard/Charts.js
Original file line number Diff line number Diff line change
Expand Up @@ -125,19 +125,15 @@ const Chart = memo(function Chart({ testName }) {
</div>
{error && (
<DetailsBox
collapsed={false}
content={
<>
<details>
<summary>
<span>
{intl.formatMessage({ id: 'General.Error' })}:{' '}
{error.message}
</span>
</summary>
<pre>{JSON.stringify(error, null, 2)}</pre>
</details>
</>
<details>
<summary>
<span>
{intl.formatMessage({ id: 'General.Error' })}: {error.message}
</span>
</summary>
<pre>{JSON.stringify(error, null, 2)}</pre>
</details>
}
/>
)}
Expand Down
47 changes: 24 additions & 23 deletions components/measurement/CommonDetails.js
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,7 @@ const CommonDetails = ({
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(1)
const [collapsed, setCollapsed] = useState(query?.webview ? 50 : 1)

const intl = useIntl()
const unavailable = intl.formatMessage({
Expand Down Expand Up @@ -165,42 +165,43 @@ const CommonDetails = ({
{/* Raw Measurement */}
<div className="flex">
<DetailsBox
collapsed={false}
title={
<div className="flex flex-1 px-4 justify-between flex-col md:flex-row items-center bg-gray-200">
<div>
{intl.formatMessage({
id: 'Measurement.CommonDetails.RawMeasurement.Heading',
})}
</div>
<div className="flex">
<a
className="text-blue-700"
href={rawMsmtDownloadURL}
download={downloadFilename}
>
{!query.webview && (
<div className="flex">
<a
className="text-blue-700"
href={rawMsmtDownloadURL}
download={downloadFilename}
>
<button
type="button"
className="btn btn-primary px-8 mx-4 text-sm"
onClick={(e) => e.stopPropagation()}
>
{intl.formatMessage({
id: 'Measurement.CommonDetails.RawMeasurement.Download',
})}
</button>
</a>
<button
type="button"
className="btn btn-primary px-8 mx-4 text-sm"
onClick={(e) => e.stopPropagation()}
onClick={(e) => {
expandAllBtn(e)
}}
>
{intl.formatMessage({
id: 'Measurement.CommonDetails.RawMeasurement.Download',
id: 'Measurement.CommonDetails.RawMeasurement.Expand',
})}
</button>
</a>
<button
type="button"
className="btn btn-primary px-8 mx-4 text-sm"
onClick={(e) => {
expandAllBtn(e)
}}
>
{intl.formatMessage({
id: 'Measurement.CommonDetails.RawMeasurement.Expand',
})}
</button>
</div>
</div>
)}
</div>
}
content={
Expand Down
69 changes: 46 additions & 23 deletions components/measurement/CommonSummary.js
Original file line number Diff line number Diff line change
@@ -1,7 +1,9 @@
import Link from 'next/link'
import { useRouter } from 'next/router'
import PropTypes from 'prop-types'
import { MdOutlineFactCheck } from 'react-icons/md'
import { useIntl } from 'react-intl'
import ConditionalWrapper from '../ConditionalWrapper'
import Flag from '../Flag'

const CommonSummary = ({
Expand All @@ -14,6 +16,9 @@ const CommonSummary = ({
hero,
onVerifyClick,
}) => {
const {
query: { webview },
} = useRouter()
const intl = useIntl()
const startTime = measurement_start_time
const network = probe_asn
Expand All @@ -32,41 +37,59 @@ const CommonSummary = ({
>
<div className="container">
<div className="flex justify-between">
<div className="text-base">{formattedDate}</div>
<div
className="flex flex-col items-center cursor-pointer"
onClick={onVerifyClick}
>
<div className="text-lg text-center">
<MdOutlineFactCheck />
</div>
<div className="text-xs font-bold text-center">
{intl
.formatMessage({ id: 'Measurement.CommonSummary.Verify' })
.toUpperCase()}
<div className="text-base w-1/2">{formattedDate}</div>
{!webview && (
<div
className="flex flex-col items-center cursor-pointer"
onClick={onVerifyClick}
>
<div className="text-lg text-center">
<MdOutlineFactCheck />
</div>
<div className="text-xs font-bold text-center">
{intl
.formatMessage({ id: 'Measurement.CommonSummary.Verify' })
.toUpperCase()}
</div>
</div>
</div>
)}
</div>
{hero}
<div className="flex mt-2 underline">
<div className="flex mt-2">
<div className="lg:w-1/2">
<Link
className="text-white hover:text-white block"
href={`/country/${countryCode}`}
<ConditionalWrapper
condition={!webview}
wrapper={(children) => (
<Link
className="text-white hover:text-white block underline"
href={`/country/${countryCode}`}
>
{children}
</Link>
)}
>
<div className="flex items-center text-xl">
<div className="mr-2">
<Flag countryCode={countryCode} size={33} />
</div>
{country}
</div>
</Link>
<Link
className="text-base my-2 text-white hover:text-white block"
href={`/as/${network}`}
</ConditionalWrapper>
<ConditionalWrapper
condition={!webview}
wrapper={(children) => (
<Link
className="text-white hover:text-white block underline"
href={`/as/${network}`}
>
{children}
</Link>
)}
>
{network} {networkName}
</Link>
<div className="my-2 text-base">
{network} {networkName}
</div>
</ConditionalWrapper>
</div>
</div>
</div>
Expand Down
Loading

0 comments on commit 883ca7e

Please sign in to comment.