Demo migrate user form

.github/workflows/test.yml

@@ -7,13 +7,12 @@ jobs:
     name: Test and lint code base
     runs-on: ubuntu-latest
     steps:
-    - uses: actions/checkout@v2
-    - name: Use Node.js
-      uses: actions/setup-node@v1
-      with:
-        node-version: '18.20.x'
-    - run: npm install
-    - run: npm run test
-    - run: npm run lint
-
-
+      - uses: actions/checkout@v2
+      - name: Use Node.js
+        uses: actions/setup-node@v1
+        with:
+          node-version: '18.20.x'
+      - run: npm install
+      - run: npm run test
+      - run: npm run typecheck
+      - run: npm run lint

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

@@ -6,14 +6,23 @@
 import { validateSettings } from '../../../utils/reduxFormUtils';
 import { updateSettings, initiateVerification } from '../actions';
 import { apiClient } from '../../../utils/apiClient';
+import type {
+  DuplicateUserCheckQuery,
+  UpdateSettingsRequestBody
+} from '../../../../common/types';
+import type { RootState } from '../../../reducers';
 
-function asyncValidate(fieldToValidate, value) {
+function asyncValidate(
+  fieldToValidate: DuplicateUserCheckQuery['check_type'],
+  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) => {
@@ -26,25 +35,27 @@
 
 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<HTMLButtonElement>
+  ) => {
     evt.preventDefault();
     dispatch(initiateVerification());
   };
 
-  function validateUsername(username) {
-    if (username === user.username) return '';
+  function validateUsername(username: DuplicateUserCheckQuery['username']) {
+    if (username === user.username || !username) return '';
     return asyncValidate('username', username);
   }
 
-  function validateEmail(email) {
-    if (email === user.email) return '';
+  function validateEmail(email: DuplicateUserCheckQuery['email']) {
+    if (email === user.email || !email) return '';
     return asyncValidate('email', email);
   }
 
-  function onSubmit(formProps) {
+  function onSubmit(formProps: UpdateSettingsRequestBody) {
     return dispatch(updateSettings(formProps));
   }
 
@@ -54,11 +65,13 @@
       validate={validateSettings}
       onSubmit={onSubmit}
     >
-      {({ handleSubmit, submitting, invalid, restart }) => (
+      {({ handleSubmit, submitting, invalid, form }) => (
         <form
           className="form"
-          onSubmit={(event) => {
-            handleSubmit(event).then(restart);
+          onSubmit={async (event) => {
+            const result = await handleSubmit(event);
+            form.restart();
+            return result;
           }}
         >
           <Field
@@ -98,7 +111,7 @@
                 </span>
               ) : (
                 <Button
-                  onClick={handleInitiateVerification}
+                  onClick={() => handleInitiateVerification}
                   className="form__resend-button"
                 >
                   {t('AccountForm.Resend')}
@@ -184,4 +197,4 @@
   );
 }
 
 export default AccountForm;

server/routes/passport.routes.ts

@@ -1,5 +1,6 @@
 import { Router, Request, Response, NextFunction } from 'express';
 import passport from 'passport';
+import { UserDocument } from '../types';
 
 const router = Router();
 
@@ -11,7 +12,7 @@ const authenticateOAuth = (service: string) => (
   passport.authenticate(
     service,
     { failureRedirect: '/login' },
-    (err: unknown, user: unknown) => {
+    (err: unknown, user: UserDocument) => {
       if (err) {
         // use query string param to show error;
         res.redirect(`/account?error=${service}`);