🐛 Fix miscellaneous console errors (#1418)

* 🐛 Bookmark widget key fix

* 🐛 Media request list widget key fix

* 🐛 media server widget key fix

* 🐛 Remove "hasNextLevel" error
This commit is contained in:
Tagaishi
2023-10-08 11:46:18 +02:00
committed by GitHub
parent a7655b6348
commit 4e036315ba
4 changed files with 60 additions and 58 deletions

View File

@@ -254,6 +254,7 @@ function BookmarkWidgetTile({ widget }: BookmarkWidgetTileProps) {
);
case 'horizontal':
case 'vertical':
const flexDirection = widget.properties.layout === 'vertical' ? 'column' : 'row';
return (
<Stack h="100%" spacing={0}>
<Title size="h4" px="0.25rem">
@@ -276,21 +277,19 @@ function BookmarkWidgetTile({ widget }: BookmarkWidgetTileProps) {
}}
>
<Flex
direction={ widget.properties.layout === 'vertical' ? 'column' : 'row' }
direction={flexDirection}
gap="0"
h="100%"
w="100%"
>
{widget.properties.items.map((item: BookmarkItem, index) => (
<>
{index > 0 &&
<Divider
m="3px"
orientation={ widget.properties.layout !== 'vertical' ? 'vertical' : 'horizontal' }
/>
}
<div key={index} style={{ display: 'flex', flex: '1', flexDirection: flexDirection, }}>
<Divider
m="3px"
orientation={ widget.properties.layout !== 'vertical' ? 'vertical' : 'horizontal' }
color={index === 0 ? "transparent" : undefined}
/>
<Card
key={index}
px="md"
py="1px"
component="a"
@@ -307,7 +306,7 @@ function BookmarkWidgetTile({ widget }: BookmarkWidgetTileProps) {
>
<BookmarkItemContent item={item}/>
</Card>
</>
</div>
))}
</Flex>
</ScrollArea>

View File

@@ -105,7 +105,6 @@ function CalendarTile({ widget }: CalendarTileProps) {
style={{ position: 'relative' }}
date={month}
maxLevel="month"
hasNextLevel={false}
styles={{
calendarHeader: {
maxWidth: 'inherit',

View File

@@ -1,5 +1,6 @@
import {
ActionIcon, Anchor,
ActionIcon,
Anchor,
Badge,
Card,
Center,
@@ -9,7 +10,8 @@ import {
ScrollArea,
Stack,
Text,
Tooltip, useMantineTheme,
Tooltip,
useMantineTheme,
} from '@mantine/core';
import { notifications } from '@mantine/notifications';
import { IconCheck, IconGitPullRequest, IconThumbDown, IconThumbUp } from '@tabler/icons-react';
@@ -142,8 +144,8 @@ function MediaRequestListTile({ widget }: MediaRequestListWidgetProps) {
) : (
<Text>{t('nonePending')}</Text>
)}
{sortedData.map((item) => (
<Card radius="md" withBorder>
{sortedData.map((item, index) => (
<Card radius="md" withBorder key={index}>
<Flex wrap="wrap" justify="space-between" gap="md">
<Flex gap="md">
<Image
@@ -161,9 +163,9 @@ function MediaRequestListTile({ widget }: MediaRequestListWidgetProps) {
</Group>
<Anchor
href={item.href}
target={widget.properties.openInNewTab ? "_blank" : "_self"}
target={widget.properties.openInNewTab ? '_blank' : '_self'}
c={mantineTheme.colorScheme === 'dark' ? 'gray.3' : 'gray.8'}
>
>
{item.name}
</Anchor>
</Stack>
@@ -180,53 +182,54 @@ function MediaRequestListTile({ widget }: MediaRequestListWidgetProps) {
/>
<Anchor
href={item.userLink}
target={widget.properties.openInNewTab ? "_blank" : "_self"}
target={widget.properties.openInNewTab ? '_blank' : '_self'}
c={mantineTheme.colorScheme === 'dark' ? 'gray.3' : 'gray.8'}
>
{item.userName}
</Anchor>
</Flex>
{item.status === MediaRequestStatus.PendingApproval && sessionData?.user?.isAdmin && (
<Group>
<Tooltip label={t('tooltips.approve')} withArrow withinPortal>
<ActionIcon
variant="light"
color="green"
onClick={async () => {
notifications.show({
id: `approve ${item.id}`,
color: 'yellow',
title: t('tooltips.approving'),
message: undefined,
loading: true,
});
{item.status === MediaRequestStatus.PendingApproval &&
sessionData?.user?.isAdmin && (
<Group>
<Tooltip label={t('tooltips.approve')} withArrow withinPortal>
<ActionIcon
variant="light"
color="green"
onClick={async () => {
notifications.show({
id: `approve ${item.id}`,
color: 'yellow',
title: t('tooltips.approving'),
message: undefined,
loading: true,
});
await decideAsync({
request: item,
isApproved: true,
});
}}
>
<IconThumbUp />
</ActionIcon>
</Tooltip>
<Tooltip label={t('tooltips.decline')} withArrow withinPortal>
<ActionIcon
variant="light"
color="red"
onClick={async () => {
await decideAsync({
request: item,
isApproved: false,
});
}}
>
<IconThumbDown />
</ActionIcon>
</Tooltip>
</Group>
)}
await decideAsync({
request: item,
isApproved: true,
});
}}
>
<IconThumbUp />
</ActionIcon>
</Tooltip>
<Tooltip label={t('tooltips.decline')} withArrow withinPortal>
<ActionIcon
variant="light"
color="red"
onClick={async () => {
await decideAsync({
request: item,
isApproved: false,
});
}}
>
<IconThumbDown />
</ActionIcon>
</Tooltip>
</Group>
)}
</Stack>
</Flex>

View File

@@ -100,7 +100,7 @@ function MediaServerTile({ widget }: MediaServerWidgetProps) {
<Group pos="absolute" bottom="15" right="15" mt="auto">
<Avatar.Group>
{data?.servers.map((server) => {
{data?.servers.map((server, index) => {
const app = config?.apps.find((x) => x.id === server.appId);
if (!app) {
@@ -109,6 +109,7 @@ function MediaServerTile({ widget }: MediaServerWidgetProps) {
return (
<AppAvatar
key={index}
iconUrl={app.appearance.iconUrl}
// If success, the color is undefined, otherwise it's red but if isFetching is true, it's yellow
color={server.success ? (isFetching ? 'yellow' : undefined) : 'red'}