From 2c4e63eab23391b3d11608c375a4ab14baf19686 Mon Sep 17 00:00:00 2001 From: ikuleshov Date: Thu, 30 Nov 2023 09:42:03 +0000 Subject: [PATCH] Upgrade all dependencies to the latest version. --- gatsby-browser.tsx | 7 --- gatsby-ssr.tsx | 1 - gatsby/wrapRootElement.tsx | 2 +- jest.config.js | 6 ++ package.json | 1 + src/components/GA4Pickers/index.tsx | 8 +-- src/components/PrettyJson.tsx | 2 +- .../RequestComposer/RequestComposer.tsx | 2 +- src/components/Select.tsx | 17 +---- src/components/SelectMultiple.tsx | 17 +---- src/components/TextBox.tsx | 2 +- src/components/WithHelpText.tsx | 6 -- .../ga4/EnhancedEcommerce/ga-console.tsx | 2 +- .../ValidateEvent/handlers/formatCheckLib.ts | 5 +- .../ga4/EventBuilder/ValidateEvent/index.tsx | 6 +- .../EventBuilder/ValidateEvent/usePayload.ts | 2 +- .../ValidateEvent/useValidateEvent.ts | 6 +- src/components/ga4/EventBuilder/index.tsx | 63 +++---------------- .../ga4/EventBuilder/useUserProperties.ts | 4 +- .../ga4/QueryExplorer/DateRanges.tsx | 4 -- src/components/ga4/StreamPicker/index.tsx | 2 +- src/pages/ga4/enhanced-ecommerce/cart.tsx | 22 +------ 22 files changed, 43 insertions(+), 144 deletions(-) diff --git a/gatsby-browser.tsx b/gatsby-browser.tsx index eb6996e49..10a382a88 100644 --- a/gatsby-browser.tsx +++ b/gatsby-browser.tsx @@ -1,16 +1,9 @@ import * as React from "react" import type { GatsbyBrowser } from "gatsby" -//import {StoreProvider} from "./src/components/ga4/EnhancedEcommerce/store-context" import CustomLayout from "./gatsby/wrapRootElement" -//import "./src/styles/ecommerce/variables.css" // TODO - look into making this work like gatsby-node & use typescript for the // things that are imported/exported. export { onInitialClientRender } from "./gatsby/onInitialClientRender" export const wrapPageElement: GatsbyBrowser["wrapPageElement"] = CustomLayout - -// Wrap every page using a StoreProvider object used by eCommerce demo. -// export const wrapRootElement = ({ element }) => ( -// {element} -// ) diff --git a/gatsby-ssr.tsx b/gatsby-ssr.tsx index 0d00cf04a..8bae9bd7c 100644 --- a/gatsby-ssr.tsx +++ b/gatsby-ssr.tsx @@ -7,7 +7,6 @@ import CustomLayout from "./gatsby/wrapRootElement" // TODO - look into making this work like gatsby-node & use typescript for the // things that are imported/exported. -export { onInitialClientRender } from "./gatsby/onInitialClientRender" export const wrapPageElement: GatsbySSR["wrapPageElement"] = CustomLayout // Wrap every page using a StoreProvider object used by eCommerce demo. diff --git a/gatsby/wrapRootElement.tsx b/gatsby/wrapRootElement.tsx index fb96d16f0..a1d347276 100644 --- a/gatsby/wrapRootElement.tsx +++ b/gatsby/wrapRootElement.tsx @@ -85,7 +85,7 @@ const globalTheme = createTheme({ padding: 0, }, p: (theme: Theme) => ({ - ... ({paddingBottom: theme.spacing(2)}), + ...({paddingBottom: theme.spacing(2)}), }), a: (theme: Theme) => ({ color: theme.palette.primary.dark, diff --git a/jest.config.js b/jest.config.js index 97d101886..167388308 100644 --- a/jest.config.js +++ b/jest.config.js @@ -20,6 +20,12 @@ module.exports = { "@/(.*)": "/src/$1", ".+\\.(css|styl|less|sass|scss)$": `identity-obj-proxy`, ".+\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": `/__mocks__/file-mock.js`, + "^gatsby-core-utils/(.*)$": `gatsby-core-utils/dist/$1`, // Workaround for https://github.com/facebook/jest/issues/9771 + "^gatsby-plugin-utils/(.*)$": [ + `gatsby-plugin-utils/dist/$1`, + `gatsby-plugin-utils/$1`, + ], // Workaround for https://github.com/facebook/jest/issues/9771, + "^gatsby-page-utils/(.*)$": `gatsby-page-utils/dist/$1`, // Workaround for https://github.com/facebook/jest/issues/9771 }, testPathIgnorePatterns: [`node_modules`, `\\.cache`, `.*/public`], transformIgnorePatterns: [`node_modules/(?!(gatsby)/)`], diff --git a/package.json b/package.json index f9a8e2567..340dbd360 100644 --- a/package.json +++ b/package.json @@ -58,6 +58,7 @@ "@testing-library/user-event": "^13.1.8", "@types/gapi": "^0.0.39", "@types/gapi.auth2": "^0.0.54", + "@reach/router": "^1.3.4", "@types/gapi.client.analytics": "^3.0.7", "@types/gapi.client.analyticsadmin": "^1.0.0", "@types/gapi.client.analyticsdata": "^1.0.2", diff --git a/src/components/GA4Pickers/index.tsx b/src/components/GA4Pickers/index.tsx index 47f561f28..690b5afc3 100644 --- a/src/components/GA4Pickers/index.tsx +++ b/src/components/GA4Pickers/index.tsx @@ -126,7 +126,7 @@ export const DimensionsPicker: React.FC<{ )} renderInput={params => ( - )} renderInput={params => ( - )} renderInput={params => ( - )} renderInput={params => ( - = ({ /> ) - }, [object, classes.json, shouldCollapse, tooltipText]) + }, [object, shouldCollapse, tooltipText]) if (object === undefined) { return null diff --git a/src/components/RequestComposer/RequestComposer.tsx b/src/components/RequestComposer/RequestComposer.tsx index 1b5695811..e6b9f9b03 100644 --- a/src/components/RequestComposer/RequestComposer.tsx +++ b/src/components/RequestComposer/RequestComposer.tsx @@ -132,7 +132,7 @@ const RequestComposer: React.FC = ({ type }) => { Make Request ) - }, [classes, makeRequest, canMakeRequest]) + }, [makeRequest, canMakeRequest]) const accountPropertyView = useAccountPropertyView( StorageKey.requestComposerAPV, diff --git a/src/components/Select.tsx b/src/components/Select.tsx index 6c9e045be..362df7c05 100644 --- a/src/components/Select.tsx +++ b/src/components/Select.tsx @@ -1,24 +1,9 @@ import * as React from "react" -import { styled } from '@mui/material/styles'; import { TextField } from "@mui/material" import clsx from "classnames" import { Dispatch } from "../types" import Autocomplete from "@mui/material/Autocomplete" -const PREFIX = 'Select'; - -const classes = { - formControl: `${PREFIX}-formControl` -}; - -const StyledTextField - = styled(TextField -)(() => ({ - [`& .${classes.formControl}`]: { - minWidth: "15ch", - } -})); - export interface SelectOption { value: string displayName: string @@ -52,7 +37,7 @@ const Select: React.FC = ({ return ( disableClearable - className={clsx(classes.formControl, className)} + className={className} autoHighlight autoSelect options={options} diff --git a/src/components/SelectMultiple.tsx b/src/components/SelectMultiple.tsx index c2604d686..e31fd8619 100644 --- a/src/components/SelectMultiple.tsx +++ b/src/components/SelectMultiple.tsx @@ -1,24 +1,9 @@ import * as React from "react" -import { styled } from '@mui/material/styles'; import { TextField } from "@mui/material" import clsx from "classnames" import { Dispatch } from "../types" import Autocomplete from "@mui/material/Autocomplete" -const PREFIX = 'Select'; - -const classes = { - formControl: `${PREFIX}-formControl` -}; - -const StyledTextField - = styled(TextField -)(() => ({ - [`& .${classes.formControl}`]: { - minWidth: "15ch", - } -})); - export interface SelectOption { value: string displayName: string @@ -51,7 +36,7 @@ const Select: React.FC = ({ return ( multiple - className={clsx(classes.formControl, className)} + className={className} autoHighlight autoSelect options={options} diff --git a/src/components/TextBox.tsx b/src/components/TextBox.tsx index b85f2281c..895cbc251 100644 --- a/src/components/TextBox.tsx +++ b/src/components/TextBox.tsx @@ -1,5 +1,5 @@ import React from "react" -import { TextField } from "@material-ui/core" +import { TextField } from "@mui/material" import ExternalLink from "./ExternalLink" export interface TextBoxProps { diff --git a/src/components/WithHelpText.tsx b/src/components/WithHelpText.tsx index f8147529a..a99dd6e64 100644 --- a/src/components/WithHelpText.tsx +++ b/src/components/WithHelpText.tsx @@ -108,12 +108,6 @@ interface WithHelpTextProps { shrink?: boolean hrGroup?: boolean } - -interface Props { - notched?: boolean - shrink?: boolean -} - const WithHelpText: React.FC> = ({ label, children, diff --git a/src/components/ga4/EnhancedEcommerce/ga-console.tsx b/src/components/ga4/EnhancedEcommerce/ga-console.tsx index 79cdaca05..0396f02f0 100644 --- a/src/components/ga4/EnhancedEcommerce/ga-console.tsx +++ b/src/components/ga4/EnhancedEcommerce/ga-console.tsx @@ -12,7 +12,7 @@ import Button from '@mui/material/Button'; import TextField from '@mui/material/TextField'; import {Link} from "gatsby"; import {Box, Typography} from "@mui/material"; -import {ChangeEvent, ReactNode, SyntheticEvent} from 'react'; +import {ReactNode, SyntheticEvent} from 'react'; type Props = { children: ReactNode, diff --git a/src/components/ga4/EventBuilder/ValidateEvent/handlers/formatCheckLib.ts b/src/components/ga4/EventBuilder/ValidateEvent/handlers/formatCheckLib.ts index cedc1207d..b6a72d53a 100644 --- a/src/components/ga4/EventBuilder/ValidateEvent/handlers/formatCheckLib.ts +++ b/src/components/ga4/EventBuilder/ValidateEvent/handlers/formatCheckLib.ts @@ -1,7 +1,8 @@ -import { ValidationMessage } from "../../types" +import {ValidationMessage} from "../../types" import 'object-sizeof' import sizeof from "object-sizeof" -import { eventDefinitions } from "../schemas/eventTypes/eventDefinitions" +import {eventDefinitions} from "../schemas/eventTypes/eventDefinitions" +import {InstanceId} from "../../types" const RESERVED_EVENT_NAMES = [ "ad_activeview", "ad_click", "ad_exposure", "ad_impression", "ad_query", diff --git a/src/components/ga4/EventBuilder/ValidateEvent/index.tsx b/src/components/ga4/EventBuilder/ValidateEvent/index.tsx index bde16666b..43fa96e48 100644 --- a/src/components/ga4/EventBuilder/ValidateEvent/index.tsx +++ b/src/components/ga4/EventBuilder/ValidateEvent/index.tsx @@ -131,7 +131,7 @@ interface StyleProps { const focusFor = (message: ValidationMessage, useTextBox: boolean) => { const { fieldPath } = message let id: string | undefined - let labelValues: string[] = Object.values(Label) + const labelValues: string[] = Object.values(Label) if (labelValues.includes(fieldPath) && !useTextBox) { id = fieldPath @@ -170,9 +170,7 @@ const Template: React.FC = ({ }) => { const { instanceId, api_secret } = useContext(EventCtx)! - const classes = useStyles({ error, valid }) const payload = usePayload() - const { instanceId, api_secret } = useContext(EventCtx)! return ( = ({ {validationMessages.map((message, idx) => (
  • - {focusFor(message, useTextBox)} + {focusFor(message, useTextBox !== undefined && useTextBox)} {message.description}
    Documentation diff --git a/src/components/ga4/EventBuilder/ValidateEvent/usePayload.ts b/src/components/ga4/EventBuilder/ValidateEvent/usePayload.ts index b7e5d4a33..6c99e1f80 100644 --- a/src/components/ga4/EventBuilder/ValidateEvent/usePayload.ts +++ b/src/components/ga4/EventBuilder/ValidateEvent/usePayload.ts @@ -103,7 +103,7 @@ const usePayload = (): {} => { [userProperties] ) - const payload = useMemo(() => { + let payload = useMemo(() => { return { ...removeUndefined(clientIds), ...removeUndefined({ timestamp_micros }), diff --git a/src/components/ga4/EventBuilder/ValidateEvent/useValidateEvent.ts b/src/components/ga4/EventBuilder/ValidateEvent/useValidateEvent.ts index f678e1aa6..1299183e4 100644 --- a/src/components/ga4/EventBuilder/ValidateEvent/useValidateEvent.ts +++ b/src/components/ga4/EventBuilder/ValidateEvent/useValidateEvent.ts @@ -128,7 +128,7 @@ const useValidateEvent = (): Requestable< const copySharableLink = useCopy(url, "copied link to event") - const validatePayloadAttributes = (payload: any) => { + const validatePayloadAttributes = useCallback((payload: any) => { const validator = new Validator(baseContentSchema) const formatCheckErrors: ValidationMessage[] | [] = formatCheckLib( payload, @@ -150,7 +150,7 @@ const useValidateEvent = (): Requestable< } return [] - } + }, [api_secret, instanceId, useFirebase]) const validateEvent = useCallback(() => { if (status === RequestStatus.InProgress) { @@ -197,7 +197,7 @@ const useValidateEvent = (): Requestable< setValidationMessages(validatorErrors) setStatus(RequestStatus.Failed) } - }, [status, payload, api_secret, instanceId, useFirebase, payloadErrors, useTextBox, validatePayloadAttributes]) + }, [status, payload, api_secret, instanceId, useFirebase, useTextBox, validatePayloadAttributes]) const defineFieldCode = (error: JSONError) => { const { data } = error diff --git a/src/components/ga4/EventBuilder/index.tsx b/src/components/ga4/EventBuilder/index.tsx index be610f2fc..3d826819f 100644 --- a/src/components/ga4/EventBuilder/index.tsx +++ b/src/components/ga4/EventBuilder/index.tsx @@ -226,15 +226,7 @@ const EventBuilder: React.FC = () => { setNonPersonalizedAds, } = useInputs(categories) - useEffect(() => { - formatPayload() - }, []) - - useEffect(() => { - formatPayload() - }, [inputPayload]) - - const formatPayload = () => { + const formatPayload = React.useCallback( () => { try { if (inputPayload) { let payload = JSON.parse(inputPayload) as object @@ -250,7 +242,11 @@ const EventBuilder: React.FC = () => { setPayloadErrors(err.message) setPayloadObj({}) } - } + }, [inputPayload, setPayloadErrors, setPayloadObj]) + + useEffect(() => { + formatPayload() + }, [inputPayload, formatPayload]) return ( @@ -296,7 +292,6 @@ const EventBuilder: React.FC = () => { After choosing a client, fill out the inputs below. -
    { } { useTextBox && -
    -
    + <> { onChange={setMeasurementId} /> )} -
    { { payloadErrors && ( - {payloadErrors} - - } + tooltip={payloadErrors} placement={'top'} > { /> )} -
    + } { !useTextBox &&
    -
    +
    { /> )} -
    - - Parameters - - {items !== undefined && ( - <> - Items - - - )} - {(showAdvanced || (userProperties !== undefined && userProperties.length !== 0)) && ( <> @@ -762,7 +720,6 @@ const EventBuilder: React.FC = () => {
    } - Validate & Send event diff --git a/src/components/ga4/EventBuilder/useUserProperties.ts b/src/components/ga4/EventBuilder/useUserProperties.ts index a74e77a47..ce44f9344 100644 --- a/src/components/ga4/EventBuilder/useUserProperties.ts +++ b/src/components/ga4/EventBuilder/useUserProperties.ts @@ -36,7 +36,7 @@ const useUserProperties = () => { [updateUserProperty] ) - const setUserPopertyValue = useCallback( + const setUserPropertyValue = useCallback( (idx: number, value: string) => { updateUserProperty(idx, old => ({ ...old, value })) }, @@ -48,7 +48,7 @@ const useUserProperties = () => { addStringUserProperty, addNumberUserProperty, removeUserProperty, - setUserPopertyValue, + setUserPropertyValue, setUserPropertyName, } } diff --git a/src/components/ga4/QueryExplorer/DateRanges.tsx b/src/components/ga4/QueryExplorer/DateRanges.tsx index 3bf6d6ed1..82cd994b1 100644 --- a/src/components/ga4/QueryExplorer/DateRanges.tsx +++ b/src/components/ga4/QueryExplorer/DateRanges.tsx @@ -161,10 +161,6 @@ const useDateRanges: UseDateRanges = ({ setDateRanges }) => { } } -interface Props { - advanced: boolean -} - const dateRange = ( DateRange diff --git a/src/components/ga4/StreamPicker/index.tsx b/src/components/ga4/StreamPicker/index.tsx index 2091e971e..15d104d77 100644 --- a/src/components/ga4/StreamPicker/index.tsx +++ b/src/components/ga4/StreamPicker/index.tsx @@ -1,6 +1,6 @@ import * as React from "react" import { styled } from '@mui/material/styles'; -import { Dispatch, Requestable, successful } from "@/types" +import { Dispatch, successful } from "@/types" import Autocomplete from "@mui/material/Autocomplete" import TextField from "@mui/material/TextField" import Typography from "@mui/material/Typography" diff --git a/src/pages/ga4/enhanced-ecommerce/cart.tsx b/src/pages/ga4/enhanced-ecommerce/cart.tsx index a825dc1d8..dc84d6fa1 100644 --- a/src/pages/ga4/enhanced-ecommerce/cart.tsx +++ b/src/pages/ga4/enhanced-ecommerce/cart.tsx @@ -20,23 +20,7 @@ import {Footer} from "@/components/ga4/EnhancedEcommerce/footer"; import {LineItem} from "@/components/ga4/EnhancedEcommerce/line-item"; import {StoreContext} from '@/components/ga4/EnhancedEcommerce/store-context'; -import {Link} from 'gatsby'; -import { - table, - wrap, - totals, - grandTotal, - summary, - checkoutButton, - collapseColumn, - labelColumn, - imageHeader, - productHeader, - emptyStateContainer, - emptyStateHeading, - emptyStateLink, - title, -} from "./cart.module.css" +import {collapseColumn, emptyStateContainer, emptyStateHeading, grandTotal, imageHeader, labelColumn, productHeader, summary, table, title, totals, wrap,} from "./cart.module.css" interface Props { location: { pathname: string }, @@ -45,7 +29,7 @@ interface Props { export default (props: Props) => { const {cart, getCartSubtotal, addEvent} = React.useContext(StoreContext) - const lineItems = cart ? cart : []; + const lineItems = React.useMemo( () => cart ? cart : [], [cart]); const emptyCart = cart.length === 0; const taxes = 0; @@ -69,7 +53,7 @@ export default (props: Props) => { addEvent('view_cart', 'View cart.', snippet) - }, []); + }, [addEvent, lineItems]); return (