stopping point.

googleanalytics · Aug 31, 2021 · 08cf469 · 08cf469
1 parent ea16778
commit 08cf469
Show file tree

Hide file tree

Showing 12 changed files with 214 additions and 126 deletions.
diff --git a/src/components/ga4/EventBuilder/MPSecret/index.tsx b/src/components/ga4/EventBuilder/MPSecret/index.tsx
@@ -58,11 +58,29 @@ const MPSecret: React.FC<Props> = ({ secret, setSecret, useFirebase }) => {
   const formClasses = useFormStyles()
   const classes = useStyles()
 
-  const aps = useAccountPropertyStream(StorageKey.eventBuilderAPS, QueryParam, {
-    androidStreams: useFirebase,
-    webStreams: !useFirebase,
+  const aps = useAccountPropertyStream(
+    StorageKey.eventBuilderAPS,
+    QueryParam,
+    {
+      androidStreams: useFirebase,
+      iosStreams: useFirebase,
+      webStreams: !useFirebase,
+    },
+    true
+  )
+
+  const secretsRequest = useMPSecretsRequest({
+    aps,
   })
-  const secretsRequest = useMPSecretsRequest({ aps })
+
+  React.useEffect(() => {
+    if (successful(secretsRequest)) {
+      const secrets = successful(secretsRequest)!.secrets
+      console.log("setting to first secret")
+      setSecret(secrets?.[0])
+    }
+  }, [secretsRequest])
+
   const [creationError, setCreationError] = React.useState<any>()
 
   const {
@@ -75,7 +93,15 @@ const MPSecret: React.FC<Props> = ({ secret, setSecret, useFirebase }) => {
   return (
     <section className={classes.mpSecret}>
       <Typography>Choose an account, property, and stream.</Typography>
-      <StreamPicker autoFill streams {...aps} />
+      <StreamPicker
+        streams
+        {...aps}
+        noStreamsText={
+          useFirebase
+            ? "There are no iOS or Android streams for the selected property."
+            : "There are no web streams for the selected property."
+        }
+      />
       <Typography>
         Select an existing api_secret or create a new secret.
       </Typography>

diff --git a/src/components/ga4/EventBuilder/MPSecret/useCreateMPSecret.ts b/src/components/ga4/EventBuilder/MPSecret/useCreateMPSecret.ts
@@ -1,19 +1,15 @@
+import { Stream } from "@/types/ga4/StreamPicker"
 import { useCallback } from "react"
 import { useSelector } from "react-redux"
-import { AccountPropertyStream } from "../../StreamPicker/useAccountPropertyStream"
 
 const necessaryScopes = ["https://www.googleapis.com/auth/analytics.edit"]
 
-const useCreateMPSecret = (aps: AccountPropertyStream) => {
+const useCreateMPSecret = (stream: Stream | undefined) => {
   const gapi = useSelector((a: AppState) => a.gapi)
   const user = useSelector((a: AppState) => a.user)
   return useCallback(
     async (displayName: string) => {
-      if (
-        gapi === undefined ||
-        aps.stream === undefined ||
-        user === undefined
-      ) {
+      if (gapi === undefined || stream === undefined || user === undefined) {
         return
       }
       try {
@@ -24,7 +20,7 @@ const useCreateMPSecret = (aps: AccountPropertyStream) => {
         }
         // TODO - Update this once this is available in the client libraries.
         const response = await gapi.client.request({
-          path: `https://content-analyticsadmin.googleapis.com/v1alpha/${aps.stream.value.name}/measurementProtocolSecrets`,
+          path: `https://content-analyticsadmin.googleapis.com/v1alpha/${stream.value.name}/measurementProtocolSecrets`,
           method: "POST",
           body: JSON.stringify({
             display_name: displayName,
@@ -39,7 +35,7 @@ const useCreateMPSecret = (aps: AccountPropertyStream) => {
         }
       }
     },
-    [gapi, aps, user]
+    [gapi, stream, user]
   )
 }
 

diff --git a/src/components/ga4/EventBuilder/MPSecret/useGetMPSecrets.ts b/src/components/ga4/EventBuilder/MPSecret/useGetMPSecrets.ts
@@ -1,25 +1,25 @@
+import { Stream } from "@/types/ga4/StreamPicker"
 import { useCallback, useMemo } from "react"
 import { useSelector } from "react-redux"
-import { AccountPropertyStream } from "../../StreamPicker/useAccountPropertyStream"
 import { MPSecret } from "./useMPSecretsRequest"
 
-const useGetMPSecrets = (aps: AccountPropertyStream) => {
+const useGetMPSecrets = (stream: Stream | undefined) => {
   const gapi = useSelector((a: AppState) => a.gapi)
 
   const requestReady = useMemo(() => {
-    if (gapi === undefined || aps.stream === undefined) {
+    if (gapi === undefined || stream === undefined) {
       return false
     }
     return true
-  }, [gapi, aps])
+  }, [gapi, stream])
 
   const getMPSecrets = useCallback(async () => {
-    if (gapi === undefined || aps.stream === undefined) {
+    if (gapi === undefined || stream === undefined) {
       throw new Error("Invalid invariant - gapi & stream must be defined here.")
     }
     try {
       const response = await gapi.client.request({
-        path: `https://content-analyticsadmin.googleapis.com/v1alpha/${aps.stream.value.name}/measurementProtocolSecrets`,
+        path: `https://content-analyticsadmin.googleapis.com/v1alpha/${stream.value.name}/measurementProtocolSecrets`,
       })
       console.log({ response })
       return (response.result.measurementProtocolSecrets || []) as MPSecret[]
@@ -30,7 +30,7 @@ const useGetMPSecrets = (aps: AccountPropertyStream) => {
       )
       throw e
     }
-  }, [gapi, aps])
+  }, [gapi, stream])
 
   return { requestReady, getMPSecrets }
 }

diff --git a/src/components/ga4/EventBuilder/MPSecret/useMPSecretsRequest.ts b/src/components/ga4/EventBuilder/MPSecret/useMPSecretsRequest.ts
@@ -2,14 +2,14 @@ import { StorageKey } from "@/constants"
 import useCached from "@/hooks/useCached"
 import useRequestStatus from "@/hooks/useRequestStatus"
 import { Requestable, RequestStatus } from "@/types"
+import { Stream } from "@/types/ga4/StreamPicker"
 import moment from "moment"
 import { useCallback, useEffect } from "react"
-import { AccountPropertyStream } from "../../StreamPicker/useAccountPropertyStream"
 import useCreateMPSecret from "./useCreateMPSecret"
 import useGetMPSecrets from "./useGetMPSecrets"
 
 interface MPSecrets {
-  secrets: MPSecret[]
+  secrets: MPSecret[] | undefined
   createMPSecret: (displayName: string) => Promise<MPSecret>
 }
 
@@ -20,30 +20,23 @@ export interface MPSecret {
 }
 
 interface Args {
-  aps: AccountPropertyStream
+  stream: Stream | undefined
 }
-const useMPSecretsRequest = ({ aps }: Args): Requestable<MPSecrets> => {
+const useMPSecretsRequest = ({ stream }: Args): Requestable<MPSecrets> => {
   const { status, setFailed, setSuccessful, setInProgress } = useRequestStatus(
     RequestStatus.NotStarted
   )
 
-  useEffect(() => {
-    if (aps.stream === undefined) {
-      setFailed()
-    }
-  }, [setFailed, aps.stream])
-
   const {
     getMPSecrets: getMPSecretsLocal,
     requestReady: getMPSecretsRequestReady,
-  } = useGetMPSecrets(aps)
+  } = useGetMPSecrets(stream)
 
-  const createMPSecretLocal = useCreateMPSecret(aps)
+  const createMPSecretLocal = useCreateMPSecret(stream)
 
   const getMPSecrets = useCallback(async () => {
     setInProgress()
-    const secrets = await getMPSecretsLocal()
-    return secrets
+    return getMPSecretsLocal()
   }, [getMPSecretsLocal, setInProgress])
 
   const onError = useCallback(
@@ -56,7 +49,7 @@ const useMPSecretsRequest = ({ aps }: Args): Requestable<MPSecrets> => {
   )
 
   const { value: secrets, bustCache } = useCached(
-    `${StorageKey.eventBuilderMPSecrets}/${aps.stream?.value.name}` as StorageKey,
+    `${StorageKey.eventBuilderMPSecrets}/${stream?.value.name}` as StorageKey,
     getMPSecrets,
     moment.duration(5, "minutes"),
     getMPSecretsRequestReady,
@@ -78,6 +71,14 @@ const useMPSecretsRequest = ({ aps }: Args): Requestable<MPSecrets> => {
     }
   }, [secrets, setSuccessful, status])
 
+  if (stream === undefined) {
+    return {
+      status: RequestStatus.Successful,
+      secrets: undefined,
+      createMPSecret,
+    }
+  }
+
   if (
     status === RequestStatus.NotStarted ||
     status === RequestStatus.InProgress ||
@@ -88,9 +89,8 @@ const useMPSecretsRequest = ({ aps }: Args): Requestable<MPSecrets> => {
     if (secrets !== undefined) {
       return { status, secrets, createMPSecret }
     } else {
-      console.log({ aps, secrets })
-      // throw new Error("Invalid invariant - secrets must be defined here.")
-      return { status: RequestStatus.InProgress }
+      throw new Error("Invalid invariant - secrets must be defined here.")
+      // return { status: RequestStatus.InProgress }
     }
   }
 }

diff --git a/src/components/ga4/StreamPicker/index.tsx b/src/components/ga4/StreamPicker/index.tsx
@@ -29,15 +29,14 @@ interface CommonProps {
   property: PropertySummary | undefined
   setAccountID: Dispatch<string | undefined>
   setPropertyID: Dispatch<string | undefined>
-  autoFill?: boolean
 }
 
 interface WithStreams extends CommonProps {
   streams: true
   stream: Stream | undefined
   setStreamID: Dispatch<string | undefined>
   streamsRequest: Requestable<{ streams: Stream[] }>
-  updateToFirstStream: () => void
+  noStreamsText?: string
 }
 
 interface OnlyProperty extends CommonProps {
@@ -47,7 +46,7 @@ interface OnlyProperty extends CommonProps {
 export type StreamPickerProps = OnlyProperty | WithStreams
 
 const StreamPicker: React.FC<StreamPickerProps> = props => {
-  const { account, property, setAccountID, setPropertyID, autoFill } = props
+  const { account, property, setAccountID, setPropertyID } = props
   const classes = useStyles()
 
   const accountsAndPropertiesRequest = useAccountsAndProperties(account)
@@ -65,12 +64,6 @@ const StreamPicker: React.FC<StreamPickerProps> = props => {
         getOptionSelected={(a, b) => a.name === b.name}
         onChange={(_event, value) => {
           setAccountID(value === null ? undefined : value?.name)
-
-          if (autoFill) {
-            const property = value?.propertySummaries?.[0]
-            setPropertyID(property?.property)
-            props.streams && props.updateToFirstStream()
-          }
         }}
         renderOption={account => (
           <RenderOption
@@ -99,10 +92,6 @@ const StreamPicker: React.FC<StreamPickerProps> = props => {
         onChange={(_event, value) => {
           const property = value === null ? undefined : value
           setPropertyID(property?.property)
-
-          if (autoFill) {
-            props.streams && props.updateToFirstStream()
-          }
         }}
         renderOption={summary => (
           <RenderOption
@@ -128,7 +117,8 @@ const StreamPicker: React.FC<StreamPickerProps> = props => {
           noOptionsText={
             property === undefined
               ? "Select an account an property to populate this dropdown."
-              : "There are no streams for the selected property."
+              : props.noStreamsText ||
+                "There are no streams for the selected property."
           }
           value={props.stream || null}
           getOptionLabel={stream => stream.value.displayName!}