action user search now takes a drawActionComponent

Author: MatiasSinisalo

src/client/components/Admin/UserSearch.tsx

@@ -110,17 +110,14 @@ const UserTable = ({ users }: { users: User[] }) => {
 
 const ActionUserTable = ({
   users,
-  onSelect,
   actionText,
-  actionButtonText,
+  drawActionComponent
 }: {
   users: User[]
-  onSelect: (user: User) => void
   actionText: string
-  actionButtonText: string
+  drawActionComponent: (user: User) => any
 }) => {
   const { t } = useTranslation()
-
   if (!users || users.length === 0) return null
 
   return (
@@ -180,15 +177,8 @@ const ActionUserTable = ({
                   <Typography variant="h6">{user.primaryEmail}</Typography>
                 </TableCell>
                 <TableCell>
-                  <Button
-                    variant="outlined"
-                    onClick={() => {
-                      onSelect(user)
-                    }}
-                  >
-                    {actionButtonText}
-                  </Button>
-                </TableCell>
+                  {drawActionComponent(user)}
+               </TableCell>
               </TableRow>
             ))}
           </TableBody>
@@ -221,13 +211,10 @@ const UserSearch = () => {
 }
 //a component which allows users to be searched in order to perform some kind of action with the user
 export const ActionUserSearch = ({
-  onSelect,
   actionText,
-  actionButtonText,
-}: {
-  onSelect: (user: User) => void
+  drawActionComponent }: {
   actionText: string
-  actionButtonText: string
+  drawActionComponent: (user: User) => any
 }) => {
   const [search, setSearch] = useState('')
   const { users, isLoading, refetch } = useUserSearch(search)
@@ -246,7 +233,7 @@ export const ActionUserSearch = ({
       {search.length > 2 && search.length < 5 && <div>{t('admin:typeMore')}</div>}
 
       {isLoading && <div>Loading...</div>}
-      {users && <ActionUserTable users={users} onSelect={onSelect} actionText={actionText} actionButtonText={actionButtonText} />}
+      {users && <ActionUserTable users={users}  actionText={actionText} drawActionComponent={drawActionComponent} />}
     </Box>
   )
 }

src/client/components/Courses/Course/index.tsx

@@ -114,6 +114,13 @@ const Course = () => {
       refetchCourse()
     }
   }
+  const drawActionComponent = (user: User) => {
+    return (
+      <Button onClick={() => handleAddResponsible(user)}>
+        {t('course:add')}
+      </Button>
+    )
+  }
   const handleRemoveResponsibility = async (responsibility) => {
     const result = await apiClient.post(`/courses/${chatInstance.id}/responsibilities/remove`, { username: responsibility.user?.username })
     if (result.status === 200) {
@@ -254,11 +261,8 @@ const Course = () => {
           }}
         >
           <ActionUserSearch
-            onSelect={(user: User) => {
-              handleAddResponsible(user)
-            }}
             actionText={t('course:add')}
-            actionButtonText={t('course:add')}
+            drawActionComponent={drawActionComponent}
           />
         </Box>
       </Modal>