Fix/ts errors 2024 07 02 (#504)

* FormField: type resolved field type

* FieldTypeBoolean: cast boolean value to string

* CallbackPage: add children as props

* add comment to replace reveal

* fetchFormAttributes: add id as optional param

* fetchFormAttributesRequest: update comment

* ApplicationSubsection: remove field prop from FormField

* user manager Global module: add comments

* application saga: uploadAttachment typing

* fetchApplicationRelatedAttachments: payload type fix

src/application/actions.ts

@@ -1,5 +1,5 @@
 import { createAction } from "redux-actions";
-import type { ApplicantInfoCheckAttributesNotFoundAction, ApplicationRelatedAttachmentsNotFoundAction, AttachmentAttributesNotFoundAction, AttributesNotFoundAction, DeleteUploadAction, FetchApplicantInfoCheckAttributesAction, FetchApplicationRelatedAttachmentsAction, FetchAttachmentAttributesAction, FetchAttributesAction, FetchFormAttributesAction, FetchPendingUploadsAction, FormAttributesNotFoundAction, PendingUploadsNotFoundAction, ReceiveApplicantInfoCheckAttributesAction, ReceiveApplicationRelatedAttachmentsAction, ReceiveAttachmentAttributesAction, ReceiveAttachmentMethodsAction, ReceiveAttributesAction, ReceiveFileOperationFinishedAction, ReceiveFormAttributesAction, ReceiveMethodsAction, ReceivePendingUploadsAction, ReceiveUpdatedApplicantInfoCheckItemAction, ReceiveUpdatedTargetInfoCheckItemAction, UploadFileAction } from "application/types";
+import type { ApplicantInfoCheckAttributesNotFoundAction, ApplicationRelatedAttachmentsNotFoundAction, AttachmentAttributesNotFoundAction, AttributesNotFoundAction, DeleteUploadAction, FetchApplicantInfoCheckAttributesAction, FetchApplicationRelatedAttachmentsAction, FetchAttachmentAttributesAction, FetchAttributesAction, FetchFormAttributesAction, FetchPendingUploadsAction, FormAttributesNotFoundAction, PendingUploadsNotFoundAction, ReceiveApplicantInfoCheckAttributesAction, ReceiveApplicationRelatedAttachmentsAction, ReceiveAttachmentAttributesAction, ReceiveAttachmentMethodsAction, ReceiveAttributesAction, ReceiveFileOperationFinishedAction, ReceiveFormAttributesAction, ReceiveMethodsAction, ReceivePendingUploadsAction, ReceiveUpdatedApplicantInfoCheckItemAction, ReceiveUpdatedTargetInfoCheckItemAction, UploadAttachmentPayload, UploadFileAction } from "application/types";
 import type { Attributes, Methods } from "types";
 export const fetchAttributes = (): FetchAttributesAction => createAction('mvj/application/FETCH_ATTRIBUTES')();
 export const receiveMethods = (methods: Methods): ReceiveMethodsAction => createAction('mvj/application/RECEIVE_METHODS')(methods);
@@ -17,11 +17,11 @@ export const fetchAttachmentAttributes = (): FetchAttachmentAttributesAction =>
 export const receiveAttachmentAttributes = (payload: Record<string, any>): ReceiveAttachmentAttributesAction => createAction('mvj/application/RECEIVE_ATTACHMENT_ATTRIBUTES')(payload);
 export const receiveAttachmentMethods = (payload: Record<string, any>): ReceiveAttachmentMethodsAction => createAction('mvj/application/RECEIVE_ATTACHMENT_METHODS')(payload);
 export const attachmentAttributesNotFound = (): AttachmentAttributesNotFoundAction => createAction('mvj/application/ATTACHMENT_ATTRIBUTES_NOT_FOUND')();
-export const fetchApplicationRelatedAttachments = (payload: Record<string, any>): FetchApplicationRelatedAttachmentsAction => createAction('mvj/application/FETCH_ATTACHMENTS')(payload);
+export const fetchApplicationRelatedAttachments = (payload: number | null | undefined): FetchApplicationRelatedAttachmentsAction => createAction('mvj/application/FETCH_ATTACHMENTS')(payload);
 export const receiveApplicationRelatedAttachments = (payload: Record<string, any>): ReceiveApplicationRelatedAttachmentsAction => createAction('mvj/application/RECEIVE_ATTACHMENTS')(payload);
 export const applicationRelatedAttachmentsNotFound = (payload?: Record<string, any>): ApplicationRelatedAttachmentsNotFoundAction => createAction('mvj/application/ATTACHMENTS_NOT_FOUND')(payload);
 export const deleteUploadedAttachment = (payload: Record<string, any>): DeleteUploadAction => createAction('mvj/application/DELETE_UPLOAD')(payload);
-export const uploadAttachment = (payload: Record<string, any>): UploadFileAction => createAction('mvj/application/UPLOAD_FILE')(payload);
+export const uploadAttachment = (payload: UploadAttachmentPayload): UploadFileAction => createAction('mvj/application/UPLOAD_FILE')(payload);
 export const fetchPendingUploads = (): FetchPendingUploadsAction => createAction('mvj/application/FETCH_PENDING_UPLOADS')();
 export const receivePendingUploads = (payload: Record<string, any>): ReceivePendingUploadsAction => createAction('mvj/application/RECEIVE_PENDING_UPLOADS')(payload);
 export const pendingUploadsNotFound = (): PendingUploadsNotFoundAction => createAction('mvj/application/PENDING_UPLOADS_NOT_FOUND')();

src/application/components/ApplicationSubsection.tsx

@@ -310,8 +310,7 @@ const ApplicationFormSubsectionFields = connect((state, props) => ({
     }
 
     return <Column {...columnWidths} className="ApplicationFormField__container">
-          {/** @ts-ignore: No overload matches this call. */}
-          <FormField name={`${fieldName}.value`} field={field} fieldAttributes={{
+          <FormField name={`${fieldName}.value`} fieldAttributes={{
             read_only: false,
             type: fieldType,
             label: field.label,

src/application/requests.ts

@@ -1,6 +1,7 @@
 import callApi from "api/callApi";
 import createUrl from "api/createUrl";
 import callUploadRequest from "api/callUploadRequest";
+import { UploadFileData } from "./types";
 export const fetchAttributesRequest = (): Generator<any, any, any> => {
   return callApi(new Request(createUrl('answer/'), {
     method: 'OPTIONS'
@@ -26,7 +27,8 @@ export const editApplicationRequest = (id: number, payload: Record<string, any>)
     body: JSON.stringify(payload)
   }));
 };
-export const fetchFormAttributesRequest = (): Generator<any, any, any> => {
+// TODO: Why is id hardcoded?
+export const fetchFormAttributesRequest = (id?: number): Generator<any, any, any> => {
   return callApi(new Request(createUrl(`form/1/`), {
     method: 'OPTIONS'
   }));
@@ -36,15 +38,12 @@ export const fetchAttachmentAttributesRequest = (): Generator<any, any, any> =>
     method: 'OPTIONS'
   }));
 };
-export const uploadFileRequest = ({
-  field,
-  file,
-  answer
-}: {
-  field: number;
-  file: File;
-  answer: number | null | undefined;
-}): Generator<any, any, any> => {
+export const uploadFileRequest = (fileData: UploadFileData): Generator<any, any, any> => {
+  const {
+    field,
+    file,
+    answer
+  } = fileData;
   const formData = new FormData();
   formData.append('field', field.toString());
   formData.append('name', file.name);

src/application/saga.ts

@@ -64,7 +64,7 @@ function* fetchApplicantInfoCheckAttributesSaga(): Generator<any, any, any> {
 
 function* receiveUpdatedApplicantInfoCheckItemSaga({
   payload,
-  type: any
+  type
 }: ReceiveUpdatedTargetInfoCheckItemAction): Generator<any, any, any> {
   const formName = getApplicantInfoCheckFormName(payload.id);
   const oldValues = yield select(getFormValues(formName));
@@ -77,15 +77,14 @@ function* receiveUpdatedApplicantInfoCheckItemSaga({
 
 function* fetchFormAttributesSaga({
   payload: id,
-  type: any
+  type
 }): Generator<any, any, any> {
   try {
     const {
       response: {
         status: statusCode
       },
       bodyAsJson
-    // @ts-ignore: No overload matches this call.
     } = yield call(fetchFormAttributesRequest, id);
 
     switch (statusCode) {
@@ -135,7 +134,7 @@ export function* fetchAttachmentAttributesSaga(): Generator<any, any, any> {
 
 function* fetchApplicationRelatedAttachmentsSaga({
   payload: id,
-  type: any
+  type
 }): Generator<any, any, any> {
   try {
     const {
@@ -172,7 +171,7 @@ function* fetchApplicationRelatedAttachmentsSaga({
 
 function* deleteUploadSaga({
   payload,
-  type: any
+  type
 }: DeleteUploadAction): Generator<any, any, any> {
   try {
     yield call(deleteUploadRequest, payload.id);
@@ -192,15 +191,14 @@ function* deleteUploadSaga({
 
 function* uploadFileSaga({
   payload,
-  type: any
+  type
 }: UploadFileAction): Generator<any, any, any> {
   try {
     const {
       path,
       callback,
       fileData
     } = payload;
-    //@ts-ignore: No overload matches this call.
     const result = yield call(uploadFileRequest, fileData);
     yield put(receiveFileOperationFinished());
 
@@ -245,7 +243,7 @@ function* fetchPendingUploadsSaga(): Generator<any, any, any> {
 
 function* receiveUpdatedTargetInfoCheckItemSaga({
   payload,
-  type: any
+  type
 }: ReceiveUpdatedTargetInfoCheckItemAction): Generator<any, any, any> {
   yield put(initialize(payload.targetForm, payload.data));
 }

src/application/types.ts

@@ -79,6 +79,16 @@ export type SectionExtraComponentProps = {
   identifier: string;
   topLevel: boolean;
 };
+export type UploadFileData = {
+  field: number;
+  file: File;
+  answer: number | null | undefined;
+};
+export type UploadAttachmentPayload = {
+  fileData: UploadFileData;
+  callback?: (path: string, fileData: UploadedFileMeta) => void;
+  path: string;
+}
 export type UploadedFileMeta = {
   id: number;
   attachment: string;
@@ -128,11 +138,7 @@ export type FetchApplicationRelatedAttachmentsAction = Action<string, void>;
 export type ReceiveApplicationRelatedAttachmentsAction = Action<string, Record<string, any>>;
 export type ApplicationRelatedAttachmentsNotFoundAction = Action<string, void>;
 export type DeleteUploadAction = Action<string, Record<string, any>>;
-export type UploadFileAction = Action<string, {
-  fileData: Record<string, any>;
-  callback?: (path: string, fileData: UploadedFileMeta) => void;
-  path: string;
-}>;
+export type UploadFileAction = Action<string, UploadAttachmentPayload>;
 export type FetchPendingUploadsAction = Action<string, void>;
 export type ReceivePendingUploadsAction = Action<string, Record<string, any>>;
 export type PendingUploadsNotFoundAction = Action<string, void>;

src/auth/components/CallbackPage.tsx

@@ -1,13 +1,19 @@
 import React, { PureComponent } from "react";
 import { withRouter } from "react-router";
-import { CallbackComponent } from "redux-oidc";
+import { CallbackComponent, CallbackComponentProps } from "redux-oidc";
 import { getRedirectUrlFromSessionStorage } from "util/storage";
 import userManager from "auth/util/user-manager";
 import { getRouteById, Routes } from "root/routes";
 type Props = {
   history: Record<string, any>;
 };
 
+const CallbackComponentWithChildren = ({ children, ...rest }: CallbackComponentProps & { children: React.ReactNode }): React.ReactNode => {
+  return <CallbackComponent {...rest}>
+        {children}
+      </CallbackComponent>;
+}
+
 class CallbackPage extends PureComponent<Props> {
   successCallback = () => {
     const {
@@ -17,10 +23,9 @@ class CallbackPage extends PureComponent<Props> {
   };
 
   render() {
-    // @ts-ignore: No overload matches this call.
-    return <CallbackComponent errorCallback={this.successCallback} successCallback={this.successCallback} userManager={userManager}>
+    return <CallbackComponentWithChildren errorCallback={this.successCallback} successCallback={this.successCallback} userManager={userManager}>
         <div></div>
-      </CallbackComponent>;
+      </CallbackComponentWithChildren>;
   }
 
 }

src/auth/util/user-manager.ts

@@ -1,4 +1,6 @@
 // @ts-ignore: Module '"oidc-client"' has no exported member 'Global'
+// oidc-client has exported Global, but it is not in the types, so we ignore the error.
+// TODO: migrate to oidc-client-ts, because oidc-client is not maintained anymore
 import { Global, Log, UserManager, WebStorageStateStore } from "oidc-client";
 const userManagerConfig = {
   authority: process.env.OPENID_CONNECT_AUTHORITY_URL || 'https://api.hel.fi/sso/openid/',

src/components/form/FieldTypeBoolean.tsx

@@ -51,8 +51,7 @@ const FieldTypeBoolean = ({
         label: optionLabel
       } = option;
       return <label key={index} className='option-label'>
-            {/** @ts-ignore: Type 'boolean' is not assignable to type 'string | number | readonly string[]'. */}
-            <input type='radio' checked={optionValue === value} name={name} onChange={handleChange} value={optionValue} />
+            <input type='radio' checked={optionValue === value} name={name} onChange={handleChange} value={Boolean(optionValue).toString()} />
             <span>{optionLabel}</span>
           </label>;
     })}

src/components/form/FormField.tsx

@@ -70,8 +70,7 @@ const Types = {
   [FieldTypeOptions.TEXTAREA]: 'text'
 };
 
-
-const resolveFieldType = (type: string): Record<string, any> => Object.prototype.hasOwnProperty.call(FieldTypes, type) ? FieldTypes[type] : FieldTypeBasic;
+const resolveFieldType = (type: string): React.ComponentType<any>  => Object.prototype.hasOwnProperty.call(FieldTypes, type) ? FieldTypes[type] : FieldTypeBasic;
 const resolveType = (type: string): string | null | undefined => Object.prototype.hasOwnProperty.call(Types, type) ? Types[type] : null;
 
 type InputProps = {
@@ -212,7 +211,7 @@ const FormFieldInput = ({
         <div className={classNames('form-field__component', {
         'has-unit': unit
       })}>
-        { // @ts-ignore: No overload matches this call
+        {
           createElement(fieldComponent, {
           autoBlur,
           autoComplete,

src/foundation/reveal.tsx

@@ -1,4 +1,5 @@
 // @ts-nocheck: missing static type checking
+// TODO: Replace reveal with HDS Dialog: https://hds.hel.fi/components/dialog/code/
 import React, { Component } from "react";
 import PropTypes from "prop-types";
 import hoistsStatics from "hoist-non-react-statics";