Files
social-media/src/views/main/Creator.vue

94 lines
2.7 KiB
Vue

<template>
<div v-if="user && user.id">
<CreatorBanner :user="user"></CreatorBanner>
<div class="flex flex-column w-max-[100] ">
<!-- <div class="w-full border-b-2 p-6">-->
<!-- <PostMessage content-id="00000001-0000-0000-0000-000000000001"></PostMessage>-->
<!-- </div>-->
<!-- -->
<!-- <div class="w-full border-b-2 p-6">-->
<!-- <h2 class="font-sans font-semibold">Commentaires</h2>-->
<!-- <MessageList content-id="00000001-0000-0000-0000-000000000001"></MessageList>-->
<!-- </div>-->
<PostContentMenu v-if="user.id === userStore.getCurrentUser().id"></PostContentMenu>
<StripePayment :creator-id="user.id"></StripePayment>
<div class="flex flex-col items-center">
<div class="max-w-[800px] border-l-2 border-r-2 border-gray-200 px-4 ">
<PostCard v-for="post in posts"
:key="post.id"
:post="post"
class=" bg-white w-full content-center rounded-3xl mt-2">
</PostCard>
</div>
</div>
</div>
</div>
<!-- Fallback when user try to access a non-existing creator -->
<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>
</template>
<script async setup>
import PostContentMenu from '@/views/main/PostContentMenu.vue'
import PostCard from "@/views/main/PostCard.vue"
import posts from "@/views/main/posts.json"
import PostMessage from "@/views/messages/PostMessage.vue";
import MessageList from "@/views/messages/MessageList.vue";
import {onBeforeMount, ref, watch} from "vue";
import {useClient} from "@/plugins/api.js";
import {useRoute} from "vue-router";
import CreatorBanner from "@/views/main/CreatorBanner.vue";
import StripePayment from "@/views/StripePayment.vue";
import {useUserStore} from "@/stores/user.js";
const client = useClient();
const route = useRoute();
const userStore = useUserStore();
const user = ref(null);
const loading = ref(true);
onBeforeMount(async() => {
setTimeout(() => {
loading.value = false;
}, 1500);
const response = await client.get(`/api/Users?UserName=${route.params.creator}`)
user.value = response.data
})
watch(
() => route.params.creator,
async () => {
loading.value = true;
setTimeout(() => {
loading.value = false;
}, 1000);
const response = await client.get(`/api/Users?UserName=${route.params.creator}`)
user.value = response.data
}
);
</script>
<style scoped>
</style>