Fix handling repeating groups

Author: olimsaidov

AGENTS.md

@@ -3,7 +3,7 @@
 * rendered questionnaire response item is node (one of the node stores implementing `INodeStore`)
 * questionnaire item is template for node (`QuestionnaireItem` backing each store)
 * nodes can have child nodes (`children` or `instances` on the store)
-* node can be either a display, a group, or a question (`DisplayStore`, `NonRepeatingGroupStore`/`RepeatingGroupStore`, `QuestionStore`)
+* node can be either a display, a group, or a question (`DisplayStore`, `NonRepeatingGroupStore`/`RepeatingGroupUmbrella`, `QuestionStore`)
 * display node cannot have child nodes
 * question node is answerable node
 * display node and group node are not answerable nodes

demo/app.tsx

@@ -22,9 +22,7 @@ type ApplyQuestionnaireButtonProps = {
   onClick: () => void;
 };
 
-function ApplyQuestionnaireButton({
-  onClick,
-}: ApplyQuestionnaireButtonProps) {
+function ApplyQuestionnaireButton({ onClick }: ApplyQuestionnaireButtonProps) {
   return (
     <button
       type="button"
@@ -45,10 +43,9 @@ function DensePanel({
   minSize,
   minWidthClass,
 }: DensePanelProps) {
-  const actionSlot =
-    headerAction ?? (
-      <span className="block h-6 w-6 flex-shrink-0" aria-hidden="true" />
-    );
+  const actionSlot = headerAction ?? (
+    <span className="block h-6 w-6 flex-shrink-0" aria-hidden="true" />
+  );
 
   return (
     <Panel
@@ -188,9 +185,7 @@ export function App() {
           minWidthClass="min-w-[16rem]"
           headerAction={
             hasPendingChanges ? (
-              <ApplyQuestionnaireButton
-                onClick={handleApplyQuestionnaire}
-              />
+              <ApplyQuestionnaireButton onClick={handleApplyQuestionnaire} />
             ) : undefined
           }
         >

eslint.config.js

@@ -20,6 +20,7 @@ export default tseslint.config(
       "react-refresh": reactRefresh,
     },
     rules: {
+      // "@typescript-eslint/no-unnecessary-condition": "error",
       ...reactHooks.configs.recommended.rules,
       "react-refresh/only-export-components": [
         "warn",

lib/__tests__/questionnaire-renderer.test.tsx

@@ -8,7 +8,7 @@
 import { describe, expect, it } from "vitest";
 
 describe("Renderer", () => {
-  it("updates QuestionnaireResponse when a user answers a question", async () => {
+  it("updates QuestionnaireResponse when a user answers a question", () => {
     // const questionnaire: Questionnaire = {
     //   resourceType: "Questionnaire",
     //   id: "test",

lib/components/common/answer-list.tsx

@@ -4,13 +4,13 @@ import { observer } from "mobx-react-lite";
 import type {
   AnswerType,
   AnswerValueType,
-  IQuestionStore,
+  IQuestionNode,
 } from "../../stores/types.ts";
 import { Button } from "../controls/button.tsx";
 import { Answer, RowRenderProps } from "./answer.tsx";
 
 export type AnswerListProps<T extends AnswerType> = {
-  item: IQuestionStore<T>;
+  item: IQuestionNode<T>;
   renderRow: (p: RowRenderProps<AnswerValueType<T>>) => ReactElement;
 };
 

lib/components/common/answer.tsx

@@ -12,7 +12,7 @@ import type {
   AnswerType,
   AnswerValueType,
   IAnswerInstance,
-  IQuestionStore,
+  IQuestionNode,
 } from "../../stores/types.ts";
 
 export type RowRenderProps<TValue> = {
@@ -26,7 +26,7 @@ export type RowRenderProps<TValue> = {
 };
 
 export type AnswerProps<T extends AnswerType> = {
-  item: IQuestionStore<T>;
+  item: IQuestionNode<T>;
   renderRow: (p: RowRenderProps<AnswerValueType<T>>) => ReactElement;
   answer: IAnswerInstance<AnswerValueType<T>>;
   index: number;
@@ -66,9 +66,9 @@ export const Answer = observer(function Answer<T extends AnswerType>({
           </Button>
         </div>
       )}
-      {!!answer.children?.length && (
+      {!!answer.nodes?.length && (
         <div className="af-answer-children">
-          <ItemsList items={answer.children} />
+          <ItemsList items={answer.nodes} />
         </div>
       )}
     </div>

lib/components/common/item-errors.tsx

@@ -1,10 +1,19 @@
 import "./item-errors.css";
 import { observer } from "mobx-react-lite";
-import { INodeStore } from "../../stores/types.ts";
+import {
+  IDisplayNode,
+  INonRepeatingGroupNode,
+  IQuestionNode,
+  IRepeatingGroupNode,
+} from "../../stores/types.ts";
 import { getItemErrorId } from "../../utils.ts";
 
 interface ItemErrorsProps {
-  item: INodeStore;
+  item:
+    | IQuestionNode
+    | IRepeatingGroupNode
+    | INonRepeatingGroupNode
+    | IDisplayNode;
 }
 
 export const ItemErrors = observer(function ItemErrors({

lib/components/common/item-header.tsx

@@ -1,11 +1,11 @@
 import "./item-header.css";
 import { ItemText } from "./item-text.tsx";
-import { INodeStore } from "../../stores/types.ts";
+import { INode } from "../../stores/types.ts";
 import { observer } from "mobx-react-lite";
 import { getItemHelpId, getItemLabelId } from "../../utils.ts";
 
 interface ItemHeaderProps {
-  item: INodeStore;
+  item: INode;
   htmlFor?: string;
   className?: string;
 }

lib/components/common/item-list.tsx

@@ -1,11 +1,11 @@
 import { observer } from "mobx-react-lite";
 import { ItemNode } from "./item-node.tsx";
-import { INodeStore } from "../../stores/types.ts";
+import { ICoreNode } from "../../stores/types.ts";
 
 export const ItemsList = observer(function ItemsList({
   items,
 }: {
-  items: INodeStore[];
+  items: ICoreNode[];
 }) {
   return (
     <>

lib/components/common/item-node.tsx

@@ -1,23 +1,24 @@
 import { observer } from "mobx-react-lite";
 import { DisplayNode } from "../nodes/display-node.tsx";
-import { INodeStore } from "../../stores/types.ts";
+import { ICoreNode } from "../../stores/types.ts";
 import { NonRepeatingGroupNode } from "../nodes/non-repeating-group-node.tsx";
-import { RepeatingGroupNode } from "../nodes/repeating-group-node.tsx";
+import { RepeatingGroupWrapper } from "../nodes/repeating-group-wrapper.tsx";
 import { QuestionNode } from "../nodes/question-node.tsx";
-import {
-  isDisplay,
-  isNonRepeatingGroup,
-  isRepeatingGroup,
-} from "../../utils.ts";
+import { isDisplayNode } from "../../stores/display-store.ts";
+import { isRepeatingGroupWrapper } from "../../stores/repeating-group-wrapper.ts";
+import { isNonRepeatingGroupNode } from "../../stores/non-repeating-group-store.ts";
+import { isQuestionNode } from "../../stores/question-store.ts";
 
 export const ItemNode = observer(function ItemNode({
   item,
 }: {
-  item: INodeStore;
+  item: ICoreNode;
 }) {
-  if (isDisplay(item)) return <DisplayNode item={item} />;
-  if (isNonRepeatingGroup(item)) return <NonRepeatingGroupNode item={item} />;
-  if (isRepeatingGroup(item)) return <RepeatingGroupNode item={item} />;
-
-  return <QuestionNode item={item} />;
+  if (isQuestionNode(item)) return <QuestionNode item={item} />;
+  if (isNonRepeatingGroupNode(item))
+    return <NonRepeatingGroupNode item={item} />;
+  if (isRepeatingGroupWrapper(item))
+    return <RepeatingGroupWrapper item={item} />;
+  if (isDisplayNode(item)) return <DisplayNode item={item} />;
+  return null;
 });