roleypoly/v3
1
0
Fork 0
mirror of https://github.com/roleypoly/roleypoly.git synced 2025-06-16 09:39:09 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Feat/recent guilds (#89) (#167)

Browse source 
* feat(web): add server-setup page for when bot isn't in the server picked

* chore: move contexts into their own folder

* feat(web): add recent guilds context, and app shell helper context

* feat(web): show recent guilds in masthead

* feat(web): functionally add recents to servers list

* fix(web): correct styling for servers listing recents/all headers

* fix(web): correct some type issues with appShellProps

* fix(web): don't show ServerListing recents when recents is empty
This commit is contained in:
41666 2021-03-13 19:31:36 -05:00 • committed by GitHub
parent 3a36d7a85d
commit 99952aa19f
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
22 changed files with 302 additions and 66 deletions
Download patch file Download diff file Expand all files Collapse all files

4
packages/design-system/organisms/servers-listing/ServersListing.styled.ts
View file

@ -21,3 +21,7 @@ export const CardContainer = styled.div`
max-width: 30%;
`)}
`;
export const SectionHead = styled.div`
flex: 1 1 100%;
`;

52
packages/design-system/organisms/servers-listing/ServersListing.tsx
View file

@ -1,27 +1,45 @@
import { CompletelyStylelessLink } from '@roleypoly/design-system/atoms/typography';
import { ServerListingCard } from '@roleypoly/design-system/molecules/server-listing-card';
import { sortBy } from '@roleypoly/misc-utils/sortBy';
import { getRecentAndSortedGuilds } from '@roleypoly/misc-utils/guildListing';
import { GuildSlug } from '@roleypoly/types';
import * as React from 'react';
import { CardContainer, ContentContainer } from './ServersListing.styled';
import { CardContainer, ContentContainer, SectionHead } from './ServersListing.styled';
type ServersListingProps = {
guilds: GuildSlug[];
recentGuilds: string[];
};
export const ServersListing = (props: ServersListingProps) => (
<ContentContainer>
{props.guilds &&
sortBy(props.guilds, 'name', (a: string, b: string) =>
a.toLowerCase() > b.toLowerCase() ? 1 : -1
).map((guild, idx) => (
<CardContainer key={idx}>
<a href={`/s/${guild.id}`}>
<CompletelyStylelessLink>
<ServerListingCard guild={guild} />
</CompletelyStylelessLink>
</a>
</CardContainer>
))}
</ContentContainer>
const CardList = (props: { guilds: GuildSlug[] }) => (
<>
{props.guilds.map((guild, idx) => (
<CardContainer key={idx}>
<a href={`/s/${guild.id}`}>
<CompletelyStylelessLink>
<ServerListingCard guild={guild} />
</CompletelyStylelessLink>
</a>
</CardContainer>
))}
</>
);
export const ServersListing = (props: ServersListingProps) => {
const { recentGuildSlugs, sortedGuildSlugs } = getRecentAndSortedGuilds(
props.guilds,
props.recentGuilds
);
return (
<ContentContainer>
{recentGuildSlugs.length !== 0 && (
<>
<SectionHead>Recent Guilds</SectionHead>
<CardList guilds={recentGuildSlugs} />
<SectionHead>All Guilds</SectionHead>
</>
)}
<CardList guilds={sortedGuildSlugs} />
</ContentContainer>
);
};