From d28e252109dd347082f2a1c06dbfa881c98d4ac0 Mon Sep 17 00:00:00 2001
From: Eliot Berriot <contact@eliotberriot.com>
Date: Thu, 17 Jan 2019 12:17:29 +0100
Subject: [PATCH] Improved UX of instance-picking form
---
front/src/App.vue | 16 +++++++++++-----
front/src/store/index.js | 2 +-
front/src/store/instance.js | 12 +++++++++++-
front/tests/unit/specs/store/instance.spec.js | 8 ++++++++
4 files changed, 31 insertions(+), 7 deletions(-)
diff --git a/front/src/App.vue b/front/src/App.vue
index cac8477d..2ce3ba3e 100644
--- a/front/src/App.vue
+++ b/front/src/App.vue
@@ -28,7 +28,7 @@
</p>
<div class="ui bulleted list">
<div class="ui item" v-for="url in suggestedInstances">
- <a @click="instanceUrl = url">{{ url }}</a>
+ <a @click="instanceUrl = url; $store.dispatch('instance/setUrl', url)">{{ url }}</a>
</div>
</div>
</form>
@@ -198,12 +198,18 @@ export default {
messages: state => state.ui.messages
}),
suggestedInstances () {
- let instances = []
+ let instances = this.$store.state.instance.knownInstances.slice(0)
+ console.log('instance', instances)
if (this.$store.state.instance.frontSettings.defaultServerUrl) {
- instances.push(this.$store.state.instance.frontSettings.defaultServerUrl)
+ let serverUrl = this.$store.state.instance.frontSettings.defaultServerUrl
+ if (!serverUrl.endsWith('/')) {
+ serverUrl = serverUrl + '/'
+ }
+ instances.push(serverUrl)
}
- instances.push(this.$store.getters['instance/defaultUrl'](), 'https://demo.funkwhale.audio')
- return instances
+ instances.push(this.$store.getters['instance/defaultUrl'](), 'https://demo.funkwhale.audio/')
+ console.log('HELLO', instances)
+ return _.uniq(instances.filter((e) => {return e}))
},
version () {
if (!this.nodeinfo) {
diff --git a/front/src/store/index.js b/front/src/store/index.js
index 0b8eb332..1ef33f2b 100644
--- a/front/src/store/index.js
+++ b/front/src/store/index.js
@@ -34,7 +34,7 @@ export default new Vuex.Store({
}),
createPersistedState({
key: 'instance',
- paths: ['instance.events', 'instance.instanceUrl']
+ paths: ['instance.events', 'instance.instanceUrl', 'instance.knownInstances']
}),
createPersistedState({
key: 'ui',
diff --git a/front/src/store/instance.js b/front/src/store/instance.js
index 20fa2457..d0bff7dc 100644
--- a/front/src/store/instance.js
+++ b/front/src/store/instance.js
@@ -5,7 +5,7 @@ import _ from '@/lodash'
function getDefaultUrl () {
return (
window.location.protocol + '//' + window.location.hostname +
- (window.location.port ? ':' + window.location.port : '')
+ (window.location.port ? ':' + window.location.port : '') + '/'
)
}
@@ -16,6 +16,7 @@ export default {
frontSettings: {},
instanceUrl: process.env.VUE_APP_INSTANCE_URL,
events: [],
+ knownInstances: [],
settings: {
instance: {
name: {
@@ -64,6 +65,15 @@ export default {
value = value + '/'
}
state.instanceUrl = value
+
+ // append the URL to the list (and remove existing one if needed)
+ if (value) {
+ let index = state.knownInstances.indexOf(value);
+ if (index > -1) {
+ state.knownInstances.splice(index, 1);
+ }
+ state.knownInstances.splice(0, 0, value)
+ }
if (!value) {
axios.defaults.baseURL = null
return
diff --git a/front/tests/unit/specs/store/instance.spec.js b/front/tests/unit/specs/store/instance.spec.js
index 7b70982f..a6488dc7 100644
--- a/front/tests/unit/specs/store/instance.spec.js
+++ b/front/tests/unit/specs/store/instance.spec.js
@@ -25,6 +25,14 @@ describe('store/instance', () => {
users: {upload_quota: {value: 1}, registration_enabled: {value: true}}
})
})
+ it('instanceUrl', () => {
+ const state = {instanceUrl: null, knownInstances: ['http://test2/', 'http://test/']}
+ store.mutations.instanceUrl(state, 'http://test')
+ expect(state).to.deep.equal({
+ instanceUrl: 'http://test/', // trailing slash added
+ knownInstances: ['http://test/', 'http://test2/']
+ })
+ })
})
describe('actions', () => {
it('fetchSettings', () => {
--
GitLab