From 9170e415e5c2b49219d2bc08c27dfe4bcd1107a5 Mon Sep 17 00:00:00 2001
From: martinkrulltott <martin@moid.se>
Date: Fri, 8 Dec 2023 11:54:14 +0100
Subject: [PATCH] fix: re-sort programs after results are fetched

---
 .../ProgramDimensionsPanel/ProgramSelect.js    | 18 ++++++++----------
 .../ProgramDimensionsPanel/TypeSelect.js       | 18 ++++++++----------
 .../ProgramFilter.js                           | 15 +++++++++++++--
 3 files changed, 29 insertions(+), 22 deletions(-)

diff --git a/src/components/MainSidebar/ProgramDimensionsPanel/ProgramSelect.js b/src/components/MainSidebar/ProgramDimensionsPanel/ProgramSelect.js
index 91c9c163b..cbfd39203 100644
--- a/src/components/MainSidebar/ProgramDimensionsPanel/ProgramSelect.js
+++ b/src/components/MainSidebar/ProgramDimensionsPanel/ProgramSelect.js
@@ -124,7 +124,7 @@ const ProgramSelect = ({ prefix }) => {
                         empty={i18n.t('No programs found')}
                         loading={fetching}
                     >
-                        {selectedProgram?.id && (
+                        {(fetching || !programs) && selectedProgram?.id && (
                             <SingleSelectOption
                                 key={selectedProgram?.id}
                                 label={selectedProgram?.name}
@@ -132,15 +132,13 @@ const ProgramSelect = ({ prefix }) => {
                             />
                         )}
                         {!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
index 2da2d982e..e8e5cefc7 100644
--- a/src/components/MainSidebar/ProgramDimensionsPanel/TypeSelect.js
+++ b/src/components/MainSidebar/ProgramDimensionsPanel/TypeSelect.js
@@ -71,7 +71,7 @@ const TypeSelect = () => {
                         noMatchText={i18n.t('No types found')}
                         loading={fetching}
                     >
-                        {selectedType?.id && (
+                        {(fetching || !types) && selectedType?.id && (
                             <SingleSelectOption
                                 key={selectedType?.id}
                                 label={selectedType?.name}
@@ -79,15 +79,13 @@ const TypeSelect = () => {
                             />
                         )}
                         {!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
index 573b6f6c6..3526bee79 100644
--- 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