ajout app

Voltaserve/ui/src/components/organization/organization-leave.tsx

@@ -0,0 +1,83 @@
+import { useCallback, useEffect, useState } from 'react'
+import { useNavigate } from 'react-router-dom'
+import {
+  Button,
+  Modal,
+  ModalBody,
+  ModalCloseButton,
+  ModalContent,
+  ModalFooter,
+  ModalHeader,
+  ModalOverlay,
+} from '@chakra-ui/react'
+import cx from 'classnames'
+import OrganizationAPI from '@/client/api/organization'
+
+export type OrganizationLeaveProps = {
+  open: boolean
+  id: string
+  onClose?: () => void
+}
+
+const OrganizationLeave = ({ open, id, onClose }: OrganizationLeaveProps) => {
+  const navigate = useNavigate()
+  const [isModalOpen, setIsModalOpen] = useState(false)
+  const [isLoading, setIsLoading] = useState(false)
+
+  useEffect(() => {
+    setIsModalOpen(open)
+  }, [open])
+
+  const handleConfirmation = useCallback(async () => {
+    setIsLoading(true)
+    try {
+      await OrganizationAPI.leave(id)
+      navigate('/organization')
+      onClose?.()
+    } finally {
+      setIsLoading(false)
+    }
+  }, [id, navigate, onClose])
+
+  return (
+    <Modal
+      isOpen={isModalOpen}
+      onClose={() => onClose?.()}
+      closeOnOverlayClick={false}
+    >
+      <ModalOverlay />
+      <ModalContent>
+        <ModalHeader>Leave Organization</ModalHeader>
+        <ModalCloseButton />
+        <ModalBody>
+          <span>Are you sure you would like to leave this organization?</span>
+        </ModalBody>
+        <ModalFooter>
+          <div className={cx('flex', 'flex-row', 'items-center', 'gap-1')}>
+            <Button
+              type="button"
+              variant="outline"
+              colorScheme="blue"
+              disabled={isLoading}
+              onClick={() => onClose?.()}
+            >
+              Cancel
+            </Button>
+            <Button
+              type="submit"
+              variant="solid"
+              colorScheme="red"
+              disabled={isLoading}
+              isLoading={isLoading}
+              onClick={() => handleConfirmation()}
+            >
+              Leave
+            </Button>
+          </div>
+        </ModalFooter>
+      </ModalContent>
+    </Modal>
+  )
+}
+
+export default OrganizationLeave