From 2f0a5b9cab1dbc655e4eb4a9f92ce97aa1c3948e Mon Sep 17 00:00:00 2001
From: ilya-bkv <i.yablokov@ccmp.me>
Date: Wed, 10 May 2023 17:07:41 +0300
Subject: [PATCH] Delete cover image

---
 src/components/Views/Edit.module.scss |  5 +++++
 src/components/Views/Edit.tsx         | 19 ++++++++++++++-----
 2 files changed, 19 insertions(+), 5 deletions(-)

diff --git a/src/components/Views/Edit.module.scss b/src/components/Views/Edit.module.scss
index 675cbd1a..9432bee2 100644
--- a/src/components/Views/Edit.module.scss
+++ b/src/components/Views/Edit.module.scss
@@ -11,6 +11,11 @@
   align-items: flex-start;
   box-sizing: border-box;
 
+  .actions {
+    display: flex;
+    gap: 16px;
+  }
+
   .shoutCardCoverContainer {
     position: relative;
     width: 100%;
diff --git a/src/components/Views/Edit.tsx b/src/components/Views/Edit.tsx
index 2ef4dac5..813eeca7 100644
--- a/src/components/Views/Edit.tsx
+++ b/src/components/Views/Edit.tsx
@@ -85,6 +85,10 @@ export const EditView = (props: EditViewProps) => {
     setCoverImage(imageProxy(imgUrl))
     setForm('coverImageUrl', imgUrl)
   }
+  const handleDeleteCoverImage = () => {
+    setForm('coverImageUrl', '')
+    setCoverImage(null)
+  }
 
   return (
     <>
@@ -219,11 +223,16 @@ export const EditView = (props: EditViewProps) => {
                     )}
                   </p>
                   <div class={styles.articlePreview}>
-                    <Button
-                      variant="primary"
-                      onClick={() => showModal('uploadImage')}
-                      value={coverImage() ? t('Add another image') : t('Add image')}
-                    />
+                    <div class={styles.actions}>
+                      <Button
+                        variant="primary"
+                        onClick={() => showModal('uploadImage')}
+                        value={coverImage() || form.coverImageUrl ? t('Add another image') : t('Add image')}
+                      />
+                      <Show when={coverImage() ?? form.coverImageUrl}>
+                        <Button variant="secondary" onClick={handleDeleteCoverImage} value={t('Delete')} />
+                      </Show>
+                    </div>
                     <Show when={coverImage() ?? form.coverImageUrl}>
                       <div class={styles.shoutCardCoverContainer}>
                         <div class={styles.shoutCardCover}>