johnnygear/gear-orders
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Timeline - Link to subs

Browse source
This commit is contained in:
John Groszko 2026-04-23 16:36:38 -05:00
parent cfccd424cb
commit 2089ee4161
1 changed files with 74 additions and 61 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

135
web/vite/src/TimelineList.tsx
View file

@ -14,6 +14,7 @@ import {
IconLock, IconLock,
IconX, IconX,
} from "@tabler/icons-react"; } from "@tabler/icons-react";
import { useUserContext } from "./UserContext";
const TIMELINE_TYPE = { const TIMELINE_TYPE = {
ORDER_NOT_ISSUED: { ORDER_NOT_ISSUED: {
@ -60,69 +61,81 @@ const TIMELINE_TYPE = {
export const TimelineList: React.FC<{ export const TimelineList: React.FC<{
timeline: TimelineEvent[]; timeline: TimelineEvent[];
}> = ({ timeline }) => ( }> = ({ timeline }) => {
<Box> const { username: my_username } = useUserContext();
<Title order={1} mb="lg">
Timeline return (
</Title> <Box>
<Card py="xs"> <Title order={1} mb="lg">
<Timeline bulletSize={24} lineWidth={2} my="lg"> Timeline
{timeline.map( </Title>
({ <Card py="xs">
id, <Timeline bulletSize={24} lineWidth={2} my="lg">
updated_at, {timeline.map(
type, ({
text, id,
username, updated_at,
actor_username, type,
orders_pool, text,
extra, username,
}) => ( actor_username,
<Timeline.Item key={id} active {...(TIMELINE_TYPE[type] ?? {})}> orders_pool,
<Text size="sm"> extra,
{text.split("\n").map((str, idx) => ( }) => (
<React.Fragment key={idx}> <Timeline.Item key={id} active {...(TIMELINE_TYPE[type] ?? {})}>
{str} <Text size="sm">
<br /> {text.split("\n").map((str, idx) => (
</React.Fragment> <React.Fragment key={idx}>
))} {str}
</Text> <br />
<Flex mt={4} gap="xs"> </React.Fragment>
{extra?.mastodon_status_url ? ( ))}
</Text>
<Flex mt={4} gap="xs">
{extra?.mastodon_status_url ? (
<Text size="xs">
<Anchor href={extra.mastodon_status_url} target="_blank">
Mastodon Post <IconExternalLink size="0.75rem" />
</Anchor>
</Text>
) : null}
{orders_pool ? (
<Text size="xs">
{orders_pool.id ? (
<Anchor
component={Link}
to={`/orders/${username}/${orders_pool.id}`}
>
{orders_pool.name}
</Anchor>
) : (
orders_pool.name
)}
</Text>
) : null}
{actor_username ? (
<Text size="xs">
<IconCrown size="0.75rem" /> {actor_username}
</Text>
) : null}
<Text size="xs"> <Text size="xs">
<Anchor href={extra.mastodon_status_url} target="_blank"> {username != my_username ? (
Mastodon Post <IconExternalLink size="0.75rem" /> <Anchor component={Link} to={`/orders/${username}`}>
</Anchor> <IconLock size="0.75rem" /> {username}
</Text>
) : null}
{orders_pool ? (
<Text size="xs">
{orders_pool.id ? (
<Anchor
component={Link}
to={`/orders/${username}/${orders_pool.id}`}
>
{orders_pool.name}
</Anchor> </Anchor>
) : ( ) : (
orders_pool.name <>
<IconLock size="0.75rem" /> {username}
</>
)} )}
</Text> </Text>
) : null} <Text size="xs">{moment(updated_at).fromNow()}</Text>
{actor_username ? ( </Flex>
<Text size="xs"> </Timeline.Item>
<IconCrown size="0.75rem" /> {actor_username} ),
</Text> )}
) : null} </Timeline>
<Text size="xs"> </Card>
<IconLock size="0.75rem" /> {username} </Box>
</Text> );
<Text size="xs">{moment(updated_at).fromNow()}</Text> };
</Flex>
</Timeline.Item>
),
)}
</Timeline>
</Card>
</Box>
);