Merge remote-tracking branch 'akrom/add-reset-attachment'

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) => {
         }
       >
         <div />
-        <div className={"flex gap-2 text-sm"}>Удалить</div>
+        <div className={"flex gap-2 text-sm"}>Изменить</div>
-        <XMark />
+        <Replace />
       </button>
     </div>
   );

src/pages/root/steps/data-step/index.tsx

@@ -14,6 +14,8 @@ 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";
+import { Replace } from "~/shared/ui/icons/replace";
 
 type DataStepProps = {
   nextStep(): void;
@@ -57,6 +59,12 @@ export const DataStep = ({ nextStep }: DataStepProps) => {
     })();
   };
 
+  const handleFileReset = () => {
+    rootStore.setFile(null);
+    rootStore.setFileSrc('');
+    rootStore.setFileType('');
+  }
+
   return (
     <section className={"mt-4 px-4 pb-8"}>
       <div className={"mb-[30px] flex flex-col text-sm"}>
@@ -88,6 +96,7 @@ export const DataStep = ({ nextStep }: DataStepProps) => {
         </FormLabel>
 
         <FormLabel label={"Файл"}>
+          {!rootStore.fileSrc && <>
             <HiddenFileInput
               id={"file"}
               shouldProcess={false}
@@ -99,7 +108,8 @@ export const DataStep = ({ nextStep }: DataStepProps) => {
               }}
             />
 
-            {!rootStore.fileSrc && <FileButton htmlFor={"file"} />}
+            <FileButton htmlFor={"file"} />
+          </>}
 
           {rootStore.fileSrc && (
             <div
@@ -118,6 +128,16 @@ export const DataStep = ({ nextStep }: DataStepProps) => {
                   url={rootStore.fileSrc}
                 />
               )}
+              <button
+                onClick={handleFileReset}
+                className={
+                  "flex w-full items-center justify-between gap-1 border border-white px-[10px] py-[8px]"
+                }
+              >
+                <div />
+                <div className={"flex gap-2 text-sm"}>Изменить выбор</div>
+                <Replace />
+              </button>
             </div>
           )}
         </FormLabel>
@@ -136,13 +156,7 @@ export const DataStep = ({ nextStep }: DataStepProps) => {
 
           {rootStore.allowCover && (
             <FormLabel label={"Обложка"}>
-                  <HiddenFileInput
+
-                      id={"cover"}
-                      accept={"image/*"}
-                      onChange={(cover) => {
-                        rootStore.setCover(cover);
-                      }}
-                  />
 
               {rootStore.cover ? (
                 <CoverButton
@@ -152,7 +166,16 @@ export const DataStep = ({ nextStep }: DataStepProps) => {
                   }}
                 />
               ) : (
+                <>
+                  <HiddenFileInput
+                    id={"cover"}
+                    accept={"image/*"}
+                    onChange={(cover) => {
+                      rootStore.setCover(cover);
+                    }}
+                  />
                   <FileButton htmlFor={"cover"} />
+                </>
               )}
             </FormLabel>
           )}

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);

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;

src/shared/ui/icons/replace.tsx

@@ -0,0 +1,9 @@
+export const Replace = () => {
+    return (
+        <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <g opacity="1">
+                <path d="M15.75 6.01C15.9293 6.01 16.0939 6.07292 16.2229 6.17788C17.3108 7.09184 18.0024 8.46516 18.0024 10C18.0024 12.6888 15.8801 14.8818 13.2193 14.9954L13.0024 15H8.56057L9.78032 16.2197C10.0466 16.4859 10.0708 16.9026 9.85294 17.1962L9.78032 17.2803C9.51406 17.5466 9.09739 17.5708 8.80378 17.3529L8.71966 17.2803L6.21966 14.7803C5.9534 14.5141 5.92919 14.0974 6.14704 13.8038L6.21966 13.7197L8.71966 11.2197C9.01256 10.9268 9.48743 10.9268 9.78032 11.2197C10.0466 11.4859 10.0708 11.9026 9.85294 12.1962L9.78032 12.2803L8.56057 13.5H13.0024C14.871 13.5 16.3975 12.0357 16.4972 10.192L16.5024 10C16.5024 8.91885 16.0122 7.95219 15.2419 7.31017C15.0935 7.17538 15 6.97861 15 6.76C15 6.34579 15.3358 6.01 15.75 6.01ZM10.2197 2.71967C10.4859 2.4534 10.9026 2.4292 11.1962 2.64705L11.2803 2.71967L13.7803 5.21967L13.8529 5.30379C14.0466 5.56478 14.049 5.92299 13.8601 6.18638L13.7803 6.28033L11.2803 8.78033L11.1962 8.85295C10.9352 9.0466 10.577 9.04899 10.3136 8.86012L10.2197 8.78033L10.147 8.69621C9.9534 8.43522 9.951 8.07701 10.1399 7.81362L10.2197 7.71967L11.4386 6.5H6.99757C5.12901 6.5 3.60245 7.96428 3.50275 9.80796L3.49757 10C3.49757 11.0831 3.98958 12.0514 4.7623 12.6934C4.9085 12.8289 4.99999 13.0238 4.99999 13.24C4.99999 13.6542 4.66421 13.99 4.24999 13.99C4.05871 13.99 3.88415 13.9184 3.75166 13.8005C2.67865 12.8872 1.99757 11.5232 1.99757 10C1.99757 7.31124 4.11988 5.11818 6.78068 5.00462L6.99757 5H11.4386L10.2197 3.78033L10.147 3.69621C9.92919 3.4026 9.9534 2.98594 10.2197 2.71967Z" fill="white" />
+            </g>
+        </svg>
+    );
+};