Add sort by filter to post list (#271)

app/javascript/components/Board/BoardP.tsx

@@ -11,6 +11,8 @@ import ITenantSetting from '../../interfaces/ITenantSetting';
 
 import { PostsState } from '../../reducers/postsReducer';
 import { PostStatusesState } from '../../reducers/postStatusesReducer';
+import SortByFilter from './SortByFilter';
+import { SortByFilterValues } from '../../actions/changeFilters';
 
 interface Props {
   board: IBoard;
@@ -26,17 +28,19 @@ interface Props {
     page?: number,
     searchQuery?: string,
     postStatusIds?: Array<number>,
+    sortBy?: SortByFilterValues,
   ): void;
   requestPostStatuses(): void;
   handleSearchFilterChange(searchQuery: string): void;
   handlePostStatusFilterChange(postStatusId: number): void;
+  handleSortByFilterChange(sortBy: SortByFilterValues): void;
 }
 
 class BoardP extends React.Component<Props> {
   searchFilterTimeoutId: ReturnType<typeof setTimeout>;
 
   componentDidMount() {
-    this.props.requestPosts(this.props.board.id);
+    this.props.requestPosts(this.props.board.id, 1, '', null, this.props.posts.filters.sortBy);
     this.props.requestPostStatuses();
   }
 
@@ -47,6 +51,9 @@ class BoardP extends React.Component<Props> {
     const { postStatusIds } = this.props.posts.filters;
     const prevPostStatusIds = prevProps.posts.filters.postStatusIds;
 
+    const { sortBy } = this.props.posts.filters;
+    const prevSortBy = prevProps.posts.filters.sortBy;
+
     // search filter changed
     if (searchQuery !== prevSearchQuery) {
       if (this.searchFilterTimeoutId) clearInterval(this.searchFilterTimeoutId);
@@ -60,6 +67,11 @@ class BoardP extends React.Component<Props> {
     if (postStatusIds.length !== prevPostStatusIds.length) {
       this.props.requestPosts(this.props.board.id, 1, searchQuery, postStatusIds);
     }
+
+    // sort by filter changed
+    if (sortBy !== prevSortBy) {
+      this.props.requestPosts(this.props.board.id, 1, searchQuery, postStatusIds, sortBy);
+    }
   }
 
   render() {
@@ -75,6 +87,7 @@ class BoardP extends React.Component<Props> {
       requestPosts,
       handleSearchFilterChange,
       handlePostStatusFilterChange,
+      handleSortByFilterChange,
     } = this.props;
     const { filters } = posts;
 
@@ -90,6 +103,13 @@ class BoardP extends React.Component<Props> {
             searchQuery={filters.searchQuery}
             handleChange={handleSearchFilterChange}
           />
+          {
+            isPowerUser &&
+            <SortByFilter
+              sortBy={filters.sortBy}
+              handleChange={sortBy => handleSortByFilterChange(sortBy)}
+            />
+          }
           <PostStatusFilter
             postStatuses={postStatuses.items}
             areLoading={postStatuses.areLoading}

app/javascript/components/Board/PostListItem.tsx

@@ -50,7 +50,7 @@ const PostListItem = ({
     <div className="postContainer">
       <span className="postTitle">{title}</span>
         <ReactMarkdown className="descriptionText" allowedTypes={['text']} unwrapDisallowed>
-          {description?.slice(0, 120)}
+          {description}
         </ReactMarkdown>
 
       <div className="postDetails">

app/javascript/components/Board/SortByFilter.tsx

@@ -0,0 +1,28 @@
+import * as React from 'react';
+import I18n from 'i18n-js';
+
+import SidebarBox from '../common/SidebarBox';
+import { SortByFilterValues } from '../../actions/changeFilters';
+
+interface Props {
+  sortBy: SortByFilterValues;
+  handleChange(newSortBy: SortByFilterValues): void;
+}
+
+const SortByFilter = ({ sortBy, handleChange }: Props) => (
+  <SidebarBox title={I18n.t('board.sort_by_box.title')}>
+    <select
+      value={sortBy}
+      onChange={e => handleChange(e.target.value as SortByFilterValues)}
+      id="sortBySelect"
+      className="form-control"
+    >
+      <option value="trending">{I18n.t('board.sort_by_box.trending')}</option>
+      <option value="newest">{I18n.t('board.sort_by_box.newest')}</option>
+      <option value="most_voted">{I18n.t('board.sort_by_box.most_voted')}</option>
+      <option value="oldest">{I18n.t('board.sort_by_box.oldest')}</option>
+    </select>
+  </SidebarBox>
+);
+
+export default SortByFilter;

app/javascript/components/common/Sidebar.tsx

@@ -1,13 +1,41 @@
 import * as React from 'react';
+import { useEffect, useState } from 'react';
+import StickyBox from 'react-sticky-box';
+
+// Sidebar uses react-sticky-box to handle sidebar higher than screen height
+// However, in mobile view we fallback to a normal div with class 'sidebar' (we don't want the sticky behaviour on mobile)
+// Note: using react-sticky-box v1.0.2 as >v2.0 returns jsx-runtime error (https://github.com/codecks-io/react-sticky-box/issues/87)
 
 interface Props {
   children: React.ReactNode;
 }
 
-const Sidebar = ({ children }: Props) => (
-  <div className="sidebar">
-    {children}
-  </div>
-);
+const BOOTSTRAP_BREAKPOINT_SM = 768;
+
+const Sidebar = ({ children }: Props) => {
+  const [isMobile, setIsMobile] = useState(window.innerWidth < BOOTSTRAP_BREAKPOINT_SM);
+
+  useEffect(() => {
+    const handleResize = () => {
+      setIsMobile(window.innerWidth < BOOTSTRAP_BREAKPOINT_SM);
+    };
+
+    window.addEventListener('resize', handleResize);
+    return () => {
+      window.removeEventListener('resize', handleResize);
+    };
+  }, []);
+
+  return (
+    isMobile ? 
+      <div className="sidebar">
+        {children}
+      </div>
+    :
+      <StickyBox offsetTop={79} offsetBottom={16} className="sidebar">
+        {children}
+      </StickyBox>
+  );
+};
 
 export default Sidebar;