hook multifile to ui

app/pages/share/index.js

@@ -3,42 +3,51 @@ const html = require('choo/html');
 const raw = require('choo/html/raw');
 const assets = require('../../../common/assets');
 const notFound = require('../notFound');
-const setPasswordSection = require('../../templates/setPasswordSection');
-const selectbox = require('../../templates/selectbox');
 const deletePopup = require('../../templates/popup');
+const uploadedFiles = require('../../templates/uploadedFileList');
 const { allowedCopy, delay, fadeOut } = require('../../utils');
 
 module.exports = function(state, emit) {
   const file = state.storage.getFileById(state.params.id);
   if (!file) {
-    return notFound(state, emit);
+    return notFound(state);
   }
 
+  const passwordReminderClass = file._hasPassword
+    ? ''
+    : 'passwordReminder--hidden';
+
+  const multifiles = Array.from(file.manifest.files);
+
   return html`
-  <div id="shareWrapper" class="effect--fadeIn">
-    ${expireInfo(file, state.translate, emit)}
-    <div class="sharePage">
+
+    <div class="page effect--fadeIn" id="shareWrapper">
+      <a href="/" class="goBackButton"> 
+        <img src="${assets.get('back-arrow.svg')}"/> 
+      </a>
+      ${expireInfo(file, state.translate)}
+
+      ${uploadedFiles(multifiles, state, emit)}
+
+
       <div class="sharePage__copyText">
-        ${state.translate('copyUrlFormLabelWithName', { filename: file.name })}
+        ${state.translate('copyUrlFormLabelWithName', { filename: '' })}
+        <div class="sharePage__passwordReminder ${passwordReminderClass}">(don't forget the password too)</div>
       </div>
-      <div class="copySection">
-        <input
-          id="fileUrl"
-          class="copySection__url"
-          type="url"
-          value="${file.url}"
-          readonly="true"/>
-        <button id="copyBtn"
-          class="inputBtn inputBtn--copy"
-          title="${state.translate('copyUrlFormButton')}"
-          onclick=${copyLink}>${state.translate('copyUrlFormButton')}</button>
-      </div>
-      ${setPasswordSection(state, emit)}
-      <button
-        class="btn btn--delete"
-        title="${state.translate('deleteFileButton')}"
-        onclick=${showPopup}>${state.translate('deleteFileButton')}
+
+      <input
+        id="fileUrl"
+        class="copySection__url"
+        type="url"
+        value="${file.url}"
+        readonly="true"/>
+
+      <button id="copyBtn"
+        class="btn copyBtn"
+        title="${state.translate('copyUrlFormButton')}"
+        onclick=${copyLink}>${state.translate('copyUrlFormButton')}
       </button>
+      
       <div class="sharePage__deletePopup">
         ${deletePopup(
           state.translate('deletePopupText'),
@@ -47,11 +56,15 @@ module.exports = function(state, emit) {
           deleteFile
         )}
       </div>
-      <a class="link link--action"
-        href="/"
-        onclick=${sendNew}>${state.translate('sendAnotherFileLink')}</a>
+
+      <a
+        class="error btn--delete"
+        title="${state.translate('deleteFileButton')}"
+        onclick=${showPopup}>${state.translate('deleteFileButton')}
+      </a>
+
     </div>
-  </div>
+
   `;
 
   function showPopup() {
@@ -60,30 +73,22 @@ module.exports = function(state, emit) {
     popup.focus();
   }
 
-  async function sendNew(e) {
-    e.preventDefault();
-    await fadeOut('#shareWrapper');
-    emit('pushState', '/');
-  }
-
   async function copyLink() {
     if (allowedCopy()) {
       emit('copy', { url: file.url, location: 'success-screen' });
       const input = document.getElementById('fileUrl');
       input.disabled = true;
-      input.classList.add('input--copied');
       const copyBtn = document.getElementById('copyBtn');
       copyBtn.disabled = true;
-      copyBtn.classList.add('inputBtn--copied');
+      copyBtn.classList.add('copyBtn--copied');
       copyBtn.replaceChild(
-        html`<img src="${assets.get('check-16.svg')}" class="cursor--pointer">`,
+        html`<label>${state.translate('copiedUrl')}</label>`,
         copyBtn.firstChild
       );
       await delay(2000);
       input.disabled = false;
-      input.classList.remove('input--copied');
       copyBtn.disabled = false;
-      copyBtn.classList.remove('inputBtn--copied');
+      copyBtn.classList.remove('copyBtn--copied');
       copyBtn.textContent = state.translate('copyUrlFormButton');
     }
   }
@@ -95,18 +100,14 @@ module.exports = function(state, emit) {
   }
 };
 
-function expireInfo(file, translate, emit) {
+function expireInfo(file, translate) {
   const hours = Math.floor(EXPIRE_SECONDS / 60 / 60);
-  const el = html`<div class="title">${raw(
+  const el = html`<div class="shareTitle">${raw(
     translate('expireInfo', {
-      downloadCount: '<select></select>',
+      downloadCount: translate('downloadCount', { num: file.dlimit }),
       timespan: translate('timespanHours', { num: hours })
     })
   )}</div>`;
-  const select = el.querySelector('select');
-  const options = [1, 2, 3, 4, 5, 20].filter(i => i > (file.dtotal || 0));
-  const t = num => translate('downloadCount', { num });
-  const changed = value => emit('changeLimit', { file, value });
-  el.replaceChild(selectbox(file.dlimit || 1, options, t, changed), select);
+
   return el;
 }