From 1d22ac21730e1ade597fb404c828b7850db5a871 Mon Sep 17 00:00:00 2001 From: Saidakrom Rakhmedov Date: Sat, 1 Feb 2025 20:21:56 +0500 Subject: [PATCH 1/3] add reset attachment --- src/pages/root/steps/data-step/index.tsx | 221 ++++++++++++----------- src/shared/stores/root/index.ts | 2 +- 2 files changed, 119 insertions(+), 104 deletions(-) diff --git a/src/pages/root/steps/data-step/index.tsx b/src/pages/root/steps/data-step/index.tsx index 2878be1..a601b98 100644 --- a/src/pages/root/steps/data-step/index.tsx +++ b/src/pages/root/steps/data-step/index.tsx @@ -14,6 +14,7 @@ import { useRootStore } from "~/shared/stores/root"; import { Checkbox } from "~/shared/ui/checkbox"; import { AudioPlayer } from "~/shared/ui/audio-player"; import { HashtagInput } from "~/shared/ui/hashtag-input"; +import { XMark } from "~/shared/ui/icons/x-mark"; type DataStepProps = { nextStep(): void; @@ -57,119 +58,133 @@ export const DataStep = ({ nextStep }: DataStepProps) => { })(); }; + const handleFileReset = () => { + rootStore.setFile(null); + rootStore.setFileSrc(''); + rootStore.setFileType(''); + } + return ( -
-
- /Заполните информацию о контенте -
- 1/5 -
+
+
+ /Заполните информацию о контенте +
+ 1/5
+
-
- - - +
+ + + - - - + + + - - - + + + - - { - rootStore.setFile(file); - rootStore.setFileSrc(URL.createObjectURL(file)); - rootStore.setFileType(file.type); // Save the file type for conditional rendering - }} - /> + + { + rootStore.setFile(file); + rootStore.setFileSrc(URL.createObjectURL(file)); + rootStore.setFileType(file.type); // Save the file type for conditional rendering + }} + /> - {!rootStore.fileSrc && } + {!rootStore.fileSrc && } - {rootStore.fileSrc && ( -
- {rootStore.fileType?.startsWith("audio") ? ( - - ) : ( - - )} -
- )} - - -
- rootStore.setAllowCover(!rootStore.allowCover)} - checked={rootStore.allowCover} - /> + {rootStore.fileSrc && ( +
+ {rootStore.fileType?.startsWith("audio") ? ( + + ) : ( + + )} + +
+ )} + - {rootStore.allowCover && ( - - { - rootStore.setCover(cover); - }} - /> - - {rootStore.cover ? ( - { - rootStore.setCover(null); - }} - /> - ) : ( - - )} - - )} -
-
- -
+ /> + + {rootStore.allowCover && ( + + { + rootStore.setCover(cover); + }} + /> + + {rootStore.cover ? ( + { + rootStore.setCover(null); + }} + /> + ) : ( + + )} + + )} +
+ + +
); }; diff --git a/src/shared/stores/root/index.ts b/src/shared/stores/root/index.ts index 2a0d84a..f9decdd 100644 --- a/src/shared/stores/root/index.ts +++ b/src/shared/stores/root/index.ts @@ -13,7 +13,7 @@ type RootStore = { setAuthor: (author: string) => void; file: File | null; - setFile: (file: File) => void; + setFile: (file: File | null) => void; fileType: string; setFileType: (type: string) => void; From fc6fb5003e067ca4c32c5daca04fb5508e5f299f Mon Sep 17 00:00:00 2001 From: Saidakrom Rakhmedov Date: Sat, 1 Feb 2025 20:29:49 +0500 Subject: [PATCH 2/3] fix warnings --- src/shared/services/file/index.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/shared/services/file/index.ts b/src/shared/services/file/index.ts index 8a75ad9..03a830d 100644 --- a/src/shared/services/file/index.ts +++ b/src/shared/services/file/index.ts @@ -21,12 +21,12 @@ export const useUploadFile = () => { }>("/storage", formData, { headers: { "Content-Type": "multipart/form-data", - Authorization: localStorage.getItem('auth_v1_token') ?? "" + Authorization: localStorage.getItem('auth_v1_token') || "" }, onUploadProgress: (progressEvent) => { const percentCompleted = Math.round( - (progressEvent.loaded * 100) / (progressEvent?.total as number) ?? + (progressEvent.loaded * 100) / (progressEvent?.total as number) || 0, ); setUploadProgress(percentCompleted); From 7f7dde7b280bc5fb333ffe377f985d91dbae841c Mon Sep 17 00:00:00 2001 From: Saidakrom Rakhmedov Date: Sat, 1 Feb 2025 20:53:51 +0500 Subject: [PATCH 3/3] Add replace icon --- .../components/cover-button/index.tsx | 5 +- src/pages/root/steps/data-step/index.tsx | 50 +++++++++++-------- src/shared/ui/icons/replace.tsx | 9 ++++ 3 files changed, 41 insertions(+), 23 deletions(-) create mode 100644 src/shared/ui/icons/replace.tsx diff --git a/src/pages/root/steps/data-step/components/cover-button/index.tsx b/src/pages/root/steps/data-step/components/cover-button/index.tsx index 2b3d339..e0b9aa1 100644 --- a/src/pages/root/steps/data-step/components/cover-button/index.tsx +++ b/src/pages/root/steps/data-step/components/cover-button/index.tsx @@ -1,4 +1,5 @@ import { useHapticFeedback } from "@vkruglikov/react-telegram-web-app"; +import { Replace } from "~/shared/ui/icons/replace"; import { XMark } from "~/shared/ui/icons/x-mark.tsx"; @@ -36,8 +37,8 @@ export const CoverButton = ({ src, onClick }: CoverButtonProps) => { } >
-
Удалить
- +
Изменить
+
); diff --git a/src/pages/root/steps/data-step/index.tsx b/src/pages/root/steps/data-step/index.tsx index a601b98..c467205 100644 --- a/src/pages/root/steps/data-step/index.tsx +++ b/src/pages/root/steps/data-step/index.tsx @@ -15,6 +15,7 @@ import { Checkbox } from "~/shared/ui/checkbox"; import { AudioPlayer } from "~/shared/ui/audio-player"; import { HashtagInput } from "~/shared/ui/hashtag-input"; import { XMark } from "~/shared/ui/icons/x-mark"; +import { Replace } from "~/shared/ui/icons/replace"; type DataStepProps = { nextStep(): void; @@ -95,18 +96,20 @@ export const DataStep = ({ nextStep }: DataStepProps) => { - { - rootStore.setFile(file); - rootStore.setFileSrc(URL.createObjectURL(file)); - rootStore.setFileType(file.type); // Save the file type for conditional rendering - }} - /> + {!rootStore.fileSrc && <> + { + rootStore.setFile(file); + rootStore.setFileSrc(URL.createObjectURL(file)); + rootStore.setFileType(file.type); // Save the file type for conditional rendering + }} + /> - {!rootStore.fileSrc && } + + } {rootStore.fileSrc && (
{
)} @@ -151,13 +156,7 @@ export const DataStep = ({ nextStep }: DataStepProps) => { {rootStore.allowCover && ( - { - rootStore.setCover(cover); - }} - /> + {rootStore.cover ? ( { }} /> ) : ( - + <> + { + rootStore.setCover(cover); + }} + /> + + )} )} diff --git a/src/shared/ui/icons/replace.tsx b/src/shared/ui/icons/replace.tsx new file mode 100644 index 0000000..c256953 --- /dev/null +++ b/src/shared/ui/icons/replace.tsx @@ -0,0 +1,9 @@ +export const Replace = () => { + return ( + + + + + + ); +};