Merge pull request #251 from rairprotocol/242-sort-functionality-on-h…

…ome-page-is-not-working Add sorting of items/videos to the Main Page
rairprotocol · Oct 10, 2024 · cc03a4a · cc03a4a
2 parents 6aca13b + a1b7d07
commit cc03a4a
Show file tree

Hide file tree

Showing 4 changed files with 41 additions and 7 deletions.
diff --git a/rair-front/src/components/MockUpPage/NftList/NftList.tsx b/rair-front/src/components/MockUpPage/NftList/NftList.tsx
@@ -28,12 +28,28 @@ const NftListComponent: FC<INftListComponent> = ({ titleSearch, sortItem }) => {
     return <LoadingComponent />;
   }
 
-  const filteredData = catalog.filter((item) => {
-    return (
-      item.product.cover !== 'none' &&
-      item.product.name.toLowerCase().includes(titleSearch.toLowerCase())
-    );
-  });
+  const filteredData = catalog
+    .filter((item) => {
+      return (
+        item.product.cover !== 'none' &&
+        item.product.name.toLowerCase().includes(titleSearch.toLowerCase())
+      );
+    })
+    .sort((a, b) => {
+      if (sortItem === 'up') {
+        if (a.product.name < b.product.name) {
+          return 1;
+        }
+      }
+
+      if (sortItem === 'down') {
+        if (a.product.name > b.product.name) {
+          return -1;
+        }
+      }
+
+      return 0;
+    });
 
   if (catalogStatus !== dataStatuses.Complete) {
     return <LoadingComponent />;

diff --git a/rair-front/src/components/MockUpPage/SearchPanel.tsx b/rair-front/src/components/MockUpPage/SearchPanel.tsx
@@ -361,6 +361,7 @@ const SearchPanel: FC<ISearchPanel> = ({ tabIndex, setTabIndex }) => {
             })}
           </div>
           <VideoList
+            sortItem={sortItem}
             titleSearch={titleSearch}
             handleVideoIsUnlocked={handleVideoIsUnlocked}
           />

diff --git a/rair-front/src/components/video/video.types.ts b/rair-front/src/components/video/video.types.ts
@@ -1,5 +1,6 @@
 import { TTokenData } from '../../axios.responseTypes';
 import { CatalogVideoItem } from '../../types/commonTypes';
+import { TSortChoice } from '../ResalePage/listOffers.types';
 
 import { ContractType } from './../adminViews/adminView.types';
 export interface IVideoPlayer {
@@ -23,6 +24,7 @@ export interface IVideoList {
   responseLabel?: string;
   endpoint?: string;
   handleVideoIsUnlocked?: () => void;
+  sortItem: TSortChoice | undefined;
 }
 
 export type MediaListResponseType = {

diff --git a/rair-front/src/components/video/videoList.tsx b/rair-front/src/components/video/videoList.tsx
@@ -14,7 +14,7 @@ import LoadingComponent from '../common/LoadingComponent';
 import HomePageFilterModal from '../GlobalModal/FilterModal/FilterModal';
 import GlobalModal from '../GlobalModal/GlobalModal';
 
-const VideoList: React.FC<IVideoList> = ({ titleSearch }) => {
+const VideoList: React.FC<IVideoList> = ({ titleSearch, sortItem }) => {
   const { videoListStatus, totalVideos, videos } = useAppSelector(
     (state) => state.videos
   );
@@ -50,6 +50,21 @@ const VideoList: React.FC<IVideoList> = ({ titleSearch }) => {
             .filter((video) =>
               video.title.toLowerCase().includes(titleSearch.toLowerCase())
             )
+            .sort((a, b) => {
+              if (sortItem === 'up') {
+                if (a.title < b.title) {
+                  return 1;
+                }
+              }
+
+              if (sortItem === 'down') {
+                if (a.title > b.title) {
+                  return -1;
+                }
+              }
+
+              return 0;
+            })
             .map((video, index) => {
               return <VideoItem key={index} item={video} />;
             })