From e00bf374d44ae197464bc7ba2a838690ee77865f Mon Sep 17 00:00:00 2001
From: Jonas de Luna Skulberg <jonasdls@gmail.com>
Date: Sat, 7 Sep 2024 16:49:27 +0200
Subject: [PATCH] Add comment sorting

---
 app/components/Comments/CommentView.css |  16 ++++
 app/components/Comments/CommentView.tsx | 114 ++++++++++++++++++++++--
 2 files changed, 122 insertions(+), 8 deletions(-)
 create mode 100644 app/components/Comments/CommentView.css

diff --git a/app/components/Comments/CommentView.css b/app/components/Comments/CommentView.css
new file mode 100644
index 0000000000..535f029b28
--- /dev/null
+++ b/app/components/Comments/CommentView.css
@@ -0,0 +1,16 @@
+.headerContainer {
+  margin-bottom: 0.25rem;
+}
+
+.sortIcon {
+  flex-direction: column;
+}
+
+.iconWrapper {
+  margin-left: 0.25rem;
+}
+
+.sortList {
+  margin-left: 0.5rem;
+  min-width: 10rem;
+}
diff --git a/app/components/Comments/CommentView.tsx b/app/components/Comments/CommentView.tsx
index 3873401e0d..be40613005 100644
--- a/app/components/Comments/CommentView.tsx
+++ b/app/components/Comments/CommentView.tsx
@@ -1,11 +1,20 @@
-import { Flex, LoadingIndicator } from '@webkom/lego-bricks';
+import {
+  FilterSection,
+  Flex,
+  Icon,
+  LoadingIndicator,
+} from '@webkom/lego-bricks';
+import { ListFilter } from 'lucide-react';
+import moment from 'moment';
+import { useEffect, useState, type CSSProperties } from 'react';
 import CommentForm from 'app/components/CommentForm';
 import { generateTreeStructure } from 'app/utils';
+import { SelectInput } from '../Form';
 import CommentTree from './CommentTree';
+import styles from './CommentView.css';
 import type Comment from 'app/store/models/Comment';
 import type { ContentAuthors } from 'app/store/models/Comment';
 import type { ContentTarget } from 'app/store/utils/contentTarget';
-import type { CSSProperties } from 'react';
 
 type Props = {
   comments: Comment[];
@@ -17,6 +26,37 @@ type Props = {
   contentAuthors?: ContentAuthors;
 };
 
+const orderingOptions: Array<Option> = [
+  {
+    label: 'Nyeste',
+    value: 'createdAt',
+  },
+  {
+    label: 'Eldste',
+    value: 'createdAtInv',
+  },
+  {
+    label: 'Likes',
+    value: 'reactionsGrouped',
+  },
+  {
+    label: 'Kontroversielle',
+    value: 'reactionsControversial',
+  },
+];
+
+type Option = {
+  label: string;
+  value: string;
+};
+
+const getReactionScore = (comment: Comment, emojiString: string): number => {
+  const count =
+    comment.reactionsGrouped.find((reaction) => reaction.emoji === emojiString)
+      ?.count || 0;
+  return count;
+};
+
 const Title = ({ displayTitle }: { displayTitle: boolean }) =>
   displayTitle && <h3>Kommentarer</h3>;
 
@@ -27,23 +67,81 @@ const CommentView = (props: Props) => {
     contentTarget,
     style,
     displayTitle = true,
-    newOnTop = false,
     contentAuthors,
   } = props;
   const commentFormProps = {
     contentTarget,
   };
-  const tree = generateTreeStructure(comments);
+  const [ordering, setOrdering] = useState<Option>(orderingOptions[0]);
+  const [sortedComments, setSortedComments] = useState<Comment[]>(comments);
+  const [displaySorting, setDisplaySorting] = useState(false);
+  const tree = generateTreeStructure(sortedComments);
+
+  useEffect(() => {
+    const sorted = [...comments].sort((a: Comment, b: Comment) => {
+      if (ordering.value === 'createdAt') {
+        return moment(b.createdAt).valueOf() - moment(a.createdAt).valueOf();
+      } else if (ordering.value === 'createdAtInv') {
+        return moment(a.createdAt).valueOf() - moment(b.createdAt).valueOf();
+      } else if (ordering.value === 'reactionsGrouped') {
+        const scoreA =
+          getReactionScore(a, ':+1:') - getReactionScore(a, ':-1:');
+        const scoreB =
+          getReactionScore(b, ':+1:') - getReactionScore(b, ':-1:');
+        return scoreB - scoreA;
+      } else if (ordering.value === 'reactionsControversial') {
+        return getReactionScore(b, ':-1:') - getReactionScore(a, ':-1:');
+      }
+      return 0;
+    });
+
+    setSortedComments(sorted);
+  }, [ordering, comments]);
+
   return (
     <div style={style}>
-      <Title displayTitle={displayTitle} />
+      <Flex
+        flex-row
+        justifyContent="flex-start"
+        alignItems="center"
+        className={styles.headerContainer}
+      >
+        <Title displayTitle={displayTitle} />
+        <Flex flex-row alignItems="center" className={styles.iconWrapper}>
+          <Icon
+            name="arrow-down-wide-narrow"
+            size={20}
+            onClick={() => {
+              setDisplaySorting(!displaySorting);
+            }}
+            className={styles.sortIcon}
+            iconNode={<ListFilter />}
+          />
+          {displaySorting && (
+            <div className={styles.sortList}>
+              <FilterSection title="">
+                <SelectInput
+                  name="sorting_selector"
+                  value={ordering}
+                  onChange={(selectedOption: Option) => {
+                    setOrdering(selectedOption);
+                  }}
+                  isClearable={false}
+                  options={orderingOptions}
+                />
+              </FilterSection>
+            </div>
+          )}
+        </Flex>
+      </Flex>
+
       <Flex column gap="var(--spacing-sm)">
         {!formDisabled && <CommentForm {...commentFormProps} />}
 
-        <LoadingIndicator loading={!comments}>
-          {comments && (
+        <LoadingIndicator loading={!sortedComments}>
+          {sortedComments && (
             <CommentTree
-              comments={newOnTop ? tree.reverse() : tree}
+              comments={tree}
               commentFormProps={commentFormProps}
               contentTarget={contentTarget}
               contentAuthors={contentAuthors}