import { ActionIcon, Button, Center, Flex, Pagination, Table, Text, Title, createStyles, } from '@mantine/core'; import { modals } from '@mantine/modals'; import { IconPlus, IconTrash } from '@tabler/icons-react'; import dayjs from 'dayjs'; import { GetServerSideProps } from 'next'; import { useTranslation } from 'next-i18next'; import Head from 'next/head'; import { useState } from 'react'; import { openCreateInviteModal } from '~/components/Manage/User/Invite/create-invite.modal'; import { ManageLayout } from '~/components/layout/Templates/ManageLayout'; import { getServerAuthSession } from '~/server/auth'; import { getServerSideTranslations } from '~/tools/server/getServerSideTranslations'; import { checkForSessionOrAskForLogin } from '~/tools/server/loginBuilder'; import { manageNamespaces } from '~/tools/server/translation-namespaces'; import { api } from '~/utils/api'; const ManageUserInvitesPage = () => { const { classes } = useStyles(); const { t } = useTranslation('manage/users/invites'); const [activePage, setActivePage] = useState(0); const { data: invites } = api.invites.all.useQuery({ page: activePage, }); const nextPage = () => { setActivePage((prev) => prev + 1); }; const previousPage = () => { setActivePage((prev) => prev - 1); }; const metaTitle = `${t('metaTitle')} • Homarr`; return ( {metaTitle} {t('pageTitle')} {t('description')} {invites && ( <> {invites.invites.map((invite, index) => ( ))} {invites.invites.length === 0 && ( )}
{t('table.header.id')} {t('table.header.creator')} {t('table.header.expires')} {t('table.header.action')}
{invite.id} {invite.creator} {dayjs(dayjs()).isAfter(invite.expires) ? ( {t('table.data.expiresAt', { at: dayjs(invite.expires).fromNow() })} ) : ( {t('table.data.expiresIn', { in: dayjs(invite.expires).fromNow(true) })} )} { modals.openContextModal({ modal: 'deleteInviteModal', title: {t('button.deleteInvite')}, innerProps: { tokenId: invite.id, }, }); }} color="red" variant="light" >
{t('noInvites')}
{ setActivePage(targetPage - 1); }} onNextPage={nextPage} onPreviousPage={previousPage} onFirstPage={() => { setActivePage(0); }} onLastPage={() => { setActivePage(invites.countPages - 1); }} withEdges /> )}
); }; const useStyles = createStyles(() => ({ tableGrowCell: { width: '50%', }, tableCell: { whiteSpace: 'nowrap', }, })); export const getServerSideProps: GetServerSideProps = async (ctx) => { const session = await getServerAuthSession(ctx); const result = checkForSessionOrAskForLogin(ctx, session, () => session?.user.isAdmin == true); if (result) { return result; } const translations = await getServerSideTranslations( manageNamespaces, ctx.locale, ctx.req, ctx.res ); return { props: { ...translations, }, }; }; export default ManageUserInvitesPage;