fix: re-sort programs after results are fetched

dhis2 · Dec 8, 2023 · 9170e41 · 9170e41
1 parent 5fcf6d2
commit 9170e41
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 22 deletions.
diff --git a/src/components/MainSidebar/ProgramDimensionsPanel/ProgramSelect.js b/src/components/MainSidebar/ProgramDimensionsPanel/ProgramSelect.js
@@ -124,23 +124,21 @@ const ProgramSelect = ({ prefix }) => {
                         empty={i18n.t('No programs found')}
                         loading={fetching}
                     >
-                        {selectedProgram?.id && (
+                        {(fetching || !programs) && selectedProgram?.id && (
                             <SingleSelectOption
                                 key={selectedProgram?.id}
                                 label={selectedProgram?.name}
                                 value={selectedProgram?.id}
                             />
                         )}
                         {!fetching &&
-                            programs
-                                ?.filter(({ id }) => id !== selectedProgram?.id)
-                                .map(({ id, name }) => (
-                                    <SingleSelectOption
-                                        key={id}
-                                        label={name}
-                                        value={id}
-                                    />
-                                ))}
+                            programs?.map(({ id, name }) => (
+                                <SingleSelectOption
+                                    key={id}
+                                    label={name}
+                                    value={id}
+                                />
+                            ))}
                     </SingleSelect>
                 </div>
             </div>

diff --git a/src/components/MainSidebar/ProgramDimensionsPanel/TypeSelect.js b/src/components/MainSidebar/ProgramDimensionsPanel/TypeSelect.js
@@ -71,23 +71,21 @@ const TypeSelect = () => {
                         noMatchText={i18n.t('No types found')}
                         loading={fetching}
                     >
-                        {selectedType?.id && (
+                        {(fetching || !types) && selectedType?.id && (
                             <SingleSelectOption
                                 key={selectedType?.id}
                                 label={selectedType?.name}
                                 value={selectedType?.id}
                             />
                         )}
                         {!fetching &&
-                            types
-                                ?.filter(({ id }) => id !== selectedType?.id)
-                                .map(({ id, name }) => (
-                                    <SingleSelectOption
-                                        key={id}
-                                        label={name}
-                                        value={id}
-                                    />
-                                ))}
+                            types?.map(({ id, name }) => (
+                                <SingleSelectOption
+                                    key={id}
+                                    label={name}
+                                    value={id}
+                                />
+                            ))}
                     </SingleSelect>
                 </div>
             </div>

diff --git a/src/components/MainSidebar/TrackedEntityDimensionsPanel/ProgramFilter.js b/src/components/MainSidebar/TrackedEntityDimensionsPanel/ProgramFilter.js
@@ -6,6 +6,7 @@ import PropTypes from 'prop-types'
 import React, { useEffect } from 'react'
 import { useSelector } from 'react-redux'
 import { DERIVED_USER_SETTINGS_DISPLAY_NAME_PROPERTY } from '../../../modules/userSettings.js'
+import { sGetMetadataById } from '../../../reducers/metadata.js'
 import { sGetUiEntityTypeId } from '../../../reducers/ui.js'
 import styles from '../ProgramDimensionsPanel/ProgramSelect.module.css'
 
@@ -30,6 +31,9 @@ const ProgramFilter = ({ setSelectedProgramId, selectedProgramId }) => {
         lazy: true,
     })
     const programs = data?.programs?.programs
+    const selectedProgram = useSelector((state) =>
+        sGetMetadataById(state, selectedProgramId)
+    )
 
     useEffect(() => {
         if (!called) {
@@ -66,8 +70,8 @@ const ProgramFilter = ({ setSelectedProgramId, selectedProgramId }) => {
                                 (!fetching && programs && selectedProgramId) ||
                                 ''
                             }
-                            onChange={({ selected }) =>
-                                setSelectedProgramId(selected)
+                            onChange={
+                                ({ selected }) => setSelectedProgramId(selected) // TODO: add program metadata to the store so it can be fetched with sGetMetadataById later
                             }
                             placeholder={i18n.t('Filter by program usage')}
                             maxHeight="max(60vh, 460px)"
@@ -79,6 +83,13 @@ const ProgramFilter = ({ setSelectedProgramId, selectedProgramId }) => {
                             clearText={i18n.t('Clear')}
                             loading={fetching}
                         >
+                            {(fetching || !programs) && selectedProgram?.id && (
+                                <SingleSelectOption
+                                    key={selectedProgram?.id}
+                                    label={selectedProgram?.name}
+                                    value={selectedProgram?.id}
+                                />
+                            )}
                             {!fetching &&
                                 programs?.map(({ id, name }) => (
                                     <SingleSelectOption