Make client-side code work again

package.json

@@ -21,11 +21,11 @@
 	"homepage": "https://github.com/nextcloud/bookmarks#readme",
 	"dependencies": {
 		"@babel/polyfill": "^7.7.0",
+		"@nextcloud/auth": "latest",
+		"@nextcloud/axios": "^1.3.2",
+		"@nextcloud/router": "^1.0.2",
 		"@nextcloud/vue": "^1.2.3",
 		"humanize-duration": "^3.21.0",
-		"nextcloud-axios": "^0.2.1",
-		"nextcloud-router": "0.0.9",
-		"nextcloud-server": "^0.15.10",
 		"vue": "^2.6.11",
 		"vue-click-outside": "^1.0.7",
 		"vue-router": "^3.1.3",

src/components/Bookmark.vue

@@ -67,24 +67,24 @@
 	</div>
 </template>
 <script>
-import Vue from 'vue'
-import Actions from '@nextcloud/vue/dist/Components/Actions'
-import ActionButton from '@nextcloud/vue/dist/Components/ActionButton'
-import { generateUrl } from 'nextcloud-router'
-import { actions, mutations } from '../store/'
-import TagLine from './TagLine'
+	import Vue from 'vue'
+	import Actions from '@nextcloud/vue/dist/Components/Actions'
+	import ActionButton from '@nextcloud/vue/dist/Components/ActionButton'
+	import { generateUrl } from '@nextcloud/router'
+	import { actions, mutations } from '../store/'
+	import TagLine from './TagLine'
 
-export default {
-	name: 'Bookmark',
-	components: {
-		Actions,
-		ActionButton,
-		TagLine,
-	},
-	props: {
-		bookmark: {
-			type: Object,
-			required: true,
+	export default {
+		name: 'Bookmark',
+		components: {
+			Actions,
+			ActionButton,
+			TagLine,
+		},
+		props: {
+			bookmark: {
+				type: Object,
+				required: true,
 		},
 	},
 	data() {

src/components/Breadcrumbs.vue

@@ -66,22 +66,22 @@
 	</div>
 </template>
 <script>
-import Multiselect from '@nextcloud/vue/dist/Components/Multiselect'
-import Actions from '@nextcloud/vue/dist/Components/Actions'
-import ActionButton from '@nextcloud/vue/dist/Components/ActionButton'
-import { mutations, actions } from '../store/'
+	import Multiselect from '@nextcloud/vue/dist/Components/Multiselect'
+	import Actions from '@nextcloud/vue/dist/Components/Actions'
+	import ActionButton from '@nextcloud/vue/dist/Components/ActionButton'
+	import { actions, mutations } from '../store/'
 
-export default {
-	name: 'Breadcrumbs',
-	components: { Multiselect, Actions, ActionButton },
-	props: {},
-	data() {
-		return {
-			url: '',
-		}
-	},
-	computed: {
-		allTags() {
+	export default {
+		name: 'Breadcrumbs',
+		components: { Multiselect, Actions, ActionButton },
+		props: {},
+		data() {
+			return {
+				url: '',
+			}
+		},
+		computed: {
+			allTags() {
 			return this.$store.state.tags.map(tag => tag.name)
 		},
 		tags() {
@@ -148,7 +148,8 @@ export default {
 	right: 0;
 	left: 300px;
 }
-@media only screen and (max-width: 768px) {
+
+@media only screen and (max-width: 1024px) {
 	.breadcrumbs {
 		padding-left: 52px;
 		left: 0;

src/components/Settings.vue

@@ -82,19 +82,21 @@
 	</div>
 </template>
 <script>
-import { generateUrl } from 'nextcloud-router'
-import { actions } from '../store/'
-export default {
-	name: 'Settings',
-	components: {},
-	computed: {
-		oc_defaults() {
-			return window.oc_defaults
-		},
-		bookmarklet() {
-			const bookmarkletUrl
-				= window.location.origin + generateUrl('/apps/bookmarks/bookmarklet')
-			return `javascript:(function(){var a=window,b=document,c=encodeURIComponent,e=c(document.title),d=a.open('${bookmarkletUrl}?url='+c(b.location)+'&title='+e,'bkmk_popup','left='+((a.screenX||a.screenLeft)+10)+',top='+((a.screenY||a.screenTop)+10)+',height=500px,width=550px,resizable=1,alwaysRaised=1');a.setTimeout(function(){d.focus()},300);})();`
+	import { generateUrl } from '@nextcloud/router'
+	import { actions } from '../store/'
+	import { getRequestToken } from '@nextcloud/auth'
+
+	export default {
+		name: 'Settings',
+		components: {},
+		computed: {
+			oc_defaults() {
+				return window.oc_defaults
+			},
+			bookmarklet() {
+				const bookmarkletUrl
+						= window.location.origin + generateUrl('/apps/bookmarks/bookmarklet')
+				return `javascript:(function(){var a=window,b=document,c=encodeURIComponent,e=c(document.title),d=a.open('${bookmarkletUrl}?url='+c(b.location)+'&title='+e,'bkmk_popup','left='+((a.screenX||a.screenLeft)+10)+',top='+((a.screenY||a.screenTop)+10)+',height=500px,width=550px,resizable=1,alwaysRaised=1');a.setTimeout(function(){d.focus()},300);})();`
 		},
 		rssURL() {
 			return (
@@ -127,7 +129,7 @@ export default {
 		onExport() {
 			window.location
 				= 'bookmark/export?requesttoken='
-				+ encodeURIComponent(window.oc_requesttoken)
+					+ encodeURIComponent(getRequestToken())
 		},
 		async onChangeSorting(e) {
 			await this.$store.dispatch(actions.SET_SETTING, {

src/components/SidebarBookmark.vue

@@ -39,24 +39,24 @@
 	</AppSidebar>
 </template>
 <script>
-import AppSidebar from '@nextcloud/vue/dist/Components/AppSidebar'
-import AppSidebarTab from '@nextcloud/vue/dist/Components/AppSidebarTab'
-import Multiselect from '@nextcloud/vue/dist/Components/Multiselect'
-import { generateUrl } from 'nextcloud-router'
-import humanizeDuration from 'humanize-duration'
-import { actions, mutations } from '../store/'
+	import AppSidebar from '@nextcloud/vue/dist/Components/AppSidebar'
+	import AppSidebarTab from '@nextcloud/vue/dist/Components/AppSidebarTab'
+	import Multiselect from '@nextcloud/vue/dist/Components/Multiselect'
+	import { generateUrl } from '@nextcloud/router'
+	import humanizeDuration from 'humanize-duration'
+	import { actions, mutations } from '../store/'
 
-const MAX_RELATIVE_DATE = 1000 * 60 * 60 * 24 * 7 // one week
+	const MAX_RELATIVE_DATE = 1000 * 60 * 60 * 24 * 7 // one week
 
-export default {
-	name: 'SidebarBookmark',
-	components: { AppSidebar, AppSidebarTab, Multiselect },
-	data() {
-		return {
-			description: '',
-		}
-	},
-	computed: {
+	export default {
+		name: 'SidebarBookmark',
+		components: { AppSidebar, AppSidebarTab, Multiselect },
+		data() {
+			return {
+				description: '',
+			}
+		},
+		computed: {
 		isActive() {
 			if (!this.$store.state.sidebar) return false
 			return this.$store.state.sidebar.type === 'bookmark'

src/components/ViewPrivate.vue

@@ -12,26 +12,27 @@
 </template>
 
 <script>
-import Content from '@nextcloud/vue/dist/Components/Content'
-import AppContent from '@nextcloud/vue/dist/Components/AppContent'
-import Navigation from './Navigation'
-import BookmarksList from './BookmarksList'
-import Breadcrumbs from './Breadcrumbs'
-import SidebarBookmark from './SidebarBookmark'
-import MoveDialog from './MoveDialog'
-import { actions, mutations } from '../store/'
+	import Content from '@nextcloud/vue/dist/Components/Content'
+	import AppContent from '@nextcloud/vue/dist/Components/AppContent'
+	import Navigation from './Navigation'
+	import BookmarksList from './BookmarksList'
+	import Breadcrumbs from './Breadcrumbs'
+	import SidebarBookmark from './SidebarBookmark'
+	import SidebarFolder from './SidebarFolder'
+	import MoveDialog from './MoveDialog'
+	import { actions, mutations } from '../store/'
 
-export default {
-	name: 'ViewPrivate',
-	components: {
-		Navigation,
-		Content,
-		AppContent,
-		Breadcrumbs,
-		BookmarksList,
-		SidebarBookmark,
-		SidebarFolder,
-		MoveDialog,
+	export default {
+		name: 'ViewPrivate',
+		components: {
+			Navigation,
+			Content,
+			AppContent,
+			Breadcrumbs,
+			BookmarksList,
+			SidebarBookmark,
+			SidebarFolder,
+			MoveDialog,
 	},
 	data: function() {
 		return {

src/router.js

@@ -2,7 +2,7 @@ import Vue from 'vue'
 import Router from 'vue-router'
 import ViewPrivate from './components/ViewPrivate'
 import ViewBookmarklet from './components/ViewBookmarklet'
-import { generateUrl } from 'nextcloud-router'
+import { generateUrl } from '@nextcloud/router'
 
 Vue.use(Router)
 

src/store/actions.js

@@ -1,5 +1,5 @@
-import axios from 'nextcloud-axios'
-import { generateUrl } from 'nextcloud-router'
+import axios from '@nextcloud/axios'
+import { generateUrl } from '@nextcloud/router'
 import AppGlobal from '../mixins/AppGlobal'
 import { mutations } from './mutations'
 
@@ -211,8 +211,8 @@ export default {
 					if (response.status === 413) {
 						throw new Error('Selected file is too large')
 					}
-					throw new Error(response.data)
 					console.error('Failed to import bookmarks', response)
+					throw new Error(response.data)
 				}
 			})
 			.catch(err => {