random notes

Author: danicc097

frontend/src/hooks/auth/useAuthenticatedUser.tsx

@@ -38,8 +38,6 @@ export default function useAuthenticatedUser() {
     currentUser.error?.status !== HttpStatus.UNAUTHORIZED_401
   // console.log({ isFirstRender })
 
-  console.log({ isAuthenticating })
-
   useEffect(() => {
     if (mountedRef.current && isFirstRender) {
       // FIXME: ... one-off logic (in theory, not working)

frontend/src/utils/formGeneration.tsx

@@ -321,6 +321,7 @@ export default function DynamicForm<Form extends object, IgnoredFormKeys extends
   return (
     <DynamicFormProvider value={{ formName, options, schemaFields: _schemaFields }}>
       <>
+        {/** TODO: usedebounce for all fields  */}
         <FormData />
         {/* TODO: if not visible (large forms), should show a popup arrow on viewport bottom left "Go to errors" to focus on callout */}
         <DynamicFormErrorCallout />
@@ -563,9 +564,14 @@ const ArrayOfObjectsChild = ({ index, formField, itemName, schemaKey }) => {
   const fieldWarnings = useFormSlice((state) => state.form[formName]?.customWarnings[itemFormField])
   const warningFn = options.fieldOptions?.[schemaKey]?.warningFn
   const formFieldWatch = form.watch(itemFormField)
+  // TODO: dynamic watching of all nested elements (for warning function recompute only)
+  // warningFn does rerender for
+  // const formArrayElementWatch = form.watch(`${itemFormField}.items.0`)
   const formSlice = useFormSlice()
 
   useEffect(() => {
+    // FIXME: warnings are not recalculated unless the array is modified.
+    // should update useffect deps watching nested values of current array element without triggering inf rerendering
     if (warningFn) {
       const warnings = joinWithAnd(warningFn(formFieldWatch))
       console.log({ warnings, fieldWarnings, formFieldWatch })
@@ -680,7 +686,8 @@ function FormData() {
   const form = useFormContext()
   const myFormState = useFormState({ control: form.control })
 
-  console.log(`form has errors: ${hasNonEmptyValue(myFormState.errors)}`)
+  const hasErrors = hasNonEmptyValue(myFormState.errors)
+  if (hasErrors) console.error('form has errors')
 
   let code = ''
   try {

frontend/src/views/DemoGeneratedForm/DemoGeneratedForm.tsx

@@ -359,7 +359,7 @@ export default function DemoGeneratedForm() {
             labels: {
               'base.closed': 'Closed',
               'base.description': 'Description',
-              // 'base.metadata': 'metadata', // ignored -> not a key
+              // 'base.metadata': 'metadata', // in excluded form keys
               'base.kanbanStepID': 'Kanban step', // if using KanbanStep transformer, then "Kanban step", "Kanban step name", etc.
               'base.targetDate': 'Target date',
               'demoProject.reopened': 'Reopened',
@@ -436,28 +436,16 @@ export default function DemoGeneratedForm() {
                     </Group>
                   )
                 },
-                formValueTransformer(el) {
-                  return el.workItemTagID
-                },
-                pillTransformer(el) {
-                  return <div>{el.name}</div>
-                },
-                labelColor(el) {
-                  return el.color
-                },
+                formValueTransformer: (el) => el.workItemTagID,
+                pillTransformer: (el) => <div>{el.name}</div>,
+                labelColor: (el) => el.color,
               }),
               'members.role': selectOptionsBuilder({
                 type: 'select',
                 values: WORK_ITEM_ROLES,
-                optionTransformer: (el) => {
-                  return <WorkItemRoleBadge role={el} />
-                },
-                formValueTransformer(el) {
-                  return el
-                },
-                pillTransformer(el) {
-                  return <WorkItemRoleBadge role={el} />
-                },
+                optionTransformer: (el) => <WorkItemRoleBadge role={el} />,
+                formValueTransformer: (el) => el,
+                pillTransformer: (el) => <WorkItemRoleBadge role={el} />,
               }),
             },
             input: {