mirror of
https://github.com/snowball-tools/snowballtools-base.git
synced 2024-12-21 15:47:45 +00:00
refactor: use onToast remove react-hot-toast dep (#226)
### TL;DR Removed the dependency on `react-hot-toast` in favor of a custom implementation for toast notifications. ### What changed? 1. Removed `react-hot-toast` from `package.json` and `yarn.lock`. 2. Updated `EnvironmentVariables` and `Config` to use the custom toast notification system. ### Why make this change? To reduce bundle size and have more control over the toast notification system. ### How to test? 1. Navigate to the Environment Variables settings for a project. Try adding and removing environment variables to see the new toast notifications in action. 2. Navigate to the Domains settings for a project and try adding a new domain to view the custom toast notifications. ---
This commit is contained in:
Vivian Phung
GitHub
parent
9a1c0e8338
commit
2b60114dab
@ -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",
|
||||
|
||||
@ -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],
|
||||
|
||||
@ -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,
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
12
yarn.lock
12
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"
|
||||
|
||||
Loading…
Reference in New Issue
Block a user