feat(ui): improve clan list logic in SidebarHeader

This commit is contained in:
Brian McGee
2025-08-21 17:20:53 +01:00
parent 5f83fe02a1
commit f0bbdad9ef
2 changed files with 13 additions and 4 deletions

View File

@@ -31,7 +31,11 @@ export const SidebarHeader = () => {
ctx?.activeClanQuery?.data?.name.charAt(0).toUpperCase();
const clanName = () => ctx?.activeClanQuery?.data?.name;
const clans = () => ctx.otherClanQueries.filter((clan) => !clan.isError);
const clanList = () =>
ctx.allClansQueries
.filter((it) => it.isSuccess)
.map((it) => it.data!)
.sort((a, b) => a.name.localeCompare(b.name));
return (
<div class="sidebar-header">
@@ -100,13 +104,13 @@ export const SidebarHeader = () => {
</Button>
</DropdownMenu.GroupLabel>
<div class="dropdown-group-items">
<For each={clans()}>
<For each={clanList()}>
{(clan) => (
<Suspense fallback={"Loading..."}>
<DropdownMenu.Item
class="dropdown-item"
onSelect={() => {
setActiveClanURI(clan.data!.uri);
setActiveClanURI(clan.uri);
}}
>
<Typography
@@ -114,7 +118,7 @@ export const SidebarHeader = () => {
size="xs"
weight="medium"
>
{clan.data?.name}
{clan.name}
</Typography>
</DropdownMenu.Item>
</Suspense>

View File

@@ -41,6 +41,7 @@ interface ClanContextProps {
machinesQuery: MachinesQueryResult;
activeClanQuery: UseQueryResult<ClanDetailsWithURI>;
otherClanQueries: UseQueryResult<ClanDetailsWithURI>[];
allClansQueries: UseQueryResult<ClanDetailsWithURI>[];
isLoading(): boolean;
}
@@ -48,8 +49,10 @@ interface ClanContextProps {
class DefaultClanContext implements ClanContextProps {
public readonly clanURI: string;
public readonly machinesQuery: MachinesQueryResult;
public readonly activeClanQuery: UseQueryResult<ClanDetailsWithURI>;
public readonly otherClanQueries: UseQueryResult<ClanDetailsWithURI>[];
public readonly allClansQueries: UseQueryResult<ClanDetailsWithURI>[];
allQueries: UseQueryResult[];
@@ -61,8 +64,10 @@ class DefaultClanContext implements ClanContextProps {
) {
this.clanURI = clanURI;
this.machinesQuery = machinesQuery;
this.activeClanQuery = activeClanQuery;
this.otherClanQueries = otherClanQueries;
this.allClansQueries = [activeClanQuery, ...otherClanQueries];
this.allQueries = [machinesQuery, activeClanQuery, ...otherClanQueries];
}