client: expiration styling improvements

This commit is contained in:
Max Leiter 2022-03-30 23:30:01 -07:00
parent 8291010f26
commit eae627807b
No known key found for this signature in database
GPG key ID: A3512F2F2F17EBDA
3 changed files with 12 additions and 13 deletions

View file

@ -4,7 +4,7 @@ import { useCallback, useEffect, useMemo, useState } from "react";
const ExpirationBadge = ({
postExpirationDate,
onExpires
// onExpires
}: {
postExpirationDate: Date | string | null
onExpires?: () => void
@ -33,14 +33,14 @@ const ExpirationBadge = ({
return timeUntilString && timeUntilString === "in 0 seconds"
}, [timeUntilString])
useEffect(() => {
// check if expired every
if (isExpired) {
if (onExpires) {
onExpires();
}
}
}, [isExpired, onExpires])
// useEffect(() => {
// // check if expired every
// if (isExpired) {
// if (onExpires) {
// onExpires();
// }
// }
// }, [isExpired, onExpires])
if (!expirationDate) {
return null;

View file

@ -94,12 +94,11 @@ const PostPage = ({ post }: Props) => {
}}>
<VisibilityBadge visibility={post.visibility} />
<CreatedAgoBadge createdAt={post.createdAt} />
<ExpirationBadge onExpires={onExpires} postExpirationDate={post.expiresAt} />
<ExpirationBadge postExpirationDate={post.expiresAt} />
</ButtonGroup>
</span>
<span className={styles.buttons}>
{/* If it hasn't expired, the badge can be too long */}
<ButtonGroup vertical={isMobile || (post.expiresAt && !isExpired) ? true : false}>
<ButtonGroup vertical={true}>
<Button auto onClick={download} icon={<Archive />}>
Download as ZIP archive
</Button>

View file

@ -8,7 +8,7 @@ const Expired = () => {
<Header />
<Page.Content className={styles.main}>
<Note type="error" label={false}>
<Text h4>Error: The drift you&apos;re trying to view has expired.</Text>
<Text h4>Error: The Drift you&apos;re trying to view has expired.</Text>
</Note>
</Page.Content>