refactor: migrate OrganisationSelect to TypeScript FC

frontend/web/components/OrganisationSelect.tsx

@@ -0,0 +1,38 @@
+import React, { FC } from 'react'
+import { useGetOrganisationsQuery } from 'common/services/useOrganisation'
+
+type OrganisationSelectProps = {
+  onChange: (value: number) => void
+  value?: number
+}
+
+const OrganisationSelect: FC<OrganisationSelectProps> = ({
+  onChange,
+  value,
+}) => {
+  const { data: organisations } = useGetOrganisationsQuery({})
+
+  const selectedOrg = organisations?.results?.find((org) => org.id === value)
+
+  return (
+    <div className="d-flex">
+        <Select
+          className="react-select w-100"
+          value={
+            selectedOrg
+              ? { label: selectedOrg.name, value: selectedOrg.id }
+              : null
+          }
+          onChange={({ value }: { value: number }) => {
+            onChange?.(value)
+          }}
+          options={organisations?.results?.map((organisation) => ({
+            label: organisation.name,
+            value: organisation.id,
+          }))}
+        />
+    </div>
+  )
+}
+
+export default OrganisationSelect

frontend/web/components/pages/GitHubSetupPage.tsx

@@ -37,7 +37,12 @@ const GitHubSetupPage: FC<GitHubSetupPageType> = ({ location }) => {
     new URLSearchParams(location.search).get('installation_id') || ''
   const githubIntegrationSetupFromFlagsmithValue: string =
     localStorage?.githubIntegrationSetupFromFlagsmith
-  const [organisation, setOrganisation] = useState<string>('')
+  const lastOrgId = localStorage.lastEnv
+    ? JSON.parse(localStorage.lastEnv).orgId
+    : undefined
+  const [organisation, setOrganisation] = useState<string>(
+    lastOrgId ? `${lastOrgId}` : '',
+  )
   const [project, setProject] = useState<any>({})
   const [projects, setProjects] = useState<ProjectType[]>([])
   const [repositoryName, setRepositoryName] = useState<string>('')
@@ -127,15 +132,16 @@ const GitHubSetupPage: FC<GitHubSetupPageType> = ({ location }) => {
           />
           <div className='mr-4 mb-4'>
             <label>Select your Flagsmith Organisation</label>
-            <OrganisationSelect
-              onChange={(organisationId: string) => {
-                setOrganisation(`${organisationId}`)
-                AppActions.selectOrganisation(organisationId)
-                AppActions.getOrganisation(organisationId)
-              }}
-              showSettings={false}
-              firstOrganisation
-            />
+            <div style={{ width: '500px' }}>
+              <OrganisationSelect
+                value={organisation ? parseInt(organisation) : undefined}
+                onChange={(organisationId) => {
+                  setOrganisation(`${organisationId}`)
+                  AppActions.selectOrganisation(organisationId)
+                  AppActions.getOrganisation(organisationId)
+                }}
+              />
+            </div>
           </div>
           <label>
             Select your Flagsmith Project and your Github Repository