79 lines
2.1 KiB
Vue
79 lines
2.1 KiB
Vue
<template>
|
|
<div :style="{ backgroundColor: '#2D2728' }">
|
|
<div class="mt-10" v-if="creator && creator.id">
|
|
<div class="max-w-[1500px] mx-auto">
|
|
<creator-banner :creator="creator"
|
|
@content-posted="contentPosted"
|
|
></creator-banner>
|
|
</div>
|
|
</div>
|
|
|
|
<div v-else>
|
|
<div v-if="loading">
|
|
<v-progress-linear indeterminate></v-progress-linear>
|
|
</div>
|
|
<div v-else>
|
|
<v-card>
|
|
<v-card-text style="text-align: center;">
|
|
Aucun créateur au nom de {{ route.params.creator }}
|
|
</v-card-text>
|
|
</v-card>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex flex-row max-w-[1500px] mx-auto justify-center mt-8">
|
|
<div>
|
|
|
|
<!-- Actualité feed-->
|
|
<div class="flex flex-column px-2 max-w-80">
|
|
<Creatornewssummary :creator="creator"></Creatornewssummary>
|
|
</div>
|
|
</div>
|
|
<div class="min-w-[875px]"></div>
|
|
<div class="max-w-80">
|
|
<rewards :creator="creator"></rewards>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script async setup>
|
|
import {watch, ref, onBeforeMount} from 'vue';
|
|
import {useRoute} from 'vue-router';
|
|
import {useClient} from "@/plugins/api.js";
|
|
import CreatorBanner from "@/views/creators/CreatorBanner.vue";
|
|
import Creatornewssummary from "@/views/creators/CreatorNewsSummary.vue";
|
|
import Rewards from "@/views/creators/Rewards.vue";
|
|
|
|
|
|
const creator = ref(null)
|
|
const loading = ref(true)
|
|
const contents = ref([])
|
|
|
|
const client = useClient()
|
|
const route = useRoute()
|
|
|
|
function contentPosted(content) {
|
|
contents.value.unshift(content)
|
|
}
|
|
|
|
onBeforeMount(async () => await fetchCreatorData(route.params.creator))
|
|
|
|
watch(
|
|
() => route.params.creator,
|
|
async () => await fetchCreatorData(route.params.creator)
|
|
)
|
|
|
|
const fetchCreatorData = async (creatorAlias) => {
|
|
try {
|
|
loading.value = true
|
|
const response = await client.get(`/api/creators/@${creatorAlias}`)
|
|
creator.value = response.data
|
|
} catch (error) {
|
|
console.error(`Error fetching content: ${error}`)
|
|
} finally {
|
|
loading.value = false
|
|
}
|
|
}
|
|
</script>
|