Channel view videos sort fix (#1140)

* Sorting videos fix

* Additional fix

src/api/client/cache.ts

@@ -8,14 +8,13 @@ import {
   AllChannelFieldsFragment,
   AssetAvailability,
   GetVideosConnectionQueryVariables,
-  GetVideosQueryVariables,
   Query,
   VideoConnection,
   VideoFieldsFragment,
   VideoOrderByInput,
 } from '../queries'
 
-const getVideoKeyArgs = (args: Record<string, GetVideosQueryVariables['where']> | null) => {
+const getVideoKeyArgs = (args: GetVideosConnectionQueryVariables | null) => {
   // make sure queries asking for a specific category are separated in cache
   const onlyCount = args?.first === 0
   const channelId = args?.where?.channelId_eq || ''
@@ -24,13 +23,14 @@ const getVideoKeyArgs = (args: Record<string, GetVideosQueryVariables['where']>
   const isPublic = args?.where?.isPublic_eq ?? ''
   const channelIdIn = args?.where?.channelId_in ? JSON.stringify(args.where.channelId_in) : ''
   const createdAtGte = args?.where?.createdAt_gte ? JSON.stringify(args.where.createdAt_gte) : ''
+  const sorting = args?.orderBy?.[0] ? args.orderBy[0] : ''
 
   // only for counting videos in HomeView
   if (args?.where?.channelId_in && !args?.first) {
     return `${createdAtGte}:${channelIdIn}`
   }
 
-  return `${onlyCount}:${channelId}:${categoryId}:${channelIdIn}:${createdAtGte}:${isPublic}:${idEq}`
+  return `${onlyCount}:${channelId}:${categoryId}:${channelIdIn}:${createdAtGte}:${isPublic}:${idEq}:${sorting}`
 }
 
 const createDateHandler = () => ({
@@ -97,13 +97,10 @@ const queryCacheFields: CachePolicyFields<keyof Query> = {
       const filteredEdges =
         existing?.edges.filter((edge) => readField('isPublic', edge.node) === isPublic || isPublic === undefined) ?? []
 
-      const sortingASC = args?.orderBy === VideoOrderByInput.CreatedAtAsc
-      const preSortedDESC = (filteredEdges || [])
-        .slice()
-        .sort(
-          (a, b) =>
-            (readField('createdAt', b.node) as Date).getTime() - (readField('createdAt', a.node) as Date).getTime()
-        )
+      const sortingASC = args?.orderBy?.[0] === VideoOrderByInput.CreatedAtAsc
+      const preSortedDESC = (filteredEdges || []).slice().sort((a, b) => {
+        return (readField('createdAt', b.node) as Date).getTime() - (readField('createdAt', a.node) as Date).getTime()
+      })
       const sortedEdges = sortingASC ? preSortedDESC.reverse() : preSortedDESC
 
       return (

src/views/studio/MyVideosView/MyVideosView.tsx

@@ -41,7 +41,7 @@ export const MyVideosView = () => {
   const { setSheetState, videoTabs, addVideoTab, setSelectedVideoTabIdx, removeVideoTab } = useEditVideoSheet()
   const { displaySnackbar, updateSnackbar } = useSnackbar()
   const [videosPerRow, setVideosPerRow] = useState(INITIAL_VIDEOS_PER_ROW)
-  const [sortVideosBy, setSortVideosBy] = useState<VideoOrderByInput | undefined>(VideoOrderByInput.CreatedAtDesc)
+  const [sortVideosBy, setSortVideosBy] = useState<VideoOrderByInput>(VideoOrderByInput.CreatedAtDesc)
   const [tabIdToRemoveViaSnackbar, setTabIdToRemoveViaSnackbar] = useState<string>()
   const videosPerPage = ROWS_AMOUNT * videosPerRow
 

src/views/viewer/ChannelView/ChannelView.tsx

@@ -75,7 +75,7 @@ export const ChannelView: React.FC = () => {
   const updateChannelFollowing = usePersonalDataStore((state) => state.actions.updateChannelFollowing)
   const [isFollowing, setFollowing] = useState<boolean>()
   const currentTabName = searchParams.get('tab')
-  const [sortVideosBy, setSortVideosBy] = useState<VideoOrderByInput | undefined>(VideoOrderByInput.CreatedAtDesc)
+  const [sortVideosBy, setSortVideosBy] = useState<VideoOrderByInput>(VideoOrderByInput.CreatedAtDesc)
   const [videosPerRow, setVideosPerRow] = useState(INITIAL_VIDEOS_PER_ROW)
   const { url: coverPhotoUrl } = useAsset({
     entity: channel,
@@ -175,7 +175,8 @@ export const ChannelView: React.FC = () => {
   const handleSorting = (value?: VideoOrderByInput | null) => {
     if (value) {
       setSortVideosBy(value)
-      refetch({ orderBy: value })
+      setCurrentPage(0)
+      refetch({ ...variables, orderBy: value })
     }
   }
   const handleOnResizeGrid = (sizes: number[]) => setVideosPerRow(sizes.length)