pull segments when user tab is selected

frontend/web/components/modals/CreateSegment.tsx

@@ -120,7 +120,6 @@ const CreateSegment: FC<CreateSegmentType> = ({
   const [description, setDescription] = useState(segment.description)
   const [name, setName] = useState<Segment['name']>(segment.name)
   const [rules, setRules] = useState<Segment['rules']>(segment.rules)
-  const [shouldUpdateIdentities, setShouldUpdateIdentities] = useState(false)
   useEffect(() => {
     if (segment) {
       setRules(segment.rules)
@@ -251,7 +250,6 @@ const CreateSegment: FC<CreateSegmentType> = ({
         resolve(true)
       }
     })
-    return Promise.resolve(true)
   }, [valueChanged, isEdit])
   useEffect(() => {
     setInterceptClose(onClosing)
@@ -276,32 +274,24 @@ const CreateSegment: FC<CreateSegmentType> = ({
     if (createSuccess && createSegmentData) {
       setSegment(createSegmentData)
       onComplete?.(createSegmentData)
-      setShouldUpdateIdentities(true)
     }
     //eslint-disable-next-line
   }, [createSuccess])
   useEffect(() => {
     if (updateSuccess && updateSegmentData) {
       setSegment(updateSegmentData)
       onComplete?.(updateSegmentData)
-      setShouldUpdateIdentities(true)
     }
     //eslint-disable-next-line
   }, [updateSuccess])
 
   useEffect(() => {
-    if (
-      shouldUpdateIdentities &&
-      tab === 2 &&
-      environmentId &&
-      environmentId !== 'ENVIRONMENT_API_KEY'
-    ) {
+    if (tab === 2 && environmentId) {
       identities?.results.forEach((identity) =>
         AppActions.getIdentitySegments(projectId, identity.id),
       )
-      setShouldUpdateIdentities(false)
     }
-  }, [shouldUpdateIdentities, tab, identities, projectId, environmentId])
+  }, [tab, identities, projectId, environmentId])
 
   const operators: Operator[] | null = _operators || Utils.getSegmentOperators()
   if (operators) {
@@ -632,15 +622,20 @@ const LoadingCreateSegment: FC<LoadingCreateSegmentType> = (props) => {
   const isEdge = Utils.getIsEdge()
 
   const { data: identities, isLoading: identitiesLoading } =
-    useGetIdentitiesQuery({
-      environmentId,
-      isEdge,
-      page: page.number,
-      pageType: page.pageType,
-      page_size: 10,
-      pages: page.pages,
-      search,
-    })
+    useGetIdentitiesQuery(
+      {
+        environmentId,
+        isEdge,
+        page: page.number,
+        pageType: page.pageType,
+        page_size: 10,
+        pages: page.pages,
+        search,
+      },
+      {
+        skip: !environmentId,
+      },
+    )
 
   return isLoading ? (
     <div className='text-center'>

frontend/web/components/modals/CreateSegmentUsersTabContent.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react'
+import React from 'react'
 import EnvironmentSelect from 'components/EnvironmentSelect'
 import IdentitySegmentsProvider from 'common/providers/IdentitySegmentsProvider'
 import PanelSearch from 'components/PanelSearch'
@@ -35,10 +35,6 @@ const CreateSegmentUsersTabContent: React.FC<
   setPage,
   setSearchInput,
 }) => {
-  useEffect(() => {
-    console.log({ identities })
-  }, [identities])
-
   return (
     <div className='my-4'>
       <InfoMessage collapseId={'random-identity-sample'}>

frontend/web/components/pages/SegmentsPage.tsx

@@ -40,8 +40,7 @@ type SegmentsPageType = {
 
 const SegmentsPage: FC<SegmentsPageType> = (props) => {
   const { projectId } = props.match.params
-  const environmentId =
-    ProjectStore.getEnvironment()?.api_key || 'ENVIRONMENT_API_KEY'
+  const environmentId = ProjectStore.getEnvironment()?.api_key
   const params = Utils.fromParam()
   const id = params.id
   const { search, searchInput, setSearchInput } = useSearchThrottle('')