Dockery/Homarr
1
0
Fork 0
mirror of https://github.com/ajnart/homarr.git synced 2025-11-11 07:55:52 +01:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'dev' into feat/overseerr-widget

Browse Source
This commit is contained in:
Manuel
2023-04-06 23:11:29 +02:00
parent c1463b3aa6 984292482a
commit 31a0b5553f
9 changed files with 129 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
package.json
View File

@@ -41,9 +41,13 @@
"@mantine/notifications": "^6.0.0",
"@nivo/core": "^0.80.0",
"@nivo/line": "^0.80.0",
"@react-native-async-storage/async-storage": "^1.18.1",
"@tabler/icons": "^1.106.0",
"@tanstack/query-async-storage-persister": "^4.27.1",
"@tanstack/query-sync-storage-persister": "^4.27.1",
"@tanstack/react-query": "^4.2.1",
"@tanstack/react-query-devtools": "^4.24.4",
"@tanstack/react-query-persist-client": "^4.28.0",
"@vitejs/plugin-react": "^3.1.0",
"axios": "^0.27.2",
"consola": "^2.15.3",

8
public/locales/en/modules/media-requests-list.json
View File

@@ -5,5 +5,13 @@
"settings": {
"title": "Media requests list"
}
},
"noRequests": "There are no requests. Ensure that you've configured your apps correctly.",
"pending": "There are {countPendingApproval} requests waiting for an approval.",
"nonePending": "There are currently no pending approvals. You're good to go!",
"state": {
"approved": "Approved",
"pendingApproval": "Pending approval",
"declined": "Declined"
}
}

5
public/locales/en/modules/media-requests-stats.json
View File

@@ -5,5 +5,10 @@
"settings": {
"title": "Media requests stats"
}
},
"stats": {
"pending": "Pending approvals",
"tvRequests": "TV requests",
"movieRequests": "Movie requests"
}
}

41
src/components/Dashboard/Views/DashboardView.tsx
View File

@@ -17,33 +17,24 @@ export const DashboardView = () => {
return (
<Group align="top" h="100%" spacing="xs">
{sidebarsVisible.isLoading ? (
<Center w="100%">
<Loader />
</Center>
) : (
<>
{sidebarsVisible.left ? (
<DashboardSidebar location="left" isGridstackReady={isReady} />
) : null}
{sidebarsVisible.left ? (
<DashboardSidebar location="left" isGridstackReady={isReady} />
) : null}
<Stack ref={mainAreaRef} mx={-10} style={{ flexGrow: 1 }}>
{!isReady
? null
: wrappers.map((item) =>
item.type === 'category' ? (
<DashboardCategory key={item.id} category={item as unknown as CategoryType} />
) : (
<DashboardWrapper key={item.id} wrapper={item as WrapperType} />
)
)}
</Stack>
<Stack ref={mainAreaRef} mx={-10} style={{ flexGrow: 1 }}>
{isReady &&
wrappers.map((item) =>
item.type === 'category' ? (
<DashboardCategory key={item.id} category={item as unknown as CategoryType} />
) : (
<DashboardWrapper key={item.id} wrapper={item as WrapperType} />
)
)}
</Stack>
{sidebarsVisible.right ? (
<DashboardSidebar location="right" isGridstackReady={isReady} />
) : null}
</>
)}
{sidebarsVisible.right ? (
<DashboardSidebar location="right" isGridstackReady={isReady} />
) : null}
</Group>
);
};

3
src/hooks/useScreenLargerThan.ts
View File

@@ -1,9 +1,8 @@
import { MantineSize, useMantineTheme } from '@mantine/core';
import { useMediaQuery } from '@mantine/hooks';
import { MIN_WIDTH_MOBILE } from '../constants/constants';
export const useScreenLargerThan = (size: MantineSize | number) => {
const { breakpoints } = useMantineTheme();
const pixelCount = typeof size === 'string' ? breakpoints[size] : size;
return useMediaQuery(`(min-width: ${MIN_WIDTH_MOBILE})`);
return useMediaQuery(`(min-width: ${pixelCount})`);
};

15
src/pages/_app.tsx
View File

@@ -2,7 +2,6 @@ import { ColorScheme, ColorSchemeProvider, MantineProvider, MantineTheme } from
import { useColorScheme, useHotkeys, useLocalStorage } from '@mantine/hooks';
import { ModalsProvider } from '@mantine/modals';
import Consola from 'consola';
import { QueryClientProvider } from '@tanstack/react-query';
import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
import { getCookie } from 'cookies-next';
import { GetServerSidePropsContext } from 'next';
@@ -12,6 +11,9 @@ import Head from 'next/head';
import { useEffect, useState } from 'react';
import { Notifications } from '@mantine/notifications';
import 'video.js/dist/video-js.css';
import AsyncStorage from '@react-native-async-storage/async-storage';
import { PersistQueryClientProvider } from '@tanstack/react-query-persist-client';
import { createAsyncStoragePersister } from '@tanstack/query-async-storage-persister';
import { ChangeAppPositionModal } from '../components/Dashboard/Modals/ChangePosition/ChangeAppPositionModal';
import { ChangeWidgetPositionModal } from '../components/Dashboard/Modals/ChangePosition/ChangeWidgetPositionModal';
import { EditAppModal } from '../components/Dashboard/Modals/EditAppModal/EditAppModal';
@@ -77,6 +79,10 @@ function App(
const toggleColorScheme = (value?: ColorScheme) =>
setColorScheme(value || (colorScheme === 'dark' ? 'light' : 'dark'));
const asyncStoragePersister = createAsyncStoragePersister({
storage: AsyncStorage,
});
useHotkeys([['mod+J', () => toggleColorScheme()]]);
return (
@@ -84,7 +90,10 @@ function App(
<Head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
</Head>
<QueryClientProvider client={queryClient}>
<PersistQueryClientProvider
client={queryClient}
persistOptions={{ persister: asyncStoragePersister }}
>
<ColorSchemeProvider colorScheme={colorScheme} toggleColorScheme={toggleColorScheme}>
<ColorTheme.Provider value={colorTheme}>
<MantineProvider
@@ -131,7 +140,7 @@ function App(
</ColorTheme.Provider>
</ColorSchemeProvider>
<ReactQueryDevtools initialIsOpen={false} />
</QueryClientProvider>
</PersistQueryClientProvider>
</>
);
}

15
src/widgets/media-requests/MediaRequestListTile.tsx
View File

@@ -1,4 +1,5 @@
import { Badge, Card, Center, Flex, Group, Image, Stack, Text } from '@mantine/core';
import { useTranslation } from 'next-i18next';
import { IconGitPullRequest } from '@tabler/icons';
import { defineWidget } from '../helper';
import { WidgetLoading } from '../loading';
@@ -26,6 +27,7 @@ interface MediaRequestListWidgetProps {
}
function MediaRequestListTile({ widget }: MediaRequestListWidgetProps) {
const { t } = useTranslation('modules/media-requests-list');
const { data, isFetching } = useMediaRequestQuery();
if (!data || isFetching) {
@@ -35,7 +37,7 @@ function MediaRequestListTile({ widget }: MediaRequestListWidgetProps) {
if (data.length === 0) {
return (
<Center h="100%">
<Text>There are no requests. Ensure that you&apos;ve configured your apps correctly.</Text>
<Text>{t('noRequests')}</Text>
</Center>
);
}
@@ -47,9 +49,9 @@ function MediaRequestListTile({ widget }: MediaRequestListWidgetProps) {
return (
<Stack>
{countPendingApproval > 0 ? (
<Text>There are {countPendingApproval} requests waiting for an approval.</Text>
<Text>{t('pending', { countPendingApproval })}</Text>
) : (
<Text>There are currently no pending approvals. You&apos;re good to go!</Text>
<Text>{t('nonePending')}</Text>
)}
{data.map((item) => (
<Card pos="relative" withBorder>
@@ -108,13 +110,14 @@ function MediaRequestListTile({ widget }: MediaRequestListWidgetProps) {
}
const MediaRequestStatusBadge = ({ status }: { status: MediaRequestStatus }) => {
const { t } = useTranslation('modules/media-requests-list');
switch (status) {
case MediaRequestStatus.Approved:
return <Badge color="green">Approved</Badge>;
return <Badge color="green">{t('state.approved')}</Badge>;
case MediaRequestStatus.Declined:
return <Badge color="red">Declined</Badge>;
return <Badge color="red">{t('state.declined')}</Badge>;
case MediaRequestStatus.PendingApproval:
return <Badge color="orange">Pending approval</Badge>;
return <Badge color="orange">{t('state.pendingApproval')}</Badge>;
default:
return <></>;
}

8
src/widgets/media-requests/MediaRequestStatsTile.tsx
View File

@@ -5,6 +5,7 @@ import { WidgetLoading } from '../loading';
import { IWidget } from '../widgets';
import { useMediaRequestQuery } from './media-request-query';
import { MediaRequestStatus } from './media-request-types';
import { useTranslation } from 'next-i18next';
const definition = defineWidget({
id: 'media-requests-stats',
@@ -26,6 +27,7 @@ interface MediaRequestStatsWidgetProps {
}
function MediaRequestStatsTile({ widget }: MediaRequestStatsWidgetProps) {
const { t } = useTranslation('modules/media-requests-stats');
const { data, isFetching } = useMediaRequestQuery();
if (!data || isFetching) {
@@ -41,7 +43,7 @@ function MediaRequestStatsTile({ widget }: MediaRequestStatsWidgetProps) {
{data.filter((x) => x.status === MediaRequestStatus.PendingApproval).length}
</Text>
<Text color="dimmed" align="center" size="xs">
Pending approvals
{t('stats.pending')}
</Text>
</Stack>
</Center>
@@ -51,7 +53,7 @@ function MediaRequestStatsTile({ widget }: MediaRequestStatsWidgetProps) {
<Stack spacing={0} align="center">
<Text align="center">{data.filter((x) => x.type === 'tv').length}</Text>
<Text color="dimmed" align="center" size="xs">
TV requests
{t('stats.tvRequests')}
</Text>
</Stack>
</Center>
@@ -61,7 +63,7 @@ function MediaRequestStatsTile({ widget }: MediaRequestStatsWidgetProps) {
<Stack spacing={0} align="center">
<Text align="center">{data.filter((x) => x.type === 'movie').length}</Text>
<Text color="dimmed" align="center" size="xs">
Movie requests
{t('stats.movieRequests')}
</Text>
</Stack>
</Center>

69
yarn.lock
View File

@@ -1503,6 +1503,17 @@ __metadata:
languageName: node
linkType: hard
"@react-native-async-storage/async-storage@npm:^1.18.1":
version: 1.18.1
resolution: "@react-native-async-storage/async-storage@npm:1.18.1"
dependencies:
merge-options: ^3.0.4
peerDependencies:
react-native: ^0.0.0-0 || 0.60 - 0.72 || 1000.0.0
checksum: 58c8497fafdd4d112c4a70b0976783abdc6fa487f0cffca196901efd146fc838dee0cf498fdc4ef67a4634ba4ca97d60fec5a24720aea1d46f1999b0ba8b249b
languageName: node
linkType: hard
"@react-spring/animated@npm:~9.4.5":
version: 9.4.5
resolution: "@react-spring/animated@npm:9.4.5"
@@ -1642,6 +1653,15 @@ __metadata:
languageName: node
linkType: hard
"@tanstack/query-async-storage-persister@npm:^4.27.1":
version: 4.27.1
resolution: "@tanstack/query-async-storage-persister@npm:4.27.1"
dependencies:
"@tanstack/query-persist-client-core": 4.27.0
checksum: f98da672c6a61c65a58dc3d1b6e4416800bbd61747f806cc8cfceecb9f8bf4fa6be4133036f0b2efd5177e6f93031bb84e2ee53d888e9d6c34cc11f8aede97f4
languageName: node
linkType: hard
"@tanstack/query-core@npm:4.27.0":
version: 4.27.0
resolution: "@tanstack/query-core@npm:4.27.0"
@@ -1649,6 +1669,24 @@ __metadata:
languageName: node
linkType: hard
"@tanstack/query-persist-client-core@npm:4.27.0":
version: 4.27.0
resolution: "@tanstack/query-persist-client-core@npm:4.27.0"
dependencies:
"@tanstack/query-core": 4.27.0
checksum: 9a2df41744269d666bc0c1a5684a1d9d327e7994b57f9c1a71ea86d169dbde94f9d4af4b4ebe258d0085e0aa2cd563460b06513eccc4b016c0c5d416122d0275
languageName: node
linkType: hard
"@tanstack/query-sync-storage-persister@npm:^4.27.1":
version: 4.27.1
resolution: "@tanstack/query-sync-storage-persister@npm:4.27.1"
dependencies:
"@tanstack/query-persist-client-core": 4.27.0
checksum: 16cdef50af43cf854ec1244f43609c04f9a9fcb7bbb36c763ce3146aeb85095c62da098fb4c4876d76496fa5830d54c6e79691d2b353919b1e5f274a3c34a97e
languageName: node
linkType: hard
"@tanstack/react-query-devtools@npm:^4.24.4":
version: 4.28.0
resolution: "@tanstack/react-query-devtools@npm:4.28.0"
@@ -1664,6 +1702,17 @@ __metadata:
languageName: node
linkType: hard
"@tanstack/react-query-persist-client@npm:^4.28.0":
version: 4.28.0
resolution: "@tanstack/react-query-persist-client@npm:4.28.0"
dependencies:
"@tanstack/query-persist-client-core": 4.27.0
peerDependencies:
"@tanstack/react-query": 4.28.0
checksum: 8177b41ae644774f380154ec09588cce21b6bf75f45d58691cc86fd58002927989f47e278170a1ae9c3c02638a7e26d67a29106c768d325a54cef9219115839d
languageName: node
linkType: hard
"@tanstack/react-query@npm:^4.2.1":
version: 4.28.0
resolution: "@tanstack/react-query@npm:4.28.0"
@@ -4857,9 +4906,13 @@ __metadata:
"@next/eslint-plugin-next": ^12.1.4
"@nivo/core": ^0.80.0
"@nivo/line": ^0.80.0
"@react-native-async-storage/async-storage": ^1.18.1
"@tabler/icons": ^1.106.0
"@tanstack/query-async-storage-persister": ^4.27.1
"@tanstack/query-sync-storage-persister": ^4.27.1
"@tanstack/react-query": ^4.2.1
"@tanstack/react-query-devtools": ^4.24.4
"@tanstack/react-query-persist-client": ^4.28.0
"@testing-library/jest-dom": ^5.16.5
"@testing-library/react": ^14.0.0
"@types/dockerode": ^3.3.9
@@ -5354,6 +5407,13 @@ __metadata:
languageName: node
linkType: hard
"is-plain-obj@npm:^2.1.0":
version: 2.1.0
resolution: "is-plain-obj@npm:2.1.0"
checksum: cec9100678b0a9fe0248a81743041ed990c2d4c99f893d935545cfbc42876cbe86d207f3b895700c690ad2fa520e568c44afc1605044b535a7820c1d40e38daa
languageName: node
linkType: hard
"is-regex@npm:^1.1.4":
version: 1.1.4
resolution: "is-regex@npm:1.1.4"
@@ -5875,6 +5935,15 @@ __metadata:
languageName: node
linkType: hard
"merge-options@npm:^3.0.4":
version: 3.0.4
resolution: "merge-options@npm:3.0.4"
dependencies:
is-plain-obj: ^2.1.0
checksum: d86ddb3dd6e85d558dbf25dc944f3527b6bacb944db3fdda6e84a3f59c4e4b85231095f58b835758b9a57708342dee0f8de0dffa352974a48221487fe9f4584f
languageName: node
linkType: hard
"merge2@npm:^1.3.0, merge2@npm:^1.4.1":
version: 1.4.1
resolution: "merge2@npm:1.4.1"