From 1d22ac21730e1ade597fb404c828b7850db5a871 Mon Sep 17 00:00:00 2001
From: Saidakrom Rakhmedov <s.raxmedov@hayotbank.uz>
Date: Sat, 1 Feb 2025 20:21:56 +0500
Subject: [PATCH] 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 (
-      <section className={"mt-4 px-4 pb-8"}>
-        <div className={"mb-[30px] flex flex-col text-sm"}>
-          <span className={"ml-4"}>/Заполните информацию о контенте</span>
-          <div>
-            1/<span className={"text-[#7B7B7B]"}>5</span>
-          </div>
+    <section className={"mt-4 px-4 pb-8"}>
+      <div className={"mb-[30px] flex flex-col text-sm"}>
+        <span className={"ml-4"}>/Заполните информацию о контенте</span>
+        <div>
+          1/<span className={"text-[#7B7B7B]"}>5</span>
         </div>
+      </div>
 
-        <div className={"flex flex-col gap-[20px]"}>
-          <FormLabel label={"Название"}>
-            <Input
-                placeholder={"[ Введите название ]"}
-                error={form.formState.errors?.name}
-                {...form.register("name")}
-            />
-          </FormLabel>
+      <div className={"flex flex-col gap-[20px]"}>
+        <FormLabel label={"Название"}>
+          <Input
+            placeholder={"[ Введите название ]"}
+            error={form.formState.errors?.name}
+            {...form.register("name")}
+          />
+        </FormLabel>
 
-          <FormLabel label={"Имя автора/исполнителя"}>
-            <Input
-                placeholder={"[ введите имя автора/исполнителя ]"}
-                error={form.formState.errors?.author}
-                {...form.register("author")}
-            />
-          </FormLabel>
+        <FormLabel label={"Имя автора/исполнителя"}>
+          <Input
+            placeholder={"[ введите имя автора/исполнителя ]"}
+            error={form.formState.errors?.author}
+            {...form.register("author")}
+          />
+        </FormLabel>
 
-          <FormLabel label={"Хэштеги"}>
-            <HashtagInput />
-          </FormLabel>
+        <FormLabel label={"Хэштеги"}>
+          <HashtagInput />
+        </FormLabel>
 
-          <FormLabel label={"Файл"}>
-            <HiddenFileInput
-                id={"file"}
-                shouldProcess={false}
-                accept={"video/mp4,video/x-m4v,video/*,audio/mp3,audio/*"}
-                onChange={(file) => {
-                  rootStore.setFile(file);
-                  rootStore.setFileSrc(URL.createObjectURL(file));
-                  rootStore.setFileType(file.type); // Save the file type for conditional rendering
-                }}
-            />
+        <FormLabel label={"Файл"}>
+          <HiddenFileInput
+            id={"file"}
+            shouldProcess={false}
+            accept={"video/mp4,video/x-m4v,video/*,audio/mp3,audio/*"}
+            onChange={(file) => {
+              rootStore.setFile(file);
+              rootStore.setFileSrc(URL.createObjectURL(file));
+              rootStore.setFileType(file.type); // Save the file type for conditional rendering
+            }}
+          />
 
-            {!rootStore.fileSrc && <FileButton htmlFor={"file"} />}
+          {!rootStore.fileSrc && <FileButton htmlFor={"file"} />}
 
-            {rootStore.fileSrc && (
-                <div
-                    className={
-                      "w-full border border-white bg-[#2B2B2B] px-[10px] py-[8px] text-sm"
-                    }
-                >
-                  {rootStore.fileType?.startsWith("audio") ? (
-                      <AudioPlayer src={rootStore.fileSrc} />
-                  ) : (
-                      <ReactPlayer
-                          playsinline={true}
-                          controls={true}
-                          width="100%"
-                          config={{ file: { attributes: { playsInline: true } } }}
-                          url={rootStore.fileSrc}
-                      />
-                  )}
-                </div>
-            )}
-          </FormLabel>
-
-          <div className={"flex flex-col gap-2"}>
-            <FormLabel
-                label={"Разрешить обложку"}
-                labelClassName={"flex"}
-                formLabelAddon={
-                  <Checkbox
-                      onClick={() => rootStore.setAllowCover(!rootStore.allowCover)}
-                      checked={rootStore.allowCover}
-                  />
+          {rootStore.fileSrc && (
+            <div
+              className={
+                "w-full border border-white bg-[#2B2B2B] px-[10px] py-[8px] text-sm"
+              }
+            >
+              {rootStore.fileType?.startsWith("audio") ? (
+                <AudioPlayer src={rootStore.fileSrc} />
+              ) : (
+                <ReactPlayer
+                  playsinline={true}
+                  controls={true}
+                  width="100%"
+                  config={{ file: { attributes: { playsInline: true } } }}
+                  url={rootStore.fileSrc}
+                />
+              )}
+              <button
+                onClick={handleFileReset}
+                className={
+                  "text-center w-full gap-1 border border-white px-[10px] py-[8px] mt-2 text-sm"
                 }
-            />
+              >
+                Изменить выбор
+              </button>
+            </div>
+          )}
+        </FormLabel>
 
-            {rootStore.allowCover && (
-                <FormLabel label={"Обложка"}>
-                  <HiddenFileInput
-                      id={"cover"}
-                      accept={"image/*"}
-                      onChange={(cover) => {
-                        rootStore.setCover(cover);
-                      }}
-                  />
-
-                  {rootStore.cover ? (
-                      <CoverButton
-                          src={URL.createObjectURL(rootStore.cover)}
-                          onClick={() => {
-                            rootStore.setCover(null);
-                          }}
-                      />
-                  ) : (
-                      <FileButton htmlFor={"cover"} />
-                  )}
-                </FormLabel>
-            )}
-          </div>
-        </div>
-
-        <Button
-            className={"mt-[30px]"}
-            onClick={handleSubmit}
-            includeArrows={true}
-            label={"Готово"}
-            disabled={
-                !form.formState.isValid ||
-                !rootStore.file ||
-                (rootStore.allowCover && !rootStore.cover)
+        <div className={"flex flex-col gap-2"}>
+          <FormLabel
+            label={"Разрешить обложку"}
+            labelClassName={"flex"}
+            formLabelAddon={
+              <Checkbox
+                onClick={() => rootStore.setAllowCover(!rootStore.allowCover)}
+                checked={rootStore.allowCover}
+              />
             }
-        />
-      </section>
+          />
+
+          {rootStore.allowCover && (
+            <FormLabel label={"Обложка"}>
+              <HiddenFileInput
+                id={"cover"}
+                accept={"image/*"}
+                onChange={(cover) => {
+                  rootStore.setCover(cover);
+                }}
+              />
+
+              {rootStore.cover ? (
+                <CoverButton
+                  src={URL.createObjectURL(rootStore.cover)}
+                  onClick={() => {
+                    rootStore.setCover(null);
+                  }}
+                />
+              ) : (
+                <FileButton htmlFor={"cover"} />
+              )}
+            </FormLabel>
+          )}
+        </div>
+      </div>
+
+      <Button
+        className={"mt-[30px]"}
+        onClick={handleSubmit}
+        includeArrows={true}
+        label={"Готово"}
+        disabled={
+          !form.formState.isValid ||
+          !rootStore.file ||
+          (rootStore.allowCover && !rootStore.cover)
+        }
+      />
+    </section>
   );
 };
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;