From 5d0c00ada50bf2dcc17929be7b32843f3a7fa780 Mon Sep 17 00:00:00 2001
From: skjnldsv <skjnldsv@protonmail.com>
Date: Thu, 8 Aug 2024 09:47:20 +0200
Subject: [PATCH] fix(folders): empty content and unknown folder render

Signed-off-by: skjnldsv <skjnldsv@protonmail.com>
---
 src/store/folders.js  |  5 +++++
 src/views/Folders.vue | 39 +++++++++++++++++++++++++--------------
 2 files changed, 30 insertions(+), 14 deletions(-)

diff --git a/src/store/folders.js b/src/store/folders.js
index efcf4f5da..0d92b7eb8 100644
--- a/src/store/folders.js
+++ b/src/store/folders.js
@@ -20,6 +20,10 @@ const mutations = {
 	 * @param {Array} data.files list of files
 	 */
 	updateFolders(state, { fileid, files }) {
+		if (!state.folders[fileid]) {
+			Vue.set(state.folders, fileid, [])
+		}
+
 		if (files.length > 0) {
 			// sort by last modified
 			const list = files
@@ -69,6 +73,7 @@ const mutations = {
 
 const getters = {
 	folders: state => state.folders,
+	paths: state => state.paths,
 	folder: state => fileid => state.folders[fileid],
 	folderId: state => path => state.paths[path],
 }
diff --git a/src/views/Folders.vue b/src/views/Folders.vue
index e83da3167..aa6891bbb 100644
--- a/src/views/Folders.vue
+++ b/src/views/Folders.vue
@@ -5,14 +5,16 @@
 
 <template>
 	<!-- Errors handlers-->
-	<NcEmptyContent v-if="error === 404" illustration-name="folder">
-		{{ t('photos', 'This folder does not exist') }}
+	<NcEmptyContent v-if="error === 404" :name="t('photos', 'This folder does not exist')">
+		<template #icon>
+			<FolderIcon />
+		</template>
 	</NcEmptyContent>
-	<NcEmptyContent v-else-if="error">
-		{{ t('photos', 'An error occurred') }}
-	</NcEmptyContent>
-	<NcEmptyContent v-else-if="initializing" icon="icon-loading">
-		{{ t('photos', 'Loading folders …') }}
+	<NcEmptyContent v-else-if="error" :name="t('photos', 'An error occurred')" />
+	<NcEmptyContent v-else-if="initializing" :name="t('photos', 'Loading folders …')">
+		<template #icon>
+			<NcLoadingIcon />
+		</template>
 	</NcEmptyContent>
 
 	<!-- Folder content -->
@@ -21,7 +23,7 @@
 			:class="{'photos-navigation--uploading': uploader.queue?.length > 0}"
 			:loading="loading"
 			:path="path"
-			:title="folder.basename.toString()"
+			:title="folder?.basename?.toString?.() || rootTitle"
 			:root-title="rootTitle"
 			@refresh="onRefresh">
 			<UploadPicker :accept="allowedMimes"
@@ -31,8 +33,10 @@
 		</HeaderNavigation>
 
 		<!-- Empty folder, should only happen via direct link -->
-		<NcEmptyContent v-if="isEmpty" key="emptycontent" illustration-name="empty">
-			{{ t('photos', 'No photos in here') }}
+		<NcEmptyContent v-if="isEmpty" key="emptycontent" :name="t('photos', 'No photos in here')">
+			<template #icon>
+				<FolderIcon />
+			</template>
 		</NcEmptyContent>
 
 		<div v-else
@@ -50,10 +54,11 @@
 </template>
 
 <script>
+import { Folder as NcFolder, davParsePermissions } from '@nextcloud/files'
 import { mapGetters } from 'vuex'
+import { NcEmptyContent, NcLoadingIcon } from '@nextcloud/vue'
 import { Upload, UploadPicker, getUploader } from '@nextcloud/upload'
-import { Folder as NcFolder, davParsePermissions } from '@nextcloud/files'
-import { NcEmptyContent } from '@nextcloud/vue'
+import FolderIcon from 'vue-material-design-icons/Folder.vue'
 import VirtualGrid from 'vue-virtual-grid'
 
 import FileLegacy from '../components/FileLegacy.vue'
@@ -71,10 +76,12 @@ import getFileInfo from '../services/FileInfo.js'
 export default {
 	name: 'Folders',
 	components: {
-		VirtualGrid,
+		FolderIcon,
 		HeaderNavigation,
 		NcEmptyContent,
+		NcLoadingIcon,
 		UploadPicker,
+		VirtualGrid,
 	},
 	mixins: [
 		AbortControllerMixin,
@@ -126,6 +133,10 @@ export default {
 			return this.files[this.folderId]
 		},
 		folderAsFolder() {
+			if (!this.folder) {
+				return null
+			}
+
 			return new NcFolder({
 				...this.folder,
 				source: decodeURI(this.folder.source),
@@ -133,7 +144,7 @@ export default {
 			})
 		},
 		folderContent() {
-			return this.folders[this.folderId]
+			return this.folders[this.folderId] || []
 		},
 		fileList() {
 			const list = this.folderContent