diff --git a/frontend/src/component/admin/users/UsersList/ChangePassword/ChangePassword.tsx b/frontend/src/component/admin/users/UsersList/ChangePassword/ChangePassword.tsx index 70ef6f1ec2..fbfc678c47 100644 --- a/frontend/src/component/admin/users/UsersList/ChangePassword/ChangePassword.tsx +++ b/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; - user: Partial; + changePassword: (userId: number, password: string) => Promise; + user: IUser; } const ChangePassword = ({ showDialog, closeDialog, changePassword, - user = {}, + user, }: IChangePasswordProps) => { - const [data, setData] = useState({}); + const [data, setData] = useState>({}); const [error, setError] = useState>({}); const [validPassword, setValidPassword] = useState(false); const { classes: themeStyles } = useThemeStyles(); - // @ts-expect-error - const updateField = e => { + const updateField: React.ChangeEventHandler = event => { setError({}); - setData({ - ...data, - [e.target.name]: trim(e.target.value), - }); + setData({ ...data, [event.target.name]: trim(event.target.value) }); }; - // @ts-expect-error - const submit = async e => { - e.preventDefault(); + const submit = async (event: React.SyntheticEvent) => { + event.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, data.password); + await changePassword(user.id, data.password); setData({}); closeDialog(); - } catch (error) { - // @ts-expect-error - const msg = error.message || 'Could not update password'; + } catch (error: unknown) { + const msg = + (error instanceof Error && error.message) || + 'Could not update password'; setError({ general: msg }); } }; - // @ts-expect-error - const onCancel = e => { - e.preventDefault(); + const onCancel = (event: React.SyntheticEvent) => { + event.preventDefault(); setData({}); closeDialog(); }; @@ -118,7 +109,6 @@ const ChangePassword = ({ @@ -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" /> diff --git a/frontend/src/component/admin/users/UsersList/UsersList.tsx b/frontend/src/component/admin/users/UsersList/UsersList.tsx index df3fddec97..d883cfd706 100644 --- a/frontend/src/component/admin/users/UsersList/UsersList.tsx +++ b/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 { - removeUser, - changePassword, - validatePassword, - userLoading, - userApiErrors, - } = useAdminUsersApi(); + const { removeUser, changePassword, 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(delUser); + await removeUser(user.id); 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 ( { inviteLink={inviteLink} /> - ( + + )} /> - { showDialog={delDialog} closeDialog={closeDelDialog} user={delUser!} - removeUser={onDeleteUser} + removeUser={() => onDeleteUser(delUser!)} userLoading={userLoading} userApiErrors={userApiErrors} /> diff --git a/frontend/src/component/feature/FeatureToggleListNew/FeatureToggleListNew.tsx b/frontend/src/component/feature/FeatureToggleListNew/FeatureToggleListNew.tsx index 431c9ae6b5..752346a928 100644 --- a/frontend/src/component/feature/FeatureToggleListNew/FeatureToggleListNew.tsx +++ b/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 { - IFeatureToggle, - IFeatureToggleListItem, -} from 'interfaces/featureToggle'; +import { 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 ( { 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}`, - { - method: 'DELETE', - }, + `api/admin/user-admin/${userId}`, + { 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 }), diff --git a/frontend/src/hooks/usePagination.ts b/frontend/src/hooks/usePagination.ts index 366b118ee6..c61b339c4b 100644 --- a/frontend/src/hooks/usePagination.ts +++ b/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 = ( - data: any[], +const usePagination = ( + data: T[], limit: number, - filterFunc?: (item: any) => boolean + filterFunc?: (item: T) => boolean ) => { - const [paginatedData, setPaginatedData] = useState([[]]); + const [paginatedData, setPaginatedData] = useState([[]]); const [pageIndex, setPageIndex] = useState(0); useEffect(() => {