refactor: use a common ViewSorting component

AXeL-dev · Sep 19, 2022 · 6faeb8e · 6faeb8e
1 parent 28dced7
commit 6faeb8e
Show file tree

Hide file tree

Showing 6 changed files with 17 additions and 183 deletions.
diff --git a/src/ui/components/pages/Home/TabActions/AllViewActions/index.tsx b/src/ui/components/pages/Home/TabActions/AllViewActions/index.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import { Box } from '@mui/material';
-import AllViewSorting from './AllViewSorting';
+import { HomeView } from 'types';
+import ViewSorting from '../ViewSorting';
 
 interface AllViewActionsProps {}
 
@@ -13,7 +14,7 @@ function AllViewActions(props: AllViewActionsProps) {
         gap: 2,
       }}
     >
-      <AllViewSorting />
+      <ViewSorting view={HomeView.All} />
     </Box>
   );
 }

diff --git a/src/ui/components/pages/Home/TabActions/RecentViewActions/RecentViewSorting.tsx b/src/ui/components/pages/Home/TabActions/RecentViewActions/RecentViewSorting.tsx
diff --git a/src/ui/components/pages/Home/TabActions/RecentViewActions/index.tsx b/src/ui/components/pages/Home/TabActions/RecentViewActions/index.tsx
@@ -3,7 +3,8 @@ import { Box } from '@mui/material';
 import RecentViewFilters from './RecentViewFilters';
 import RecentVideosSeniority from './RecentVideosSeniority';
 import RecentViewOptions from './RecentViewOptions';
-import RecentViewSorting from './RecentViewSorting';
+import ViewSorting from '../ViewSorting';
+import { HomeView } from 'types';
 
 interface RecentViewActionsProps {
   videosCount: number;
@@ -20,7 +21,7 @@ function RecentViewActions(props: RecentViewActionsProps) {
         gap: 2,
       }}
     >
-      <RecentViewSorting />
+      <ViewSorting view={HomeView.Recent} />
       <RecentViewFilters />
       <RecentVideosSeniority />
       {videosCount > 0 ? <RecentViewOptions /> : null}

diff --git a/...Actions/AllViewActions/AllViewSorting.tsx → ...nts/pages/Home/TabActions/ViewSorting.tsx b/...Actions/AllViewActions/AllViewSorting.tsx → ...nts/pages/Home/TabActions/ViewSorting.tsx
@@ -17,10 +17,13 @@ const options: {
   },
 ];
 
-interface AllViewSortingProps {}
+interface DefaultViewSortingProps {
+  view: HomeView;
+}
 
-function AllViewSorting(props: AllViewSortingProps) {
-  const sorting = useAppSelector(selectViewSorting(HomeView.All));
+function DefaultViewSorting(props: DefaultViewSortingProps) {
+  const { view } = props;
+  const sorting = useAppSelector(selectViewSorting(view));
   const dispatch = useAppDispatch();
   const [anchorEl, setAnchorEl] = useState<Nullable<HTMLElement>>(null);
   const open = Boolean(anchorEl);
@@ -36,7 +39,7 @@ function AllViewSorting(props: AllViewSortingProps) {
   const handleSortToggle = (key: keyof ViewSorting) => {
     dispatch(
       setViewSorting({
-        view: HomeView.All,
+        view,
         sorting: {
           [key]: !sorting[key],
         },
@@ -83,4 +86,4 @@ function AllViewSorting(props: AllViewSortingProps) {
   );
 }
 
-export default AllViewSorting;
+export default DefaultViewSorting;
diff --git a/src/ui/components/pages/Home/TabActions/WatchLaterViewActions/WatchLaterViewSorting.tsx b/src/ui/components/pages/Home/TabActions/WatchLaterViewActions/WatchLaterViewSorting.tsx
diff --git a/src/ui/components/pages/Home/TabActions/WatchLaterViewActions/index.tsx b/src/ui/components/pages/Home/TabActions/WatchLaterViewActions/index.tsx
@@ -2,7 +2,8 @@ import React from 'react';
 import { Box } from '@mui/material';
 import WatchLaterViewFilters from './WatchLaterViewFilters';
 import WatchLaterViewOptions from './WatchLaterViewOptions';
-import WatchLaterViewSorting from './WatchLaterViewSorting';
+import ViewSorting from '../ViewSorting';
+import { HomeView } from 'types';
 
 interface WatchLaterViewActionsProps {
   videosCount: number;
@@ -19,7 +20,7 @@ function WatchLaterViewActions(props: WatchLaterViewActionsProps) {
         gap: 2,
       }}
     >
-      <WatchLaterViewSorting />
+      <ViewSorting view={HomeView.WatchLater} />
       <WatchLaterViewFilters />
       {videosCount > 0 ? (
         <WatchLaterViewOptions videosCount={videosCount} />