-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
8 changed files
with
148 additions
and
95 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,20 @@ | ||
| import { TRPCClientError } from '@trpc/client' | ||
|
|
||
| type InferArgs<T> = T extends (...t: [...infer Arg]) => any ? Arg : never | ||
| type InferReturn<T> = T extends (...t: [...infer Arg]) => infer Res ? Res : never | ||
|
|
||
| export default function useAuthProxyFn<TFunc extends (...args: any[]) => any>(fn: TFunc): (...args: InferArgs<TFunc>) => InferReturn<TFunc> { | ||
| const { logIn } = useAuth() | ||
| return (...args: InferArgs<TFunc>) => { | ||
| const val = fn(...args) | ||
| if (val instanceof Promise) { | ||
| return val.catch(async (e) => { | ||
| if (e instanceof TRPCClientError && e.data.code === 'UNAUTHORIZED') { | ||
| await logIn() | ||
| } | ||
| throw e | ||
| }) | ||
| } | ||
| return val | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,7 +1,58 @@ | ||
| <script setup lang="ts"> | ||
| import { useNotification } from '@kyvg/vue3-notification' | ||
| import { useQuery, useQueryClient } from '@tanstack/vue-query' | ||
| import { TRPCClientError } from '@trpc/client' | ||
| definePageMeta({ middleware: ['auth'], layout: 'auth' }) | ||
| const router = useRouter() | ||
| const { notify } = useNotification() | ||
| const { client } = useTRPC() | ||
| const queryClient = useQueryClient() | ||
| const queryUsers = async () => { | ||
| const res = await client.lobby.users.query() | ||
| return res.users | ||
| } | ||
| const proxy = useAuthProxyFn(queryUsers) | ||
| const { data } = useQuery({ | ||
| queryKey: ['queryUsers'], | ||
| queryFn: proxy, | ||
| retry: 2, | ||
| retryDelay: 1000, | ||
| refetchOnWindowFocus: true, | ||
| cacheTime: 10000, | ||
| refetchInterval: 10000, | ||
| onError: (err) => { | ||
| if (err instanceof TRPCClientError && err.data.code === 'NOT_FOUND') { | ||
| queryClient.invalidateQueries({ queryKey: ['queryUsers'] }) | ||
| router.push('/join') | ||
| } else { | ||
| notify({ | ||
| type: 'error', | ||
| title: 'Error', | ||
| text: 'Something went wrong!', | ||
| }) | ||
| } | ||
| }, | ||
| }) | ||
| // sort alphabetically | ||
| const sortedUsers = computed(() => { | ||
| if (!data.value) return [] | ||
| return [...data.value].sort((a, b) => a.username.localeCompare(b.username)) | ||
| }) | ||
| </script> | ||
|
|
||
| <template> | ||
| <div>Lobby</div> | ||
| <div class="flex flex-col items-center gap-2"> | ||
| <div v-for="user in sortedUsers" :key="user.id" class="flex items-center bg-gray-800 border border-gray-700 rounded-lg p-2 gap-3 w-full md:w-1/2 xl:w-1-/3"> | ||
| <Avatar :username="user.username" :src="user.picture ?? undefined" /> | ||
| <div class="text-white font-semibold truncate"> | ||
| {{ user.username }} | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </template> |