🐛 Add unique keys for answers and questions

[ibolton336]

Resolves https://issues.redhat.com/browse/MTA-1385

[codecov]

Codecov Report

All modified lines are covered by tests ✅

Comparison is base (99ceb37) 40.93% compared to head (a200b85) 40.93%.

Additional details and impacted files

@@           Coverage Diff           @@
##             main    #1430   +/-   ##
=======================================
  Coverage   40.93%   40.93%           
=======================================
  Files         139      139           
  Lines        4424     4424           
  Branches     1013     1013           
=======================================
  Hits         1811     1811           
  Misses       2601     2601           
  Partials       12       12           

Flag	Coverage Δ
client	40.93% <100.00%> (ø)
server	∅ <ø> (∅)

Flags with carried forward coverage won't be shown. Click here to find out more.

Files	Coverage Δ
client/src/app/pages/assessment/form-utils.ts	100.00% <100.00%> (ø)

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[sjd78]

Including the text to display to the user as part of the field key feels a bit hackish. There isn't any more of a guarantee that the text between questions or answers will be any more unique than the orders.

I do have a suggestion (maybe also a bit hackish, but in a different way).

Since the questionnaires are read-only after being fetched, why not add a select function to the react-query queries that generate frontend only hashs for things that need it? Then the hash can be easily referenced as part of a key and we're not dependent on hub inserting those kinds of values for us. And if we use a non-enumerable prop definition, it shouldn't even make it to JSON.stringify() if the object gets posted back to hub...

So something like...

add a few new deps:

npm install object-hash -w client
npm install --save-dev @types/object-hash -w client     

models.ts:

export interface Section {
  hash?: string; // frontend generated
  name: string;
  questions: Question[];
  order: number;
}

export interface Question {
  hash?: string; // frontend generated
  answers: Answer[];
  text: string;
  order: number;
  explanation?: string;
  includeFor?: CategorizedTag[];
  excludeFor?: CategorizedTag[];
}

client/src/app/queries/assessments.ts:

import { sha1 } from "object-hash";

const addHashProp = (obj: object) => {
  Object.defineProperty(obj, "hash", {
    enumerable: false,
    configurable: false,
    writable: false,
    value: sha1(obj),
  });
};

const addHashes = (data: Assessment | undefined) => {
  if (data?.sections) {
    data.sections.forEach((section) => {
      addHashProp(section);

      section.questions?.forEach((question) => {
        addHashProp(question);
      });
    });
  }
  return data;
};

export const useFetchAssessmentById = (id?: number | string) => {
  const { data, isLoading, error, isFetching } = useQuery({
    queryKey: [assessmentQueryKey, id],
    queryFn: () => (id ? getAssessmentById(id) : undefined),
    select: addHashes,
    onError: (error: AxiosError) => console.log("error, ", error),
    enabled: !!id,
  });
  return {
    assessment: data,
    isFetching: isLoading || isFetching,
    fetchError: error,
  };
};

Then you'll have a hash on every section and every question that will be stable across every fetch.

Key the forms on that hash and it will only ever be a problem if everything between a section (or a question) is identical.

[ibolton336]

Love the idea of leveraging the select field. I will open a follow up issue for this.