-
Notifications
You must be signed in to change notification settings - Fork 440
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
refactor: extract the
GuildTabs component and getGuild function
- Loading branch information
1 parent
23b5da5
commit c1c78f5
Showing
4 changed files
with
100 additions
and
59 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,65 @@ | ||
| import { Card } from "@/components/ui/Card"; | ||
| import { ScrollArea, ScrollBar } from "@/components/ui/ScrollArea"; | ||
| import { Skeleton } from "@/components/ui/Skeleton"; | ||
| import { cn } from "@/lib/cssUtils"; | ||
| import { env } from "@/lib/env"; | ||
| import type { Guild } from "@/lib/schemas/guild"; | ||
| import type { RoleGroup } from "@/lib/schemas/roleGroup"; | ||
| import type { PaginatedResponse } from "@/lib/types"; | ||
| import { CreateRoleGroup } from "./CreateRoleGroup"; | ||
| import { RoleGroupNavLink } from "./RoleGroupNavLink"; | ||
|
|
||
| type Props = { | ||
| guild: Guild; | ||
| }; | ||
|
|
||
| const getRoleGroups = async (guildId: string) => { | ||
| const res = await fetch( | ||
| `${env.NEXT_PUBLIC_API}/role-group/search?customQuery=@guildId:{${guildId}}`, | ||
| ); | ||
| const data: PaginatedResponse<RoleGroup> = await res.json(); | ||
| return data.items; | ||
| }; | ||
|
|
||
| export const GuildTabs = async ({ guild }: Props) => { | ||
| const roleGroups = await getRoleGroups(guild.id); | ||
|
|
||
| return ( | ||
| <ScrollArea | ||
| className="-ml-8 w-[calc(100%+theme(space.8))]" | ||
| style={{ | ||
| maskImage: | ||
| "linear-gradient(to right, transparent 0%, black 32px, black calc(100% - 32px), transparent 100%)", | ||
| }} | ||
| > | ||
| <div className="my-4 flex gap-3 px-8"> | ||
| <RoleGroupNavLink href={`/${guild.urlName}`}>Home</RoleGroupNavLink> | ||
| {roleGroups.map((rg) => ( | ||
| <RoleGroupNavLink | ||
| key={rg.id} | ||
| href={`/${guild.urlName}/${rg.urlName}`} | ||
| > | ||
| {rg.name} | ||
| </RoleGroupNavLink> | ||
| ))} | ||
| <CreateRoleGroup guildId={guild.id} /> | ||
| </div> | ||
| <ScrollBar orientation="horizontal" className="hidden" /> | ||
| </ScrollArea> | ||
| ); | ||
| }; | ||
|
|
||
| const SKELETON_SIZES = ["w-20", "w-36", "w-28"]; | ||
| export const GuildTabsSkeleton = () => ( | ||
| <div className="my-4 flex gap-3"> | ||
| {[...Array(3)].map((_, i) => ( | ||
| <Card | ||
| // biome-ignore lint: it's safe to use index as key in this case | ||
| key={i} | ||
| className={cn("flex h-11 items-center px-4", SKELETON_SIZES[i])} | ||
| > | ||
| <Skeleton className="h-4 w-full" /> | ||
| </Card> | ||
| ))} | ||
| </div> | ||
| ); |
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,10 @@ | ||
| import { env } from "@/lib/env"; | ||
| import type { Guild } from "@/lib/schemas/guild"; | ||
| import { unstable_cache } from "next/cache"; | ||
|
|
||
| // TODO: `unstable_cache` is deprecated, we should use the `"use cache"` directive instead | ||
| export const getGuild = unstable_cache(async (urlName: string) => { | ||
| const res = await fetch(`${env.NEXT_PUBLIC_API}/guild/urlName/${urlName}`); | ||
| const data: Guild = await res.json(); | ||
| return data; | ||
| }); |
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,27 +1,22 @@ | ||
| import { env } from "@/lib/env"; | ||
| import type { Guild } from "@/lib/schemas/guild"; | ||
| import type { RoleGroup } from "@/lib/schemas/roleGroup"; | ||
| import type { DynamicRoute, PaginatedResponse } from "@/lib/types"; | ||
| import { redirect } from "next/navigation"; | ||
| import type { DynamicRoute } from "@/lib/types"; | ||
| import { getGuild } from "./fetchers"; | ||
|
|
||
| const DefaultGuildPage = async ({ | ||
| params, | ||
| }: DynamicRoute<{ guildId: string }>) => { | ||
| const { guildId: guildIdParam } = await params; | ||
| const guild = (await ( | ||
| await fetch(`${env.NEXT_PUBLIC_API}/guild/urlName/${guildIdParam}`) | ||
| ).json()) as Guild; | ||
| const paginatedRoleGroup = (await ( | ||
| await fetch( | ||
| `${env.NEXT_PUBLIC_API}/role-group/search?customQuery=@guildId:{${guild.id}}`, | ||
| ) | ||
| ).json()) as PaginatedResponse<RoleGroup>; | ||
| const roleGroups = paginatedRoleGroup.items; | ||
| const roleGroup = roleGroups.at(0); | ||
| if (roleGroup) { | ||
| redirect(`/${guildIdParam}/${roleGroup.urlName}`); | ||
| } | ||
| return "default guild page"; | ||
| const { guildId: urlName } = await params; | ||
| const guild = await getGuild(urlName); | ||
| // const paginatedRoleGroup = (await ( | ||
| // await fetch( | ||
| // `${env.NEXT_PUBLIC_API}/role-group/search?customQuery=@guildId:{${guild.id}}`, | ||
| // ) | ||
| // ).json()) as PaginatedResponse<RoleGroup>; | ||
| // const roleGroups = paginatedRoleGroup.items; | ||
| // const roleGroup = roleGroups.at(0); | ||
| // if (roleGroup) { | ||
| // redirect(`/${guildIdParam}/${roleGroup.urlName}`); | ||
| // } | ||
| return `Default guild page - ${guild.name}`; | ||
| }; | ||
|
|
||
| export default DefaultGuildPage; |