🐛 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 <[email protected]>

Author: sjd78

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,