Skip to content

Commit

Permalink
chore: use ssr in index
Browse files Browse the repository at this point in the history
  • Loading branch information
@ZTL-UwU
ZTL-UwU committed Mar 22, 2024
1 parent cab98df commit b0e2b62
Show file tree
Hide file tree
Showing 2 changed files with 75 additions and 81 deletions.
10 changes: 10 additions & 0 deletions composables/trpcAsyncData.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
export async function useTrpcAsyncData<T>(
handler: () => Promise<T>,
) {
try {
return await handler();
} catch (err) {
useErrorHandler(err);
}
return undefined;
}
146 changes: 65 additions & 81 deletions pages/index.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,8 +15,6 @@ const [isSubmitOpen, toggleSubmit] = useToggle(false);
const songList = ref<TSafeSongList>([]);
const songListInfo = ref(0);
const selectedTab = ref('songList');
const isSongListLoading = ref(true);
const isArrangementLoading = ref(true);
const timeCanSubmit = ref(true);
const canSubmit = ref(false);
Expand Down Expand Up @@ -130,20 +128,15 @@ try {
useErrorHandler(err);
}
onMounted(async () => {
songList.value = await useTrpcAsyncData(async () => (await $api.song.listSafe.query()).sort((a, b) => (a.createdAt > b.createdAt ? -1 : 1))) ?? [];
arrangementList.value = await useTrpcAsyncData(() => $api.arrangement.listSafe.query()) ?? [];
onMounted(() => {
// @ts-expect-error window
isDesktop.value = window.innerWidth > 800 && window.innerHeight > 600;
const userStore = useUserStore();
canSubmit.value = userStore.canSubmit();
try {
songList.value = (await $api.song.listSafe.query()).sort((a, b) => (a.createdAt > b.createdAt ? -1 : 1));
isSongListLoading.value = false;
arrangementList.value = await $api.arrangement.listSafe.query();
isArrangementLoading.value = false;
} catch (err) {
useErrorHandler(err);
}
useTimeoutPoll(useRefreshData, 5000, { immediate: true });
});
</script>
Expand Down Expand Up @@ -178,7 +171,10 @@ onMounted(async () => {
</span>
</UiButton>
</SubmissionRulesDialog>
<SubmitDialog :is-open="isSubmitOpen" :toggle-open="toggleSubmit" @submit-success="(song) => { songList.unshift(song); canSubmit = false; }">
<SubmitDialog
:is-open="isSubmitOpen" :toggle-open="toggleSubmit"
@submit-success="(song) => { songList.unshift(song); canSubmit = false; }"
>
<UiButton type="button" class="w-auto shadow text-md p-0" :disabled="!timeCanSubmit || !canSubmit">
<Music4 class="w-5 h-5 mr-1" />
<span class="align-bottom">
Expand Down Expand Up @@ -213,46 +209,40 @@ onMounted(async () => {
:style="`transform: translate(${tabShift}px, 0); opacity: ${1 - tabShift / -150 - 0.2}`"
class="duration-100"
>
<template v-if="!isSongListLoading">
<UiInput v-model="searchContent" placeholder="搜索歌曲" class="text-md mb-2" />
<TransitionGroup name="list" tag="ul">
<li v-for="song in processedListData.slice(0, showLength)" :key="song.id">
<MusicCard :song="song" show-mine />
</li>
</TransitionGroup>
<UiAlert v-if="showLength < processedListData.length">
<UiAlertDescription class="flex flex-row">
<span class="self-center">
出于性能考虑，仅加载前 {{ showLength }} 首歌
</span>
<UiButton variant="secondary" class="ml-auto w-[100px]" @click="showLength += 50">
加载更多
</UiButton>
</UiAlertDescription>
</UiAlert>
</template>
<ContentLoading v-else />
<UiInput v-model="searchContent" placeholder="搜索歌曲" class="text-md mb-2" />
<TransitionGroup name="list" tag="ul">
<li v-for="song in processedListData.slice(0, showLength)" :key="song.id">
<MusicCard :song="song" show-mine />
</li>
</TransitionGroup>
<UiAlert v-if="showLength < processedListData.length">
<UiAlertDescription class="flex flex-row">
<span class="self-center">
出于性能考虑，仅加载前 {{ showLength }} 首歌
</span>
<UiButton variant="secondary" class="ml-auto w-[100px]" @click="showLength += 50">
加载更多
</UiButton>
</UiAlertDescription>
</UiAlert>
</UiTabsContent>
<UiTabsContent
ref="dragRight" v-drag="dragRightHandler" value="arrangement"
:style="`transform: translate(${tabShift}px, 0); opacity: ${1 - tabShift / 150 - 0.2}`"
class="duration-100"
>
<template v-if="!isArrangementLoading">
<DatePicker
v-model="selectedDate" mode="date" view="weekly" expanded title-position="left" locale="zh"
borderless :attributes="calendarAttr" class="mb-2" is-required
/>
<TransitionGroup name="list" tag="ul">
<li v-for="song in arrangement" :key="song.id">
<MusicCard :song="song" show-mine />
</li>
</TransitionGroup>
<p v-if="!arrangement" class="text-sm text-center">
今日无排歌哦~
</p>
</template>
<ContentLoading v-else />
<DatePicker
v-model="selectedDate" mode="date" view="weekly" expanded title-position="left" locale="zh"
borderless :attributes="calendarAttr" class="mb-2" is-required
/>
<TransitionGroup name="list" tag="ul">
<li v-for="song in arrangement" :key="song.id">
<MusicCard :song="song" show-mine />
</li>
</TransitionGroup>
<p v-if="!arrangement" class="text-sm text-center">
今日无排歌哦~
</p>
</UiTabsContent>
</UiTabs>
</UiCardContent>
Expand All @@ -266,24 +256,21 @@ onMounted(async () => {
</UiCardHeader>
<UiCardContent>
<UiScrollArea class="h-[calc(100svh-29rem)]">
<template v-if="!isSongListLoading">
<TransitionGroup name="list" tag="ul">
<li v-for="song in processedListData.slice(0, showLength)" :key="song.id">
<MusicCard :song="song" show-mine />
</li>
</TransitionGroup>
<UiAlert v-if="showLength < processedListData.length">
<UiAlertDescription class="flex flex-row">
<span class="self-center">
出于性能考虑，仅加载前 {{ showLength }} 首歌
</span>
<UiButton variant="secondary" class="ml-auto w-[100px]" @click="showLength += 50">
加载更多
</UiButton>
</UiAlertDescription>
</UiAlert>
</template>
<ContentLoading v-else />
<TransitionGroup name="list" tag="ul">
<li v-for="song in processedListData.slice(0, showLength)" :key="song.id">
<MusicCard :song="song" show-mine />
</li>
</TransitionGroup>
<UiAlert v-if="showLength < processedListData.length">
<UiAlertDescription class="flex flex-row">
<span class="self-center">
出于性能考虑，仅加载前 {{ showLength }} 首歌
</span>
<UiButton variant="secondary" class="ml-auto w-[100px]" @click="showLength += 50">
加载更多
</UiButton>
</UiAlertDescription>
</UiAlert>
</UiScrollArea>
</UiCardContent>
</UiCard>
Expand All @@ -295,23 +282,20 @@ onMounted(async () => {
</UiCardTitle>
</UiCardHeader>
<UiCardContent>
<template v-if="!isArrangementLoading">
<DatePicker
v-model="selectedDate" mode="date" view="weekly" expanded title-position="left" locale="zh"
borderless :attributes="calendarAttr" class="mb-2" is-required
/>
<UiScrollArea class="h-[calc(100svh-19rem)]">
<TransitionGroup name="list" tag="ul">
<li v-for="song in arrangement" :key="song.id">
<MusicCard :song="song" show-mine />
</li>
</TransitionGroup>
<p v-if="!arrangement" class="text-sm text-center">
今日无排歌哦~
</p>
</UiScrollArea>
</template>
<ContentLoading v-else />
<DatePicker
v-model="selectedDate" mode="date" view="weekly" expanded title-position="left" locale="zh"
borderless :attributes="calendarAttr" class="mb-2" is-required
/>
<UiScrollArea class="h-[calc(100svh-19rem)]">
<TransitionGroup name="list" tag="ul">
<li v-for="song in arrangement" :key="song.id">
<MusicCard :song="song" show-mine />
</li>
</TransitionGroup>
<p v-if="!arrangement" class="text-sm text-center">
今日无排歌哦~
</p>
</UiScrollArea>
</UiCardContent>
</UiCard>
</div>
Expand Down

0 comments on commit b0e2b62

Please sign in to comment.