From f6dc53e7a2164d4ec660b53c616202fcb30dde9b Mon Sep 17 00:00:00 2001
From: Scott Dickerson <sdickers@redhat.com>
Date: Thu, 7 Dec 2023 09:06:54 -0500
Subject: [PATCH] :bug: Sort Questionnaire items on fetch (#1593)

A questionnaire's sections, questions and answers all have a order key.
The key needs to be present in the defining yaml file, but does not need
to be in sorted order. To ensure that the UI always has questionnaire
items in proper order order, sort everything in the fetch hooks.

Note: Hub returns the questionnaire in the same order as the original
yaml file. We need to make sure things are sorted properly.

Signed-off-by: Scott J Dickerson <sdickers@redhat.com>
---
 client/src/app/queries/questionnaires.ts | 22 ++++++++++++++++++++++
 1 file changed, 22 insertions(+)

diff --git a/client/src/app/queries/questionnaires.ts b/client/src/app/queries/questionnaires.ts
index d56d4aab9d..517ce38256 100644
--- a/client/src/app/queries/questionnaires.ts
+++ b/client/src/app/queries/questionnaires.ts
@@ -16,11 +16,31 @@ import saveAs from "file-saver";
 export const QuestionnairesQueryKey = "questionnaires";
 export const QuestionnaireByIdQueryKey = "questionnaireById";
 
+/**
+ * For a Questionnaire, walk the structure and sort lists by order if the items
+ * in that list have an order.  Hub stores things in the document order not logical
+ * order.  UI needs to have things in logical order.
+ */
+function inPlaceSortByOrder(q: Questionnaire) {
+  q.sections.sort((a, b) => a.order - b.order);
+  q.sections.forEach((s) => {
+    s.questions.sort((a, b) => a.order - b.order);
+    s.questions.forEach((q) => {
+      q.answers.sort((a, b) => a.order - b.order);
+    });
+  });
+  return q;
+}
+
 export const useFetchQuestionnaires = () => {
   const { isLoading, data, error } = useQuery({
     queryKey: [QuestionnairesQueryKey],
     queryFn: getQuestionnaires,
     onError: (error: AxiosError) => console.log("error, ", error),
+    select: (questionnaires) => {
+      questionnaires.forEach((q) => inPlaceSortByOrder(q));
+      return questionnaires;
+    },
   });
   return {
     questionnaires: data || [],
@@ -72,7 +92,9 @@ export const useFetchQuestionnaireById = (id: number | string) => {
     queryKey: [QuestionnaireByIdQueryKey, id],
     queryFn: () => getQuestionnaireById<Questionnaire>(id),
     onError: (error: AxiosError) => console.log("error, ", error),
+    select: (q) => inPlaceSortByOrder(q),
   });
+
   return {
     questionnaire: data,
     isFetching: isLoading,