Pr05 Typescript Migration #21: client/modules/User

client/common/Button.tsx

@@ -80,7 +80,7 @@ export interface ButtonProps extends React.HTMLAttributes<HTMLElement> {
   /**
    * If using a native button, specifies on an onClick action
    */
-  onClick?: () => void;
+  onClick?: (evt: React.MouseEvent<HTMLButtonElement>) => void;
   /**
    * If using a button, then type is defines the type of button
    */

client/common/useSyncFormTranslations.ts

@@ -1,30 +1,30 @@
 import { useEffect, MutableRefObject } from 'react';
+import type { FormApi } from 'final-form';
 
-export interface FormLike {
-  getState(): { values: Record<string, unknown> };
-  reset(): void;
-  change(field: string, value: unknown): void;
-}
+// Generic FormLike that mirrors FormApi for any form value type
+export interface FormLike<FormValues = Record<string, unknown>>
+  extends Pick<FormApi<FormValues>, 'getState' | 'reset' | 'change'> {}
 
 /**
  * This hook ensures that form values are preserved when the language changes.
  * @param formRef
  * @param language
  */
-export const useSyncFormTranslations = (
-  formRef: MutableRefObject<FormLike>,
+export const useSyncFormTranslations = <FormValues extends Record<string, any>>(
+  formRef: MutableRefObject<FormLike<FormValues> | null>,
   language: string
 ) => {
   useEffect(() => {
-    const form = formRef.current;
+    const form = formRef?.current;
     if (!form) return;
 
     const { values } = form.getState();
     form.reset();
 
-    Object.keys(values).forEach((field) => {
-      if (values[field]) {
-        form.change(field, values[field]);
+    (Object.keys(values) as (keyof FormValues)[]).forEach((field) => {
+      const value = values[field];
+      if (value !== undefined && value !== null && value !== '') {
+        form.change(field, value);
       }
     });
   }, [language]);

client/modules/App/App.jsx

@@ -6,7 +6,7 @@ import { showReduxDevTools } from '../../store';
 import DevTools from './components/DevTools';
 import { setPreviousPath } from '../IDE/actions/ide';
 import { setLanguage } from '../IDE/actions/preferences';
-import CookieConsent from '../User/components/CookieConsent';
+import { CookieConsent } from '../User/components/CookieConsent';
 
 function hideCookieConsent(pathname) {
   if (pathname.includes('/full/') || pathname.includes('/embed/')) {

client/modules/IDE/components/Header/Toolbar.jsx

@@ -20,7 +20,7 @@ import StopIcon from '../../../../images/stop.svg';
 import PreferencesIcon from '../../../../images/preferences.svg';
 import ProjectName from './ProjectName';
 import VersionIndicator from '../VersionIndicator';
-import VisibilityDropdown from '../../../User/components/VisibilityDropdown';
+import { VisibilityDropdown } from '../../../User/components/VisibilityDropdown';
 import { changeVisibility } from '../../actions/project';
 
 const Toolbar = (props) => {

client/modules/IDE/components/SketchListRowBase.jsx

@@ -10,7 +10,7 @@ import { TableDropdown } from '../../../components/Dropdown/TableDropdown';
 import { MenuItem } from '../../../components/Dropdown/MenuItem';
 import { formatDateToString } from '../../../utils/formatDate';
 import { getConfig } from '../../../utils/getConfig';
-import VisibilityDropdown from '../../User/components/VisibilityDropdown';
+import { VisibilityDropdown } from '../../User/components/VisibilityDropdown';
 
 const ROOT_URL = getConfig('API_URL');
 

client/modules/User/components/APIKeyForm.jsx → client/modules/User/components/APIKeyForm.tsx

@@ -1,36 +1,28 @@
-import PropTypes from 'prop-types';
 import React, { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useDispatch, useSelector } from 'react-redux';
 import { Button, ButtonTypes } from '../../../common/Button';
 import { PlusIcon } from '../../../common/icons';
 import CopyableInput from '../../IDE/components/CopyableInput';
 import { createApiKey, removeApiKey } from '../actions';
+import { APIKeyList } from './APIKeyList';
+import { RootState } from '../../../reducers';
+import { SanitisedApiKey } from '../../../../common/types';
 
-import APIKeyList from './APIKeyList';
-
-export const APIKeyPropType = PropTypes.shape({
-  id: PropTypes.string.isRequired,
-  token: PropTypes.string,
-  label: PropTypes.string.isRequired,
-  createdAt: PropTypes.string.isRequired,
-  lastUsedAt: PropTypes.string
-});
-
-const APIKeyForm = () => {
+export const APIKeyForm = () => {
   const { t } = useTranslation();
-  const apiKeys = useSelector((state) => state.user.apiKeys);
+  const apiKeys = useSelector((state: RootState) => state.user.apiKeys) ?? [];
   const dispatch = useDispatch();
 
   const [keyLabel, setKeyLabel] = useState('');
 
-  const addKey = (event) => {
+  const addKey = (event: React.FormEvent) => {
     event.preventDefault();
     dispatch(createApiKey(keyLabel));
     setKeyLabel('');
   };
 
-  const removeKey = (key) => {
+  const removeKey = (key: SanitisedApiKey) => {
     const message = t('APIKeyForm.ConfirmDelete', {
       key_label: key.label
     });
@@ -77,7 +69,7 @@ const APIKeyForm = () => {
           <Button
             disabled={keyLabel === ''}
             iconBefore={<PlusIcon />}
-            label="Create new key"
+            aria-label="Create new key"
             type={ButtonTypes.SUBMIT}
           >
             {t('APIKeyForm.CreateTokenSubmit')}
@@ -94,7 +86,7 @@ const APIKeyForm = () => {
             </p>
             <CopyableInput
               label={keyWithToken.label}
-              value={keyWithToken.token}
+              value={keyWithToken.token ?? ''}
             />
           </div>
         )}
@@ -109,5 +101,3 @@ const APIKeyForm = () => {
     </div>
   );
 };
-
-export default APIKeyForm;

client/modules/User/components/APIKeyList.jsx → client/modules/User/components/APIKeyList.tsx

@@ -1,17 +1,18 @@
-import PropTypes from 'prop-types';
 import React from 'react';
 import { orderBy } from 'lodash';
 import { useTranslation } from 'react-i18next';
-
-import { APIKeyPropType } from './APIKeyForm';
-
+import type { SanitisedApiKey } from '../../../../common/types';
 import {
   distanceInWordsToNow,
   formatDateToString
 } from '../../../utils/formatDate';
 import TrashCanIcon from '../../../images/trash-can.svg';
 
-function APIKeyList({ apiKeys, onRemove }) {
+export interface APIKeyListProps {
+  apiKeys: SanitisedApiKey[];
+  onRemove: (key: SanitisedApiKey) => void;
+}
+export function APIKeyList({ apiKeys, onRemove }: APIKeyListProps) {
   const { t } = useTranslation();
   return (
     <table className="api-key-list">
@@ -50,10 +51,3 @@ function APIKeyList({ apiKeys, onRemove }) {
     </table>
   );
 }
-
-APIKeyList.propTypes = {
-  apiKeys: PropTypes.arrayOf(PropTypes.shape(APIKeyPropType)).isRequired,
-  onRemove: PropTypes.func.isRequired
-};
-
-export default APIKeyList;

client/modules/User/components/AccountForm.jsx → client/modules/User/components/AccountForm.tsx

@@ -6,14 +6,21 @@ import { Button, ButtonTypes } from '../../../common/Button';
 import { validateSettings } from '../../../utils/reduxFormUtils';
 import { updateSettings, initiateVerification } from '../actions';
 import { apiClient } from '../../../utils/apiClient';
+import {
+  DuplicateUserCheckQuery,
+  UpdateSettingsRequestBody
+} from '../../../../common/types';
+import { RootState } from '../../../reducers';
+import type { AccountForm as AccountFormType } from '../../../utils/reduxFormUtils';
 
-function asyncValidate(fieldToValidate, value) {
+function asyncValidate(fieldToValidate: 'username' | 'email', value: string) {
   if (!value || value.trim().length === 0) {
     return '';
   }
-  const queryParams = {};
+  const queryParams: DuplicateUserCheckQuery = {
+    check_type: fieldToValidate
+  };
   queryParams[fieldToValidate] = value;
-  queryParams.check_type = fieldToValidate;
   return apiClient
     .get('/signup/duplicate_check', { params: queryParams })
     .then((response) => {
@@ -24,27 +31,27 @@ function asyncValidate(fieldToValidate, value) {
     });
 }
 
-function AccountForm() {
+export function AccountForm() {
   const { t } = useTranslation();
-  const user = useSelector((state) => state.user);
+  const user = useSelector((state: RootState) => state.user);
   const dispatch = useDispatch();
 
-  const handleInitiateVerification = (evt) => {
+  const handleInitiateVerification = (evt: React.MouseEvent) => {
     evt.preventDefault();
     dispatch(initiateVerification());
   };
 
-  function validateUsername(username) {
+  function validateUsername(username: AccountFormType['username']) {
     if (username === user.username) return '';
     return asyncValidate('username', username);
   }
 
-  function validateEmail(email) {
+  function validateEmail(email: AccountFormType['email']) {
     if (email === user.email) return '';
     return asyncValidate('email', email);
   }
 
-  function onSubmit(formProps) {
+  function onSubmit(formProps: UpdateSettingsRequestBody) {
     return dispatch(updateSettings(formProps));
   }
 
@@ -54,11 +61,13 @@ function AccountForm() {
       validate={validateSettings}
       onSubmit={onSubmit}
     >
-      {({ handleSubmit, submitting, invalid, restart }) => (
+      {({ handleSubmit, submitting, invalid, form }) => (
         <form
           className="form"
-          onSubmit={(event) => {
-            handleSubmit(event).then(restart);
+          onSubmit={async (event: React.FormEvent) => {
+            const result = await handleSubmit(event);
+            form.restart();
+            return result;
           }}
         >
           <Field
@@ -183,5 +192,3 @@ function AccountForm() {
     </Form>
   );
 }
-
-export default AccountForm;

client/modules/User/components/AccountForm.unit.test.jsx

@@ -8,7 +8,7 @@ import {
   act,
   waitFor
 } from '../../../test-utils';
-import AccountForm from './AccountForm';
+import { AccountForm } from './AccountForm';
 import { initialTestState } from '../../../testData/testReduxStore';
 import * as actions from '../actions';
 

client/modules/User/components/CollectionMetadata.jsx

@@ -11,7 +11,7 @@ import AddToCollectionSketchList from '../../IDE/components/AddToCollectionSketc
 import EditableInput from '../../IDE/components/EditableInput';
 import { SketchSearchbar } from '../../IDE/components/Searchbar';
 import { getCollection } from '../../IDE/selectors/collections';
-import ShareURL from './CollectionShareButton';
+import { ShareURL } from './CollectionShareButton';
 
 function CollectionMetadata({ collectionId }) {
   const { t } = useTranslation();

client/modules/User/components/CollectionShareButton.jsx → client/modules/User/components/CollectionShareButton.tsx

@@ -1,17 +1,15 @@
-import PropTypes from 'prop-types';
 import React, { useCallback, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-
 import { Button } from '../../../common/Button';
 import { DropdownArrowIcon } from '../../../common/icons';
 import { useModalClose } from '../../../common/useModalClose';
 import CopyableInput from '../../IDE/components/CopyableInput';
 
-const ShareURL = ({ value }) => {
+export const ShareURL = ({ value }: { value: string }) => {
   const [showURL, setShowURL] = useState(false);
   const { t } = useTranslation();
   const close = useCallback(() => setShowURL(false), [setShowURL]);
-  const ref = useModalClose(close);
+  const ref = useModalClose<HTMLDivElement>(close);
 
   return (
     <div className="collection-share" ref={ref}>
@@ -29,9 +27,3 @@ const ShareURL = ({ value }) => {
     </div>
   );
 };
-
-ShareURL.propTypes = {
-  value: PropTypes.string.isRequired
-};
-
-export default ShareURL;