feed-comments-order-fix

src/components/Article/CommentDate/CommentDate.module.scss

@@ -2,7 +2,8 @@
   @include font-size(1.2rem);
 
   color: var(--secondary-color);
-  //align-self: center;
+
+  // align-self: center;
   display: flex;
   align-items: flex-start;
   justify-content: flex-start;

src/components/Article/CommentsTree.tsx

@@ -1,15 +1,15 @@
-import {clsx} from 'clsx'
-import {createMemo, createSignal, For, lazy, onMount, Show} from 'solid-js'
+import { clsx } from 'clsx'
+import { For, Show, createMemo, createSignal, lazy, onMount } from 'solid-js'
 
-import {useLocalize} from '../../context/localize'
-import {useReactions} from '../../context/reactions'
-import {useSession} from '../../context/session'
-import {Author, Reaction, ReactionKind, ReactionSort} from '../../graphql/schema/core.gen'
-import {byCreated, byStat} from '../../utils/sortby'
-import {Button} from '../_shared/Button'
-import {ShowIfAuthenticated} from '../_shared/ShowIfAuthenticated'
+import { useLocalize } from '../../context/localize'
+import { useReactions } from '../../context/reactions'
+import { useSession } from '../../context/session'
+import { Author, Reaction, ReactionKind, ReactionSort } from '../../graphql/schema/core.gen'
+import { byCreated, byStat } from '../../utils/sortby'
+import { Button } from '../_shared/Button'
+import { ShowIfAuthenticated } from '../_shared/ShowIfAuthenticated'
 
-import {Comment} from './Comment'
+import { Comment } from './Comment'
 
 import styles from './Article.module.scss'
 
@@ -95,11 +95,7 @@ export const CommentsTree = (props: Props) => {
           <ul class={clsx(styles.commentsViewSwitcher, 'view-switcher')}>
             <Show when={newReactions().length > 0}>
               <li classList={{ 'view-switcher__item--selected': onlyNew() }}>
-                <Button
-                  variant="light"
-                  value={t('New only')}
-                  onClick={() => setOnlyNew(!onlyNew())}
-                />
+                <Button variant="light" value={t('New only')} onClick={() => setOnlyNew(!onlyNew())} />
               </li>
             </Show>
             <li classList={{ 'view-switcher__item--selected': commentsOrder() === ReactionSort.Newest }}>

src/components/Views/Author/Author.tsx

@@ -23,9 +23,9 @@ import { Row2 } from '../../Feed/Row2'
 import { Row3 } from '../../Feed/Row3'
 import { Loading } from '../../_shared/Loading'
 
+import { byCreated } from '../../../utils/sortby'
 import stylesArticle from '../../Article/Article.module.scss'
 import styles from './Author.module.scss'
-import {byCreated} from "../../../utils/sortby";
 
 type Props = {
   shouts: Shout[]

src/components/Views/Feed/Feed.tsx

@@ -14,6 +14,7 @@ import { resetSortedArticles, useArticlesStore } from '../../../stores/zine/arti
 import { useTopAuthorsStore } from '../../../stores/zine/topAuthors'
 import { useTopicsStore } from '../../../stores/zine/topics'
 import { getImageUrl } from '../../../utils/getImageUrl'
+import { byCreated } from '../../../utils/sortby'
 import { CommentDate } from '../../Article/CommentDate'
 import { getShareUrl } from '../../Article/SharePopup'
 import { AuthorBadge } from '../../Author/AuthorBadge'
@@ -48,23 +49,11 @@ type VisibilityItem = {
 }
 
 type FeedSearchParams = {
-  by: 'publish_date' | 'likes_stat' | 'rating' | 'last_comment'
+  by: 'publish_date' | 'likes' | 'comments'
   period: FeedPeriod
   visibility: VisibilityMode
 }
 
-const getOrderBy = (by: FeedSearchParams['by']) => {
-  if (by === 'likes_stat' || by === 'rating') {
-    return 'likes_stat'
-  }
-
-  if (by === 'last_comment') {
-    return 'last_comment'
-  }
-
-  return ''
-}
-
 const getFromDate = (period: FeedPeriod): number => {
   const now = new Date()
   let d: Date = now
@@ -146,7 +135,7 @@ export const FeedView = (props: Props) => {
 
   const loadTopComments = async () => {
     const comments = await loadReactionsBy({ by: { comment: true }, limit: 50 })
-    setTopComments(comments)
+    setTopComments(comments.sort(byCreated).reverse())
   }
 
   onMount(() => {
@@ -178,9 +167,8 @@ export const FeedView = (props: Props) => {
       offset: sortedArticles().length,
     }
 
-    const orderBy = getOrderBy(searchParams().by)
-    if (orderBy) {
-      options.order_by = orderBy
+    if (searchParams()?.by) {
+      options.order_by = searchParams().by
     }
 
     const visibilityMode = searchParams().visibility
@@ -222,7 +210,7 @@ export const FeedView = (props: Props) => {
   const ogTitle = t('Feed')
 
   const [shareData, setShareData] = createSignal<Shout | undefined>()
-  const handleShare = (shared) => {
+  const handleShare = (shared: Shout | undefined) => {
     showModal('share')
     setShareData(shared)
   }
@@ -260,19 +248,19 @@ export const FeedView = (props: Props) => {
               {/*</li>*/}
               <li
                 class={clsx({
-                  'view-switcher__item--selected': searchParams().by === 'rating',
+                  'view-switcher__item--selected': searchParams().by === 'likes',
                 })}
               >
-                <span class="link" onClick={() => changeSearchParams({ by: 'rating' })}>
+                <span class="link" onClick={() => changeSearchParams({ by: 'likes' })}>
                   {t('Top rated')}
                 </span>
               </li>
               <li
                 class={clsx({
-                  'view-switcher__item--selected': searchParams().by === 'last_comment',
+                  'view-switcher__item--selected': searchParams().by === 'comments',
                 })}
               >
-                <span class="link" onClick={() => changeSearchParams({ by: 'last_comment' })}>
+                <span class="link" onClick={() => changeSearchParams({ by: 'comments' })}>
                   {t('Most commented')}
                 </span>
               </li>