diff --git a/assets/js/dashboard/api.js b/assets/js/dashboard/api.js
index a9ff924e44..bb1749ddfa 100644
--- a/assets/js/dashboard/api.js
+++ b/assets/js/dashboard/api.js
@@ -59,8 +59,8 @@ export function get(url, query = {}, ...extraQuery) {
return fetch(url, { signal: abortController.signal, headers: headers })
.then(response => {
if (!response.ok) {
- return response.json().then((msg) => {
- throw new ApiError(msg.error, msg)
+ return response.json().then((payload) => {
+ throw new ApiError(payload.error, payload)
})
}
return response.json()
diff --git a/assets/js/dashboard/hooks/api-client.js b/assets/js/dashboard/hooks/api-client.js
index 9e3c0fd085..903244e3a9 100644
--- a/assets/js/dashboard/hooks/api-client.js
+++ b/assets/js/dashboard/hooks/api-client.js
@@ -71,7 +71,8 @@ export function useAPIClient(props) {
const getNextPageParam = (lastPageResults, _, lastPageIndex) => {
return lastPageResults.length === LIMIT ? lastPageIndex + 1 : null
}
- const initialPageParam = 1
+ const defaultInitialPageParam = 1
+ const initialPageParam = props.initialPageParam === undefined ? defaultInitialPageParam : props.initialPageParam
return useInfiniteQuery({
queryKey: key,
diff --git a/assets/js/dashboard/stats/modals/breakdown-modal.js b/assets/js/dashboard/stats/modals/breakdown-modal.js
index a938e0e145..d97b50c3e0 100644
--- a/assets/js/dashboard/stats/modals/breakdown-modal.js
+++ b/assets/js/dashboard/stats/modals/breakdown-modal.js
@@ -6,7 +6,8 @@ import { useQueryContext } from "../../query-context";
import { useSiteContext } from "../../site-context";
import { useDebounce } from "../../custom-hooks";
import { useAPIClient } from "../../hooks/api-client";
-const MIN_HEIGHT_PX = 500
+
+export const MIN_HEIGHT_PX = 500
// The main function component for rendering the "Details" reports on the dashboard,
// i.e. a breakdown by a single (non-time) dimension, with a given set of metrics.
diff --git a/assets/js/dashboard/stats/modals/google-keywords.js b/assets/js/dashboard/stats/modals/google-keywords.js
index 4dfd459726..498489c144 100644
--- a/assets/js/dashboard/stats/modals/google-keywords.js
+++ b/assets/js/dashboard/stats/modals/google-keywords.js
@@ -1,118 +1,193 @@
-import React from "react";
-import { Link, withRouter } from 'react-router-dom'
+import React, { useState, useEffect, useRef } from "react";
import Modal from './modal'
-import * as api from '../../api'
-import numberFormatter, { percentageFormatter } from '../../util/number-formatter'
-import { parseQuery } from '../../query'
import RocketIcon from './rocket-icon'
+import { useQueryContext } from "../../query-context";
+import { useSiteContext } from "../../site-context";
+import { useAPIClient } from "../../hooks/api-client";
+import { useDebounce } from "../../custom-hooks";
+import { createVisitors, Metric, renderNumberWithTooltip } from "../reports/metrics";
+import numberFormatter, { percentageFormatter } from "../../util/number-formatter";
+import classNames from "classnames";
+import { MIN_HEIGHT_PX } from "./breakdown-modal";
-class GoogleKeywordsModal extends React.Component {
- constructor(props) {
- super(props)
- this.state = {
- loading: true,
- query: parseQuery(props.location.search, props.site)
- }
- }
+function GoogleKeywordsModal() {
+ const searchBoxRef = useRef(null)
+ const { query } = useQueryContext()
+ const site = useSiteContext()
+ const endpoint = `/api/stats/${encodeURIComponent(site.domain)}/referrers/Google`
- componentDidMount() {
- api.get(`/api/stats/${encodeURIComponent(this.props.site.domain)}/referrers/Google`, this.state.query, { limit: 100 })
- .then((res) => this.setState({
- loading: false,
- searchTerms: res.search_terms,
- notConfigured: res.not_configured,
- isOwner: res.is_owner
- }))
- }
+ const [search, setSearch] = useState('')
- renderTerm(term) {
- return (
-
-
- | {term.name} |
- {numberFormatter(term.visitors)} |
- {numberFormatter(term.impressions)} |
- {percentageFormatter(term.ctr)} |
- {numberFormatter(term.position)} |
-
-
- )
- }
+ const metrics = [
+ createVisitors({renderLabel: (_query) => 'Visitors'}),
+ new Metric({key: 'impressions', renderLabel: (_query) => 'Impressions', renderValue: renderNumberWithTooltip}),
+ new Metric({key: 'ctr', renderLabel: (_query) => 'CTR', renderValue: percentageFormatter}),
+ new Metric({key: 'position', renderLabel: (_query) => 'Position', renderValue: numberFormatter})
+ ]
- renderKeywords() {
- if (this.state.notConfigured) {
- if (this.state.isOwner) {
- return (
-
-
-
The site is not connected to Google Search Keywords
-
Configure the integration to view search terms
-
Connect with Google
-
-
-
The site is not connected to Google Search Kewyords
-
Cannot show search terms
-
-
-
- | Search Term |
- Visitors |
- Impressions |
- CTR |
- Position |
-
-
-
- {this.state.searchTerms.map(this.renderTerm.bind(this))}
-
-
- )
- } else {
- return (
-
-
-
Could not find any search terms for this period
-
+ | {item.name} |
+ {metrics.map((metric) => {
+ return (
+
+ {metric.renderValue(item[metric.key])}
+ |
+ )
+ })}
+
)
}
+
+ function renderInitialLoadingSpinner() {
+ return (
+
+ )
+ }
+
+ function renderSmallLoadingSpinner() {
+ return (
+
+ )
+ }
+
+ function renderLoadMoreButton() {
+ if (isPending) return null
+ if (!isFetching && !hasNextPage) return null
+
+ return (
+
+ {!isFetching && }
+ {isFetchingNextPage && renderSmallLoadingSpinner()}
+
+ )
+ }
+
+ function handleInputChange(e) {
+ setSearch(e.target.value)
+ }
+
+ const debouncedHandleInputChange = useDebounce(handleInputChange)
+
+ function renderSearchInput() {
+ const searchBoxClass = classNames('shadow-sm dark:bg-gray-900 dark:text-gray-100 focus:ring-indigo-500 focus:border-indigo-500 block sm:text-sm border-gray-300 dark:border-gray-500 rounded-md dark:bg-gray-800 w-48', {
+ 'pointer-events-none' : status === 'error'
+ })
+ return (
+
+ )
+ }
+
+ function renderModalBody() {
+ if (data?.pages?.length) {
+ return (
+
+
+
+
+ |
+ Search term
+ |
+ {metrics.map((metric) => {
+ return (
+
+ {metric.renderLabel(query)}
+ |
+ )
+ })}
+
+
+
+ {data.pages.map((p) => p.map(renderRow))}
+
+
+
+ )
+ }
+ }
+
+ function renderError() {
+ return (
+
+ )
+ }
+
+ return (
+
+
+
+
+
Google Search Terms
+ {!isPending && isFetching && renderSmallLoadingSpinner()}
+
+ {renderSearchInput()}
+
+
+
+ {status === 'error' && renderError()}
+ {isPending && renderInitialLoadingSpinner()}
+ {!isPending && renderModalBody()}
+ {renderLoadMoreButton()}
+
+
Configure the integration to view search terms
+ Connect with Google
+
+ )
+}
+
export default class SearchTerms extends React.Component {
constructor(props) {
super(props)
- this.state = { loading: true }
+ this.state = { loading: true, errorPayload: null }
this.onVisible = this.onVisible.bind(this)
this.fetchSearchTerms = this.fetchSearchTerms.bind(this)
}
@@ -37,14 +46,11 @@ export default class SearchTerms extends React.Component {
api.get(`/api/stats/${encodeURIComponent(this.props.site.domain)}/referrers/Google`, this.props.query)
.then((res) => this.setState({
loading: false,
- searchTerms: res.search_terms || [],
- notConfigured: res.not_configured,
- isAdmin: res.is_admin,
- unsupportedFilters: res.unsupported_filters
+ searchTerms: res.results,
+ errorPayload: null
})).catch((error) => {
- this.setState({ loading: false, searchTerms: [], notConfigured: true, error: true, isAdmin: error.payload.is_admin })
- }
- )
+ this.setState({ loading: false, searchTerms: [], errorPayload: error.payload })
+ })
}
renderSearchTerm(term) {
@@ -68,22 +74,14 @@ export default class SearchTerms extends React.Component {
}
renderList() {
- if (this.state.unsupportedFilters) {
+ if (this.state.errorPayload) {
+ const {reason, is_admin, error} = this.state.errorPayload
+
return (
-
Unable to fetch keyword data from Search Console because it does not support the current set of filters
-
- )
- } else if (this.state.notConfigured) {
- return (
-
-
-
- This site is not connected to Search Console so we cannot show the search terms
- {this.state.isAdmin && this.state.error && <>
Please click below to connect your Search Console account.
}
-
- {this.state.isAdmin &&
Connect with Google}
+
{error}
+ {reason === 'not_configured' && is_admin &&
}