Fix default usable state

Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>

10 files changed, 105 insertions, 50 deletions

diff --git a/src/components/File.vue b/src/components/File.vue
index b8d95177..c5726184 100644
--- a/src/components/File.vue
+++ b/src/components/File.vue
@@ -68,7 +68,7 @@ export default {
 			type: String,
 			required: true,
 		},
-		id: {
+		fileid: {
 			type: Number,
 			required: true,
 		},
@@ -87,7 +87,7 @@ export default {
 			return generateRemoteUrl(`dav/files/${getCurrentUser().uid}`) + this.filename
 		},
 		ariaUuid() {
-			return `image-${this.id}`
+			return `image-${this.fileid}`
 		},
 		ariaLabel() {
 			return t('photos', 'Open the full size "{name}" image', { name: this.basename })
@@ -97,7 +97,7 @@ export default {
 	created() {
 		// Allow us to cancel the img loading on destroy
 		// use etag to force cache reload if file changed
-		this.img.src = generateUrl(`/core/preview?fileId=${this.id}&x=${1024}&y=${1024}&a=true&v=${this.etag}`)
+		this.img.src = generateUrl(`/core/preview?fileId=${this.fileid}&x=${1024}&y=${1024}&a=true&v=${this.etag}`)
 		this.img.addEventListener('load', () => {
 			this.src = this.img.src
 		})
diff --git a/src/components/Folder.vue b/src/components/Folder.vue
index c04e17a9..53a11dd9 100644
--- a/src/components/Folder.vue
+++ b/src/components/Folder.vue
@@ -31,7 +31,7 @@
 				class="folder-content"
 				role="none">
 				<img v-for="file in fileList"
-					:key="file.id"
+					:key="file.fileid"
 					:src="generateImgSrc(file)"
 					alt=""
 					@load="loaded = true">
@@ -70,7 +70,7 @@ export default {
 			type: String,
 			required: true,
 		},
-		id: {
+		fileid: {
 			type: Number,
 			required: true,
 		},
@@ -96,7 +96,7 @@ export default {
 
 		// files list of the current folder
 		folderContent() {
-			return this.folders[this.id]
+			return this.folders[this.fileid]
 		},
 		fileList() {
 			return this.folderContent
@@ -113,7 +113,7 @@ export default {
 		},
 
 		ariaUuid() {
-			return `folder-${this.id}`
+			return `folder-${this.fileid}`
 		},
 		ariaLabel() {
 			return t('photos', 'Open the "{name}" sub-directory', { name: this.basename })
@@ -142,10 +142,10 @@ export default {
 
 		try {
 			// get data
-			const { files, folders } = await request(this.filename)
-			// this.cancelRequest('Stop!')
-			this.$store.dispatch('updateFolders', { id: this.id, files, folders })
-			this.$store.dispatch('updateFiles', { folder: this.folder, files, folders })
+			const { folder, folders, files } = await request(this.filename)
+			console.info(folder, folders, files);
+			this.$store.dispatch('updateFolders', { fileid: folder.fileid, files, folders })
+			this.$store.dispatch('updateFiles', { folder, files, folders })
 		} catch (error) {
 			if (error.response && error.response.status) {
 				console.error('Failed to get folder content', this.folder, error.response)
@@ -155,13 +155,13 @@ export default {
 	},
 
 	beforeDestroy() {
-		this.cancelRequest()
+		this.cancelRequest('Navigated away')
 	},
 
 	methods: {
-		generateImgSrc({ id, etag }) {
+		generateImgSrc({ fileid, etag }) {
 			// use etag to force cache reload if file changed
-			return generateUrl(`/core/preview?fileId=${id}&x=${256}&y=${256}&a=true&v=${etag}`)
+			return generateUrl(`/core/preview?fileId=${fileid}&x=${256}&y=${256}&a=true&v=${etag}`)
 		},
 
 		fetch() {
diff --git a/src/components/Navigation.vue b/src/components/Navigation.vue
index a0d4c92c..e7f9f9a0 100644
--- a/src/components/Navigation.vue
+++ b/src/components/Navigation.vue
@@ -60,10 +60,6 @@ export default {
 			type: String,
 			default: t('photos', 'Photos'),
 		},
-		id: {
-			type: Number,
-			required: true,
-		},
 	},
 
 	computed: {
diff --git a/src/services/AlbumContent.js b/src/services/AlbumContent.js
new file mode 100644
index 00000000..ea747ede
--- /dev/null
+++ b/src/services/AlbumContent.js
@@ -0,0 +1,45 @@
+/**
+ * @copyright Copyright (c) 2019 John Molakvoæ <skjnldsv@protonmail.com>
+ *
+ * @author John Molakvoæ <skjnldsv@protonmail.com>
+ *
+ * @license GNU AGPL version 3 or any later version
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see <http://www.gnu.org/licenses/>.
+ *
+ */
+
+import { generateUrl } from '@nextcloud/router'
+import { genFileInfo } from '../utils/fileUtils'
+
+/**
+ * List files from a folder and filter out unwanted mimes
+ *
+ * @param {String} path the path relative to the user root
+ * @returns {Array} the file list
+ */
+export default async function(path) {
+	// getDirectoryContents doesn't accept / for root
+	const fixedPath = path === '/' ? '' : path
+
+	const prefixPath = `/files/${getCurrentUser().uid}`
+
+	// fetch listing
+	const response = await client.stat(prefixPath + fixedPath, {
+		data: request,
+		details: true,
+	})
+
+	return genFileInfo(response.data, prefixPath)
+}
diff --git a/src/services/DavClient.js b/src/services/DavClient.js
index c91b57e8..ff37eec4 100644
--- a/src/services/DavClient.js
+++ b/src/services/DavClient.js
@@ -29,7 +29,7 @@ import { generateRemoteUrl } from '@nextcloud/router'
 const patcher = webdav.getPatcher()
 patcher.patch('request', axios)
 
-// init webdav client
+// init webdav client on default dav endpoint
 const remote = generateRemoteUrl(`dav`)
 const client = webdav.createClient(remote)
 
diff --git a/src/services/FileList.js b/src/services/FileList.js
index c473aad8..5f8d1750 100644
--- a/src/services/FileList.js
+++ b/src/services/FileList.js
@@ -25,6 +25,7 @@ import { getSingleValue, getValueForKey, parseXML, propsToStat } from 'webdav/di
 import { handleResponseCode, processResponsePayload } from 'webdav/dist/response'
 import { normaliseHREF, normalisePath } from 'webdav/dist/url'
 import client, { remotePath } from './DavClient'
+import request from './DavRequest'
 import pathPosix from 'path-posix'
 import { genFileInfo } from '../utils/fileUtils'
 
@@ -37,17 +38,18 @@ import { genFileInfo } from '../utils/fileUtils'
  */
 export default async function(path, options) {
 
-	console.trace();
 	options = Object.assign({
 		method: 'PROPFIND',
 		headers: {
 			Accept: 'text/plain',
 			Depth: options.deep ? 'infinity' : 1,
 		},
+		data: request,
 		responseType: 'text',
 		details: true,
 	}, options)
 
+	// we also use the davclient for other endpoints than /files (like tags)
 	const prefixPath = `/files/${getCurrentUser().uid}`
 
 	/**
@@ -65,7 +67,7 @@ export default async function(path, options) {
 			return res.data
 		})
 		.then(parseXML)
-		.then(result => getDirectoryFiles(result, remotePath, options.details))
+		.then(result => getDirectoryFiles(result, remotePath + prefixPath, options.details))
 		.then(files => processResponsePayload(response, files, options.details))
 
 	const list = data.map(data => genFileInfo(data, prefixPath))
@@ -75,6 +77,7 @@ export default async function(path, options) {
 	const folders = []
 	const files = []
 	for (const entry of list) {
+		// is this the current provided path ?
 		if (entry.filename === path) {
 			folder = entry
 		} else if (entry.type === 'directory') {
@@ -89,7 +92,8 @@ export default async function(path, options) {
 }
 
 /**
- * Modified function to include the root requested folder
+ * ! Modified function to include the root requested folder
+ * ! See webdav library
  * Into the returned data
  *
  * @param {Object} result the request result
@@ -104,7 +108,7 @@ function getDirectoryFiles(result, serverBasePath, isDetailed = false) {
 	const responseItems = getValueForKey('response', multiStatus)
 	return (
 		responseItems
-		// Map all items to a consistent output structure (results)
+			// Map all items to a consistent output structure (results)
 			.map(item => {
 				// HREF is the file path (in full)
 				let href = getSingleValue(getValueForKey('href', item))
diff --git a/src/store/files.js b/src/store/files.js
index 6c55309c..5c1b4c18 100644
--- a/src/store/files.js
+++ b/src/store/files.js
@@ -34,7 +34,9 @@ const mutations = {
 	 */
 	updateFiles(state, files) {
 		files.forEach(file => {
-			Vue.set(state.files, file.id, file)
+			if (file.fileid >= 0) {
+				Vue.set(state.files, file.fileid, file)
+			}
 		})
 	},
 
@@ -43,12 +45,15 @@ const mutations = {
 	 *
 	 * @param {Object} state the store mutations
 	 * @param {Object} data destructuring object
-	 * @param {number} data.id current folder id
+	 * @param {number} data.fileid current folder id
 	 * @param {Array} data.folders list of folders
 	 */
-	setSubFolders(state, { id, folders }) {
-		if (state.files[id]) {
-			Vue.set(state.files[id], 'folders', [...folders.map(folder => folder.id)])
+	setSubFolders(state, { fileid, folders }) {
+		if (state.files[fileid]) {
+			const subfolders = folders
+				.map(folder => folder.fileid)
+				.filter(id => id >= 0)
+			Vue.set(state.files[fileid], 'folders', subfolders)
 		}
 	},
 }
@@ -71,7 +76,7 @@ const actions = {
 		const t0 = performance.now()
 		// we want all the FileInfo! Folders included!
 		context.commit('updateFiles', [folder, ...files, ...folders])
-		context.commit('setSubFolders', { id: folder.id, folders })
+		context.commit('setSubFolders', { fileid: folder.fileid, folders })
 		const t1 = performance.now()
 		console.debug('perf: updateFiles', `${t1 - t0}ms`)
 	},
diff --git a/src/store/folders.js b/src/store/folders.js
index 1075900d..ab6d51fb 100644
--- a/src/store/folders.js
+++ b/src/store/folders.js
@@ -33,17 +33,19 @@ const mutations = {
 	 *
 	 * @param {Object} state vuex state
 	 * @param {Object} data destructuring object
-	 * @param {number} data.id current folder id
+	 * @param {number} data.fileid current folder id
 	 * @param {Array} data.files list of files
 	 */
-	updateFolders(state, { id, files }) {
+	updateFolders(state, { fileid, files }) {
 		if (files.length > 0) {
 			const t0 = performance.now()
 			// sort by last modified
-			const list = files.sort((a, b) => sortCompare(a, b, 'lastmod'))
+			const list = files
+				.sort((a, b) => sortCompare(a, b, 'lastmod'))
+				.filter(file => file.fileid >= 0)
 
 			// Set folder list
-			Vue.set(state.folders, id, list.map(file => file.id))
+			Vue.set(state.folders, fileid, list.map(file => file.fileid))
 			const t1 = performance.now()
 			console.debug('perf: updateFolders', `${t1 - t0}ms`)
 		}
@@ -55,16 +57,18 @@ const mutations = {
 	 * @param {Object} state vuex state
 	 * @param {Object} data destructuring object
 	 * @param {string} data.path path of this folder
-	 * @param {number} data.id id of this folder
+	 * @param {number} data.fileid id of this folder
 	 */
-	addPath(state, { path, id }) {
-		Vue.set(state.paths, path, id)
+	addPath(state, { path, fileid }) {
+		if (fileid >= 0) {
+			Vue.set(state.paths, path, fileid)
+		}
 	},
 }
 
 const getters = {
 	folders: state => state.folders,
-	folder: state => id => state.folders[id],
+	folder: state => fileid => state.folders[fileid],
 	folderId: state => path => state.paths[path],
 }
 
@@ -74,15 +78,15 @@ const actions = {
 	 *
 	 * @param {Object} context vuex context
 	 * @param {Object} data destructuring object
-	 * @param {number} data.id current folder id
+	 * @param {number} data.fileid current folder id
 	 * @param {Array} data.files list of files
 	 * @param {Array} data.folders list of folders
 	 */
-	updateFolders(context, { id, files, folders }) {
-		context.commit('updateFolders', { id, files })
+	updateFolders(context, { fileid, files, folders }) {
+		context.commit('updateFolders', { fileid, files })
 
 		// then add each folders path indexes
-		folders.forEach(folder => context.commit('addPath', { path: folder.filename, id: folder.id }))
+		folders.forEach(folder => context.commit('addPath', { path: folder.filename, fileid: folder.fileid }))
 	},
 
 	/**
@@ -91,10 +95,10 @@ const actions = {
 	 * @param {Object} context vuex context
 	 * @param {Object} data destructuring object
 	 * @param {string} data.path path of this folder
-	 * @param {number} data.id id of this folder
+	 * @param {number} data.fileid id of this folder
 	 */
-	addPath(context, { path, id }) {
-		context.commit('addPath', { path, id })
+	addPath(context, { path, fileid }) {
+		context.commit('addPath', { path, fileid })
 	},
 }
 
diff --git a/src/utils/fileUtils.js b/src/utils/fileUtils.js
index ce18c08f..ddeb6e23 100644
--- a/src/utils/fileUtils.js
+++ b/src/utils/fileUtils.js
@@ -85,7 +85,7 @@ const sortCompare = function(fileInfo1, fileInfo2, key, asc = true) {
 	}
 
 	// if this is a date, let's sort by date
-	if (isNumber(new Date(fileInfo1[key]).getTime()) && isNumber(new Date(fileInfo2[key])).getTime()) {
+	if (isNumber(new Date(fileInfo1[key]).getTime()) && isNumber(new Date(fileInfo2[key]).getTime())) {
 		return asc
 			? new Date(fileInfo2[key]).getTime() - new Date(fileInfo1[key]).getTime()
 			: new Date(fileInfo1[key]).getTime() - new Date(fileInfo2[key]).getTime()
diff --git a/src/views/Albums.vue b/src/views/Albums.vue
index 2338a3c7..1aace973 100644
--- a/src/views/Albums.vue
+++ b/src/views/Albums.vue
@@ -35,8 +35,8 @@
 	<!-- Folder content -->
 	<Grid v-else>
 		<Navigation v-if="folder" key="navigation" v-bind="folder" />
-		<Folder v-for="dir in folderList" :key="dir.id" v-bind="dir" />
-		<File v-for="file in fileList" :key="file.id" v-bind="file" />
+		<Folder v-for="dir in folderList" :key="dir.fileid" v-bind="dir" />
+		<File v-for="file in fileList" :key="file.fileid" v-bind="file" />
 	</Grid>
 </template>
 
@@ -157,7 +157,7 @@ export default {
 		async fetchFolderContent() {
 			console.debug('start: fetchFolderContent', this.path)
 			// cancel any pending requests
-			this.cancelRequest()
+			this.cancelRequest('Changed folder')
 
 			// close any potential opened viewer
 			OCA.Viewer.close()
@@ -175,8 +175,9 @@ export default {
 			try {
 				// get content and current folder info
 				const { folder, folders, files } = await request(this.path)
-				this.$store.dispatch('addPath', { path: this.path, id: folder.id })
-				this.$store.dispatch('updateFolders', { id: folder.id, files, folders })
+				console.debug(folder, folders, files)
+				this.$store.dispatch('addPath', { path: this.path, fileid: folder.fileid })
+				this.$store.dispatch('updateFolders', { fileid: folder.fileid, files, folders })
 				this.$store.dispatch('updateFiles', { folder, files, folders })
 				console.debug('end: fetchFolderContent', this.path)
 			} catch (error) {