Fix init circle loading and logger debug

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

11 files changed, 35 insertions, 28 deletions

diff --git a/src/components/AppContent/CircleContent.vue b/src/components/AppContent/CircleContent.vue
index d5e22f15..5a6c72f1 100644
--- a/src/components/AppContent/CircleContent.vue
+++ b/src/components/AppContent/CircleContent.vue
@@ -139,15 +139,21 @@ export default {
 	watch: {
 		circle(newCircle) {
 			if (newCircle?.id) {
-				console.debug('Circles list is done loading, fetching members for', newCircle.id)
 				this.fetchCircleMembers(newCircle.id)
 			}
 		},
 	},
 
+	beforeMount() {
+		if (this.circle?.id) {
+			this.fetchCircleMembers(this.circle.id)
+		}
+	},
+
 	methods: {
 		async fetchCircleMembers(circleId) {
 			this.loadingList = true
+			this.logger.debug('Fetching members for', { circleId })
 
 			try {
 				await this.$store.dispatch('getCircleMembers', circleId)
diff --git a/src/components/AppNavigation/RootNavigation.vue b/src/components/AppNavigation/RootNavigation.vue
index 91c81cc7..351156fc 100644
--- a/src/components/AppNavigation/RootNavigation.vue
+++ b/src/components/AppNavigation/RootNavigation.vue
@@ -314,7 +314,7 @@ export default {
 		createNewGroup(e) {
 			const input = e.target.querySelector('input[type=text]')
 			const groupName = input.value.trim()
-			console.debug('Creating new group', groupName)
+			this.logger.debug('Creating new group', { groupName })
 
 			// Check if already exists
 			if (this.groups.find(group => group.name === groupName)) {
@@ -324,7 +324,7 @@ export default {
 
 			this.createGroupError = null
 
-			console.debug('Created new local group', groupName)
+			this.logger.debug('Created new local group', { groupName })
 			this.$store.dispatch('addGroup', groupName)
 			this.isNewGroupMenuOpen = false
 
@@ -349,7 +349,7 @@ export default {
 			this.isNewCircleModalOpen = true
 		},
 		async createNewCircle(circleName, isPersonal, isLocal) {
-			console.debug('Creating new circle', circleName)
+			this.logger.debug('Creating new circle', { circleName })
 
 			this.createCircleLoading = true
 
diff --git a/src/components/CircleDetails/CircleConfigs.vue b/src/components/CircleDetails/CircleConfigs.vue
index 2db38ab4..762774b2 100644
--- a/src/components/CircleDetails/CircleConfigs.vue
+++ b/src/components/CircleDetails/CircleConfigs.vue
@@ -85,7 +85,7 @@ export default {
 		 * @param {boolean} checked checked or not
 		 */
 		async onChange(config, checked) {
-			console.debug('Circle config', config, 'is set to', checked)
+			this.logger.debug(`Circle config ${config} is set to ${checked}`)
 
 			this.loading = config
 			const prevConfig = this.circle.config
diff --git a/src/components/ContactDetails.vue b/src/components/ContactDetails.vue
index 65b8653f..405d49a7 100644
--- a/src/components/ContactDetails.vue
+++ b/src/components/ContactDetails.vue
@@ -512,7 +512,7 @@ export default {
 			// if we just created the contact, we need to force update the
 			// localContact to match the proper store contact
 			if (!this.localContact.dav) {
-				console.debug('New contact synced!', this.localContact)
+				this.logger.debug('New contact synced!', { localContact: this.localContact })
 				// fetching newly created & storred contact
 				const contact = this.$store.getters.getContact(this.localContact.key)
 				await this.updateLocalContact(contact)
@@ -709,11 +709,11 @@ export default {
 		async cloneContact() {
 			// only one addressbook, let's clone it there
 			if (this.pickedAddressbook && this.addressbooks.find(addressbook => addressbook.id === this.pickedAddressbook.id)) {
-				console.debug('Cloning contact to', this.pickedAddressbook.name)
+				this.logger.debug('Cloning contact to', { name: this.pickedAddressbook.name })
 				await this.copyContactToAddressbook(this.pickedAddressbook.id)
 				this.closePickAddressbookModal()
 			} else if (this.addressbooksOptions.length === 1) {
-				console.debug('Cloning contact to', this.addressbooksOptions[0].name)
+				this.logger.debug('Cloning contact to', { name: this.addressbooksOptions[0].name })
 				await this.copyContactToAddressbook(this.addressbooksOptions[0].id)
 			} else {
 				this.showPickAddressbookModal = true
diff --git a/src/components/MemberList.vue b/src/components/MemberList.vue
index 55652ec3..06235d98 100644
--- a/src/components/MemberList.vue
+++ b/src/components/MemberList.vue
@@ -234,7 +234,7 @@ export default {
 		 * @param {Array} selection the selection to add to the circle
 		 */
 		async onPickerPick(selection) {
-			console.info('Adding selection to circle', selection, this.pickerCircle)
+			this.logger.info('Adding selection to circle', { selection, pickerCircle: this.pickerCircle })
 
 			this.pickerLoading = true
 
diff --git a/src/components/MembersList/MembersListItem.vue b/src/components/MembersList/MembersListItem.vue
index 3774b3c7..ba3dd018 100644
--- a/src/components/MembersList/MembersListItem.vue
+++ b/src/components/MembersList/MembersListItem.vue
@@ -236,7 +236,7 @@ export default {
 				})
 			} catch (error) {
 				if (error.response.status === 404) {
-					console.debug('Member is not in circle')
+					this.logger.debug('Member is not in circle')
 					return
 				}
 				console.error('Could not delete the member', this.source, error)
diff --git a/src/mixins/CircleActionsMixin.js b/src/mixins/CircleActionsMixin.js
index ab03d5d7..00f0c299 100644
--- a/src/mixins/CircleActionsMixin.js
+++ b/src/mixins/CircleActionsMixin.js
@@ -80,7 +80,7 @@ export default {
 		},
 		async leaveCircle(confirm) {
 			if (!confirm) {
-				console.debug('Circle leave cancelled')
+				this.logger.debug('Circle leave cancelled')
 				return
 			}
 
@@ -126,7 +126,7 @@ export default {
 		},
 		async deleteCircle(confirm) {
 			if (!confirm) {
-				console.debug('Circle deletion cancelled')
+				this.logger.debug('Circle deletion cancelled')
 				return
 			}
 
diff --git a/src/models/member.d.ts b/src/models/member.d.ts
index ea3a75e9..cc929ca0 100644
--- a/src/models/member.d.ts
+++ b/src/models/member.d.ts
@@ -19,8 +19,8 @@
  * along with this program. If not, see <http://www.gnu.org/licenses/>.
  *
  */
-import Circle from './circle';
 import { MemberLevel, MemberType } from './constants';
+import Circle from './circle';
 export default class Member {
     _data: any;
     _circle: Circle;
diff --git a/src/models/member.ts b/src/models/member.ts
index 4707a65a..37c60bb1 100644
--- a/src/models/member.ts
+++ b/src/models/member.ts
@@ -20,9 +20,9 @@
  *
  */
 
-import Circle from './circle'
 import { MemberLevel, MemberLevels, MemberType, MemberTypes } from './constants'
-
+import Circle from './circle'
+import logger from '../services/logger'
 export default class Member {
 
 	_data: any = {}
@@ -38,7 +38,7 @@ export default class Member {
 
 		// if no uid set, fail
 		if (data.id && typeof data.id !== 'string') {
-			console.error('This member do not have a proper uid', data)
+			logger.error('This member do not have a proper uid', data)
 			throw new Error('This member do not have a proper uid')
 		}
 
diff --git a/src/store/circles.js b/src/store/circles.js
index c6ac69ea..d424c15d 100644
--- a/src/store/circles.js
+++ b/src/store/circles.js
@@ -26,6 +26,7 @@ import Vue from 'vue'
 import { createCircle, deleteCircle, deleteMember, getCircleMembers, getCircle, getCircles, leaveCircle, addMembers } from '../services/circles.ts'
 import Member from '../models/member.ts'
 import Circle from '../models/circle.ts'
+import logger from '../services/logger'
 
 const state = {
 	/** @type {Object.<string>} Circle */
@@ -55,7 +56,7 @@ const mutations = {
 	 */
 	deleteCircle(state, circle) {
 		if (!(circle.id in state.circles)) {
-			console.warn('Skipping deletion of unknown circle', circle)
+			logger.warn('Skipping deletion of unknown circle', { circle })
 		}
 		Vue.delete(state.circles, circle.id)
 	},
@@ -110,7 +111,7 @@ const actions = {
 	 */
 	async getCircles(context) {
 		const circles = await getCircles()
-		console.debug(`Retrieved ${circles.length} circle(s)`, circles)
+		logger.debug(`Retrieved ${circles.length} circle(s)`, { circles })
 
 		let failure = false
 		circles.forEach(circle => {
@@ -119,7 +120,7 @@ const actions = {
 				context.commit('addCircle', newCircle)
 			} catch (error) {
 				failure = true
-				console.error('This circle failed to be processed', circle, error)
+				logger.error('This circle failed to be processed', { circle, error })
 			}
 		})
 
@@ -139,13 +140,13 @@ const actions = {
 	 */
 	async getCircle(context, circleId) {
 		const circle = await getCircle(circleId)
-		console.debug('Retrieved 1 circle', circle)
+		logger.debug('Retrieved 1 circle', { circle })
 
 		try {
 			const newCircle = new Circle(circle)
 			context.commit('addCircle', newCircle)
 		} catch (error) {
-			console.error('This circle failed to be processed', circle, error)
+			logger.error('This circle failed to be processed', { circle, error })
 		}
 
 		return circle
@@ -161,7 +162,7 @@ const actions = {
 		const circle = context.getters.getCircle(circleId)
 		const members = await getCircleMembers(circleId)
 
-		console.debug(`${circleId} have ${members.length} member(s)`, members)
+		logger.debug(`${circleId} have ${members.length} member(s)`, { members })
 		context.commit('appendMembersToCircle', members.map(member => new Member(member, circle)))
 	},
 
@@ -180,7 +181,7 @@ const actions = {
 			const response = await createCircle(circleName, isPersonal, isLocal)
 			const circle = new Circle(response)
 			context.commit('addCircle', circle)
-			console.debug('Created circle', circleName, circle)
+			logger.debug('Created circle', { circleName, circle })
 			return circle
 		} catch (error) {
 			console.error(error)
@@ -199,7 +200,7 @@ const actions = {
 		try {
 			await deleteCircle(circleId)
 			context.commit('deleteCircle', circle)
-			console.debug('Deleted circle', circleId)
+			logger.debug('Deleted circle', { circleId })
 		} catch (error) {
 			console.error(error)
 			showError(t('contacts', 'Unable to delete circle {circleId}', circleId))
@@ -220,7 +221,7 @@ const actions = {
 		const results = await addMembers(circleId, selection)
 		const members = results.map(member => new Member(member, circle))
 
-		console.debug('Added members to circle', circle, members)
+		logger.debug('Added members to circle', { circle, members })
 		context.commit('appendMembersToCircle', members)
 
 		return members
@@ -244,7 +245,7 @@ const actions = {
 			// If the circle is not visible, we remove it from the list
 			if (!member.circle.isVisible && !member.circle.isMember) {
 				await context.commit('deleteCircle', circle)
-				console.debug('Deleted circle', circleId, memberId)
+				logger.debug('Deleted circle', { circleId, memberId })
 			}
 		} else {
 			await deleteMember(circleId, memberId)
@@ -252,7 +253,7 @@ const actions = {
 
 		// success, let's remove from store
 		context.commit('deleteMemberFromCircle', member)
-		console.debug('Deleted member', circleId, memberId)
+		logger.debug('Deleted member', { circleId, memberId })
 	},
 
 }
diff --git a/src/views/Contacts.vue b/src/views/Contacts.vue
index 3306ade7..f5f6b58c 100644
--- a/src/views/Contacts.vue
+++ b/src/views/Contacts.vue
@@ -225,7 +225,7 @@ export default {
 	async beforeMount() {
 		// get addressbooks then get contacts
 		client.connect({ enableCardDAV: true }).then(() => {
-			console.debug('Connected to dav!', client)
+			this.logger.debug('Connected to dav!', { client })
 			this.$store.dispatch('getAddressbooks')
 				.then((addressbooks) => {
 					const writeableAddressBooks = addressbooks.filter(addressbook => !addressbook.readOnly)