Repository: supabase/supabase
File: apps/studio/components/interfaces/Connect/Connect.tsx (TypeScript)

Code before:
    setQuerySource(null)
    setQueryMethod(null)
  }

  const handleDialogChange = (open: boolean) => {
    if (!open) {
      setShowConnect(null)
      setTab(null)
      resetQueryStates()
    } else {
      setShowConnect(open)
    }
  }

  useEffect(() => {
    if (!showConnect) return
    const hasConnectTabInUrl = typeof router.query.connectTab !== 'undefined'
    if (!hasConnectTabInUrl && (queryFramework || queryUsing || queryWith)) {
      const inferred = inferConnectTabFromParentKey(queryFramework)
      if (inferred) {
        setTab(inferred)
        if (inferred === 'frameworks') setConnectionObject(FRAMEWORKS)
        if (inferred === 'mobiles') setConnectionObject(MOBILES)
        if (inferred === 'orms') setConnectionObject(ORMS)
      }
    }
  }, [showConnect, router.query.connectTab, queryFramework, queryUsing, queryWith, setTab])

  useEffect(() => {
    if (!showConnect) return

    const newConnectionObject = getConnectionObjectForTab(tab)
    setConnectionObject(newConnectionObject)

    const parent =
      newConnectionObject.find((item) => item.key === queryFramework) ?? newConnectionObject[0]
    setSelectedParent(parent?.key ?? '')

    if (queryFramework) {
      if (parent?.key !== queryFramework) setQueryFramework(parent?.key ?? null)
    }

    const child =
      parent?.children.find((child) => child.key === queryUsing) ?? parent?.children?.[0]
    setSelectedChild(child?.key ?? '')

    if (queryUsing) {
      if (child?.key !== queryUsing) setQueryUsing(child?.key ?? null)
    }

    const grandchild =

Review comment (suggestion):
Can this if statement be evaluated in the previous clause? Not sure why its nested like this. So something like the following


```suggestion
    const noConnectTabInUrl = typeof router.query.connectTab === 'undefined'
    const hasQuery = queryFramework || queryUsing || queryWith
    const inferred = inferConnectTagFromParentKey(queryFramework)
    if (!hasConnectTabInUrl && hasQuery && inferred) {
        setTab(inferred)
        if (inferred === 'frameworks') setConnectionObject(FRAMEWORKS)
        if (inferred === 'mobiles') setConnectionObject(MOBILES)
        if (inferred === 'orms') setConnectionObject(ORMS)
    }
```

Code after:
    setQuerySource(null)
    setQueryMethod(null)
  }

  const handleDialogChange = (open: boolean) => {
    if (!open) {
      setShowConnect(null)
      setTab(null)
      resetQueryStates()
    } else {
      setShowConnect(open)
    }
  }

  useEffect(() => {
    if (!showConnect) return
    const noConnectTabInUrl = typeof router.query.connectTab === 'undefined'
    const hasQuery = queryFramework || queryUsing || queryWith
    const inferred = inferConnectTabFromParentKey(queryFramework)

    if (noConnectTabInUrl && hasQuery && inferred) {
      setTab(inferred)
      if (inferred === 'frameworks') setConnectionObject(FRAMEWORKS)
      if (inferred === 'mobiles') setConnectionObject(MOBILES)
      if (inferred === 'orms') setConnectionObject(ORMS)
    }
  }, [showConnect, router.query.connectTab, queryFramework, queryUsing, queryWith, setTab])

  useEffect(() => {
    if (!showConnect) return

    const newConnectionObject = getConnectionObjectForTab(tab)
    setConnectionObject(newConnectionObject)

    const parent =
      newConnectionObject.find((item) => item.key === queryFramework) ?? newConnectionObject[0]
    setSelectedParent(parent?.key ?? '')

    if (queryFramework) {
      if (parent?.key !== queryFramework) setQueryFramework(parent?.key ?? null)
    }

    const child =
      parent?.children.find((child) => child.key === queryUsing) ?? parent?.children?.[0]
    setSelectedChild(child?.key ?? '')

    if (queryUsing) {
      if (child?.key !== queryUsing) setQueryUsing(child?.key ?? null)
    }

    const grandchild =