Refactor: AssignDomainDialog using Modal component

packages/frontend/src/components/projects/project/deployments/DeploymentMenu.tsx

@@ -1,12 +1,5 @@
-import { useState, ComponentPropsWithRef } from 'react';
-
-import {
-  Menu,
-  MenuHandler,
-  MenuItem,
-  MenuList,
-} from '@snowballtools/material-tailwind-react-fork';
-
+import { useState } from 'react';
+import toast from 'react-hot-toast';
 import { Deployment, Domain, Environment, Project } from 'gql-client';
 import { Button } from 'components/shared/Button';
 import {
@@ -18,11 +11,17 @@ import {
   UndoIcon,
   CrossCircleIcon,
 } from 'components/shared/CustomIcon';
+import {
+  Menu,
+  MenuHandler,
+  MenuItem,
+  MenuList,
+} from '@snowballtools/material-tailwind-react-fork';
+import { ComponentPropsWithRef } from 'react';
 import AssignDomainDialog from './AssignDomainDialog';
 import { useGQLClient } from 'context/GQLClientContext';
 import { cn } from 'utils/classnames';
 import { ChangeStateToProductionDialog } from 'components/projects/Dialog/ChangeStateToProductionDialog';
-import { useToast } from 'components/shared/Toast';
 
 interface DeploymentMenuProps extends ComponentPropsWithRef<'div'> {
   deployment: Deployment;
@@ -42,7 +41,6 @@ export const DeploymentMenu = ({
   ...props
 }: DeploymentMenuProps) => {
   const client = useGQLClient();
-  const { toast, dismiss } = useToast();
 
   const [changeToProduction, setChangeToProduction] = useState(false);
   const [redeployToProduction, setRedeployToProduction] = useState(false);
@@ -53,19 +51,9 @@ export const DeploymentMenu = ({
     const isUpdated = await client.updateDeploymentToProd(deployment.id);
     if (isUpdated) {
       await onUpdate();
-      toast({
-        id: 'deployment_changed_to_production',
-        title: 'Deployment changed to production',
-        variant: 'success',
-        onDismiss: dismiss,
-      });
+      toast.success('Deployment changed to production');
     } else {
-      toast({
-        id: 'deployment_not_changed_to_production',
-        title: 'Error changing deployment to production',
-        variant: 'error',
-        onDismiss: dismiss,
-      });
+      toast.error('Unable to change deployment to production');
     }
   };
 
@@ -73,19 +61,9 @@ export const DeploymentMenu = ({
     const isRedeployed = await client.redeployToProd(deployment.id);
     if (isRedeployed) {
       await onUpdate();
-      toast({
-        id: 'redeployed_to_production',
-        title: 'Redeployed to production',
-        variant: 'success',
-        onDismiss: dismiss,
-      });
+      toast.success('Redeployed to production');
     } else {
-      toast({
-        id: 'redeployed_to_production_failed',
-        title: 'Error redeploying to production',
-        variant: 'error',
-        onDismiss: dismiss,
-      });
+      toast.error('Unable to redeploy to production');
     }
   };
 
@@ -96,19 +74,9 @@ export const DeploymentMenu = ({
     );
     if (isRollbacked) {
       await onUpdate();
-      toast({
-        id: 'deployment_rolled_back',
-        title: 'Deployment rolled back',
-        variant: 'success',
-        onDismiss: dismiss,
-      });
+      toast.success('Deployment rolled back');
     } else {
-      toast({
-        id: 'deployment_rollback_failed',
-        title: 'Error rolling back deployment',
-        variant: 'error',
-        onDismiss: dismiss,
-      });
+      toast.error('Unable to rollback deployment');
     }
   };
 
@@ -116,19 +84,9 @@ export const DeploymentMenu = ({
     const isDeleted = await client.deleteDeployment(deployment.id);
     if (isDeleted) {
       await onUpdate();
-      toast({
-        id: 'deployment_deleted',
-        title: 'Deployment deleted',
-        variant: 'success',
-        onDismiss: dismiss,
-      });
+      toast.success('Deleted deployment');
     } else {
-      toast({
-        id: 'deployment_not_deleted',
-        title: 'Error deleting deployment',
-        variant: 'error',
-        onDismiss: dismiss,
-      });
+      toast.error('Unable to delete deployment');
     }
   };