From 3bb392df1b9f725f1955f9cd13f5dcdc08b673db Mon Sep 17 00:00:00 2001 From: HanmaDaiki Date: Sun, 1 Oct 2023 14:24:12 +0300 Subject: [PATCH 1/4] fix: now newSticker updating --- src/components/NewSticker/NewSticker.tsx | 65 +++++++++++++++++------- 1 file changed, 47 insertions(+), 18 deletions(-) diff --git a/src/components/NewSticker/NewSticker.tsx b/src/components/NewSticker/NewSticker.tsx index 2809882..f63bcf7 100644 --- a/src/components/NewSticker/NewSticker.tsx +++ b/src/components/NewSticker/NewSticker.tsx @@ -22,7 +22,15 @@ import { updateSticker, openMessage, } from '@shared/store'; -import { ButtonCustom, Input, InputError, InputField, RadioButton, TooltipCustom, Loader } from '@components/UI'; +import { + ButtonCustom, + Input, + InputError, + InputField, + RadioButton, + TooltipCustom, + Loader, +} from '@components/UI'; import { InfoBox, Shape, StickerImage, DragAndDrop } from '@components/index'; import { messages } from '@static/popups'; @@ -120,7 +128,11 @@ export const NewSticker: FC = ({ sticker, stickerActiveId, handleActiveS }; const sizeValidate = (value: string): boolean => { - return REG_STICKERS.test(value) && Number(value) >= SIZE_INPUT_MIN_LENGTH && Number(value) <= SIZE_INPUT_MAX_LENGTH; + return ( + REG_STICKERS.test(value) && + Number(value) >= SIZE_INPUT_MIN_LENGTH && + Number(value) <= SIZE_INPUT_MAX_LENGTH + ); }; const onWidthChange = () => { @@ -133,7 +145,7 @@ export const NewSticker: FC = ({ sticker, stickerActiveId, handleActiveS ...sticker, width: Number(value), height: sticker.shape === 'circle' ? Number(value) : sticker.height, - }), + }) ); } setBlock(false); @@ -149,7 +161,7 @@ export const NewSticker: FC = ({ sticker, stickerActiveId, handleActiveS ...sticker, height: Number(value), width: sticker.shape === 'circle' ? Number(value) : sticker.width, - }), + }) ); } setBlock(false); @@ -175,27 +187,32 @@ export const NewSticker: FC = ({ sticker, stickerActiveId, handleActiveS useEffect(() => { // const image = new File([sticker.image], 'image.png'); // setValue('image', image); - setValue('shape', sticker.shape); - setValue('amount', sticker.amount); - setValue('width', sticker.width); - setValue('height', sticker.height); - setValue('optimal_width', sticker.optimal_width); - setValue('optimal_height', sticker.optimal_height); - setValue('size', sticker.size_type); + if (sticker.id === 'newSticker') { + setValue('shape', sticker.shape); + setValue('amount', sticker.amount); + setValue('width', sticker.width); + setValue('height', sticker.height); + setValue('optimal_width', sticker.optimal_width); + setValue('optimal_height', sticker.optimal_height); + setValue('size', sticker.size_type); + } // eslint-disable-next-line react-hooks/exhaustive-deps - }, []); + }, [sticker]); return (
null : () => handleActiveSticker(sticker.id)} > {loading && } -
+
{/* Оставляем драгндроп с инпутом картинки, чтобы при сворачивании карточки он не размонтировался и не очищался инпут*/} = ({ sticker, stickerActiveId, handleActiveS )}
- + = ({ sticker, stickerActiveId, handleActiveS value='rounded_square' onShapeChange={onShapeChange} /> - +
@@ -272,7 +301,7 @@ export const NewSticker: FC = ({ sticker, stickerActiveId, handleActiveS height: sticker.optimal_height, width: sticker.optimal_width, size_type: 'optimal', - }), + }) ); }} > @@ -294,7 +323,7 @@ export const NewSticker: FC = ({ sticker, stickerActiveId, handleActiveS height: getValues('height'), width: getValues('width'), size_type: 'custom', - }), + }) ); }} > From e8f2fc40adbece3b126574e0c26ab4dac75ea384 Mon Sep 17 00:00:00 2001 From: HanmaDaiki Date: Mon, 2 Oct 2023 17:06:58 +0300 Subject: [PATCH 2/4] bug: fix preview --- src/shared/store/stickersSlice.ts | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/shared/store/stickersSlice.ts b/src/shared/store/stickersSlice.ts index 0dbe43d..0df30c6 100644 --- a/src/shared/store/stickersSlice.ts +++ b/src/shared/store/stickersSlice.ts @@ -82,6 +82,8 @@ const stickerSlice = createSlice({ } return sticker; }); + + state.pages = calculateStickerOnList(state.stickers.slice(0, state.stickers.length - 1), pageSizePx); }, removeAllStickers(state) { state.stickers = [ @@ -120,6 +122,8 @@ const stickerSlice = createSlice({ } return sticker; }); + + state.pages = calculateStickerOnList(state.stickers.slice(0, state.stickers.length - 1), pageSizePx); }, }, extraReducers: (builder) => { From 1dab3cde1b094504d8023a9847337ada1d37f787 Mon Sep 17 00:00:00 2001 From: HanmaDaiki Date: Mon, 2 Oct 2023 17:38:17 +0300 Subject: [PATCH 3/4] fix --- src/shared/store/stickersSlice.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/shared/store/stickersSlice.ts b/src/shared/store/stickersSlice.ts index 0df30c6..b57de96 100644 --- a/src/shared/store/stickersSlice.ts +++ b/src/shared/store/stickersSlice.ts @@ -82,8 +82,6 @@ const stickerSlice = createSlice({ } return sticker; }); - - state.pages = calculateStickerOnList(state.stickers.slice(0, state.stickers.length - 1), pageSizePx); }, removeAllStickers(state) { state.stickers = [ @@ -114,6 +112,8 @@ const stickerSlice = createSlice({ size_type: 'optimal', }); } + + state.pages = calculateStickerOnList(state.stickers.slice(0, state.stickers.length - 1), pageSizePx); }, addSticker(state, action) { state.stickers = state.stickers.map((sticker) => { From 356a6b2015ef77d9fbee8f2c82e2f1a196b3e7ff Mon Sep 17 00:00:00 2001 From: HanmaDaiki Date: Tue, 3 Oct 2023 16:26:47 +0300 Subject: [PATCH 4/4] fix --- src/components/NewSticker/NewSticker.tsx | 39 ++++++++++++++---------- 1 file changed, 23 insertions(+), 16 deletions(-) diff --git a/src/components/NewSticker/NewSticker.tsx b/src/components/NewSticker/NewSticker.tsx index f63bcf7..4757dd3 100644 --- a/src/components/NewSticker/NewSticker.tsx +++ b/src/components/NewSticker/NewSticker.tsx @@ -116,6 +116,28 @@ export const NewSticker: FC = ({ sticker, stickerActiveId, handleActiveS .catch(() => dispatch(openMessage({ text: `${messages.somethingWrong}`, isError: true }))) .finally(() => { setLoading(false); + setCustomVisible(false); + dispatch( + updateSticker({ + ...sticker, + id: 'newSticker', + image: '', + size_type: 'optimal', + shape: 'square', + amount: 1, + width: 3, + height: 3, + optimal_width: 3, + optimal_height: 3, + }) + ); + setValue('shape', 'square'); + setValue('amount', 1); + setValue('width', 3); + setValue('height', 3); + setValue('optimal_width', 3); + setValue('optimal_height', 3); + setValue('size', 'optimal'); }); } @@ -176,7 +198,7 @@ export const NewSticker: FC = ({ sticker, stickerActiveId, handleActiveS const height = watch('height'); const initialSize = sticker.size_type; - + const fieldsUnchanged = initialSize === sticker.size_type && sticker.shape === shape && @@ -184,21 +206,6 @@ export const NewSticker: FC = ({ sticker, stickerActiveId, handleActiveS sticker.width === width && sticker.height === height; - useEffect(() => { - // const image = new File([sticker.image], 'image.png'); - // setValue('image', image); - if (sticker.id === 'newSticker') { - setValue('shape', sticker.shape); - setValue('amount', sticker.amount); - setValue('width', sticker.width); - setValue('height', sticker.height); - setValue('optimal_width', sticker.optimal_width); - setValue('optimal_height', sticker.optimal_height); - setValue('size', sticker.size_type); - } - // eslint-disable-next-line react-hooks/exhaustive-deps - }, [sticker]); - return (