From 771ba3bf4c5355940c3c7128a7901a71f2137286 Mon Sep 17 00:00:00 2001 From: Vivian Phung Date: Mon, 24 Jun 2024 19:19:36 -0400 Subject: [PATCH] refactor: use onToast remove react-hot-toast dep --- packages/frontend/package.json | 1 - .../id/settings/EnvironmentVariables.tsx | 31 ++++++++++++----- .../id/settings/domains/add/Config.tsx | 33 +++++++++++++++---- yarn.lock | 12 ------- 4 files changed, 49 insertions(+), 28 deletions(-) diff --git a/packages/frontend/package.json b/packages/frontend/package.json index 0ae20f9..6042bef 100644 --- a/packages/frontend/package.json +++ b/packages/frontend/package.json @@ -62,7 +62,6 @@ "react-dom": "^18.2.0", "react-dropdown": "^1.11.0", "react-hook-form": "^7.49.0", - "react-hot-toast": "^2.4.1", "react-oauth-popup": "^1.0.5", "react-router-dom": "^6.20.1", "react-timer-hook": "^3.0.7", diff --git a/packages/frontend/src/pages/org-slug/projects/id/settings/EnvironmentVariables.tsx b/packages/frontend/src/pages/org-slug/projects/id/settings/EnvironmentVariables.tsx index 7975bd1..17ccf3f 100644 --- a/packages/frontend/src/pages/org-slug/projects/id/settings/EnvironmentVariables.tsx +++ b/packages/frontend/src/pages/org-slug/projects/id/settings/EnvironmentVariables.tsx @@ -1,14 +1,12 @@ import { useCallback, useEffect, useMemo, useState } from 'react'; import { useFieldArray, useForm } from 'react-hook-form'; -import toast from 'react-hot-toast'; import { useParams } from 'react-router-dom'; -import { Environment, EnvironmentVariable } from 'gql-client'; import { Collapse } from '@snowballtools/material-tailwind-react-fork'; import AddEnvironmentVariableRow from 'components/projects/project/settings/AddEnvironmentVariableRow'; import DisplayEnvironmentVariables from 'components/projects/project/settings/DisplayEnvironmentVariables'; -import { useGQLClient } from '../../../../../context/GQLClientContext'; +import { useGQLClient } from 'context/GQLClientContext'; import { EnvironmentVariablesFormValues } from '../../../../../types'; import HorizontalLine from 'components/HorizontalLine'; import { Heading } from 'components/shared/Heading'; @@ -17,10 +15,13 @@ import { Checkbox } from 'components/shared/Checkbox'; import { PlusIcon } from 'components/shared/CustomIcon'; import { InlineNotification } from 'components/shared/InlineNotification'; import { ProjectSettingContainer } from 'components/projects/project/settings/ProjectSettingContainer'; +import { useToast } from 'components/shared/Toast'; +import { Environment, EnvironmentVariable } from 'gql-client'; export const EnvironmentVariablesTabPanel = () => { const { id } = useParams(); const client = useGQLClient(); + const { toast, dismiss } = useToast(); const [environmentVariables, setEnvironmentVariables] = useState< EnvironmentVariable[] @@ -118,13 +119,25 @@ export const EnvironmentVariablesTabPanel = () => { fetchEnvironmentVariables(id); - toast.success( - createFormData.variables.length > 1 - ? `${createFormData.variables.length} variables added` - : `Variable added`, - ); + toast({ + id: + createFormData.variables.length > 1 + ? 'env_variable_added' + : 'env_variables_added', + title: + createFormData.variables.length > 1 + ? `${createFormData.variables.length} variables added` + : `Variable added`, + variant: 'success', + onDismiss: dismiss, + }); } else { - toast.error('Environment variables not added'); + toast({ + id: 'env_variables_not_added', + title: 'Environment variables not added', + variant: 'error', + onDismiss: dismiss, + }); } }, [id, client], diff --git a/packages/frontend/src/pages/org-slug/projects/id/settings/domains/add/Config.tsx b/packages/frontend/src/pages/org-slug/projects/id/settings/domains/add/Config.tsx index 3bc0ae6..c63efb1 100644 --- a/packages/frontend/src/pages/org-slug/projects/id/settings/domains/add/Config.tsx +++ b/packages/frontend/src/pages/org-slug/projects/id/settings/domains/add/Config.tsx @@ -1,12 +1,12 @@ -import toast from 'react-hot-toast'; import { useNavigate, useParams, useSearchParams } from 'react-router-dom'; -import { useGQLClient } from '../../../../../../../context/GQLClientContext'; +import { useGQLClient } from 'context/GQLClientContext'; import { Table } from 'components/shared/Table'; import { Button } from 'components/shared/Button'; import { InlineNotification } from 'components/shared/InlineNotification'; import { ArrowRightCircleIcon } from 'components/shared/CustomIcon'; import { ProjectSettingContainer } from 'components/projects/project/settings/ProjectSettingContainer'; +import { useToast } from 'components/shared/Toast'; const Config = () => { const { id, orgSlug } = useParams(); @@ -14,15 +14,26 @@ const Config = () => { const navigate = useNavigate(); const [searchParams] = useSearchParams(); const primaryDomainName = searchParams.get('name'); + const { toast, dismiss } = useToast(); const handleSubmitDomain = async () => { if (primaryDomainName === null) { - toast.error('Cannot resolve domain name'); + toast({ + id: 'unresolvable_domain_name', + title: 'Cannot resolve domain name', + variant: 'error', + onDismiss: dismiss, + }); return; } if (id === undefined) { - toast.error('Cannot find project'); + toast({ + id: 'domain_cannot_find_project', + title: 'Cannot find project', + variant: 'error', + onDismiss: dismiss, + }); return; } @@ -31,10 +42,20 @@ const Config = () => { }); if (isAdded) { - toast.success('Domain added successfully'); + toast({ + id: 'domain_added_successfully', + title: 'Domain added successfully', + variant: 'success', + onDismiss: dismiss, + }); navigate(`/${orgSlug}/projects/${id}/settings/domains`); } else { - toast.error('Error adding domain'); + toast({ + id: 'generic_error_adding_domain', + title: 'Error adding domaint', + variant: 'error', + onDismiss: dismiss, + }); } }; diff --git a/yarn.lock b/yarn.lock index 64c8def..e9c7dd1 100644 --- a/yarn.lock +++ b/yarn.lock @@ -11264,11 +11264,6 @@ globby@11.1.0, globby@^11.0.1, globby@^11.0.2, globby@^11.0.3, globby@^11.1.0: merge2 "^1.4.1" slash "^3.0.0" -goober@^2.1.10: - version "2.1.14" - resolved "https://registry.yarnpkg.com/goober/-/goober-2.1.14.tgz#4a5c94fc34dc086a8e6035360ae1800005135acd" - integrity sha512-4UpC0NdGyAFqLNPnhCT2iHpza2q+RAY3GV85a/mRPdzyPQMsj0KmMMuetdIkzWRbJ+Hgau1EZztq8ImmiMGhsg== - google-protobuf@^3.19.4: version "3.21.2" resolved "https://registry.yarnpkg.com/google-protobuf/-/google-protobuf-3.21.2.tgz#4580a2bea8bbb291ee579d1fefb14d6fa3070ea4" @@ -15328,13 +15323,6 @@ react-hook-form@^7.49.0: resolved "https://registry.yarnpkg.com/react-hook-form/-/react-hook-form-7.51.3.tgz#7486dd2d52280b6b28048c099a98d2545931cab3" integrity sha512-cvJ/wbHdhYx8aviSWh28w9ImjmVsb5Y05n1+FW786vEZQJV5STNM0pW6ujS+oiBecb0ARBxJFyAnXj9+GHXACQ== -react-hot-toast@^2.4.1: - version "2.4.1" - resolved "https://registry.yarnpkg.com/react-hot-toast/-/react-hot-toast-2.4.1.tgz#df04295eda8a7b12c4f968e54a61c8d36f4c0994" - integrity sha512-j8z+cQbWIM5LY37pR6uZR6D4LfseplqnuAO4co4u8917hBUvXlEqyP1ZzqVLcqoyUesZZv/ImreoCeHVDpE5pQ== - dependencies: - goober "^2.1.10" - react-inspector@6.0.2: version "6.0.2" resolved "https://registry.yarnpkg.com/react-inspector/-/react-inspector-6.0.2.tgz#aa3028803550cb6dbd7344816d5c80bf39d07e9d"