users

src/pages/brukere.tsx

@@ -3,9 +3,12 @@ import { Spinner } from '../components/loading/Spinner'
 import React from 'react'
 import { Button, Heading, Table } from '@navikt/ds-react'
 import { UseUsers } from '../queries/useUsers'
+import { UseMutateUser } from '../queries/mutateUser'
 
 const Brukere: NextPage = () => {
     const { data } = UseUsers()
+    const muteteUser = UseMutateUser()
+
     if (!data) {
         return <Spinner />
     }
@@ -30,12 +33,22 @@ const Brukere: NextPage = () => {
                             <Table.DataCell>{user.name}</Table.DataCell>
                             <Table.DataCell>
                                 {user.active && (
-                                    <Button type={'button'} variant={'danger'} size={'xsmall'}>
+                                    <Button type={'button'} variant={'danger'} size={'xsmall'}
+                                            onClick={() => muteteUser.mutate({
+                                                id: user.id,
+                                                request: { active: false },
+                                            })}
+                                    >
                                         Deaktiver
                                     </Button>
                                 )}
                                 {!user.active && (
-                                    <Button type={'button'} variant={'secondary'} size={'xsmall'}>
+                                    <Button type={'button'} variant={'secondary'} size={'xsmall'}
+                                            onClick={() => muteteUser.mutate({
+                                                id: user.id,
+                                                request: { active: true },
+                                            })}
+                                    >
                                         Aktiver
                                     </Button>
                                 )}

src/queries/mutateUser.ts

@@ -0,0 +1,36 @@
+import { useAuthState } from 'react-firebase-hooks/auth'
+import { getFirebaseAuth } from '../auth/clientApp'
+import { useMutation, useQueryClient } from '@tanstack/react-query'
+
+
+interface MuteteUserReq {
+    id: string,
+    request: {
+        paid?: boolean,
+        admin?: boolean,
+        active?: boolean,
+    }
+}
+
+export function UseMutateUser() {
+    const queryClient = useQueryClient()
+    const [user] = useAuthState(getFirebaseAuth())
+
+    return useMutation<any, unknown, MuteteUserReq>({
+        mutationFn: async (req) => {
+            const idtoken = await user?.getIdToken()
+            const responsePromise = await fetch(`https://betpool-2022-backend.vercel.app/api/v1/users/${req.id}`, {
+                method: 'PUT',
+                body: JSON.stringify(req.request),
+                headers: { Authorization: `Bearer ${idtoken}` },
+            })
+            return responsePromise.json()
+        },
+
+        onSuccess: () => {
+            queryClient.invalidateQueries({ queryKey: ['users'] }).then()
+            queryClient.invalidateQueries({ queryKey: ['all-bets'] }).then()
+
+        },
+    })
+}