Merge branch 'dev' into feat/overseerr-widget

2025-11-16 10:16:20 +01:00 · 2023-04-06 23:11:29 +02:00
parent c1463b3aa6 984292482a
commit 31a0b5553f
9 changed files with 129 additions and 39 deletions
--- a/src/components/Dashboard/Views/DashboardView.tsx
+++ b/src/components/Dashboard/Views/DashboardView.tsx
@@ -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>
  );
 };
--- a/src/hooks/useScreenLargerThan.ts
+++ b/src/hooks/useScreenLargerThan.ts
@@ -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})`);
 };
--- a/src/pages/_app.tsx
+++ b/src/pages/_app.tsx
@@ -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>
    </>
  );
 }
--- a/src/widgets/media-requests/MediaRequestListTile.tsx
+++ b/src/widgets/media-requests/MediaRequestListTile.tsx
@@ -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 <></>;
  }
--- a/src/widgets/media-requests/MediaRequestStatsTile.tsx
+++ b/src/widgets/media-requests/MediaRequestStatsTile.tsx
@@ -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>