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}