Remove query and site props passing from everywhere except class components

assets/js/dashboard/comparison-input.js

@@ -86,7 +86,9 @@ function ComparisonModeOption({ label, value, isCurrentlySelected, updateMode, s
   )
 }
 
-function MatchDayOfWeekInput({ history, query, site }) {
+function MatchDayOfWeekInput({ history }) {
+  const site = useSiteContext()
+  const { query } = useQueryContext()
   const click = (matchDayOfWeek) => {
     storage.setItem(`comparison_match_day_of_week__${site.domain}`, matchDayOfWeek.toString())
     navigateToQuery(history, query, { match_day_of_week: matchDayOfWeek.toString() })
@@ -184,7 +186,7 @@ const ComparisonInput = function ({ history }) {
                 {Object.keys(COMPARISON_MODES).map((key) => ComparisonModeOption({ label: COMPARISON_MODES[key], value: key, isCurrentlySelected: key == query.comparison, updateMode, setUiMode }))}
                 {query.comparison !== "custom" && <span>
                   <hr className="my-1" />
-                  <MatchDayOfWeekInput query={query} history={history} site={site} />
+                  <MatchDayOfWeekInput history={history} />
                 </span>}
               </Menu.Items>
             </Transition>

assets/js/dashboard/components/notice.js

@@ -1,8 +1,10 @@
 import React from "react"
 import { sectionTitles } from "../stats/behaviours"
 import * as api from '../api'
+import { useSiteContext } from "../site-context"
 
-export function FeatureSetupNotice({ site, feature, title, info, callToAction, onHideAction }) {
+export function FeatureSetupNotice({ feature, title, info, callToAction, onHideAction }) {
+  const site = useSiteContext()
   const sectionTitle = sectionTitles[feature]
 
   const requestHideSection = () => {

assets/js/dashboard/datepicker.js

@@ -1,8 +1,8 @@
 import React, { Fragment, useState, useEffect, useCallback, useRef } from "react";
 import { withRouter } from "react-router-dom";
 import Flatpickr from "react-flatpickr";
-import { ChevronDownIcon } from '@heroicons/react/20/solid'
-import { Transition } from '@headlessui/react'
+import { ChevronDownIcon } from '@heroicons/react/20/solid';
+import { Transition } from '@headlessui/react';
 import {
   shiftDays,
   shiftMonths,
@@ -25,9 +25,9 @@
   isSameDate
 } from "./util/date";
 import { navigateToQuery, QueryLink, QueryButton } from "./query";
-import { shouldIgnoreKeypress } from "./keybinding.js"
-import { COMPARISON_DISABLED_PERIODS, toggleComparisons, isComparisonEnabled } from "../dashboard/comparison-input.js"
-import classNames from "classnames"
+import { shouldIgnoreKeypress } from "./keybinding.js";
+import { COMPARISON_DISABLED_PERIODS, toggleComparisons, isComparisonEnabled } from "../dashboard/comparison-input.js";
+import classNames from "classnames";
 import { useQueryContext } from "./query-context.js";
 import { useSiteContext } from "./site-context.js";
 
@@ -65,7 +65,6 @@
     <div className={containerClass}>
       <QueryButton
         to={{ date: prevDate }}
-        query={query}
         className={leftClass}
         disabled={disabledLeft}
       >
@@ -84,7 +83,6 @@
       </QueryButton>
       <QueryButton
         to={{ date: nextDate }}
-        query={query}
         className={rightClass}
         disabled={disabledRight}
       >
@@ -105,7 +103,9 @@
   );
 }
 
-function DatePickerArrows({ site, query }) {
+function DatePickerArrows() {
+  const { query } = useQueryContext();
+  const site = useSiteContext();
   if (query.period === "year") {
     const prevDate = formatISO(shiftMonths(query.date, -12));
     const nextDate = formatISO(shiftMonths(query.date, 12));
@@ -126,7 +126,9 @@
   return null
 }
 
-function DisplayPeriod({ query, site }) {
+function DisplayPeriod() {
+  const { query } = useQueryContext();
+  const site = useSiteContext();
   if (query.period === "day") {
     if (isToday(site, query.date)) {
       return "Today";
@@ -237,7 +239,7 @@
     } else if (newSearch.date) {
       navigateToQuery(history, query, newSearch);
     }
   }, [query])
 
   const handleClick = useCallback((e) => {
     if (dropDownNode.current && dropDownNode.current.contains(e.target)) return;
@@ -302,7 +304,6 @@
       <QueryLink
         to={{ from: false, to: false, period, ...opts }}
         onClick={() => setOpen(false)}
-        query={query}
         className={`${boldClass} px-4 py-2 text-sm leading-tight hover:bg-gray-100 hover:text-gray-900
           dark:hover:bg-gray-900 dark:hover:text-gray-100 flex items-center justify-between`}
       >
@@ -414,7 +415,7 @@
           aria-controls="datemenu"
         >
           <span className="truncate mr-1 md:mr-2">
-            <span className="font-medium"><DisplayPeriod query={query} site={site} /></span>
+            <span className="font-medium"><DisplayPeriod /></span>
           </span>
           <ChevronDownIcon className="hidden sm:inline-block h-4 w-4 md:h-5 md:w-5 text-gray-500" />
         </div>
@@ -437,7 +438,7 @@
 
   return (
     <div className="flex ml-auto pl-2">
-      <DatePickerArrows site={site} query={query} />
+      <DatePickerArrows />
       {renderPicker()}
     </div>
   )

assets/js/dashboard/extra/funnel.js

@@ -1,18 +1,22 @@
-import React, { useEffect, useState, useRef } from 'react'
+import React, { useEffect, useState, useRef } from 'react';
 import FlipMove from 'react-flip-move';
-import Chart from 'chart.js/auto'
-import FunnelTooltip from './funnel-tooltip.js'
-import ChartDataLabels from 'chartjs-plugin-datalabels'
-import numberFormatter from '../util/number-formatter'
-import Bar from '../stats/bar'
+import Chart from 'chart.js/auto';
+import FunnelTooltip from './funnel-tooltip.js';
+import ChartDataLabels from 'chartjs-plugin-datalabels';
+import numberFormatter from '../util/number-formatter';
+import Bar from '../stats/bar';
 
-import RocketIcon from '../stats/modals/rocket-icon'
+import RocketIcon from '../stats/modals/rocket-icon';
 
-import * as api from '../api'
-import LazyLoader from '../components/lazy-loader'
+import * as api from '../api';
+import LazyLoader from '../components/lazy-loader';
+import { useQueryContext } from '../query-context.js';
+import { useSiteContext } from '../site-context.js';
 
 
-export default function Funnel(props) {
+export default function Funnel({ funnelName, tabs }) {
+  const site = useSiteContext();
+  const { query } = useQueryContext();
   const [loading, setLoading] = useState(true)
   const [visible, setVisible] = useState(false)
   const [error, setError] = useState(undefined)
@@ -42,7 +46,7 @@ export default function Funnel(props) {
         }
       }
     }
-  }, [props.query, props.funnelName, visible, isSmallScreen])
+  }, [query, funnelName, visible, isSmallScreen])
 
   useEffect(() => {
     if (canvasRef.current && funnel && visible && !isSmallScreen) {
@@ -115,15 +119,15 @@ export default function Funnel(props) {
   }
 
   const getFunnel = () => {
-    return props.site.funnels.find((funnel) => funnel.name === props.funnelName)
+    return site.funnels.find((funnel) => funnel.name === funnelName)
   }
 
   const fetchFunnel = async () => {
     const funnelMeta = getFunnel()
     if (typeof funnelMeta === 'undefined') {
       throw new Error('Could not fetch the funnel. Perhaps it was deleted?')
     } else {
-      return api.get(`/api/stats/${encodeURIComponent(props.site.domain)}/funnels/${funnelMeta.id}`, props.query)
+      return api.get(`/api/stats/${encodeURIComponent(site.domain)}/funnels/${funnelMeta.id}`, query)
     }
   }
 
@@ -256,8 +260,8 @@ export default function Funnel(props) {
   const header = () => {
     return (
       <div className="flex justify-between w-full">
-        <h4 className="mt-2 text-sm dark:text-gray-100">{props.funnelName}</h4>
-        {props.tabs}
+        <h4 className="mt-2 text-sm dark:text-gray-100">{funnelName}</h4>
+        {tabs}
       </div>
     )
   }

assets/js/dashboard/filters.js

@@ -1,10 +1,10 @@
 import React, { Fragment, useEffect, useState } from 'react';
-import { Link, withRouter } from 'react-router-dom'
-import { AdjustmentsVerticalIcon, MagnifyingGlassIcon, XMarkIcon, PencilSquareIcon } from '@heroicons/react/20/solid'
-import classNames from 'classnames'
-import { Menu, Transition } from '@headlessui/react'
+import { Link, withRouter } from 'react-router-dom';
+import { AdjustmentsVerticalIcon, MagnifyingGlassIcon, XMarkIcon, PencilSquareIcon } from '@heroicons/react/20/solid';
+import classNames from 'classnames';
+import { Menu, Transition } from '@headlessui/react';
 
-import { navigateToQuery } from './query'
+import { navigateToQuery } from './query';
 import {
   FILTER_GROUP_TO_MODAL_TYPE,
   cleanLabels,
@@ -15,7 +15,7 @@ import {
   getPropertyKeyFromFilterKey,
   getLabel,
   FILTER_OPERATIONS_DISPLAY_NAMES
-} from "./util/filters"
+} from "./util/filters";
 import { useQueryContext } from './query-context';
 import { useSiteContext } from './site-context';
 
@@ -99,7 +99,9 @@ function filterDropdownOption(site, option) {
   )
 }
 
-function DropdownContent({ history, site, query, wrapped }) {
+function DropdownContent({ history, wrapped }) {
+  const site = useSiteContext();
+  const { query } = useQueryContext();
   const [addingFilter, setAddingFilter] = useState(false);
 
   if (wrapped === WRAPSTATE.unwrapped || addingFilter) {
@@ -126,7 +128,6 @@ function DropdownContent({ history, site, query, wrapped }) {
 
 function Filters({ history }) {
   const { query } = useQueryContext();
-  const site = useSiteContext();
 
   const [wrapped, setWrapped] = useState(WRAPSTATE.waiting)
   const [viewport, setViewport] = useState(1080)
@@ -267,7 +268,7 @@ function Filters({ history }) {
                   className="rounded-md shadow-lg  bg-white dark:bg-gray-800 ring-1 ring-black ring-opacity-5
                   font-medium text-gray-800 dark:text-gray-200"
                 >
-                  <DropdownContent history={history} query={query} site={site} wrapped={wrapped} />
+                  <DropdownContent history={history} wrapped={wrapped} />
                 </div>
               </Menu.Items>
             </Transition>

assets/js/dashboard/index.js

@@ -1,7 +1,8 @@
 import React, { useState } from 'react';
 
 import Historical from './historical'
-import Realtime, { useIsRealtimeDashboard } from './realtime'
+import Realtime from './realtime'
+import { useIsRealtimeDashboard } from './util/filters'
 
 export const statsBoxClass = "stats-item relative w-full mt-6 p-4 flex flex-col bg-white dark:bg-gray-825 shadow-xl rounded"
 

assets/js/dashboard/query.js

@@ -7,9 +7,10 @@ import * as storage from './util/storage'
 import { COMPARISON_DISABLED_PERIODS, getStoredComparisonMode, isComparisonEnabled, getStoredMatchDayOfWeek } from './comparison-input'
 import { getFiltersByKeyPrefix } from './util/filters'
 
-import dayjs from 'dayjs';
-import utc from 'dayjs/plugin/utc';
+import dayjs from 'dayjs'
+import utc from 'dayjs/plugin/utc'
 import { parseLegacyFilter, parseLegacyPropsFilter } from './util/filters'
+import { useQueryContext } from './query-context'
 
 dayjs.extend(utc)
 
@@ -49,7 +50,7 @@ export function parseQuery(querystring, site) {
 }
 
 export function addFilter(query, filter) {
-  return {...query, filters: [...query.filters, filter]}
+  return { ...query, filters: [...query.filters, filter] }
 }
 
 export function navigateToQuery(history, queryFrom, newData) {
@@ -145,7 +146,7 @@ export function filtersBackwardsCompatibilityRedirect() {
 export function revenueAvailable(query, site) {
   const revenueGoalsInFilter = site.revenueGoals.filter((rg) => {
     const goalFilters = getFiltersByKeyPrefix(query, "goal")
-    
+
     return goalFilters.some(([_op, _key, clauses]) => {
       return clauses.includes(rg.event_name)
     })
@@ -159,7 +160,8 @@ export function revenueAvailable(query, site) {
 }
 
 function QueryLink(props) {
-  const { query, history, to, className, children } = props
+  const { query } = useQueryContext();
+  const { history, to, className, children } = props
 
   function onClick(e) {
     e.preventDefault()
@@ -183,7 +185,8 @@ function QueryLink(props) {
 const QueryLinkWithRouter = withRouter(QueryLink)
 export { QueryLinkWithRouter as QueryLink };
 
-function QueryButton({ history, query, to, disabled, className, children, onClick }) {
+function QueryButton({ history, to, disabled, className, children, onClick }) {
+  const { query } = useQueryContext();
   return (
     <button
       className={className}

assets/js/dashboard/realtime.js

@@ -1,5 +1,4 @@
-import React, { useMemo } from 'react';
-
+import React  from 'react';
 import Datepicker from './datepicker'
 import SiteSwitcher from './site-switcher'
 import Filters from './filters'
@@ -14,12 +13,6 @@ import { statsBoxClass } from './index';
 import { useSiteContext } from './site-context';
 import { useUserContext } from './user-context';
 import { useQueryContext } from './query-context';
-import { isRealTimeDashboard } from './util/filters';
-
-export const useIsRealtimeDashboard = () => {
-  const { query: { period } } = useQueryContext();
-  return useMemo(() => isRealTimeDashboard({ period }), [period]);
-}
 
 function Realtime({ stuck }) {
   const site = useSiteContext();

assets/js/dashboard/stats/behaviours/conversions.js

@@ -1,12 +1,15 @@
 import React from 'react';
-import * as api from '../../api'
-import * as url from '../../util/url'
+import * as api from '../../api';
+import * as url from '../../util/url';
 
 import * as metrics from '../reports/metrics';
 import ListReport from '../reports/list';
+import { useSiteContext } from '../../site-context';
+import { useQueryContext } from '../../query-context';
 
-export default function Conversions(props) {
-  const { site, query, afterFetchData } = props
+export default function Conversions({ afterFetchData, onGoalFilterClick }) {
+  const site = useSiteContext();
+  const { query } = useQueryContext()
 
   function fetchConversions() {
     return api.get(url.apiPath(site, '/conversions'), query, { limit: 9 })
@@ -21,11 +24,11 @@ export default function Conversions(props) {
 
   function chooseMetrics() {
     return [
-      metrics.createVisitors({ renderLabel: (_query) => "Uniques", meta: {plot: true}}),
-      metrics.createEvents({renderLabel: (_query) => "Total", meta: {hiddenOnMobile: true}}),
+      metrics.createVisitors({ renderLabel: (_query) => "Uniques", meta: { plot: true } }),
+      metrics.createEvents({ renderLabel: (_query) => "Total", meta: { hiddenOnMobile: true } }),
       metrics.createConversionRate(),
-      BUILD_EXTRA && metrics.createTotalRevenue({meta: {hiddenOnMobile: true}}),
-      BUILD_EXTRA && metrics.createAverageRevenue({meta: {hiddenOnMobile: true}})
+      BUILD_EXTRA && metrics.createTotalRevenue({ meta: { hiddenOnMobile: true } }),
+      BUILD_EXTRA && metrics.createAverageRevenue({ meta: { hiddenOnMobile: true } })
     ].filter(metric => !!metric)
   }
 
@@ -36,11 +39,10 @@ export default function Conversions(props) {
       afterFetchData={afterFetchData}
       getFilterFor={getFilterFor}
       keyLabel="Goal"
-      onClick={props.onGoalFilterClick}
+      onClick={onGoalFilterClick}
       metrics={chooseMetrics()}
       detailsLink={url.sitePath('conversions')}
       maybeHideDetails={true}
-      query={query}
       color="bg-red-50"
       colMinWidth={90}
     />