fix(ui): wait for org to be available then fetch org settings just once

ui/src/cloud/components/OrgSettings.tsx

@@ -1,34 +1,56 @@
 // Libraries
-import {PureComponent} from 'react'
+import {FunctionComponent, useEffect, useState} from 'react'
 import {connect} from 'react-redux'
+import {get} from 'lodash'
 
 // Constants
 import {CLOUD} from 'src/shared/constants'
 
+// Types
+import {AppState, Organization} from 'src/types'
+
 // Actions
 import {getOrgSettings as getOrgSettingsAction} from 'src/cloud/actions/orgsettings'
 
+interface PassedInProps {
+  children: React.ReactElement<any>
+}
+interface StateProps {
+  org: Organization
+}
 interface DispatchProps {
   getOrgSettings: typeof getOrgSettingsAction
 }
 
-class OrgSettings extends PureComponent<DispatchProps> {
+type Props = StateProps & DispatchProps & PassedInProps
-  public componentDidMount() {
-    if (CLOUD) {
-      this.props.getOrgSettings()
-    }
-  }
 
-  public render() {
+const OrgSettings: FunctionComponent<Props> = ({
-    return this.props.children
+  org,
-  }
+  getOrgSettings,
+  children,
+}) => {
+  const [hasFetchedOrgSettings, setHasFetchedOrgSettings] = useState<boolean>(
+    false
+  )
+  useEffect(() => {
+    if (CLOUD && org && !hasFetchedOrgSettings) {
+      setHasFetchedOrgSettings(true)
+      getOrgSettings()
+    }
+  }, [org])
+
+  return children
 }
 
+const mstp = (state: AppState): StateProps => ({
+  org: get(state, 'resources.orgs.org', null),
+})
+
 const mdtp: DispatchProps = {
   getOrgSettings: getOrgSettingsAction,
 }
 
-export default connect<{}, DispatchProps, {}>(
+export default connect<StateProps, DispatchProps, PassedInProps>(
-  null,
+  mstp,
   mdtp
 )(OrgSettings)