From 733e7882741eed0a6cce1ef91bbe1ec035f01d9d Mon Sep 17 00:00:00 2001
From: robertu <robertu0717@gmail.com>
Date: Fri, 7 Feb 2020 14:33:00 +0800
Subject: [PATCH] Revise cover upload notice of `<AddCover>`

---
 .../Me/DraftDetail/Sidebar/AddCover/index.tsx | 115 ++++++++++--------
 .../DraftDetail/Sidebar/AddCover/styles.css   |  14 +--
 2 files changed, 72 insertions(+), 57 deletions(-)

diff --git a/src/views/Me/DraftDetail/Sidebar/AddCover/index.tsx b/src/views/Me/DraftDetail/Sidebar/AddCover/index.tsx
index ef53e68c0b..5bf049bdb8 100644
--- a/src/views/Me/DraftDetail/Sidebar/AddCover/index.tsx
+++ b/src/views/Me/DraftDetail/Sidebar/AddCover/index.tsx
@@ -10,7 +10,10 @@ import { useMutation } from '~/components/GQL'
 import Collapsable from '../Collapsable'
 import styles from './styles.css'
 
-import { AddCoverDraft } from './__generated__/AddCoverDraft'
+import {
+  AddCoverDraft,
+  AddCoverDraft_assets
+} from './__generated__/AddCoverDraft'
 import { UpdateDraftCover } from './__generated__/UpdateDraftCover'
 
 const fragments = {
@@ -29,7 +32,7 @@ const fragments = {
 }
 
 const UPDATE_COVER = gql`
-  mutation UpdateDraftCover($id: ID!, $coverAssetId: ID!) {
+  mutation UpdateDraftCover($id: ID!, $coverAssetId: ID) {
     putDraft(input: { id: $id, coverAssetId: $coverAssetId }) {
       id
       ...AddCoverDraft
@@ -40,47 +43,62 @@ const UPDATE_COVER = gql`
 
 const CoverList = ({
   draftId,
-  update,
-  updateHeaderState,
   cover,
   assets
 }: {
   draftId: string
-  update: any
-  updateHeaderState: any
   cover: string | null
-  assets: any
+  assets: AddCoverDraft_assets[]
 }) => {
-  const uniqAssets = _uniqBy(assets, 'path') as any
-  return uniqAssets.map((asset: any, index: number) => {
-    const css = classNames({
-      'cover-image': true,
-      'cover-selected': asset.path === cover
-    })
-    return (
-      <div
-        key={asset.path}
-        className={css}
-        style={{ backgroundImage: `url(${asset.path})` }}
-        onClick={async () => {
-          updateHeaderState({ type: 'draft', state: 'saving', draftId })
-          try {
-            await update({ variables: { id: draftId, coverAssetId: asset.id } })
-            updateHeaderState({ type: 'draft', state: 'saved', draftId })
-          } catch (error) {
-            updateHeaderState({ type: 'draft', state: 'saveFailed', draftId })
-          }
-        }}
-      >
-        <style jsx>{styles}</style>
-      </div>
-    )
-  })
+  const [update] = useMutation<UpdateDraftCover>(UPDATE_COVER)
+  const { updateHeaderState } = useContext(HeaderContext)
+
+  const uniqAssets = _uniqBy(assets, 'path')
+
+  return (
+    <section>
+      {uniqAssets.map((asset, index) => {
+        const isSelected = asset.path === cover
+        const coverItemClass = classNames({
+          'cover-image': true,
+          selected: isSelected
+        })
+
+        return (
+          <section
+            className={coverItemClass}
+            style={{ backgroundImage: `url(${asset.path})` }}
+            role="button"
+            aria-label={`選擇圖 ${index + 1} 作爲作品封面`}
+            key={asset.path}
+            onClick={async () => {
+              updateHeaderState({ type: 'draft', state: 'saving', draftId })
+              try {
+                await update({
+                  variables: {
+                    id: draftId,
+                    coverAssetId: asset.id
+                  }
+                })
+                updateHeaderState({ type: 'draft', state: 'saved', draftId })
+              } catch (error) {
+                updateHeaderState({
+                  type: 'draft',
+                  state: 'saveFailed',
+                  draftId
+                })
+              }
+            }}
+          >
+            <style jsx>{styles}</style>
+          </section>
+        )
+      })}
+    </section>
+  )
 }
 
 const AddCover = ({ draft }: { draft: AddCoverDraft }) => {
-  const [update] = useMutation<UpdateDraftCover>(UPDATE_COVER)
-  const { updateHeaderState } = useContext(HeaderContext)
   const { id: draftId, cover, assets } = draft
   const imageAssets = assets.filter(
     ({ type }: { type: string }) => type === 'embed'
@@ -93,30 +111,27 @@ const AddCover = ({ draft }: { draft: AddCoverDraft }) => {
     'u-area-disable': isPending || isPublished
   })
 
-  if (imageAssets.length <= 0) {
-    return null
-  }
-
   return (
     <Collapsable
       title={<Translate zh_hans="封面" zh_hant="封面" />}
-      defaultCollapsed={!hasAssets}
+      defaultCollapsed={false}
     >
       <p className="cover-intro">
-        <Translate
-          zh_hant="選擇一張圖片作為封面"
-          zh_hans="选择一张图片作为封面"
-        />
+        {hasAssets ? (
+          <Translate
+            zh_hant="選擇一張圖片作爲作品封面吧！"
+            zh_hans="选择一张图片作为作品封面吧！"
+          />
+        ) : (
+          <Translate
+            zh_hant="你的作品還沒有可用作封面的圖片，在文中插入一張試試吧。"
+            zh_hans="你的作品还没有可用作封面的图片，在文中插入一张试试吧。"
+          />
+        )}
       </p>
 
       <section className={containerStyle}>
-        <CoverList
-          draftId={draftId}
-          updateHeaderState={updateHeaderState}
-          update={update}
-          cover={cover}
-          assets={imageAssets}
-        />
+        <CoverList draftId={draftId} cover={cover} assets={imageAssets} />
       </section>
 
       <style jsx>{styles}</style>
diff --git a/src/views/Me/DraftDetail/Sidebar/AddCover/styles.css b/src/views/Me/DraftDetail/Sidebar/AddCover/styles.css
index 594be8c64f..dc8625af1f 100644
--- a/src/views/Me/DraftDetail/Sidebar/AddCover/styles.css
+++ b/src/views/Me/DraftDetail/Sidebar/AddCover/styles.css
@@ -2,7 +2,6 @@
   display: flex;
   align-items: center;
 
-  padding-bottom: 1rem;
   overflow-x: scroll;
 }
 
@@ -14,14 +13,15 @@
 }
 
 .cover-image {
-  border: 4px solid var(--color-white);
-  cursor: pointer;
   display: inline-block;
   margin-right: 1rem;
   padding: 2.3125rem;
-}
 
-.cover-selected {
-  border: 4px solid var(--color-matters-green);
-  cursor: initial;
+  border: 4px solid var(--color-white);
+  cursor: pointer;
+
+  &.selected {
+    border-color: var(--color-matters-green);
+    cursor: initial;
+  }
 }