Fix banner selection from user page and drives

Previously, updateBanner takes a callback as a first argument of the function, but some calls passes a file object.

I've refactored it with Promise to avoid those misuses (although it should have type definitions :/)
This commit is contained in:
unarist 2018-04-09 00:33:56 +09:00
parent 2ce9ea2eda
commit 8a37227907
2 changed files with 30 additions and 24 deletions

View file

@ -3,9 +3,9 @@ import { apiUrl } from '../../config';
import CropWindow from '../views/components/crop-window.vue'; import CropWindow from '../views/components/crop-window.vue';
import ProgressDialog from '../views/components/progress-dialog.vue'; import ProgressDialog from '../views/components/progress-dialog.vue';
export default (os: OS) => (cb, file = null) => { export default (os: OS) => {
const fileSelected = file => {
const cropImage = file => new Promise((resolve, reject) => {
const w = new CropWindow({ const w = new CropWindow({
propsData: { propsData: {
image: file, image: file,
@ -26,22 +26,24 @@ export default (os: OS) => (cb, file = null) => {
os.api('drive/folders/create', { os.api('drive/folders/create', {
name: 'バナー' name: 'バナー'
}).then(iconFolder => { }).then(iconFolder => {
upload(data, iconFolder); resolve(upload(data, iconFolder));
}); });
} else { } else {
upload(data, bannerFolder[0]); resolve(upload(data, bannerFolder[0]));
} }
}); });
}); });
w.$once('skipped', () => { w.$once('skipped', () => {
set(file); resolve(file);
}); });
document.body.appendChild(w.$el); w.$once('cancelled', reject);
};
const upload = (data, folder) => { document.body.appendChild(w.$el);
});
const upload = (data, folder) => new Promise((resolve, reject) => {
const dialog = new ProgressDialog({ const dialog = new ProgressDialog({
propsData: { propsData: {
title: '新しいバナーをアップロードしています' title: '新しいバナーをアップロードしています'
@ -56,18 +58,19 @@ export default (os: OS) => (cb, file = null) => {
xhr.onload = e => { xhr.onload = e => {
const file = JSON.parse((e.target as any).response); const file = JSON.parse((e.target as any).response);
(dialog as any).close(); (dialog as any).close();
set(file); resolve(file);
}; };
xhr.onerror = reject;
xhr.upload.onprogress = e => { xhr.upload.onprogress = e => {
if (e.lengthComputable) (dialog as any).update(e.loaded, e.total); if (e.lengthComputable) (dialog as any).update(e.loaded, e.total);
}; };
xhr.send(data); xhr.send(data);
}; });
const set = file => { const setBanner = file => {
os.api('i/update', { return os.api('i/update', {
bannerId: file.id bannerId: file.id
}).then(i => { }).then(i => {
os.i.bannerId = i.bannerId; os.i.bannerId = i.bannerId;
@ -81,18 +84,21 @@ export default (os: OS) => (cb, file = null) => {
}] }]
}); });
if (cb) cb(i); return i;
}); });
}; };
if (file) { return (file = null) => {
fileSelected(file); const selectedFile = file
} else { ? Promise.resolve(file)
os.apis.chooseDriveFile({ : os.apis.chooseDriveFile({
multiple: false, multiple: false,
title: '%fa:image%バナーにする画像を選択' title: '%fa:image%バナーにする画像を選択'
}).then(file => {
fileSelected(file);
}); });
}
return selectedFile
.then(cropImage)
.then(setBanner)
.catch(err => err && console.warn(err));
};
}; };

View file

@ -62,7 +62,7 @@ export default Vue.extend({
onBannerClick() { onBannerClick() {
if (!(this as any).os.isSignedIn || (this as any).os.i.id != this.user.id) return; if (!(this as any).os.isSignedIn || (this as any).os.i.id != this.user.id) return;
(this as any).apis.updateBanner((this as any).os.i, i => { (this as any).apis.updateBanner().then(i => {
this.user.bannerUrl = i.bannerUrl; this.user.bannerUrl = i.bannerUrl;
}); });
} }