Merge pull request #1162 from google/feature/sort-dropdown

Dashboard: Sort Dropdown for views
GoogleForCreators · Apr 14, 2020 · 7ddc322 · 7ddc322
2 parents 795ce38 + c973f89
commit 7ddc322
Show file tree

Hide file tree

Showing 10 changed files with 210 additions and 61 deletions.
diff --git a/assets/src/dashboard/app/api/apiProvider.js b/assets/src/dashboard/app/api/apiProvider.js
@@ -31,7 +31,11 @@ import apiFetch from '@wordpress/api-fetch';
  * Internal dependencies
  */
 import { useConfig } from '../config';
-import { STORY_STATUSES } from '../../constants';
+import {
+  STORY_STATUSES,
+  STORY_SORT_OPTIONS,
+  ORDER_BY_SORT,
+} from '../../constants';
 import getAllTemplates from '../../templates';
 
 export const ApiContext = createContext({ state: {}, actions: {} });
@@ -79,16 +83,22 @@ export default function ApiProvider({ children }) {
   );
 
   const fetchStories = useCallback(
-    async ({ status = STORY_STATUSES[0].value, searchTerm }) => {
+    async ({
+      status = STORY_STATUSES[0].value,
+      orderby = STORY_SORT_OPTIONS.LAST_MODIFIED,
+      searchTerm,
+    }) => {
       if (!api.stories) {
         return [];
       }
       const perPage = '100'; // TODO set up pagination
       const query = {
         status,
-        per_page: perPage,
         context: 'edit',
         search: searchTerm || undefined,
+        orderby,
+        per_page: perPage,
+        order: ORDER_BY_SORT[orderby],
       };
 
       try {

diff --git a/assets/src/dashboard/app/views/myStories/index.js b/assets/src/dashboard/app/views/myStories/index.js
@@ -28,8 +28,12 @@ import { useCallback, useContext, useEffect, useState, useMemo } from 'react';
 /**
  * Internal dependencies
  */
-import { FloatingTab, ListBar } from '../../../components';
-import { VIEW_STYLE, STORY_STATUSES } from '../../../constants';
+import { FloatingTab } from '../../../components';
+import {
+  VIEW_STYLE,
+  STORY_STATUSES,
+  STORY_SORT_OPTIONS,
+} from '../../../constants';
 import { ApiContext } from '../../api/apiProvider';
 import { UnitsProvider } from '../../../../edit-story/units';
 import { TransformProvider } from '../../../../edit-story/components/transform';
@@ -38,21 +42,17 @@ import usePagePreviewSize from '../../../utils/usePagePreviewSize';
 import { ReactComponent as PlayArrowSvg } from '../../../icons/playArrow.svg';
 import {
   BodyWrapper,
+  BodyViewOptions,
   PageHeading,
   NoResults,
   StoryGridView,
-  ListBarContainer,
 } from '../shared';
 
 const FilterContainer = styled.div`
-  padding: 0 20px 20px 0;
   margin: ${({ theme }) => `0 ${theme.pageGutter.desktop}px`};
+  padding-bottom: 20px;
   border-bottom: ${({ theme: t }) => t.subNavigationBar.border};
 
-  @media ${({ theme }) => theme.breakpoint.smallDisplayPhone} {
-    margin: ${({ theme }) => `0 ${theme.pageGutter.min}px`};
-  }
-
   @media ${({ theme }) => theme.breakpoint.min} {
     & > label {
       border-radius: 0;
@@ -80,15 +80,22 @@ function MyStories() {
   const [status, setStatus] = useState(STORY_STATUSES[0].value);
   const [typeaheadValue, setTypeaheadValue] = useState('');
   const [viewStyle, setViewStyle] = useState(VIEW_STYLE.GRID);
+  const [currentStorySort, setCurrentStorySort] = useState(
+    STORY_SORT_OPTIONS.LAST_MODIFIED
+  );
   const { pageSize } = usePagePreviewSize();
   const {
     actions: { fetchStories },
     state: { stories },
   } = useContext(ApiContext);
 
   useEffect(() => {
-    fetchStories({ status, searchTerm: typeaheadValue });
-  }, [fetchStories, status, typeaheadValue]);
+    fetchStories({
+      orderby: currentStorySort,
+      searchTerm: typeaheadValue,
+      status,
+    });
+  }, [currentStorySort, fetchStories, status, typeaheadValue]);
 
   const filteredStories = useMemo(() => {
     return stories.filter((story) => {
@@ -123,13 +130,18 @@ function MyStories() {
     if (filteredStoriesCount > 0) {
       return (
         <BodyWrapper>
-          <ListBarContainer>
-            <ListBar
-              label={listBarLabel}
-              layoutStyle={viewStyle}
-              onPress={handleViewStyleBarButtonSelected}
-            />
-          </ListBarContainer>
+          <BodyViewOptions
+            listBarLabel={listBarLabel}
+            layoutStyle={viewStyle}
+            handleLayoutSelect={handleViewStyleBarButtonSelected}
+            currentSort={currentStorySort}
+            handleSortChange={setCurrentStorySort}
+            sortDropdownAriaLabel={__(
+              'Choose sort option for display',
+              'web-stories'
+            )}
+          />
+
           <StoryGridView
             filteredStories={filteredStories}
             centerActionLabel={
@@ -158,6 +170,7 @@ function MyStories() {
     listBarLabel,
     typeaheadValue,
     viewStyle,
+    currentStorySort,
   ]);
 
   return (
@@ -184,6 +197,7 @@ function MyStories() {
               </FloatingTab>
             ))}
           </FilterContainer>
+
           {BodyContent}
         </UnitsProvider>
       </TransformProvider>

diff --git a/assets/src/dashboard/app/views/shared/bodyViewOptions.js b/assets/src/dashboard/app/views/shared/bodyViewOptions.js
@@ -0,0 +1,100 @@
+/*
+ * Copyright 2020 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * External dependencies
+ */
+import styled from 'styled-components';
+import PropTypes from 'prop-types';
+
+/**
+ * Internal dependencies
+ */
+import { Dropdown, ListBar } from '../../../components';
+import { STORY_SORT_MENU_ITEMS, DROPDOWN_TYPES } from '../../../constants';
+
+const DisplayFormatContainer = styled.div`
+  margin: ${({ theme }) => `${theme.pageGutter.desktop}px 0`};
+  padding-bottom: 20px;
+  padding-left: 15px;
+  display: flex;
+  align-items: space-between;
+  align-content: center;
+
+  @media ${({ theme }) => theme.breakpoint.smallDisplayPhone} {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+`;
+
+const StorySortDropdownContainer = styled.div`
+  margin: auto 0 auto auto;
+  align-self: flex-end;
+  @media ${({ theme }) => theme.breakpoint.smallDisplayPhone} {
+    align-self: flex-start;
+    margin: 20px 0 0;
+  }
+`;
+
+const SortDropdown = styled(Dropdown)`
+  min-width: 147px;
+  ul {
+    right: 20px;
+    max-width: 147px;
+  }
+
+  @media ${({ theme }) => theme.breakpoint.smallDisplayPhone} {
+    ul {
+      left: 20px;
+    }
+  }
+`;
+
+const BodyViewOptions = ({
+  currentSort,
+  handleLayoutSelect,
+  handleSortChange,
+  listBarLabel,
+  layoutStyle,
+  sortDropdownAriaLabel,
+}) => (
+  <DisplayFormatContainer>
+    <ListBar
+      label={listBarLabel}
+      layoutStyle={layoutStyle}
+      onPress={handleLayoutSelect}
+    />
+    <StorySortDropdownContainer>
+      <SortDropdown
+        ariaLabel={sortDropdownAriaLabel}
+        items={STORY_SORT_MENU_ITEMS}
+        type={DROPDOWN_TYPES.TRANSPARENT_MENU}
+        value={currentSort}
+        onChange={(newSort) => handleSortChange(newSort.value)}
+      />
+    </StorySortDropdownContainer>
+  </DisplayFormatContainer>
+);
+
+BodyViewOptions.propTypes = {
+  currentSort: PropTypes.string.isRequired,
+  handleLayoutSelect: PropTypes.func.isRequired,
+  handleSortChange: PropTypes.func.isRequired,
+  layoutStyle: PropTypes.string.isRequired,
+  listBarLabel: PropTypes.string.isRequired,
+  sortDropdownAriaLabel: PropTypes.string.isRequired,
+};
+export default BodyViewOptions;
diff --git a/assets/src/dashboard/app/views/shared/index.js b/assets/src/dashboard/app/views/shared/index.js
@@ -15,7 +15,7 @@
  */
 
 export { default as BodyWrapper } from './bodyWrapper';
-export { default as ListBarContainer } from './listBarContainer';
+export { default as BodyViewOptions } from './bodyViewOptions';
 export { default as NoResults } from './noResults';
 export { default as PageHeading } from './pageHeading';
 export { default as StoryGridView } from './storyGridView';

diff --git a/assets/src/dashboard/app/views/shared/listBarContainer.js b/assets/src/dashboard/app/views/shared/listBarContainer.js
diff --git a/assets/src/dashboard/app/views/templatesGallery/index.js b/assets/src/dashboard/app/views/templatesGallery/index.js
@@ -28,9 +28,13 @@ import styled from 'styled-components';
 /**
  * Internal dependencies
  */
-import { Dropdown, ListBar } from '../../../components';
+import { Dropdown } from '../../../components';
 import { DropdownContainer } from '../../../components/dropdown';
-import { VIEW_STYLE, DROPDOWN_TYPES } from '../../../constants';
+import {
+  VIEW_STYLE,
+  DROPDOWN_TYPES,
+  STORY_SORT_OPTIONS,
+} from '../../../constants';
 import { ApiContext } from '../../api/apiProvider';
 import { UnitsProvider } from '../../../../edit-story/units';
 import { TransformProvider } from '../../../../edit-story/components/transform';
@@ -41,7 +45,7 @@ import {
   PageHeading,
   NoResults,
   StoryGridView,
-  ListBarContainer,
+  BodyViewOptions,
 } from '../shared';
 
 const ExploreFiltersContainer = styled.div`
@@ -58,6 +62,9 @@ const ExploreFiltersContainer = styled.div`
 function TemplatesGallery() {
   const [typeaheadValue, setTypeaheadValue] = useState('');
   const [viewStyle, setViewStyle] = useState(VIEW_STYLE.GRID);
+  const [currentTemplateSort, setCurrentTemplateSort] = useState(
+    STORY_SORT_OPTIONS.LAST_MODIFIED
+  );
   const { pageSize } = usePagePreviewSize();
   const {
     state: { templates },
@@ -95,13 +102,17 @@ function TemplatesGallery() {
     if (filteredTemplatesCount > 0) {
       return (
         <BodyWrapper>
-          <ListBarContainer>
-            <ListBar
-              label={listBarLabel}
-              layoutStyle={viewStyle}
-              onPress={handleViewStyleBarButtonSelected}
-            />
-          </ListBarContainer>
+          <BodyViewOptions
+            listBarLabel={listBarLabel}
+            layoutStyle={viewStyle}
+            handleLayoutSelect={handleViewStyleBarButtonSelected}
+            currentSort={currentTemplateSort}
+            handleSortChange={setCurrentTemplateSort}
+            sortDropdownAriaLabel={__(
+              'Choose sort option for display',
+              'web-stories'
+            )}
+          />
           <StoryGridView
             filteredStories={filteredTemplates}
             centerActionLabel={__('View details', 'web-stories')}
@@ -119,6 +130,7 @@ function TemplatesGallery() {
     listBarLabel,
     typeaheadValue,
     viewStyle,
+    currentTemplateSort,
   ]);
 
   return (

diff --git a/assets/src/dashboard/components/dropdown/index.js b/assets/src/dashboard/components/dropdown/index.js
@@ -121,14 +121,14 @@ const Dropdown = ({
   };
 
   const handleMenuItemSelect = (item) => {
-    if (DROPDOWN_TYPES.PANEL) {
+    if (type === DROPDOWN_TYPES.PANEL) {
       onChange(item);
       return;
     }
-
     if (!item.value) {
       return;
     }
+
     if (onChange) {
       onChange(item);
     }

diff --git a/assets/src/dashboard/components/viewStyleBar.js b/assets/src/dashboard/components/viewStyleBar.js
@@ -41,7 +41,7 @@ const Container = styled.div`
 
 const ToggleButton = styled.button`
   border: none;
-  padding: 15px;
+  padding: 15px 15px 15px 0;
   background: transparent;
 
   &:hover svg {