feat: move recent videos seniority setting to recent view actions

AXeL-dev · Aug 16, 2022 · 55c0d9f · 55c0d9f
1 parent 01b55f4
commit 55c0d9f
Show file tree

Hide file tree

Showing 8 changed files with 134 additions and 43 deletions.
diff --git a/src/store/reducers/videos.ts b/src/store/reducers/videos.ts
@@ -2,7 +2,7 @@ import { createSlice, PayloadAction } from '@reduxjs/toolkit';
 import { elapsedDays } from 'helpers/utils';
 import { isWebExtension } from 'helpers/webext';
 import { VideoCache, Video, VideoFlags, VideoFlag } from 'types';
-import { defaults as channelCheckerDefaults } from 'ui/components/webext/Background/ChannelChecker';
+import { config as channelCheckerConfig } from 'ui/components/webext/Background/ChannelChecker';
 
 type AddVideoPayload = Video | Omit<VideoCache, 'flags'>;
 type RemoveVideoPayload = Video | Pick<VideoCache, 'id'>;
@@ -180,7 +180,7 @@ export const videosSlice = createSlice({
           flags.viewed ||
           flags.toWatchLater ||
           ((flags.notified || flags.recent) &&
-            elapsedDays(publishedAt) <= channelCheckerDefaults.videosSeniority)
+            elapsedDays(publishedAt) <= channelCheckerConfig.videosSeniority)
       );
     },
   },

diff --git a/src/store/selectors/settings.ts b/src/store/selectors/settings.ts
@@ -24,3 +24,8 @@ export const selectHomeDisplayOptions = createSelector(
   selectSettings,
   (settings) => settings.homeDisplayOptions
 );
+
+export const selectRecentVideosSeniority = createSelector(
+  selectSettings,
+  (settings) => settings.recentVideosSeniority
+);
diff --git a/src/ui/components/pages/Home/TabActions/RecentViewActions/RecentVideosSeniority.tsx b/src/ui/components/pages/Home/TabActions/RecentViewActions/RecentVideosSeniority.tsx
@@ -0,0 +1,93 @@
+import React, { useState } from 'react';
+import { IconButton } from '@mui/material';
+import { StyledMenu, CheckableMenuItem } from 'ui/components/shared';
+import { useAppDispatch, useAppSelector } from 'store';
+import HistoryIcon from '@mui/icons-material/History';
+import { selectRecentVideosSeniority } from 'store/selectors/settings';
+import { setSettings } from 'store/reducers/settings';
+import { Nullable, VideosSeniority } from 'types';
+
+interface RecentVideosSeniorityProps {}
+
+const options = [
+  {
+    label: '1 day',
+    value: VideosSeniority.OneDay,
+  },
+  {
+    label: '3 days',
+    value: VideosSeniority.ThreeDays,
+  },
+  {
+    label: '7 days',
+    value: VideosSeniority.SevenDays,
+  },
+  {
+    label: '2 weeks',
+    value: VideosSeniority.TwoWeeks,
+  },
+  {
+    label: '1 month',
+    value: VideosSeniority.OneMonth,
+  },
+];
+
+function RecentVideosSeniority(props: RecentVideosSeniorityProps) {
+  const seniority = useAppSelector(selectRecentVideosSeniority);
+  const dispatch = useAppDispatch();
+  const [anchorEl, setAnchorEl] = useState<Nullable<HTMLElement>>(null);
+  const open = Boolean(anchorEl);
+
+  const handleClick = (event: React.MouseEvent<HTMLElement>) => {
+    setAnchorEl(event.currentTarget);
+  };
+
+  const handleClose = () => {
+    setAnchorEl(null);
+  };
+
+  const handleChange = (recentVideosSeniority: VideosSeniority) => {
+    dispatch(setSettings({ recentVideosSeniority }));
+  };
+
+  return (
+    <>
+      <IconButton
+        id="seniority-button"
+        aria-label="seniority"
+        aria-controls={open ? 'seniority-menu' : undefined}
+        aria-expanded={open ? 'true' : undefined}
+        aria-haspopup="true"
+        onClick={handleClick}
+      >
+        <HistoryIcon />
+      </IconButton>
+      <StyledMenu
+        id="seniority-menu"
+        style={{
+          minWidth: 160,
+        }}
+        MenuListProps={{
+          'aria-labelledby': 'seniority-button',
+          dense: true,
+        }}
+        anchorEl={anchorEl}
+        open={open}
+        onClose={handleClose}
+        transformOrigin={{ horizontal: 'right', vertical: 'top' }}
+        anchorOrigin={{ horizontal: 'right', vertical: 'bottom' }}
+      >
+        {options.map(({ label, value }) => (
+          <CheckableMenuItem
+            checked={seniority === value}
+            onClick={() => handleChange(value)}
+          >
+            {label}
+          </CheckableMenuItem>
+        ))}
+      </StyledMenu>
+    </>
+  );
+}
+
+export default RecentVideosSeniority;
diff --git a/...ges/Home/TabActions/RecentViewActions.tsx → ...s/RecentViewActions/RecentViewFilters.tsx b/...ges/Home/TabActions/RecentViewActions.tsx → ...s/RecentViewActions/RecentViewFilters.tsx
@@ -7,9 +7,9 @@ import { selectViewFilters } from 'store/selectors/settings';
 import { setViewFilters } from 'store/reducers/settings';
 import { HomeView, Nullable } from 'types';
 
-interface RecentViewActionsProps {}
+interface RecentViewFiltersProps {}
 
-function RecentViewActions(props: RecentViewActionsProps) {
+function RecentViewFilters(props: RecentViewFiltersProps) {
   const filters = useAppSelector(selectViewFilters(HomeView.Recent));
   const dispatch = useAppDispatch();
   const [anchorEl, setAnchorEl] = useState<Nullable<HTMLElement>>(null);
@@ -103,4 +103,4 @@ function RecentViewActions(props: RecentViewActionsProps) {
   );
 }
 
-export default RecentViewActions;
+export default RecentViewFilters;
diff --git a/src/ui/components/pages/Home/TabActions/RecentViewActions/index.tsx b/src/ui/components/pages/Home/TabActions/RecentViewActions/index.tsx
@@ -0,0 +1,23 @@
+import React from 'react';
+import { Box } from '@mui/material';
+import RecentViewFilters from './RecentViewFilters';
+import RecentVideosSeniority from './RecentVideosSeniority';
+
+interface RecentViewActionsProps {}
+
+function RecentViewActions(props: RecentViewActionsProps) {
+  return (
+    <Box
+      sx={{
+        display: 'flex',
+        alignItems: 'center',
+        gap: 2,
+      }}
+    >
+      <RecentViewFilters />
+      <RecentVideosSeniority />
+    </Box>
+  );
+}
+
+export default RecentViewActions;
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, QueryTimeout, SettingType, VideosSeniority } from 'types';
+import { HomeView, QueryTimeout, SettingType } from 'types';
 import { ControlledField, CustomField } from './Field';
 import { useAppDispatch, useAppSelector } from 'store';
 import { selectSettings } from 'store/selectors/settings';
@@ -14,7 +14,7 @@ import {
   memorySizeOf,
   formatByteSize,
 } from 'helpers/utils';
-import { defaults as channelCheckerDefaults } from 'ui/components/webext/Background/ChannelChecker';
+import { config as channelCheckerConfig } from 'ui/components/webext/Background/ChannelChecker';
 import { selectVideos } from 'store/selectors/videos';
 import SavedVideosOptions from './SavedVideosOptions';
 
@@ -74,36 +74,6 @@ export function Settings(props: SettingsProps) {
           options={activeViews}
           type={SettingType.List}
         />
-        <ControlledField
-          label="Recent videos seniority"
-          value={settings.recentVideosSeniority}
-          onChange={(recentVideosSeniority: VideosSeniority) => {
-            dispatch(setSettings({ recentVideosSeniority }));
-          }}
-          options={[
-            {
-              label: '1 day',
-              value: VideosSeniority.OneDay,
-            },
-            {
-              label: '3 days',
-              value: VideosSeniority.ThreeDays,
-            },
-            {
-              label: '7 days',
-              value: VideosSeniority.SevenDays,
-            },
-            {
-              label: '2 weeks',
-              value: VideosSeniority.TwoWeeks,
-            },
-            {
-              label: '1 month',
-              value: VideosSeniority.OneMonth,
-            },
-          ]}
-          type={SettingType.List}
-        />
         <ControlledField
           label="Queries timeout"
           value={settings.queryTimeout}
@@ -154,7 +124,7 @@ export function Settings(props: SettingsProps) {
           <ControlledField
             label="Enable notifications"
             description={`Checking for new videos is performed every ${humanInterval(
-              channelCheckerDefaults.checkInterval,
+              channelCheckerConfig.checkInterval,
               'minute'
             )}${lastCheckTime ? ` (Last check: ${lastCheckTime})` : ''}`}
             value={settings.enableNotifications}

diff --git a/src/ui/components/shared/StyledMenu/index.tsx b/src/ui/components/shared/StyledMenu/index.tsx
@@ -16,11 +16,11 @@ export const StyledMenu = styled((props: MenuProps) => (
     }}
     {...props}
   />
-))(({ theme }) => ({
+))(({ theme, style }) => ({
   '& .MuiPaper-root': {
     borderRadius: 6,
     marginTop: theme.spacing(1),
-    minWidth: 180,
+    minWidth: style?.minWidth || 180,
     color:
       theme.palette.mode === 'light'
         ? 'rgb(55, 65, 81)'

diff --git a/src/ui/components/webext/Background/ChannelChecker.tsx b/src/ui/components/webext/Background/ChannelChecker.tsx
@@ -17,7 +17,7 @@ interface ChannelCheckerProps {
   onCheckEnd: (data: CheckEndData) => void;
 }
 
-export const defaults = {
+export const config = {
   checkInterval: 30, // minute(s)
   videosSeniority: 1, // day(s)
 };
@@ -26,8 +26,8 @@ export default function ChannelChecker(props: ChannelCheckerProps) {
   const { channel, onCheckEnd } = props;
   const [ready, setReady] = useState(false);
   const cachedVideos = useAppSelector(selectChannelVideos(channel));
-  const publishedAfter = getDateBefore(defaults.videosSeniority).toISOString();
-  const pollingInterval = defaults.checkInterval * 60000; // convert minutes to milliseconds
+  const publishedAfter = getDateBefore(config.videosSeniority).toISOString();
+  const pollingInterval = config.checkInterval * 60000; // convert minutes to milliseconds
   const { data, isFetching, refetch } = useGetChannelVideosQuery(
     {
       channel,