feat(create listing): add default photo and tags, implement drop feat…

…ure (#41)

Implement default photo (kimitzu logo) and tags (Kimitzu).
Implement drag and drop feature.

fix #35

src/components/Thumbnav/ThumbnavSlideshow.css

@@ -13,3 +13,10 @@
   justify-content: center;
   background-color: #0000;
 }
+.thumbnav-drag-attempt {
+  border: dodgerblue 5px dashed;
+}
+.thumbnav-image-preview {
+  object-fit: contain;
+  height: 100%;
+}

src/components/Thumbnav/ThumbnavSlideshow.tsx

@@ -1,7 +1,6 @@
-import React, { useState } from 'react'
+import React, { useEffect, useState } from 'react'
 
 import { Button } from '../Button'
-import { DropArea } from '../Upload'
 
 import ImageUploaderInstance from '../../utils/ImageUploaderInstance'
 
@@ -21,6 +20,35 @@ const ThumbnavSlideshow = ({ images, onChange }: Props) => {
 
   const [photos, setPhotos] = useState(images)
   const [selectedIndex, setSelectedIndex] = useState(0)
+  const [dropStyle, setDropStyle] = useState('')
+  const [dropRef, setDropRef] = useState(React.createRef<HTMLDivElement>())
+
+  useEffect(() => {
+    const handleDragEvents = evt => {
+      evt.preventDefault()
+      evt.stopPropagation()
+
+      if (['dragenter', 'dragover'].includes(evt.type)) {
+        setDropStyle('thumbnav-drag-attempt')
+      }
+
+      if (['dragleave', 'drop'].includes(evt.type)) {
+        setDropStyle('')
+      }
+
+      if (evt.type === 'drop') {
+        const dataTransfer = evt.dataTransfer
+        if (dataTransfer && dataTransfer.files.length > 0) {
+          onImageOpen(dataTransfer.files)
+        }
+      }
+    }
+
+    dropRef.current!.addEventListener('dragenter', handleDragEvents, false)
+    dropRef.current!.addEventListener('dragover', handleDragEvents, false)
+    dropRef.current!.addEventListener('dragleave', handleDragEvents, false)
+    dropRef.current!.addEventListener('drop', handleDragEvents, false)
+  }, [])
 
   const handleDelete = () => {
     images.splice(selectedIndex, 1)
@@ -30,8 +58,7 @@ const ThumbnavSlideshow = ({ images, onChange }: Props) => {
     onChange(newPhotos)
   }
 
-  const onImageOpen = async (event: React.ChangeEvent<HTMLInputElement>) => {
-    const imageFiles = event.target.files
+  const onImageOpen = async (imageFiles: FileList) => {
     const base64ImageFiles: Array<Promise<string>> = []
 
     if (!imageFiles) {
@@ -51,23 +78,37 @@ const ThumbnavSlideshow = ({ images, onChange }: Props) => {
   }
 
   return (
-    <div>
-      <div className="uk-position-relative" data-uk-slideshow="animation: fade">
+    <div ref={dropRef}>
+      <div className={`uk-position-relative ${dropStyle}`} data-uk-slideshow="animation: fade">
         <ul className="uk-slideshow-items">
           {photos.length === 0 ? (
-            <DropArea
-              placeholder={dropArea.placeholder}
-              selectLabel={dropArea.selectLabel}
-              onImageOpen={onImageOpen}
-            />
+            <div className="uk-placeholder uk-flex uk-flex-middle uk-flex-center">
+              <span data-uk-icon="icon: cloud-upload" />
+              <span className="uk-text-middle">{dropArea.placeholder}</span>
+              <div className="color-primary" data-uk-form-custom>
+                <input
+                  id="image-upload"
+                  type="file"
+                  multiple
+                  onChange={evt => {
+                    if (evt.target.files) {
+                      onImageOpen(evt.target.files)
+                    }
+                  }}
+                  accept="image/*"
+                />
+                &nbsp;{dropArea.selectLabel}
+              </div>
+            </div>
           ) : (
             photos.map((image: string) => (
               <li key={image} className="img-li-cont">
-                <img src={image} alt="thumbnail" />
+                <img src={image} alt="thumbnail" className="thumbnav-image-preview" />
               </li>
             ))
           )}
         </ul>
+
         <div className="uk-position-bottom-center uk-position-small">
           <ul className="uk-thumbnav">
             {photos.map((image: string, index: number) => (
@@ -107,7 +148,11 @@ const ThumbnavSlideshow = ({ images, onChange }: Props) => {
             id="file-upload"
             type="file"
             multiple
-            onChange={onImageOpen}
+            onChange={evt => {
+              if (evt.target.files) {
+                onImageOpen(evt.target.files)
+              }
+            }}
             accept="image/*"
             hidden
           />
@@ -116,7 +161,9 @@ const ThumbnavSlideshow = ({ images, onChange }: Props) => {
             onClick={evt => {
               evt.preventDefault()
               const fileUploadHandler = document.getElementById('file-upload')
-              fileUploadHandler!.click()
+              if (fileUploadHandler) {
+                fileUploadHandler!.click()
+              }
             }}
           >
             <span uk-icon="icon: plus" />

src/pages/CreateListing.tsx

@@ -1,3 +1,4 @@
+import Axios from 'axios'
 import React, { Component, ReactNode } from 'react'
 import { Prompt, RouteComponentProps } from 'react-router'
 import { SideMenuWithContentCard } from '../components/Card'
@@ -21,6 +22,7 @@ import ImageUploaderInstance from '../utils/ImageUploaderInstance'
 import NestedJSONUpdater from '../utils/NestedJSONUpdater'
 
 import { Link } from 'react-router-dom'
+import config from '../config'
 import { localeInstance } from '../i18n'
 
 const cryptoCurrenciesConstants = [...CryptoCurrencies()]
@@ -374,6 +376,17 @@ class CreateListing extends Component<CreateListingProps, CreateListingState> {
     })
 
     const newImages = this.state.tempImages.filter(image => !image.startsWith('http'))
+
+    if (listing.item.images.length <= 0 && this.state.tempImages.length <= 0) {
+      const defaultLogo = await Axios.get(`${config.host}/icon.png`, { responseType: 'blob' })
+      const defaultLogoBase64 = await ImageUploaderInstance.convertToBase64(defaultLogo.data)
+      newImages.push(defaultLogoBase64)
+    }
+
+    if (listing.item.tags.length <= 0) {
+      listing.item.tags.push('Kimitzu')
+    }
+
     const imageUpload = newImages.map(base64Image => ImageUploaderInstance.uploadImage(base64Image))
     const updateOldImages = this.state.listing.item.images.filter(oldElements => {
       return this.state.tempImages.find(updatedElements => {
@@ -385,6 +398,7 @@ class CreateListing extends Component<CreateListingProps, CreateListingState> {
     try {
       const images = await Promise.all(imageUpload)
       listing.item.images = [...updateOldImages, ...images]
+
       if (this.state.isListingNew) {
         await listing.save()
         window.UIkit.notification(this.locale.listingForm.notifications.addSuccess, {
@@ -404,7 +418,7 @@ class CreateListing extends Component<CreateListingProps, CreateListingState> {
         window.location.hash = '/'
       }, 2000)
     } catch (e) {
-      window.UIkit.notification(e.message, {
+      window.UIkit.notification(e.response.data.reason || e.message, {
         status: 'danger',
       })
       this.setState({