refactor: misc type improvements (#945)

* refactor: improve ChangePassword types

* refactor: improve usePagination types

* refactor: improve UsersList types

frontend/src/component/admin/users/UsersList/ChangePassword/ChangePassword.tsx

@@ -1,6 +1,6 @@
-import { useState } from 'react';
+import React, { useState } from 'react';
 import classnames from 'classnames';
-import { Avatar, TextField, Typography } from '@mui/material';
+import { Avatar, TextField, Typography, Alert } from '@mui/material';
 import { trim } from 'component/common/util';
 import { modalStyles } from 'component/admin/users/util';
 import { Dialogue } from 'component/common/Dialogue/Dialogue';
@@ -8,42 +8,35 @@ import PasswordChecker from 'component/user/common/ResetPasswordForm/PasswordChe
 import { useThemeStyles } from 'themes/themeStyles';
 import PasswordMatcher from 'component/user/common/ResetPasswordForm/PasswordMatcher/PasswordMatcher';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
-import { Alert } from '@mui/material';
 import { IUser } from 'interfaces/user';
 
 interface IChangePasswordProps {
     showDialog: boolean;
     closeDialog: () => void;
-    changePassword: (user: IUser, password: string) => Promise<Response>;
+    changePassword: (userId: number, password: string) => Promise<Response>;
-    user: Partial<IUser>;
+    user: IUser;
 }
 
 const ChangePassword = ({
     showDialog,
     closeDialog,
     changePassword,
-    user = {},
+    user,
 }: IChangePasswordProps) => {
-    const [data, setData] = useState({});
+    const [data, setData] = useState<Record<string, string>>({});
     const [error, setError] = useState<Record<string, string>>({});
     const [validPassword, setValidPassword] = useState(false);
     const { classes: themeStyles } = useThemeStyles();
 
-    // @ts-expect-error
+    const updateField: React.ChangeEventHandler<HTMLInputElement> = event => {
-    const updateField = e => {
         setError({});
-        setData({
+        setData({ ...data, [event.target.name]: trim(event.target.value) });
-            ...data,
-            [e.target.name]: trim(e.target.value),
-        });
     };
 
-    // @ts-expect-error
+    const submit = async (event: React.SyntheticEvent) => {
-    const submit = async e => {
+        event.preventDefault();
-        e.preventDefault();
 
         if (!validPassword) {
-            // @ts-expect-error
             if (!data.password || data.password.length < 8) {
                 setError({
                     password:
@@ -51,7 +44,6 @@ const ChangePassword = ({
                 });
                 return;
             }
-            // @ts-expect-error
             if (!(data.password === data.confirm)) {
                 setError({ confirm: 'Passwords does not match' });
                 return;
@@ -59,20 +51,19 @@ const ChangePassword = ({
         }
 
         try {
-            // @ts-expect-error
+            await changePassword(user.id, data.password);
-            await changePassword(user, data.password);
             setData({});
             closeDialog();
-        } catch (error) {
+        } catch (error: unknown) {
-            // @ts-expect-error
+            const msg =
-            const msg = error.message || 'Could not update password';
+                (error instanceof Error && error.message) ||
+                'Could not update password';
             setError({ general: msg });
         }
     };
 
-    // @ts-expect-error
+    const onCancel = (event: React.SyntheticEvent) => {
-    const onCancel = e => {
+        event.preventDefault();
-        e.preventDefault();
         setData({});
         closeDialog();
     };
@@ -118,7 +109,6 @@ const ChangePassword = ({
                     </Typography>
                 </div>
                 <PasswordChecker
-                    // @ts-expect-error
                     password={data.password}
                     callback={setValidPassword}
                 />
@@ -126,7 +116,6 @@ const ChangePassword = ({
                     label="New password"
                     name="password"
                     type="password"
-                    // @ts-expect-error
                     value={data.password}
                     helperText={error.password}
                     onChange={updateField}
@@ -137,7 +126,6 @@ const ChangePassword = ({
                     label="Confirm password"
                     name="confirm"
                     type="password"
-                    // @ts-expect-error
                     value={data.confirm}
                     error={error.confirm !== undefined}
                     helperText={error.confirm}
@@ -146,9 +134,7 @@ const ChangePassword = ({
                     size="small"
                 />
                 <PasswordMatcher
-                    // @ts-expect-error
+                    started={Boolean(data.password && data.confirm)}
-                    started={data.password && data.confirm}
-                    // @ts-expect-error
                     matchingPasswords={data.password === data.confirm}
                 />
             </form>

frontend/src/component/admin/users/UsersList/UsersList.tsx

@@ -39,13 +39,8 @@ const UsersList = ({ search }: IUsersListProps) => {
     const { classes: styles } = useStyles();
     const { users, roles, refetch, loading } = useUsers();
     const { setToastData, setToastApiError } = useToast();
-    const {
+    const { removeUser, changePassword, userLoading, userApiErrors } =
-        removeUser,
+        useAdminUsersApi();
-        changePassword,
-        validatePassword,
-        userLoading,
-        userApiErrors,
-    } = useAdminUsersApi();
     const { hasAccess } = useContext(AccessContext);
     const { locationSettings } = useLocationSettings();
     const [pwDialog, setPwDialog] = useState<{ open: boolean; user?: IUser }>({
@@ -87,12 +82,11 @@ const UsersList = ({ search }: IUsersListProps) => {
         setPwDialog({ open: false });
     };
 
-    const onDeleteUser = async () => {
+    const onDeleteUser = async (user: IUser) => {
         try {
-            // @ts-expect-error
+            await removeUser(user.id);
-            await removeUser(delUser);
             setToastData({
-                title: `${delUser?.name} has been deleted`,
+                title: `${user.name} has been deleted`,
                 type: 'success',
             });
             refetch();
@@ -131,7 +125,6 @@ const UsersList = ({ search }: IUsersListProps) => {
         return page.map(user => {
             return (
                 <UserListItem
-                    // @ts-expect-error
                     key={user.id}
                     user={user}
                     openPwDialog={openPwDialog}
@@ -224,16 +217,17 @@ const UsersList = ({ search }: IUsersListProps) => {
                 inviteLink={inviteLink}
             />
 
-            <ChangePassword
+            <ConditionallyRender
-                showDialog={pwDialog.open}
+                condition={Boolean(pwDialog.user)}
-                closeDialog={closePwDialog}
+                show={() => (
-                // @ts-expect-error
+                    <ChangePassword
-                changePassword={changePassword}
+                        showDialog={pwDialog.open}
-                validatePassword={validatePassword}
+                        closeDialog={closePwDialog}
-                // @ts-expect-error
+                        changePassword={changePassword}
-                user={pwDialog.user}
+                        user={pwDialog.user!}
+                    />
+                )}
             />
-
             <ConditionallyRender
                 condition={Boolean(delUser)}
                 show={
@@ -241,7 +235,7 @@ const UsersList = ({ search }: IUsersListProps) => {
                         showDialog={delDialog}
                         closeDialog={closeDelDialog}
                         user={delUser!}
-                        removeUser={onDeleteUser}
+                        removeUser={() => onDeleteUser(delUser!)}
                         userLoading={userLoading}
                         userApiErrors={userApiErrors}
                     />

frontend/src/component/feature/FeatureToggleListNew/FeatureToggleListNew.tsx

@@ -11,14 +11,12 @@ import { useStyles } from './FeatureToggleListNew.styles';
 import FeatureToggleListNewItem from './FeatureToggleListNewItem/FeatureToggleListNewItem';
 import usePagination from 'hooks/usePagination';
 import loadingFeatures from './FeatureToggleListNewItem/loadingFeatures';
-import {
+import { IFeatureToggleListItem } from 'interfaces/featureToggle';
-    IFeatureToggle,
-    IFeatureToggleListItem,
-} from 'interfaces/featureToggle';
 import PaginateUI from 'component/common/PaginateUI/PaginateUI';
 import StringTruncator from 'component/common/StringTruncator/StringTruncator';
 import { createGlobalStateHook } from 'hooks/useGlobalState';
 import { AnnouncerContext } from 'component/common/Announcer/AnnouncerContext/AnnouncerContext';
+
 interface IFeatureToggleListNewProps {
     features: IFeatureToggleListItem[];
     loading: boolean;
@@ -86,9 +84,10 @@ const FeatureToggleListNew = ({
     const { classes: styles } = useStyles();
     const { setAnnouncement } = useContext(AnnouncerContext);
     const [sortOpt, setSortOpt] = useFeatureToggLeProjectSort();
-    const [sortedFeatures, setSortedFeatures] = useState(
+
-        sortList([...features], sortOpt)
+    const [sortedFeatures, setSortedFeatures] = useState<
-    );
+        IFeatureToggleListItem[]
+    >(sortList([...features], sortOpt));
 
     const { page, pages, nextPage, prevPage, setPageIndex, pageIndex } =
         usePagination(sortedFeatures, 50);
@@ -156,7 +155,7 @@ const FeatureToggleListNew = ({
             });
         }
 
-        return page.map((feature: IFeatureToggle) => {
+        return page.map((feature: IFeatureToggleListItem) => {
             return (
                 <FeatureToggleListNewItem
                     key={feature.name}

frontend/src/hooks/api/actions/useAdminUsersApi/useAdminUsersApi.ts

@@ -36,13 +36,11 @@ const useAdminUsersApi = () => {
         return makeRequest(req.caller, req.id);
     };
 
-    const removeUser = async (user: IUserPayload) => {
+    const removeUser = async (userId: number) => {
         const requestId = 'removeUser';
         const req = createRequest(
-            `api/admin/user-admin/${user.id}`,
+            `api/admin/user-admin/${userId}`,
-            {
+            { method: 'DELETE' },
-                method: 'DELETE',
-            },
             requestId
         );
 
@@ -63,10 +61,10 @@ const useAdminUsersApi = () => {
         return makeRequest(req.caller, req.id);
     };
 
-    const changePassword = async (user: IUserPayload, password: string) => {
+    const changePassword = async (userId: number, password: string) => {
         const requestId = 'changePassword';
         const req = createRequest(
-            `api/admin/user-admin/${user.id}/change-password`,
+            `api/admin/user-admin/${userId}/change-password`,
             {
                 method: 'POST',
                 body: JSON.stringify({ password }),

frontend/src/hooks/usePagination.ts

@@ -1,12 +1,12 @@
 import { useEffect, useState } from 'react';
-import { paginate } from '../utils/paginate';
+import { paginate } from 'utils/paginate';
 
-const usePagination = (
+const usePagination = <T>(
-    data: any[],
+    data: T[],
     limit: number,
-    filterFunc?: (item: any) => boolean
+    filterFunc?: (item: T) => boolean
 ) => {
-    const [paginatedData, setPaginatedData] = useState([[]]);
+    const [paginatedData, setPaginatedData] = useState<T[][]>([[]]);
     const [pageIndex, setPageIndex] = useState(0);
 
     useEffect(() => {