👌 IMPROVE: update nextcloud npm dependencies to the new @nextcloud namespace versions && update the AppNavigation to the work with the new component

Signed-off-by: Jonas Sulzer <jonas@violoncello.ch>

package.json

@@ -27,15 +27,15 @@
 		"test:coverage": "jest --coverage"
 	},
 	"dependencies": {
-		"vue-masonry-css": "^1.0.3",
+		"@babel/runtime": "^7.7.1",
+		"@nextcloud/auth": "^0.3.1",
+		"@nextcloud/axios": "^0.5.0",
+		"@nextcloud/logger": "^0.1.0",
+		"@nextcloud/vue": "^1.1.0",
+		"he": "^1.2.0",
 		"linkifyjs": "^2.1.8",
-		"nextcloud-axios": "^0.2.1",
-		"nextcloud-vue": "^0.12.6",
-		"nextcloud-logger": "0.0.6",
-		"nextcloud-auth": "0.0.3",
 		"tributejs": "^3.7.3",
 		"twemoji": "^12.0.1",
-		"he": "^1.2.0",
 		"uuid": "^3.3.3",
 		"v-tooltip": "^3.0.0-alpha.11",
 		"vue": "^2.6.10",
@@ -43,6 +43,7 @@
 		"vue-contenteditable-directive": "^1.2.0",
 		"vue-emoji-picker": "^1.0.1",
 		"vue-infinite-loading": "^2.4.4",
+		"vue-masonry-css": "^1.0.3",
 		"vue-router": "^3.1.3",
 		"vue-tribute": "^1.0.3",
 		"vue-twemoji": "^1.0.1",

src/App.vue

@@ -1,10 +1,10 @@
 <template>
 	<div v-if="!serverData.setup" id="app-social" :class="{public: serverData.public}">
-		<div v-if="!serverData.public" id="app-navigation">
-			<ul>
-				<app-navigation-item v-for="item in menu.items" :key="item.key" :item="item" />
+		<app-navigation v-if="!serverData.public" id="app-navigation">
+			<ul id="app-social-navigation">
+				<app-navigation-item v-for="item in menu.items" :key="item.key" :to="item.to" :title="item.title" :icon="item.icon" :exact="true" />
 			</ul>
-		</div>
+		</app-navigation>
 		<div id="app-content">
 			<div v-if="serverData.isAdmin && !serverData.checks.success" class="setup social__wrapper">
 				<h3 v-if="!serverData.checks.checks.wellknown">
@@ -91,14 +91,16 @@
 </style>
 
 <script>
-import AppNavigationItem from 'nextcloud-vue/dist/Components/AppNavigationItem'
-import axios from 'nextcloud-axios'
+import { AppNavigation } from '@nextcloud/vue/dist/Components/AppNavigation'
+import { AppNavigationItem } from '@nextcloud/vue/dist/Components/AppNavigationItem'
+import axios from '@nextcloud/axios'
 import Search from './components/Search.vue'
 import currentuserMixin from './mixins/currentUserMixin'
 
 export default {
 	name: 'App',
 	components: {
+		AppNavigation,
 		AppNavigationItem,
 		Search
 	},
@@ -119,69 +121,62 @@ export default {
 			let defaultCategories = [
 				{
 					id: 'social-timeline',
-					classes: [],
 					icon: 'icon-home',
-					text: t('social', 'Home'),
-					router: {
+					title: t('social', 'Home'),
+					to: {
 						name: 'timeline'
 					}
 				},
 				{
 					id: 'social-direct-messages',
-					classes: [],
-					router: {
+					icon: 'icon-comment',
+					title: t('social', 'Direct messages'),
+					to: {
 						name: 'timeline',
 						params: { type: 'direct' }
-					},
-					icon: 'icon-comment',
-					text: t('social', 'Direct messages')
+					}
 				},
 				{
 					id: 'social-notifications',
-					classes: [],
-					router: {
+					icon: 'icon-notifications',
+					title: t('social', 'Notifications'),
+					to: {
 						name: 'timeline',
 						params: { type: 'notifications' }
-					},
-					icon: 'icon-notifications',
-					text: t('social', 'Notifications')
+					}
 				},
 				{
 					id: 'social-account',
-					classes: [],
 					icon: 'icon-user',
-					text: t('social', 'Profile'),
-					router: {
+					title: t('social', 'Profile'),
+					to: {
 						name: 'profile',
 						params: { account: this.currentUser.uid }
 					}
 				},
 				{
 					id: 'social-liked',
-					classes: [],
 					icon: 'icon-favorite',
-					text: t('social', 'Liked'),
-					router: {
+					title: t('social', 'Liked'),
+					to: {
 						name: 'timeline',
 						params: { type: 'liked' }
 					}
 				},
 				{
 					id: 'social-local',
-					classes: [],
 					icon: 'icon-category-monitoring',
-					text: t('social', 'Local timeline'),
-					router: {
+					title: t('social', 'Local timeline'),
+					to: {
 						name: 'timeline',
 						params: { type: 'timeline' }
 					}
 				},
 				{
 					id: 'social-global',
-					classes: [],
 					icon: 'icon-link',
-					text: t('social', 'Global timeline'),
-					router: {
+					title: t('social', 'Global timeline'),
+					to: {
 						name: 'timeline',
 						params: { type: 'federated' }
 					}

src/components/ActorAvatar.vue

@@ -28,7 +28,7 @@
 </template>
 
 <script>
-import Avatar from 'nextcloud-vue/dist/Components/Avatar'
+import Avatar from '@nextcloud/vue/dist/Components/Avatar'
 
 export default {
 	name: 'ActorAvatar',

src/components/Composer.vue

@@ -388,14 +388,14 @@
 </style>
 <script>
 
-import Avatar from 'nextcloud-vue/dist/Components/Avatar'
-import PopoverMenu from 'nextcloud-vue/dist/Components/PopoverMenu'
+import Avatar from '@nextcloud/vue/dist/Components/Avatar'
+import PopoverMenu from '@nextcloud/vue/dist/Components/PopoverMenu'
 import EmojiPicker from 'vue-emoji-picker'
 import VueTribute from 'vue-tribute'
 import he from 'he'
 import CurrentUserMixin from './../mixins/currentUserMixin'
 import FocusOnCreate from '../directives/focusOnCreate'
-import axios from 'nextcloud-axios'
+import axios from '@nextcloud/axios'
 import ActorAvatar from './ActorAvatar.vue'
 
 export default {

src/components/PostAttachment.vue

@@ -15,7 +15,7 @@
 
 <script>
 
-import Modal from 'nextcloud-vue/dist/Components/Modal'
+import Modal from '@nextcloud/vue/dist/Components/Modal'
 
 export default {
 	name: 'PostAttachment',

src/components/ProfileInfo.vue

@@ -96,7 +96,7 @@
 	}
 </style>
 <script>
-import Avatar from 'nextcloud-vue/dist/Components/Avatar'
+import Avatar from '@nextcloud/vue/dist/Components/Avatar'
 import serverData from '../mixins/serverData'
 import currentUser from '../mixins/currentUserMixin'
 import follow from '../mixins/follow'

src/components/Search.vue

@@ -79,7 +79,7 @@
 <script>
 
 import UserEntry from './UserEntry.vue'
-import axios from 'nextcloud-axios'
+import axios from '@nextcloud/axios'
 import Trend from 'vuetrend'
 
 export default {

src/components/TimelinePost.vue

@@ -55,7 +55,7 @@
 </template>
 
 <script>
-import Avatar from 'nextcloud-vue/dist/Components/Avatar'
+import Avatar from '@nextcloud/vue/dist/Components/Avatar'
 import * as linkify from 'linkifyjs'
 import pluginMention from 'linkifyjs/plugins/mention'
 import 'linkifyjs/string'

src/components/UserEntry.vue

@@ -55,7 +55,7 @@
 </template>
 
 <script>
-import Avatar from 'nextcloud-vue/dist/Components/Avatar'
+import Avatar from '@nextcloud/vue/dist/Components/Avatar'
 import follow from '../mixins/follow'
 import currentUser from '../mixins/currentUserMixin'
 import FollowButton from './FollowButton.vue'

src/logger.js

@@ -19,8 +19,8 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-import { getLoggerBuilder } from 'nextcloud-logger'
-import { getCurrentUser } from 'nextcloud-auth'
+import { getLoggerBuilder } from '@nextcloud/logger'
+import { getCurrentUser } from '@nextcloud/auth'
 
 export default getLoggerBuilder()
 	.setApp('social')

src/main.js

@@ -29,7 +29,7 @@ import router from './router'
 import vuetwemoji from 'vue-twemoji'
 import contenteditableDirective from 'vue-contenteditable-directive'
 import ClickOutside from 'vue-click-outside'
-import VTooltip from 'nextcloud-vue/dist/Directives/Tooltip'
+import VTooltip from '@nextcloud/vue/dist/Directives/Tooltip'
 import VueMasonry from 'vue-masonry-css'
 
 sync(store, router)

src/mixins/follow.js

@@ -20,7 +20,7 @@
  *
  */
 
-import axios from 'nextcloud-axios'
+import axios from '@nextcloud/axios'
 
 class FollowException {
 

src/mixins/popoverMenu.js

@@ -20,7 +20,7 @@
  *
  */
 
-import PopoverMenu from 'nextcloud-vue/dist/Components/PopoverMenu'
+import PopoverMenu from '@nextcloud/vue/dist/Components/PopoverMenu'
 
 export default {
 	components: {

src/store/account.js

@@ -20,7 +20,7 @@
  *
  */
 
-import axios from 'nextcloud-axios'
+import axios from '@nextcloud/axios'
 import Vue from 'vue'
 
 const state = {

src/store/timeline.js

@@ -22,7 +22,7 @@
  */
 
 import Logger from '../logger'
-import axios from 'nextcloud-axios'
+import axios from '@nextcloud/axios'
 import Vue from 'vue'
 
 const state = {

src/views/OStatus.vue

@@ -60,8 +60,8 @@
 </style>
 
 <script>
-import Avatar from 'nextcloud-vue/dist/Components/Avatar'
-import axios from 'nextcloud-axios'
+import Avatar from '@nextcloud/vue/dist/Components/Avatar'
+import axios from '@nextcloud/axios'
 import currentuserMixin from './../mixins/currentUserMixin'
 
 export default {