Update to use dropdown

app/components/Comments/CommentView.css

@@ -1,16 +1,9 @@
 .headerContainer {
-  margin-bottom: 0.25rem;
+  margin-bottom: var(--spacing-sm);
 }
 
-.sortIcon {
-  flex-direction: column;
-}
-
-.iconWrapper {
-  margin-left: 0.25rem;
-}
-
-.sortList {
-  margin-left: 0.5rem;
-  min-width: 10rem;
+.dropdownElement {
+  padding: var(--spacing-sm);
+  cursor: pointer;
+  width: var(--spacing-ss);
 }

app/components/Comments/CommentView.tsx

@@ -1,15 +1,10 @@
-import {
-  FilterSection,
-  Flex,
-  Icon,
-  LoadingIndicator,
-} from '@webkom/lego-bricks';
+import { 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 Dropdown from 'app/components/Dropdown';
 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';
@@ -36,27 +31,16 @@ const orderingOptions: Array<Option> = [
     value: 'createdAtInv',
   },
   {
-    label: 'Likes',
+    label: 'Reaksjoner',
     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>;
 
@@ -68,6 +52,7 @@ const CommentView = (props: Props) => {
     style,
     displayTitle = true,
     contentAuthors,
+    newOnTop,
   } = props;
   const commentFormProps = {
     contentTarget,
@@ -84,18 +69,22 @@ const CommentView = (props: Props) => {
       } 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 (
+          b.reactionsGrouped.reduce(
+            (acc, reaction) => acc + reaction.count,
+            0,
+          ) -
+          a.reactionsGrouped.reduce((acc, reaction) => acc + reaction.count, 0)
+        );
       }
       return 0;
     });
 
-    setSortedComments(sorted);
+    if (newOnTop) {
+      setSortedComments(sorted.toReversed());
+    } else {
+      setSortedComments(sorted);
+    }
   }, [ordering, comments]);
 
   return (
@@ -107,32 +96,35 @@ const CommentView = (props: Props) => {
         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);
+
+        <Dropdown
+          show={displaySorting}
+          toggle={() => setDisplaySorting(!displaySorting)}
+          contentClassName={styles.dropdownElement}
+          triggerComponent={
+            <Icon
+              size={20}
+              className={styles.sortIcon}
+              iconNode={<ListFilter />}
+            />
+          }
+        >
+          <Dropdown.List>
+            {orderingOptions.map((o: Option) => (
+              <>
+                <Dropdown.ListItem
+                  key={o.value}
+                  onClick={() => {
+                    setOrdering(o);
                   }}
-                  isClearable={false}
-                  options={orderingOptions}
-                />
-              </FilterSection>
-            </div>
-          )}
-        </Flex>
+                >
+                  {o.label}
+                </Dropdown.ListItem>
+                <Dropdown.Divider />
+              </>
+            ))}
+          </Dropdown.List>
+        </Dropdown>
       </Flex>
 
       <Flex column gap="var(--spacing-sm)">
@@ -141,7 +133,7 @@ const CommentView = (props: Props) => {
         <LoadingIndicator loading={!sortedComments}>
           {sortedComments && (
             <CommentTree
-              comments={tree}
+              comments={newOnTop ? tree.reverse() : tree}
               commentFormProps={commentFormProps}
               contentTarget={contentTarget}
               contentAuthors={contentAuthors}