Merge branch 'main' into mta-1826

konveyor · Dec 11, 2023 · 15cf683 · 15cf683
2 parents 521fe79 + ca600a3
commit 15cf683
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 18 deletions.
diff --git a/client/src/app/components/answer-table/answer-table.tsx b/client/src/app/components/answer-table/answer-table.tsx
@@ -103,7 +103,7 @@ const AnswerTable: React.FC<IAnswerTableProps> = ({
           <Tbody>
             {currentPageItems?.map((answer, rowIndex) => {
               return (
-                <>
+                <React.Fragment key={rowIndex}>
                   <Tr key={answer.text} {...getTrProps({ item: answer })}>
                     <TableRowContentWithControls
                       {...tableControls}
@@ -141,23 +141,21 @@ const AnswerTable: React.FC<IAnswerTableProps> = ({
                   </Tr>
                   <Tr>
                     {!!answer?.applyTags?.length && (
-                      <>
-                        <div style={{ display: "flex" }}>
-                          <Text className={spacing.mrSm}>
-                            Apply Tags for this answer choice:
-                          </Text>
-                          {answer?.applyTags?.map((tag, index) => {
-                            return (
-                              <div key={index} style={{ flex: "0 0 6em" }}>
-                                <Label color="grey">{tag.tag}</Label>
-                              </div>
-                            );
-                          })}
-                        </div>
-                      </>
+                      <div style={{ display: "flex" }}>
+                        <Text className={spacing.mrSm}>
+                          Apply Tags for this answer choice:
+                        </Text>
+                        {answer?.applyTags?.map((tag, index) => {
+                          return (
+                            <div key={index} style={{ flex: "0 0 6em" }}>
+                              <Label color="grey">{tag.tag}</Label>
+                            </div>
+                          );
+                        })}
+                      </div>
                     )}
                   </Tr>
-                </>
+                </React.Fragment>
               );
             })}
           </Tbody>

diff --git a/client/src/app/components/questions-table/questions-table.tsx b/client/src/app/components/questions-table/questions-table.tsx
@@ -99,7 +99,7 @@ const QuestionsTable: React.FC<{
                 section.questions.includes(question)
               )?.name || "";
             return (
-              <>
+              <React.Fragment key={rowIndex}>
                 <Tr key={question.text} {...getTrProps({ item: question })}>
                   <TableRowContentWithControls
                     {...tableControls}
@@ -140,7 +140,7 @@ const QuestionsTable: React.FC<{
                     </Td>
                   </Tr>
                 ) : null}
-              </>
+              </React.Fragment>
             );
           })}
         </Tbody>

diff --git 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,