From ff9cc46102a634136cc2eed2432e27918c5e05f5 Mon Sep 17 00:00:00 2001 From: Jesse Leung Date: Tue, 5 Nov 2024 21:21:19 -0500 Subject: [PATCH] feat(138): add errors to error toast --- src/components/ErrorToast.jsx | 10 ++++++++++ src/features/projects/ManageTagsModal/EditTag.jsx | 13 ++++++++----- src/features/projects/projectsSlice.js | 7 +++++++ src/features/review/reviewSlice.js | 6 ++++++ 4 files changed, 31 insertions(+), 5 deletions(-) diff --git a/src/components/ErrorToast.jsx b/src/components/ErrorToast.jsx index f1983c79..cf769a7b 100644 --- a/src/components/ErrorToast.jsx +++ b/src/components/ErrorToast.jsx @@ -8,6 +8,8 @@ import { dismissLabelsError, selectCommentsErrors, dismissCommentsError, + selectTagsErrors, + dismissTagsError, } from '../features/review/reviewSlice'; import { selectProjectsErrors, @@ -20,6 +22,8 @@ import { dismissCreateProjectError, selectManageLabelsErrors, dismissManageLabelsError, + selectProjectTagErrors, + dismissProjectTagErrors } from '../features/projects/projectsSlice'; import { selectWirelessCamerasErrors, @@ -57,6 +61,7 @@ import { selectManageUserErrors, dismissManageUsersError } from '../features/pro const ErrorToast = () => { const dispatch = useDispatch(); const labelsErrors = useSelector(selectLabelsErrors); + const tagsErrors = useSelector(selectTagsErrors); const commentsErrors = useSelector(selectCommentsErrors); const projectsErrors = useSelector(selectProjectsErrors); const viewsErrors = useSelector(selectViewsErrors); @@ -74,9 +79,12 @@ const ErrorToast = () => { const manageLabelsErrors = useSelector(selectManageLabelsErrors); const uploadErrors = useSelector(selectUploadErrors); const cameraSerialNumberErrors = useSelector(selectCameraSerialNumberErrors); + const projectTagErrors = useSelector(selectProjectTagErrors); const enrichedErrors = [ enrichErrors(labelsErrors, 'Label Error', 'labels'), + enrichErrors(tagsErrors, 'Tag Error', 'tags'), + enrichErrors(projectTagErrors, 'Tag Error', 'projectTags'), enrichErrors(commentsErrors, 'Comment Error', 'comments'), enrichErrors(projectsErrors, 'Project Error', 'projects'), enrichErrors(viewsErrors, 'View Error', 'views'), @@ -144,6 +152,8 @@ const ErrorToast = () => { const dismissErrorActions = { labels: (i) => dismissLabelsError(i), + tags: (i) => dismissTagsError(i), + projectTags: (i) => dismissProjectTagErrors(i), comments: (i) => dismissCommentsError(i), projects: (i) => dismissProjectsError(i), createProject: (i) => dismissCreateProjectError(i), diff --git a/src/features/projects/ManageTagsModal/EditTag.jsx b/src/features/projects/ManageTagsModal/EditTag.jsx index 53fbb1e6..41d7bcc1 100644 --- a/src/features/projects/ManageTagsModal/EditTag.jsx +++ b/src/features/projects/ManageTagsModal/EditTag.jsx @@ -47,13 +47,14 @@ const ColorSwatch = styled('button', { const createTagNameSchema = (currentName, allNames) => { return Yup.string() - .required('Enter a label name.') - .matches(/^[a-zA-Z0-9_. -]*$/, "Labels can't contain special characters") - .test('unique', 'A label with this name already exists.', (val) => { + .required('Enter a tag name.') + .matches(/^[a-zA-Z0-9_. -]*$/, "Tags can't contain special characters") + .test('unique', 'A tag with this name already exists.', (val) => { + const allNamesLowerCase = allNames.map((n) => n.toLowerCase()) if (val?.toLowerCase() === currentName.toLowerCase()) { // name hasn't changed return true; - } else if (!allNames.includes(val?.toLowerCase())) { + } else if (!allNamesLowerCase.includes(val?.toLowerCase())) { // name hasn't already been used return true; } else { @@ -155,7 +156,6 @@ export const EditTag = ({ const [color, setColor] = useState(currentColor); const [tempColor, setTempColor] = useState(currentColor); - const tagNameSchema = createTagNameSchema(currentName, allTagNames); const [nameError, setNameError] = useState(""); const [colorError, setColorError] = useState(""); @@ -191,6 +191,9 @@ export const EditTag = ({ const onConfirmEdit = () => { let validatedName = ""; let validatedColor = ""; + + const tagNameSchema = createTagNameSchema(currentName, allTagNames); + // If the user typed in a color, tempColor !== color const submittedColor = tempColor !== color ? tempColor : color; try { diff --git a/src/features/projects/projectsSlice.js b/src/features/projects/projectsSlice.js index 36229fc6..b99d9965 100644 --- a/src/features/projects/projectsSlice.js +++ b/src/features/projects/projectsSlice.js @@ -432,6 +432,11 @@ export const projectsSlice = createSlice({ state.loadingStates.projectTags = ls; }, + dismissProjectTagErrors: (state, { payload }) => { + const index = payload; + state.loadingStates.projectTags.errors.splice(index, 1); + }, + setModalOpen: (state, { payload }) => { state.modalOpen = payload; }, @@ -487,6 +492,7 @@ export const { setSelectedProjAndView, setUnsavedViewChanges, dismissProjectsError, + dismissProjectTagErrors, createProjectStart, createProjectSuccess, createProjectFailure, @@ -915,5 +921,6 @@ export const selectModelOptionsLoading = (state) => export const selectProjectLabelsLoading = (state) => state.projects.loadingStates.projectLabels; export const selectManageLabelsErrors = (state) => state.projects.loadingStates.projectLabels.errors; +export const selectProjectTagErrors = (state) => state.projects.loadingStates.projectTags.errors; export default projectsSlice.reducer; diff --git a/src/features/review/reviewSlice.js b/src/features/review/reviewSlice.js index 7b8ada72..2b5362cd 100644 --- a/src/features/review/reviewSlice.js +++ b/src/features/review/reviewSlice.js @@ -206,6 +206,11 @@ export const reviewSlice = createSlice({ state.loadingStates.labels.errors.splice(index, 1); }, + dismissTagsError: (state, { payload }) => { + const index = payload; + state.loadingStates.tags.errors.splice(index, 1); + }, + dismissCommentsError: (state, { payload }) => { const index = payload; state.loadingStates.comments.errors.splice(index, 1); @@ -256,6 +261,7 @@ export const { editTagFailure, editTagSuccess, dismissLabelsError, + dismissTagsError, dismissCommentsError, } = reviewSlice.actions;