refactor: move folder picker to utils

Signed-off-by: Varun Patil <radialapps@gmail.com>

src/components/FirstStart.vue

@@ -51,13 +51,13 @@ import NcContent from '@nextcloud/vue/dist/Components/NcContent';
 import NcAppContent from '@nextcloud/vue/dist/Components/NcAppContent';
 import NcButton from '@nextcloud/vue/dist/Components/NcButton';
 
-import { getFilePickerBuilder } from '@nextcloud/dialogs';
 import { getCurrentUser } from '@nextcloud/auth';
 import axios from '@nextcloud/axios';
 
 import banner from '../assets/banner.svg';
 import type { IDay } from '../types';
 import { API } from '../services/API';
+import * as utils from '../services/Utils';
 
 export default defineComponent({
   name: 'FirstStart',
@@ -91,10 +91,7 @@ export default defineComponent({
 
   methods: {
     async begin() {
-      let path = await this.chooseFolder(this.t('memories', 'Choose the root of your timeline'), '/');
-
-      // Remove duplicate slashes
-      path = path.replace(/\/+/g, '/');
+      const path = await utils.chooseNcFolder(this.t('memories', 'Choose the root of your timeline'));
 
       // Get folder days
       this.error = '';
@@ -137,19 +134,6 @@ export default defineComponent({
       this.config.timeline_path = this.chosenPath;
       await this.updateSetting('timeline_path', 'timelinePath');
     },
-
-    async chooseFolder(title: string, initial: string) {
-      const picker = getFilePickerBuilder(title)
-        .setMultiSelect(false)
-        .setModal(true)
-        .setType(1)
-        .addMimeTypeFilter('httpd/unix-directory')
-        .allowDirectories()
-        .startAt(initial)
-        .build();
-
-      return await picker.pick();
-    },
   },
 });
 </script>

src/components/Settings.vue

@@ -127,10 +127,10 @@ input[type='text'] {
 <script lang="ts">
 import { defineComponent } from 'vue';
 
-import { getFilePickerBuilder } from '@nextcloud/dialogs';
 import { getCurrentUser } from '@nextcloud/auth';
 
 import UserConfig from '../mixins/UserConfig';
+import * as utils from '../services/Utils';
 import * as nativex from '../native';
 
 import NcButton from '@nextcloud/vue/dist/Components/NcButton';
@@ -189,19 +189,6 @@ export default defineComponent({
       this.$emit('update:open', false);
     },
 
-    async chooseFolder(title: string, initial: string) {
-      const picker = getFilePickerBuilder(title)
-        .setMultiSelect(false)
-        .setModal(true)
-        .setType(1)
-        .addMimeTypeFilter('httpd/unix-directory')
-        .allowDirectories()
-        .startAt(initial)
-        .build();
-
-      return await picker.pick();
-    },
-
     async chooseTimelinePath() {
       (<any>this.$refs.multiPathModal).open(this.config.timeline_path.split(';'));
     },
@@ -217,11 +204,11 @@ export default defineComponent({
     },
 
     async chooseFoldersPath() {
-      let newPath = await this.chooseFolder(
+      const newPath = await utils.chooseNcFolder(
         this.t('memories', 'Choose the root for the folders view'),
         this.config.folders_path
       );
-      if (newPath === '') newPath = '/';
+
       if (newPath !== this.config.folders_path) {
         this.config.folders_path = newPath;
         await this.updateSetting('folders_path', 'foldersPath');

src/components/modal/MoveToFolderModal.vue

@@ -13,10 +13,13 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
 
-import * as dav from '../../services/DavRequests';
-import { getFilePickerBuilder, FilePickerType } from '@nextcloud/dialogs';
+import { FilePickerType } from '@nextcloud/dialogs';
 import { showInfo } from '@nextcloud/dialogs';
-import { IPhoto } from '../../types';
+
+import * as dav from '../../services/DavRequests';
+import * as utils from '../../services/Utils';
+
+import type { IPhoto } from '../../types';
 
 const NcProgressBar = () => import('@nextcloud/vue/dist/Components/NcProgressBar');
 
@@ -57,21 +60,12 @@ export default defineComponent({
       this.$emit('close');
     },
 
-    async chooseFolderModal(title: string, initial: string) {
-      const picker = getFilePickerBuilder(title)
-        .setMultiSelect(false)
-        .setModal(false)
-        .setType(FilePickerType.Move)
-        .addMimeTypeFilter('httpd/unix-directory')
-        .allowDirectories()
-        .startAt(initial)
-        .build();
-
-      return await picker.pick();
-    },
-
     async chooseFolderPath() {
-      let destination = await this.chooseFolderModal(this.t('memories', 'Choose a folder'), this.config.folders_path);
+      let destination = await utils.chooseNcFolder(
+        this.t('memories', 'Choose a folder'),
+        this.config.folders_path,
+        FilePickerType.Move
+      );
       // Fails if the target exists, same behavior with Nextcloud files implementation.
       const gen = dav.movePhotos(this.photos, destination, false);
       this.processing = true;

src/components/modal/MultiPathSelectionModal.vue

@@ -33,7 +33,8 @@ import { defineComponent } from 'vue';
 
 import Modal from './Modal.vue';
 
-import { getFilePickerBuilder } from '@nextcloud/dialogs';
+import * as utils from '../../services/Utils';
+
 import NcActions from '@nextcloud/vue/dist/Components/NcActions';
 import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton';
 import NcButton from '@nextcloud/vue/dist/Components/NcButton';
@@ -77,23 +78,8 @@ export default defineComponent({
       this.close(this.paths);
     },
 
-    async chooseFolder(title: string, initial: string) {
-      const picker = getFilePickerBuilder(title)
-        .setMultiSelect(false)
-        .setModal(true)
-        .setType(1)
-        .addMimeTypeFilter('httpd/unix-directory')
-        .allowDirectories()
-        .startAt(initial)
-        .build();
-
-      return await picker.pick();
-    },
-
     async add() {
-      let newPath = await this.chooseFolder(this.t('memories', 'Add a root to your timeline'), '/');
-      if (newPath === '') newPath = '/';
-      this.paths.push(newPath);
+      this.paths.push(await utils.chooseNcFolder(this.t('memories', 'Add a root to your timeline')));
     },
 
     remove(index: number) {

src/services/utils/helpers.ts

@@ -1,6 +1,7 @@
 import { IImageInfo, IPhoto } from '../../types';
 import { API } from '../API';
 import { constants } from './const';
+import { FilePickerType, getFilePickerBuilder } from '@nextcloud/dialogs';
 import * as nativex from '../../native';
 
 /**
@@ -124,6 +125,36 @@ export function getViewerRoute(photo: IPhoto) {
   };
 }
 
+/**
+ * Choose a folder using the NC file picker
+ *
+ * @param title Title of the file picker
+ * @param initial Initial path
+ * @param type Type of the file picker
+ *
+ * @returns The path of the chosen folder
+ */
+export async function chooseNcFolder(
+  title: string,
+  initial: string = '/',
+  type: FilePickerType = FilePickerType.Choose
+) {
+  const picker = getFilePickerBuilder(title)
+    .setMultiSelect(false)
+    .setModal(true)
+    .setType(type)
+    .addMimeTypeFilter('httpd/unix-directory')
+    .allowDirectories()
+    .startAt(initial)
+    .build();
+
+  // Choose a folder
+  const folder = (await picker.pick()) || '/';
+
+  // Remove double slashes
+  return folder.replace(/\/+/g, '/');
+}
+
 /**
  * Check if the provided Axios Error is a network error.
  */