💄 Improve Ticker Users Form

src/components/ticker/TickerUsersForm.test.tsx

@@ -1,6 +1,7 @@
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import { render, screen } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
+import sign from 'jwt-encode'
 import { MemoryRouter } from 'react-router'
 import { vi } from 'vitest'
 import { Ticker } from '../../api/Ticker'
@@ -9,12 +10,21 @@ import { AuthProvider } from '../../contexts/AuthContext'
 import { NotificationProvider } from '../../contexts/NotificationContext'
 import TickerUsersForm from './TickerUsersForm'
 
+const token = sign({ id: 1, email: '[email protected]', roles: ['user'], exp: new Date().getTime() / 1000 + 600 }, 'secret')
+
 describe('TickerUsersForm', () => {
+  beforeAll(() => {
+    localStorage.setItem('token', token)
+  })
+
   beforeEach(() => {
     fetchMock.resetMocks()
+    handleSubmit.mockClear()
   })
 
-  function setup(defaultValue: Array<User>, ticker: Ticker, onSubmit: () => void) {
+  const handleSubmit = vi.fn()
+
+  const setup = (defaultValue: Array<User>, ticker: Ticker, onSubmit: () => void) => {
     const client = new QueryClient({
       defaultOptions: {
         queries: {
@@ -28,6 +38,7 @@ describe('TickerUsersForm', () => {
           <AuthProvider>
             <NotificationProvider>
               <TickerUsersForm defaultValue={defaultValue} onSubmit={onSubmit} ticker={ticker} />
+              <input name="Submit" type="submit" value="Submit" form="tickerUsersForm" />
             </NotificationProvider>
           </AuthProvider>
         </MemoryRouter>
@@ -44,6 +55,7 @@ describe('TickerUsersForm', () => {
       id: 1,
       email: '[email protected]',
     } as User
+
     fetchMock.mockResponseOnce(
       JSON.stringify({
         data: {
@@ -53,7 +65,6 @@ describe('TickerUsersForm', () => {
       })
     )
 
-    const handleSubmit = vi.fn()
     setup([user], ticker, handleSubmit)
 
     expect(screen.getByRole('combobox')).toBeInTheDocument()
@@ -64,5 +75,25 @@ describe('TickerUsersForm', () => {
     expect(screen.getAllByText('[email protected]')).toHaveLength(2)
 
     await userEvent.click(screen.getAllByText('[email protected]')[1])
+
+    fetchMock.mockResponseOnce(
+      JSON.stringify({
+        status: 'success',
+      })
+    )
+
+    await userEvent.click(screen.getByRole('button', { name: 'Submit' }))
+
+    expect(handleSubmit).toHaveBeenCalledTimes(1)
+    expect(fetchMock).toHaveBeenCalledTimes(2)
+    expect(fetchMock).toHaveBeenCalledWith('http://localhost:8080/v1/admin/tickers/1/users', {
+      body: JSON.stringify({ users: [] }),
+      headers: {
+        Accept: 'application/json',
+        Authorization: `Bearer ${token}`,
+        'Content-Type': 'application/json',
+      },
+      method: 'put',
+    })
   })
 })

src/components/ticker/TickerUsersForm.tsx

@@ -21,6 +21,7 @@ const TickerUsersForm: FC<Props> = ({ onSubmit, ticker, defaultValue }) => {
   const { createNotification } = useNotification()
   const [users, setUsers] = useState<Array<User>>(defaultValue)
   const [options, setOptions] = useState<Array<User>>([])
+  const [open, setOpen] = useState(false)
   const { token } = useAuth()
   const theme = useTheme()
   const { handleSubmit } = useForm<FormValues>()
@@ -32,13 +33,18 @@ const TickerUsersForm: FC<Props> = ({ onSubmit, ticker, defaultValue }) => {
       return userIds.includes(user.id)
     })
     setUsers(selectedUsers)
+    setOpen(false)
   }
 
   const updateTickerUsers: SubmitHandler<FormValues> = () => {
-    putTickerUsersApi(token, ticker, users).then(() => {
-      queryClient.invalidateQueries({ queryKey: ['tickerUsers', ticker.id] })
-      createNotification({ content: 'Users were successfully updated', severity: 'success' })
-      onSubmit()
+    putTickerUsersApi(token, ticker, users).then(response => {
+      if (response.status !== 'success') {
+        createNotification({ content: 'Failed to update users', severity: 'error' })
+      } else {
+        queryClient.invalidateQueries({ queryKey: ['tickerUsers', ticker.id] })
+        createNotification({ content: 'Users were successfully updated', severity: 'success' })
+        onSubmit()
+      }
     })
   }
 
@@ -98,7 +104,17 @@ const TickerUsersForm: FC<Props> = ({ onSubmit, ticker, defaultValue }) => {
     <form id="tickerUsersForm" onSubmit={handleSubmit(updateTickerUsers)}>
       <FormControl sx={{ width: '100%', mt: 1 }}>
         <InputLabel>Users</InputLabel>
-        <Select input={<OutlinedInput label="Users" />} label="Users" multiple name="users" onChange={handleChange} renderValue={renderValue} value={userIds}>
+        <Select
+          open={open}
+          input={<OutlinedInput label="Users" />}
+          label="Users"
+          multiple
+          name="users"
+          onChange={handleChange}
+          onClick={() => setOpen(!open)}
+          renderValue={renderValue}
+          value={userIds}
+        >
           {options.map(user => (
             <MenuItem key={user.id} selected={users.includes(user)} style={getStyle(user, users)} value={user.id}>
               {user.email}