feat(settings): add query timeout

AXeL-dev · Jul 23, 2022 · a6eab93 · a6eab93
1 parent e33073a
commit a6eab93
Show file tree

Hide file tree

Showing 4 changed files with 49 additions and 8 deletions.
diff --git a/src/store/reducers/settings.ts b/src/store/reducers/settings.ts
@@ -29,6 +29,7 @@ export const defaultSettings = {
     hiddenViews: [],
   },
   enableNotifications: true,
+  queryTimeout: 10000,
 };
 
 const views = Object.values(HomeView);

diff --git a/src/store/services/youtube/api.ts b/src/store/services/youtube/api.ts
@@ -4,8 +4,8 @@ import {
   fetchBaseQuery,
 } from '@reduxjs/toolkit/query/react';
 import { BaseQueryApi } from '@reduxjs/toolkit/dist/query/baseQueryTypes';
-import { RootState } from 'store';
-import { FetchError } from 'types';
+import store, { RootState } from 'store';
+import { FetchError, Settings } from 'types';
 
 const defaultBaseQuery = fetchBaseQuery({
   baseUrl: 'https://www.googleapis.com/youtube/v3/',
@@ -25,15 +25,16 @@ const baseQuery = (
 ) =>
   Promise.race([
     defaultBaseQuery(args, api, extraOptions),
-    new Promise((resolve) =>
-      setTimeout(
+    new Promise((resolve) => {
+      const { queryTimeout = 10000 } = store.getState().settings as Settings;
+      return setTimeout(
         () =>
           resolve({
             error: { status: 'FETCH_ERROR', error: FetchError.TIMEOUT },
           }),
-        extraOptions.timeout ?? 10000
-      )
-    ) as ReturnType<typeof defaultBaseQuery>,
+        extraOptions.timeout ?? queryTimeout
+      );
+    }) as ReturnType<typeof defaultBaseQuery>,
   ]);
 
 export const youtubeApi = createApi({

diff --git a/src/types/Settings.ts b/src/types/Settings.ts
@@ -10,6 +10,7 @@ export interface Settings {
   watchLaterViewFilters: WatchLaterViewFilters;
   homeDisplayOptions: HomeDisplayOptions;
   enableNotifications: boolean;
+  queryTimeout: number;
 }
 
 export interface HomeDisplayOptions {
@@ -46,6 +47,14 @@ export enum VideosSeniority {
   OneMonth = 31,
 }
 
+export enum QueryTimeout {
+  TenSeconds = 10000,
+  FifteenSeconds = 15000,
+  TwentySeconds = 20000,
+  ThirtySeconds = 30000,
+  OneMinute = 60000,
+}
+
 export enum SettingType {
   String,
   Secret,

diff --git a/src/ui/components/pages/Settings/index.tsx b/src/ui/components/pages/Settings/index.tsx
@@ -1,7 +1,7 @@
 import React, { useState, useEffect, useMemo } from 'react';
 import { Stack, Divider, Link } from '@mui/material';
 import { Layout } from 'ui/components/shared';
-import { HomeView, SettingType, VideosSeniority } from 'types';
+import { HomeView, QueryTimeout, SettingType, VideosSeniority } from 'types';
 import { ControlledField, CustomField } from './Field';
 import { useAppDispatch, useAppSelector } from 'store';
 import { selectSettings } from 'store/selectors/settings';
@@ -104,6 +104,36 @@ export function Settings(props: SettingsProps) {
           ]}
           type={SettingType.List}
         />
+        <ControlledField
+          label="Queries timeout"
+          value={settings.queryTimeout}
+          onChange={(queryTimeout: QueryTimeout) => {
+            dispatch(setSettings({ queryTimeout }));
+          }}
+          options={[
+            {
+              label: '10 seconds',
+              value: QueryTimeout.TenSeconds,
+            },
+            {
+              label: '15 seconds',
+              value: QueryTimeout.FifteenSeconds,
+            },
+            {
+              label: '20 seconds',
+              value: QueryTimeout.TwentySeconds,
+            },
+            {
+              label: '30 seconds',
+              value: QueryTimeout.ThirtySeconds,
+            },
+            {
+              label: '1 minute',
+              value: QueryTimeout.OneMinute,
+            },
+          ]}
+          type={SettingType.List}
+        />
         <ControlledField
           label="Dark mode"
           value={settings.darkMode}