42 lines
1.2 KiB
TypeScript
42 lines
1.2 KiB
TypeScript
import React, { useEffect, useState } from 'react';
|
|
import ReactMarkdown from 'react-markdown';
|
|
import dayjs from 'dayjs';
|
|
import { useParams } from 'react-router';
|
|
import { IAnnouncement } from '../../common/types/announcement';
|
|
import { Skeleton } from '../components/Skeleton';
|
|
import { $get } from '../misc/api';
|
|
import { useSelector } from '../store';
|
|
import { useTitle } from '../hooks/useTitle';
|
|
|
|
export const AnnouncementPage: React.VFC = () => {
|
|
const { id } = useParams<{id: string}>();
|
|
if (!id) return null;
|
|
|
|
const [announcement, setAnnouncement] = useState<IAnnouncement | null>();
|
|
|
|
const lang = useSelector(state => state.screen.language);
|
|
|
|
useTitle('announcements');
|
|
|
|
useEffect(() => {
|
|
$get<IAnnouncement>('announcements/' + id).then(setAnnouncement);
|
|
}, [setAnnouncement]);
|
|
return (
|
|
<article className="xarticle">
|
|
{!announcement ? <Skeleton width="100%" height="10rem" /> : (
|
|
<>
|
|
<h2>
|
|
{announcement.title}
|
|
<aside className="inline ml-1 text-dimmed text-100">
|
|
<i className="fas fa-clock" />
|
|
{dayjs(announcement.createdAt).locale(lang.split('_')[0]).fromNow()}
|
|
</aside>
|
|
</h2>
|
|
<section>
|
|
<ReactMarkdown>{announcement.body}</ReactMarkdown>
|
|
</section>
|
|
</>
|
|
)}
|
|
</article>
|
|
);
|
|
};
|