Move to GraphQL

Signed-off-by: Thomas Citharel <tcit@tcit.fr>

js/src/components/Group/Create.vue

@@ -65,66 +65,65 @@
 </template>
 
 <script>
-  import eventFetch from '@/api/eventFetch';
-  import VueMarkdown from 'vue-markdown';
-  import VuetifyGoogleAutocomplete from 'vuetify-google-autocomplete';
+import VueMarkdown from 'vue-markdown';
+import VuetifyGoogleAutocomplete from 'vuetify-google-autocomplete';
 
-  export default {
-    name: 'create-group',
+export default {
+  name: 'create-group',
 
-    components: {
-      VueMarkdown,
-      VuetifyGoogleAutocomplete,
+  components: {
+    VueMarkdown,
+    VuetifyGoogleAutocomplete,
+  },
+  data() {
+    return {
+      e1: 0,
+      group: {
+        preferred_username: '',
+        name: '',
+        summary: '',
+        // category: null,
+      },
+      categories: [],
+    };
+  },
+  mounted() {
+    this.fetchCategories();
+  },
+  methods: {
+    create() {
+      // this.group.organizer = "/accounts/" + this.$store.state.user.id;
+
+      eventFetch('/groups', this.$store, { method: 'POST', body: JSON.stringify({ group: this.group }) })
+        .then(response => response.json())
+        .then((data) => {
+          this.loading = false;
+          this.$router.push({ path: 'Group', params: { id: data.id } });
+        });
     },
-    data() {
-      return {
-        e1: 0,
-        group: {
-          preferred_username: '',
-          name: '',
-          summary: '',
-          // category: null,
+    fetchCategories() {
+      eventFetch('/categories', this.$store)
+        .then(response => response.json())
+        .then((data) => {
+          this.loading = false;
+          this.categories = data.data;
+        });
+    },
+    getAddressData(addressData) {
+      this.group.address = {
+        geo: {
+          latitude: addressData.latitude,
+          longitude: addressData.longitude,
         },
-        categories: [],
+        addressCountry: addressData.country,
+        addressLocality: addressData.city,
+        addressRegion: addressData.administrative_area_level_1,
+        postalCode: addressData.postal_code,
+        streetAddress: `${addressData.street_number} ${addressData.route}`,
       };
     },
-    mounted() {
-      this.fetchCategories();
-    },
-    methods: {
-      create() {
-        // this.group.organizer = "/accounts/" + this.$store.state.user.id;
-
-        eventFetch('/groups', this.$store, { method: 'POST', body: JSON.stringify({group: this.group}) })
-          .then(response => response.json())
-          .then((data) => {
-            this.loading = false;
-            this.$router.push({ path: 'Group', params: { id: data.id } });
-          });
-      },
-      fetchCategories() {
-        eventFetch('/categories', this.$store)
-          .then(response => response.json())
-          .then((data) => {
-            this.loading = false;
-            this.categories = data.data;
-          });
-      },
-      getAddressData: function (addressData) {
-        this.group.address = {
-          geo: {
-            latitude: addressData.latitude,
-            longitude: addressData.longitude,
-          },
-          addressCountry: addressData.country,
-          addressLocality: addressData.city,
-          addressRegion: addressData.administrative_area_level_1,
-          postalCode: addressData.postal_code,
-          streetAddress: `${addressData.street_number} ${addressData.route}`,
-        };
-      },
-    },
-  };
+  },
+};
 </script>
 
 <style>

js/src/components/Group/Group.vue

@@ -202,39 +202,37 @@
 </template>
 
 <script>
-    import eventFetch from '@/api/eventFetch';
-
-    export default {
-        name: 'Group',
-        data() {
-            return {
-                group: null,
-                loading: true,
-            }
-        },
-        props: {
-            name: {
-                type: String,
-                required: true,
-            }
-        },
-        created() {
-            this.fetchData();
-        },
-        watch: {
-            // call again the method if the route changes
-            '$route': 'fetchData'
-        },
-        methods: {
-            fetchData() {
-                eventFetch(`/actors/${this.name}`, this.$store)
-                    .then(response => response.json())
-                    .then((response) => {
-                        this.group = response.data;
-                        this.loading = false;
-                        console.log(this.group);
-                    })
-            }
-        }
-    }
+export default {
+  name: 'Group',
+  data() {
+    return {
+      group: null,
+      loading: true,
+    };
+  },
+  props: {
+    name: {
+      type: String,
+      required: true,
+    },
+  },
+  created() {
+    this.fetchData();
+  },
+  watch: {
+    // call again the method if the route changes
+    $route: 'fetchData',
+  },
+  methods: {
+    fetchData() {
+      eventFetch(`/actors/${this.name}`, this.$store)
+        .then(response => response.json())
+        .then((response) => {
+          this.group = response.data;
+          this.loading = false;
+          console.log(this.group);
+        });
+    },
+  },
+};
 </script>

js/src/components/Group/GroupList.vue

@@ -38,49 +38,47 @@
 </template>
 
 <script>
-  import eventFetch from '@/api/eventFetch';
-
-  export default {
-    name: 'GroupList',
-    data() {
-      return {
-        groups: [],
-        loading: true,
-      };
+export default {
+  name: 'GroupList',
+  data() {
+    return {
+      groups: [],
+      loading: true,
+    };
+  },
+  created() {
+    this.fetchData();
+  },
+  methods: {
+    username_with_domain(actor) {
+      return actor.username + (actor.domain === null ? '' : `@${actor.domain}`);
     },
-    created() {
-      this.fetchData();
+    fetchData() {
+      eventFetch('/groups', this.$store)
+        .then(response => response.json())
+        .then((data) => {
+          console.log(data);
+          this.loading = false;
+          this.groups = data.data;
+        });
     },
-    methods: {
-      username_with_domain(actor) {
-        return actor.username + (actor.domain === null ? '' : `@${actor.domain}`)
-      },
-      fetchData() {
-        eventFetch('/groups', this.$store)
-          .then(response => response.json())
-          .then((data) => {
-              console.log(data);
-            this.loading = false;
-            this.groups = data.data;
-          });
-      },
-      deleteGroup(group) {
-        const router = this.$router;
-        eventFetch(`/groups/${this.username_with_domain(group)}`, this.$store, {'method': 'DELETE'})
-          .then(response => response.json())
-          .then(() => router.push('/groups'));
-      },
-      viewActor(actor) {
-        this.$router.push({ name: 'Group', params: { name: this.username_with_domain(actor) } })
-      },
-      joinGroup(group) {
-        const router = this.$router;
-        eventFetch(`/groups/${this.username_with_domain(group)}/join`, this.$store, { method: 'POST' })
-          .then(response => response.json())
-          .then(() => router.push({ name: 'Group', params: { name: this.username_with_domain(group) } }));
-      }
+    deleteGroup(group) {
+      const router = this.$router;
+      eventFetch(`/groups/${this.username_with_domain(group)}`, this.$store, { method: 'DELETE' })
+        .then(response => response.json())
+        .then(() => router.push('/groups'));
     },
-  };
+    viewActor(actor) {
+      this.$router.push({ name: 'Group', params: { name: this.username_with_domain(actor) } });
+    },
+    joinGroup(group) {
+      const router = this.$router;
+      eventFetch(`/groups/${this.username_with_domain(group)}/join`, this.$store, { method: 'POST' })
+        .then(response => response.json())
+        .then(() => router.push({ name: 'Group', params: { name: this.username_with_domain(group) } }));
+    },
+  },
+};
 </script>
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->