Merge branch 'fix/relays' into 'develop'

Fix Relays

Closes #85

See merge request pleroma/admin-fe!160

CHANGELOG.md

@@ -4,6 +4,12 @@ All notable changes to this project will be documented in this file.
 
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
 
+## Unreleased
+
+### Fixed
+
+- Fix following and unfollowing relays from Admin-FE, update mobile UI
+
 ## [2.1] - 2020-08-14
 
 ### Added

src/api/relays.js

@@ -11,23 +11,23 @@ export async function fetchRelays(authHost, token) {
   })
 }
 
-export async function addRelay(relay, authHost, token) {
+export async function addRelay(relay_url, authHost, token) {
   return await request({
     baseURL: baseName(authHost),
     url: '/api/pleroma/admin/relay',
     method: 'post',
     headers: authHeaders(token),
-    data: { relay_url: relay }
+    data: { relay_url }
   })
 }
 
-export async function deleteRelay(relay, authHost, token) {
+export async function deleteRelay(relay_url, authHost, token) {
   return await request({
     baseURL: baseName(authHost),
     url: '/api/pleroma/admin/relay',
     method: 'delete',
     headers: authHeaders(token),
-    data: { relay_url: `https://${relay}/actor` }
+    data: { relay_url }
   })
 }
 

src/lang/en.js

@@ -150,7 +150,8 @@ export default {
     draft: 'Draft',
     delete: 'Delete',
     cancel: 'Cancel',
-    confirm: 'Confirm'
+    confirm: 'Confirm',
+    unfollow: 'Unfollow'
   },
   errorLog: {
     tips: 'Please click the bug icon in the upper right corner',
@@ -406,6 +407,7 @@ export default {
     relays: 'Relays',
     follow: 'Follow',
     followRelay: 'Follow new relay',
+    followedBack: 'Followed Back',
     instanceUrl: 'Instance URL',
     success: 'Settings changed successfully!',
     description: 'Description',

src/store/modules/relays.js

@@ -13,19 +13,18 @@ const relays = {
       state.fetchedRelays = relays
     },
     ADD_RELAY: (state, relay) => {
-      state.fetchedRelays = [...state.fetchedRelays, relay]
+      state.fetchedRelays = [...state.fetchedRelays, { actor: relay }]
     },
     DELETE_RELAY: (state, relay) => {
-      state.fetchedRelays = state.fetchedRelays.filter(fetchedRelay => fetchedRelay !== relay)
+      state.fetchedRelays = state.fetchedRelays.filter(fetchedRelay => fetchedRelay.actor !== relay)
     }
   },
   actions: {
     async FetchRelays({ commit, getters }) {
       commit('SET_LOADING', true)
 
-      const response = await fetchRelays(getters.authHost, getters.token)
-
-      commit('SET_RELAYS', response.data.relays)
+      const { data } = await fetchRelays(getters.authHost, getters.token)
+      commit('SET_RELAYS', data.relays)
       commit('SET_LOADING', false)
     },
     async AddRelay({ commit, dispatch, getters }, relay) {

src/views/settings/components/Relays.vue

@@ -2,19 +2,28 @@
   <div v-if="!loading" class="relays-container">
     <div class="follow-relay-container">
       <el-input v-model="newRelay" :placeholder="$t('settings.followRelay')" class="follow-relay" @keyup.enter.native="followRelay"/>
-      <el-button type="primary" @click.native="followRelay">{{ $t('settings.follow') }}</el-button>
+      <el-button @click.native="followRelay">{{ $t('settings.follow') }}</el-button>
     </div>
-    <el-table :data="relaysTable">
+    <el-table :data="relays">
       <el-table-column
         :label="$t('settings.instanceUrl')"
-        prop="instance"/>
-      <el-table-column fixed="right" width="120">
+        prop="actor"/>
+      <el-table-column
+        :label="$t('settings.followedBack')"
+        :width="getLabelWidth"
+        prop="followed_back"
+        align="center">
+        <template slot-scope="scope">
+          <i :class="scope.row.followed_back ? 'el-icon-check' : 'el-icon-minus'"/>
+        </template>
+      </el-table-column>
+      <el-table-column :label="$t('table.actions')" :width="getLabelWidth" fixed="right" align="center">
         <template slot-scope="scope">
           <el-button
             type="text"
             size="small"
-            @click.native="deleteRelay(scope.row.instance)">
-            {{ $t('table.delete') }}
+            @click.native="deleteRelay(scope.row.actor)">
+            {{ $t('table.unfollow') }}
           </el-button>
         </template>
       </el-table-column>
@@ -31,16 +40,17 @@ export default {
     }
   },
   computed: {
-    relays() {
-      return this.$store.state.relays.fetchedRelays
+    getLabelWidth() {
+      return this.isDesktop ? '130px' : '85px'
     },
-    relaysTable() {
-      return this.relays.map(relay => {
-        return { instance: relay }
-      })
+    isDesktop() {
+      return this.$store.state.app.device === 'desktop'
     },
     loading() {
       return this.$store.state.relays.loading
+    },
+    relays() {
+      return this.$store.state.relays.fetchedRelays
     }
   },
   mounted() {
@@ -49,6 +59,7 @@ export default {
   methods: {
     followRelay() {
       this.$store.dispatch('AddRelay', this.newRelay)
+      this.newRelay = ''
     },
     deleteRelay(relay) {
       this.$store.dispatch('DeleteRelay', relay)

src/views/settings/styles/main.scss

@@ -431,7 +431,7 @@
       height: 2px;
     }
     .follow-relay {
-      width: 70%;
+      width: 75%;
       margin-right: 5px;
       input {
         width: 100%;
@@ -440,6 +440,7 @@
     .follow-relay-container {
       display: flex;
       justify-content: space-between;
+      margin: 0 5px;
     }
     h1 {
       font-size: 24px;