Improved UX of instance-picking form

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) {

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',

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

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', () => {