2 components almost identical to each other. The only difference is that each component has a different GET request. Merge them?

I currently have 2 components which are almost identical to each other. HTML structure and CSS rules are the same and the only difference is that on mounted() of these components, a different GET request is made. One gets all the visited places and one gets all wishlisted place. The response to both GET request has the same structure, it just returns different places based on what the user has visited or wishlisted.

So my question is, am I meant to merge these 2 components into 1 component? If I were to do that, how would I determine whether I need to make the GET request for visited places or wishlisted places? Maybe based on the URL? If the URL is http://localhost:8080/#/Admin/visited execute the GET request which gets all visited places and if it’s http://localhost:8080/#/Admin/wishlist get the wishlisted places?

Also what name would be appropriate for this component since it’ll be used to get both visited places and wishlisted places? Also what would be an appropriate name for the data property which will replace wishlist and visited?

Wishlist.vue

<template>
    <div class='wishlisted-sights-list'>
        <div @click='selectSight(index)' class='wishlisted-sight' v-if='wishlist != null' v-for='(wishlistedPlace, index) in wishlist'>
            <img class='wishlisted-sight-photos' :src="'https://maps.googleapis.com/maps/api/place/photo?maxwidth=300&photoreference=' + wishlistedPlace.result.photos[0].photo_reference + '&key='">
            <div class="">
                <p class='wishlisted-sights-name'>{{ wishlistedPlace.result.name }}</p>
            </div>
        </div>
    </div>
</template>

<script>
    import axios from 'axios'

    export default {
        data(){
            return {
                wishlist: null,
                username: this.$route.params.username,
            }
        },
        methods: {
            selectSight(index) {
                const placeId = this.wishlist[index].result.place_id;
                this.$router.push('/' + this.username + '/' + placeId)
            }
        },
        mounted() {
            axios.get('/getWishlist/' + this.username)
            .then(response => {
                this.wishlist = response.data.wishlistedPlaces
            }).catch((error) => console.log(error));
        }
    }
</script>

Visited.vue

<template>
    <div class='visited-sights-list'>
        <div @click='selectSight(index)' class='visited-sight' v-if='visited != null' v-for='(visitedPlace, index) in visited'>
            <img class='visited-sight-photos' :src="'https://maps.googleapis.com/maps/api/place/photo?maxwidth=300&photoreference=' + visitedPlace.result.photos[0].photo_reference + '&key='">
            <div class="">
                <p class='visited-sights-name'>{{ visitedPlace.result.name }}</p>
            </div>
        </div>
    </div>
</template>

<script>
    import axios from 'axios'

    export default {
        data(){
            return {
                visited: null,
                username: this.$route.params.username,
            }
        },
        methods: {
            selectSight(index) {
                const placeId = this.visited[index].result.place_id;
                this.$router.push('/' + this.username + '/' + placeId)
            }
        },
        mounted() {
            axios.get('/getVisited/' + this.username)
            .then(response => {
                this.visited = response.data.visitedPlaces
            }).catch((error) => console.log(error));
        }
    }
</script>

Answer

Yes, you should make a reusable component, probably called Places.vue. However, your returned result should have the same structure (you have to rename wishlistPlaces and visitedPlaces to places, probably. Or sights):

Your component should take in the source parameter, along these lines:

<places source="getWishlist" />

And map it as:

props: {
  source: {
     type: String,
     required: true
  }
}

while your getter should something like:

mounted() {
    axios.get(`/${this.source}/${this.userName}`)
    .then(response => {
        this.places = response.data.places
    }).catch((error) => console.log(error));
}

You obviously need to refactor all places where you now use wishlist or visited props/methods to use places (or sights, if that’s your choice).

Advertisement

Answer