54 lines
1.5 KiB
TypeScript
54 lines
1.5 KiB
TypeScript
import { useCallback } from 'react';
|
|
import type { FC } from 'react';
|
|
|
|
import { FormattedMessage } from 'react-intl';
|
|
|
|
import classNames from 'classnames';
|
|
|
|
import IconPlanet from '@/images/icons/icon_planet.svg?react';
|
|
import { openModal } from '@/mastodon/actions/modal';
|
|
import { Icon } from '@/mastodon/components/icon';
|
|
import {
|
|
createAppSelector,
|
|
useAppDispatch,
|
|
useAppSelector,
|
|
} from '@/mastodon/store';
|
|
|
|
import classes from './index.module.scss';
|
|
|
|
const selectReportModalOpen = createAppSelector(
|
|
[(state) => state.modal.getIn(['stack', 0, 'modalType'])],
|
|
(modalType) => modalType === 'ANNUAL_REPORT',
|
|
);
|
|
|
|
export const AnnualReportNavItem: FC = () => {
|
|
const { state, year } = useAppSelector((state) => state.annualReport);
|
|
const active = useAppSelector(selectReportModalOpen);
|
|
|
|
const dispatch = useAppDispatch();
|
|
const handleClick = useCallback(() => {
|
|
dispatch(openModal({ modalType: 'ANNUAL_REPORT', modalProps: {} }));
|
|
}, [dispatch]);
|
|
|
|
if (!year || !state || state === 'ineligible') {
|
|
return null;
|
|
}
|
|
|
|
return (
|
|
<button
|
|
type='button'
|
|
className={classNames('column-link column-link--transparent', { active })}
|
|
onClick={handleClick}
|
|
>
|
|
<Icon icon={IconPlanet} id='wrapstodon-planet' width='24' height='24' />
|
|
<span>Wrapstodon {year}</span>
|
|
<span className={classNames('column-link__badge', classes.navItemBadge)}>
|
|
<FormattedMessage
|
|
id='annual_report.nav_item.badge'
|
|
defaultMessage='New'
|
|
/>
|
|
</span>
|
|
</button>
|
|
);
|
|
};
|