Skip to content

Commit 918b5f7

Browse files
NamesMTNamesMT
committed
refactor: simplify view-tree
1 parent 6effb1b commit 918b5f7

3 files changed

Lines changed: 143 additions & 145 deletions

File tree

‎apps/frontend/app/pages/index.vue‎

Lines changed: 138 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,38 @@
11
<script setup lang="ts">
22
import GridMaker from '@local/common-vue/src/components/GridMaker.vue'
3+
import { Carousel, CarouselContent, CarouselNext, CarouselPrevious } from '@/lib/components/ui/carousel'
34
45
definePageMeta({
56
title: 'pages.home.title',
67
})
8+
9+
const { locale, locales, setLocale } = useI18n()
10+
const runtimeConfig = useRuntimeConfig()
11+
const colorMode = useColorMode()
12+
const { $apiClient, $auth } = useNuxtApp()
13+
14+
const computedNextLocale = computed(() => {
15+
const currentLocaleIndex = locales.value.findIndex(lO => lO.code === locale.value)
16+
return locales.value[(currentLocaleIndex + 1) % locales.value.length]!.code
17+
})
18+
const number = ref()
19+
20+
// API
21+
const { data: apiResult, error: apiError } = await useLazyAsyncData(
22+
'apiResult',
23+
() => hcParse($apiClient.api.dummy.hello.$get()),
24+
{
25+
server: false,
26+
default: () => 'Loading...' as const,
27+
},
28+
)
29+
30+
// Tanstack Query
31+
const queryClient = useQueryClient()
32+
const { isPending, isError, data, error } = useQuery({
33+
queryKey: ['hello_test'],
34+
queryFn: () => hcParse($apiClient.api.dummy.hello.$get()),
35+
})
736
</script>
837

938
<template>
@@ -27,7 +56,115 @@ definePageMeta({
2756
/>
2857
</div>
2958

30-
<RouterView />
59+
<div class="w-full flex flex-col items-center justify-center gap-2 sm:flex-row sm:gap-4">
60+
<div class="flex items-center gap-2">
61+
<p>
62+
Theme:
63+
</p>
64+
<ClientOnly>
65+
<template #fallback>
66+
<Button
67+
label="..."
68+
/>
69+
</template>
70+
71+
<Button
72+
:label="colorMode.preference"
73+
@pointerdown="colorMode.preference = (colorMode.preference !== 'dark')
74+
? 'dark'
75+
: 'light'"
76+
/>
77+
</ClientOnly>
78+
</div>
79+
80+
<div class="flex items-center gap-2">
81+
<p>{{ $lmw($t('language'), 8) }}:</p>
82+
<Button
83+
:label="$lmw(locale.substring(0, 2))"
84+
@pointerdown="setLocale(computedNextLocale)"
85+
/>
86+
</div>
87+
88+
<div>
89+
<span :key="$li18n.renderKey">{{ $lmw(dayjs().format('dddd'), 6) }}</span>
90+
</div>
91+
92+
<InputNumber
93+
v-model="number"
94+
:placeholder="$lmw($t('number-input'), 18)"
95+
/>
96+
</div>
97+
98+
<div class="max-w-full flex flex-col items-center">
99+
<div class="max-w-full overflow-x-auto">
100+
<span>Configured</span> <code>frontendUrl</code>: <code>{{ runtimeConfig.public.frontendUrl }}</code>
101+
</div>
102+
<div class="max-w-full overflow-x-auto">
103+
<span>Configured</span> <code>backendUrl</code>: <code>{{ runtimeConfig.public.backendUrl }}</code>
104+
</div>
105+
<div class="max-w-full overflow-x-auto">
106+
<span>API Response from</span> <code>{{ $apiClient.api.dummy.hello.$url() }}</code>:
107+
</div>
108+
<pre class="max-w-full w-fit overflow-x-auto rounded bg-black p-2 px-4 text-left text-white">{{ apiError || apiResult || 'Empty' }}</pre>
109+
</div>
110+
111+
<div class="max-w-full flex flex-col items-center">
112+
<div>Tanstack Query result (fetched client-side and persisted to IndexedDB for 12 hours)</div>
113+
<pre class="max-w-full w-fit overflow-x-auto rounded bg-black p-2 px-4 text-left text-white">{{ isPending ? 'Loading...' : isError ? error : data }}</pre>
114+
<Button
115+
class="mt-2"
116+
label="Make stale (refetch)"
117+
@pointerdown="queryClient.invalidateQueries({ queryKey: ['hello_test'] })"
118+
/>
119+
</div>
120+
121+
<div class="max-w-full">
122+
<ClientOnly>
123+
<template #fallback>
124+
<div key="fallback" class="h-12 flex items-center">
125+
<p>Auth status: ...</p>
126+
</div>
127+
</template>
128+
129+
<div class="h-12 flex items-center justify-center gap-4">
130+
<p>Auth status: {{ $auth.loggedIn ? 'Logged in' : 'Not logged in' }}</p>
131+
<div class="flex items-center justify-center gap-2">
132+
<Button v-if="$auth.loggedIn" label="Sign-out" @click="navigateTo(getSignOutUrl(), { external: true })" />
133+
<Button v-else label="Sign-in" @click="navigateTo(getSignInUrl(), { external: true })" />
134+
</div>
135+
</div>
136+
137+
<div v-if="$auth.loggedIn">
138+
<div>User information:</div>
139+
<pre class="max-w-full overflow-x-auto rounded bg-black p-2 px-4 text-left text-white 2xl:max-w-60vw">{{ $auth }}</pre>
140+
</div>
141+
</ClientOnly>
142+
</div>
143+
144+
<div class="max-w-full w-full flex justify-center px-12">
145+
<Carousel class="relative max-w-xs w-full">
146+
<CarouselContent>
147+
<!-- You could either explicitly import the shadcn components or use them with 'Shad' auto-import prefix -->
148+
<ShadCarouselItem v-for="(_, index) in 5" :key="index">
149+
<div class="p-1">
150+
<Card>
151+
<template #title>
152+
Simple Card #{{ index }}
153+
</template>
154+
<template #content>
155+
<p class="m-0">
156+
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate neque
157+
quas!
158+
</p>
159+
</template>
160+
</Card>
161+
</div>
162+
</ShadCarouselItem>
163+
</CarouselContent>
164+
<CarouselPrevious />
165+
<CarouselNext />
166+
</Carousel>
167+
</div>
31168

32169
<div>
33170
<IsSST />

‎apps/frontend/app/pages/index/index.vue‎

Lines changed: 0 additions & 143 deletions
This file was deleted.

apps/frontend/app/pages/index/test.vue renamed to apps/frontend/app/pages/test.vue

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,15 @@
11
<script setup lang="ts">
22
import type { ConvexVueContext } from 'convex-vue'
33
4+
definePageMeta({
5+
title: 'pages.test.title',
6+
})
7+
48
const convexVueContext = inject<ConvexVueContext>('convex-vue')
59
</script>
610

711
<template>
8-
<div>
12+
<div class="w-full flex flex-col items-center justify-center">
913
<div>This is just a simple page to test stuff</div>
1014

1115
<div class="flex flex-col items-center gap-4 py-6">

0 commit comments

Comments
 (0)