From 382d52f5c63fb2d5ca04765996cb9a8b05fdf193 Mon Sep 17 00:00:00 2001 From: mwritter Date: Tue, 28 Jun 2022 16:17:23 -0400 Subject: [PATCH 01/30] Added StoryStatusToggle component, added status filter to filters provider --- .../src/app/views/myStories/content/index.js | 4 +- .../app/views/myStories/filters/provider.js | 3 +- .../myStories/header/StoryStatusToggle.js | 135 ++++++++++++++++++ .../src/app/views/myStories/header/index.js | 114 +++++---------- .../src/app/views/myStories/index.js | 21 +-- packages/wp-dashboard/src/api/story.js | 4 - 6 files changed, 181 insertions(+), 100 deletions(-) create mode 100644 packages/dashboard/src/app/views/myStories/header/StoryStatusToggle.js diff --git a/packages/dashboard/src/app/views/myStories/content/index.js b/packages/dashboard/src/app/views/myStories/content/index.js index 0fcc578ea4f8..9fb0d95a1700 100644 --- a/packages/dashboard/src/app/views/myStories/content/index.js +++ b/packages/dashboard/src/app/views/myStories/content/index.js @@ -82,7 +82,7 @@ function Content({ {stories.length > 0 ? ( <> span { + padding-left: 8px; + color: ${({ theme, isActive }) => + isActive ? theme.colors.gray[20] : theme.colors.fg.tertiary}; + } +`; + +function StoryStatusToggle({ initialPageReady, totalStoriesByStatus }) { + const { filters, updateFilter, registerFilters } = useFilters( + ({ state: { filters }, actions: { updateFilter, registerFilters } }) => ({ + filters, + updateFilter, + registerFilters, + }) + ); + + useEffect(() => { + registerFilters([ + { + key: 'status', + filterId: STORY_STATUS.ALL, + }, + ]); + }, [registerFilters]); + + const statusFilter = useMemo( + () => filters.find((filter) => filter.key === 'status'), + [filters] + ); + + const totalStories = useMemo( + () => + Object.keys(totalStoriesByStatus).reduce( + (prev, cur) => prev + totalStoriesByStatus[cur], + 0 + ), + [totalStoriesByStatus] + ); + + const statuses = useMemo(() => { + return STORY_STATUSES.filter(({ status }) => { + return ( + (Boolean(status in totalStoriesByStatus) && + totalStoriesByStatus[status] > 0) || + status === statusFilter?.filterId + ); + }).map(({ label, status, value }) => { + const count = totalStoriesByStatus[status]; + const disabled = Boolean(!count); + const ariaLabel = sprintf( + /* translators: %s is story status */ + __('Filter stories by %s', 'web-stories'), + label + ); + const isActive = statusFilter?.filterId === value; + return { ariaLabel, disabled, isActive, value, label, count }; + }); + }, [totalStoriesByStatus, statusFilter]); + + if ( + !initialPageReady || + !totalStories || + (totalStoriesByStatus && Object.keys(totalStoriesByStatus).length === 0) + ) { + return null; + } + + return ( + <> + {statuses + .map(({ ariaLabel, disabled, isActive, value, label, count }) => { + return ( + { + if (statusFilter.filterId !== value) { + updateFilter('status', { filterId: value }); + } + }} + isActive={isActive} + disabled={disabled} + aria-label={ariaLabel} + > + {label} + {count} + + ); + }) + .filter(Boolean)} + + ); +} + +StoryStatusToggle.propTypes = { + initialPageReady: PropTypes.bool, + totalStoriesByStatus: TotalStoriesByStatusPropType, +}; + +export default StoryStatusToggle; diff --git a/packages/dashboard/src/app/views/myStories/header/index.js b/packages/dashboard/src/app/views/myStories/header/index.js index 27f9e8ba6234..f20344ed462c 100644 --- a/packages/dashboard/src/app/views/myStories/header/index.js +++ b/packages/dashboard/src/app/views/myStories/header/index.js @@ -24,17 +24,14 @@ import { useDebouncedCallback, } from '@googleforcreators/react'; import PropTypes from 'prop-types'; -import { __, sprintf } from '@googleforcreators/i18n'; +import { __ } from '@googleforcreators/i18n'; import { trackEvent } from '@googleforcreators/tracking'; -import styled from 'styled-components'; -import { Pill } from '@googleforcreators/design-system'; /** * Internal dependencies */ import { useLayoutContext } from '../../../../components'; import { DASHBOARD_VIEWS, - STORY_STATUSES, STORY_SORT_MENU_ITEMS, TEXT_INPUT_DEBOUNCE, } from '../../../../constants'; @@ -43,7 +40,6 @@ import { TotalStoriesByStatusPropType, } from '../../../../types'; import { - FilterPropTypes, SearchPropTypes, SortPropTypes, ViewPropTypes, @@ -51,20 +47,10 @@ import { import { useDashboardResultsLabel } from '../../../../utils'; import { BodyViewOptions, PageHeading } from '../../shared'; import { getSearchOptions } from '../../utils'; +import useFilters from '../filters/useFilters'; +import StoryStatusToggle from './StoryStatusToggle'; -const StyledPill = styled(Pill)` - margin: 0 2px; - white-space: nowrap; - - & > span { - padding-left: 8px; - color: ${({ theme, isActive }) => - isActive ? theme.colors.gray[20] : theme.colors.fg.tertiary}; - } -`; function Header({ - filter, - filters, initialPageReady, search, sort, @@ -80,68 +66,36 @@ function Header({ const searchOptions = useMemo(() => getSearchOptions(stories), [stories]); + const { filters } = useFilters(({ state: { filters } }) => ({ filters })); + const [dropDownFilters, statusFilter] = useMemo(() => { + const _dropDownFilters = []; + let _statusFilter; + for (const filter of filters) { + if (filter.key === 'status') { + _statusFilter = filter; + continue; + } + _dropDownFilters.push(filter); + } + return [_dropDownFilters, _statusFilter]; + }, [filters]); + + const totalResults = useMemo( + () => + (statusFilter?.filterId.split(',') || []).reduce( + (total, filterKey) => (total += totalStoriesByStatus[filterKey] || 0), + 0 + ), + [statusFilter?.filterId, totalStoriesByStatus] + ); + const resultsLabel = useDashboardResultsLabel({ - currentFilter: filter.value, + currentFilter: statusFilter?.filterId, isActiveSearch: Boolean(search.keyword), - totalResults: (filter.value.split(',') || []).reduce( - (totalResults, filterKey) => - (totalResults += totalStoriesByStatus[filterKey] || 0), - 0 - ), + totalResults, view: DASHBOARD_VIEWS.DASHBOARD, }); - const handleClick = useCallback( - (filterValue) => { - filter.set(filterValue); - scrollToTop(); - }, - [filter, scrollToTop] - ); - - const HeaderToggleButtons = useMemo(() => { - if ( - !initialPageReady || - (totalStoriesByStatus && Object.keys(totalStoriesByStatus).length === 0) - ) { - return null; - } - - return ( - <> - {STORY_STATUSES.map((storyStatus) => { - const { label, status, value } = storyStatus; - if (!(status in totalStoriesByStatus)) { - return null; - } - - const count = totalStoriesByStatus[status]; - if (count === 0) { - return null; - } - - const ariaLabel = sprintf( - /* translators: %s is story status */ - __('Filter stories by %s', 'web-stories'), - label - ); - return ( - handleClick(value)} - isActive={filter.value === value} - disabled={count <= 0} - aria-label={ariaLabel} - > - {label} - {count && {count}} - - ); - }).filter(Boolean)} - - ); - }, [totalStoriesByStatus, filter.value, initialPageReady, handleClick]); - const onSortChange = useCallback( (newSort) => { sort.set(newSort); @@ -171,12 +125,16 @@ function Header({ searchValue={search.keyword} onClear={clearSearch} > - {HeaderToggleButtons} + ({ - filters, - filtersObject, - }) - ); + const { filtersObject } = useFilters(({ state: { filtersObject } }) => ({ + filtersObject, + })); const { apiCallbacks, canViewDefaultTemplates } = useConfig(); const isMounted = useRef(false); @@ -90,8 +87,6 @@ function MyStories() { }, []); const { - filter: statusFilter, - filters: dropDownFilters, page, search, sort, @@ -111,13 +106,11 @@ function MyStories() { searchTerm: search.keyword, sortDirection: sort.direction, sortOption: sort.value, - status: statusFilter.value, - filters: dropDownFilters.value, + filters: filtersObject, }); }, [ fetchStories, - statusFilter.value, - dropDownFilters.value, + filtersObject, page.value, search.keyword, sort.direction, @@ -135,8 +128,6 @@ function MyStories() {
Date: Wed, 29 Jun 2022 10:16:45 -0400 Subject: [PATCH 02/30] Clean up --- .../app/views/myStories/filters/provider.js | 2 +- .../myStories/header/StoryStatusToggle.js | 59 +++++++++++-------- .../src/app/views/myStories/header/index.js | 6 +- .../src/app/views/myStories/index.js | 2 +- packages/wp-dashboard/src/api/story.js | 10 +++- 5 files changed, 47 insertions(+), 32 deletions(-) diff --git a/packages/dashboard/src/app/views/myStories/filters/provider.js b/packages/dashboard/src/app/views/myStories/filters/provider.js index eee4cdc31e19..082ccc009244 100644 --- a/packages/dashboard/src/app/views/myStories/filters/provider.js +++ b/packages/dashboard/src/app/views/myStories/filters/provider.js @@ -65,7 +65,7 @@ export default function FiltersProvider({ children }) { const [state, dispatch] = useReducer(reducer, { filters: [], - filtersObject: { status: STORY_STATUS.ALL }, + filtersObject: {}, }); /** diff --git a/packages/dashboard/src/app/views/myStories/header/StoryStatusToggle.js b/packages/dashboard/src/app/views/myStories/header/StoryStatusToggle.js index 14f79b36f422..4916fb5020d7 100644 --- a/packages/dashboard/src/app/views/myStories/header/StoryStatusToggle.js +++ b/packages/dashboard/src/app/views/myStories/header/StoryStatusToggle.js @@ -17,17 +17,17 @@ /** * External dependencies */ -import { useEffect, useMemo } from 'react'; -import styled from 'styled-components'; +import { useCallback, useEffect, useMemo } from 'react'; import { Pill } from '@googleforcreators/design-system'; import { __, sprintf } from '@googleforcreators/i18n'; +import styled from 'styled-components'; import PropTypes from 'prop-types'; /** * Internal dependencies */ -import { STORY_STATUS, STORY_STATUSES } from '../../../../constants'; import useFilters from '../filters/useFilters'; +import { STORY_STATUS, STORY_STATUSES } from '../../../../constants'; import { TotalStoriesByStatusPropType } from '../../../../types'; const StyledPill = styled(Pill)` @@ -41,15 +41,27 @@ const StyledPill = styled(Pill)` } `; -function StoryStatusToggle({ initialPageReady, totalStoriesByStatus }) { - const { filters, updateFilter, registerFilters } = useFilters( - ({ state: { filters }, actions: { updateFilter, registerFilters } }) => ({ - filters, +function StoryStatusToggle({ + initialPageReady, + totalStoriesByStatus, + currentStatus, +}) { + const { updateFilter, registerFilters } = useFilters( + ({ actions: { updateFilter, registerFilters } }) => ({ updateFilter, registerFilters, }) ); + const handleStatusChange = useCallback( + (value) => { + if (currentStatus !== value) { + updateFilter('status', { filterId: value }); + } + }, + [currentStatus, updateFilter] + ); + useEffect(() => { registerFilters([ { @@ -59,11 +71,9 @@ function StoryStatusToggle({ initialPageReady, totalStoriesByStatus }) { ]); }, [registerFilters]); - const statusFilter = useMemo( - () => filters.find((filter) => filter.key === 'status'), - [filters] - ); - + /** + * The total stories based on the given filters + */ const totalStories = useMemo( () => Object.keys(totalStoriesByStatus).reduce( @@ -73,12 +83,16 @@ function StoryStatusToggle({ initialPageReady, totalStoriesByStatus }) { [totalStoriesByStatus] ); + /** + * Set up the status data for the UI. + * Only show statuses that correlate to the filtered stories, and the current status. + */ const statuses = useMemo(() => { return STORY_STATUSES.filter(({ status }) => { return ( (Boolean(status in totalStoriesByStatus) && totalStoriesByStatus[status] > 0) || - status === statusFilter?.filterId + status === currentStatus ); }).map(({ label, status, value }) => { const count = totalStoriesByStatus[status]; @@ -88,10 +102,10 @@ function StoryStatusToggle({ initialPageReady, totalStoriesByStatus }) { __('Filter stories by %s', 'web-stories'), label ); - const isActive = statusFilter?.filterId === value; + const isActive = currentStatus === value; return { ariaLabel, disabled, isActive, value, label, count }; }); - }, [totalStoriesByStatus, statusFilter]); + }, [totalStoriesByStatus, currentStatus]); if ( !initialPageReady || @@ -103,16 +117,12 @@ function StoryStatusToggle({ initialPageReady, totalStoriesByStatus }) { return ( <> - {statuses - .map(({ ariaLabel, disabled, isActive, value, label, count }) => { + {statuses.map( + ({ ariaLabel, disabled, isActive, value, label, count }) => { return ( { - if (statusFilter.filterId !== value) { - updateFilter('status', { filterId: value }); - } - }} + onClick={() => handleStatusChange(value)} isActive={isActive} disabled={disabled} aria-label={ariaLabel} @@ -121,8 +131,8 @@ function StoryStatusToggle({ initialPageReady, totalStoriesByStatus }) { {count} ); - }) - .filter(Boolean)} + } + )} ); } @@ -130,6 +140,7 @@ function StoryStatusToggle({ initialPageReady, totalStoriesByStatus }) { StoryStatusToggle.propTypes = { initialPageReady: PropTypes.bool, totalStoriesByStatus: TotalStoriesByStatusPropType, + currentStatus: PropTypes.string, }; export default StoryStatusToggle; diff --git a/packages/dashboard/src/app/views/myStories/header/index.js b/packages/dashboard/src/app/views/myStories/header/index.js index f20344ed462c..8035f954992f 100644 --- a/packages/dashboard/src/app/views/myStories/header/index.js +++ b/packages/dashboard/src/app/views/myStories/header/index.js @@ -48,7 +48,7 @@ import { useDashboardResultsLabel } from '../../../../utils'; import { BodyViewOptions, PageHeading } from '../../shared'; import { getSearchOptions } from '../../utils'; import useFilters from '../filters/useFilters'; -import StoryStatusToggle from './StoryStatusToggle'; +import StoryStatusToggle from './storyStatusToggle'; function Header({ initialPageReady, @@ -128,7 +128,7 @@ function Header({ @@ -152,14 +152,12 @@ function Header({ } Header.propTypes = { - // filter: FilterPropTypes.isRequired, initialPageReady: PropTypes.bool, search: SearchPropTypes.isRequired, sort: SortPropTypes.isRequired, stories: StoriesPropType, totalStoriesByStatus: TotalStoriesByStatusPropType, view: ViewPropTypes.isRequired, - // filters: PropTypes.array, }; export default memo(Header); diff --git a/packages/dashboard/src/app/views/myStories/index.js b/packages/dashboard/src/app/views/myStories/index.js index 9e8f3b3225f0..0868b4017d6b 100644 --- a/packages/dashboard/src/app/views/myStories/index.js +++ b/packages/dashboard/src/app/views/myStories/index.js @@ -138,7 +138,7 @@ function MyStories() { Date: Wed, 29 Jun 2022 10:59:03 -0400 Subject: [PATCH 03/30] Clean up --- .../src/app/views/myStories/content/index.js | 4 ---- .../app/views/myStories/content/listView/index.js | 8 ++++++-- .../app/views/myStories/content/storiesView/index.js | 12 +----------- packages/dashboard/src/app/views/myStories/index.js | 1 - 4 files changed, 7 insertions(+), 18 deletions(-) diff --git a/packages/dashboard/src/app/views/myStories/content/index.js b/packages/dashboard/src/app/views/myStories/content/index.js index 9fb0d95a1700..667e50158199 100644 --- a/packages/dashboard/src/app/views/myStories/content/index.js +++ b/packages/dashboard/src/app/views/myStories/content/index.js @@ -36,7 +36,6 @@ import { APP_ROUTES } from '../../../../constants'; import { Layout, StandardViewContentGutter } from '../../../../components'; import { StoriesPropType, StoryActionsPropType } from '../../../../types'; import { - FilterPropTypes, ViewPropTypes, PagePropTypes, SortPropTypes, @@ -66,7 +65,6 @@ NoAvailableContent.propTypes = { function Content({ allPagesFetched, canViewDefaultTemplates, - filter, filtersObject = {}, loading, page, @@ -82,7 +80,6 @@ function Content({ {stories.length > 0 ? ( <> { + const statusFilter = filters.filter((f) => f.key === 'status'); + return { storyStatus: statusFilter?.filterId }; + }); + const onSortTitleSelected = useCallback( (newStorySort) => { if (newStorySort !== storySort) { @@ -267,6 +272,5 @@ StoryListView.propTypes = { sortDirection: PropTypes.string.isRequired, storyMenu: StoryMenuPropType.isRequired, storySort: PropTypes.string.isRequired, - storyStatus: PropTypes.oneOf(Object.values(STORY_STATUS)), stories: StoriesPropType, }; diff --git a/packages/dashboard/src/app/views/myStories/content/storiesView/index.js b/packages/dashboard/src/app/views/myStories/content/storiesView/index.js index a0ed4c143264..0759802fdfbf 100644 --- a/packages/dashboard/src/app/views/myStories/content/storiesView/index.js +++ b/packages/dashboard/src/app/views/myStories/content/storiesView/index.js @@ -53,14 +53,7 @@ import ListView from '../listView'; import StoryGridView from '../storyGridView'; const ACTIVE_DIALOG_DELETE_STORY = 'DELETE_STORY'; -function StoriesView({ - filterValue, - loading, - sort, - storyActions, - stories, - view, -}) { +function StoriesView({ loading, sort, storyActions, stories, view }) { const [contextMenuId, setContextMenuId] = useState(-1); const [titleRenameId, setTitleRenameId] = useState(-1); @@ -226,7 +219,6 @@ function StoriesView({ stories={stories} storyMenu={storyMenu} storySort={sort.value} - storyStatus={filterValue} /> ); } @@ -254,7 +246,6 @@ function StoriesView({ return null; }, [ loading, - filterValue, renameStory, returnStoryFocusId, sort, @@ -312,7 +303,6 @@ function StoriesView({ } StoriesView.propTypes = { - filterValue: PropTypes.string, loading: PropTypes.shape({ isLoading: PropTypes.bool, showStoriesWhileLoading: ShowStoriesWhileLoadingPropType, diff --git a/packages/dashboard/src/app/views/myStories/index.js b/packages/dashboard/src/app/views/myStories/index.js index 0868b4017d6b..8965605d5f37 100644 --- a/packages/dashboard/src/app/views/myStories/index.js +++ b/packages/dashboard/src/app/views/myStories/index.js @@ -138,7 +138,6 @@ function MyStories() { Date: Thu, 30 Jun 2022 10:06:58 -0400 Subject: [PATCH 04/30] Code clean up, added status and search to filters provider --- .../src/app/views/myStories/content/index.js | 18 ++---- .../app/views/myStories/filters/provider.js | 1 - .../src/app/views/myStories/header/index.js | 64 ++++++++++--------- .../src/app/views/myStories/index.js | 24 ++----- .../src/app/views/shared/pageHeading.js | 14 +++- .../src/components/search/search.js | 3 +- .../src/components/search/useSearch.js | 4 +- packages/wp-dashboard/src/api/story.js | 2 - 8 files changed, 63 insertions(+), 67 deletions(-) diff --git a/packages/dashboard/src/app/views/myStories/content/index.js b/packages/dashboard/src/app/views/myStories/content/index.js index 667e50158199..c29e3c9c40e9 100644 --- a/packages/dashboard/src/app/views/myStories/content/index.js +++ b/packages/dashboard/src/app/views/myStories/content/index.js @@ -44,12 +44,13 @@ import { import { EmptyContentMessage } from '../../shared'; import StoriesView from './storiesView'; -function NoAvailableContent({ keyword, filtersObject }) { - if (keyword) { +function NoAvailableContent({ filtersObject }) { + const { search } = filtersObject; + if (search) { return sprintf( /* translators: %s: search term. */ __('Sorry, we couldn\'t find any results matching "%s"', 'web-stories'), - keyword + search ); } else if (Object.keys(filtersObject).length !== 0) { return __("Sorry, we couldn't find any results", 'web-stories'); @@ -59,7 +60,6 @@ function NoAvailableContent({ keyword, filtersObject }) { } NoAvailableContent.propTypes = { filtersObject: PropTypes.object, - keyword: PropTypes.string, }; function Content({ @@ -68,7 +68,6 @@ function Content({ filtersObject = {}, loading, page, - search, sort, stories, storyActions, @@ -104,13 +103,9 @@ function Content({ size={THEME_CONSTANTS.TYPOGRAPHY.PRESET_SIZES.SMALL} as="h3" > - + - {!search?.keyword && - Object.keys(filtersObject).length === 0 && + {Object.keys(filtersObject).length === 0 && canViewDefaultTemplates && ( - )} - + !loading?.isLoading && ( + + + + + {Object.keys(filtersObject).length === 0 && + canViewDefaultTemplates && ( + + )} + + ) )} diff --git a/packages/dashboard/src/app/views/myStories/filters/test/provider.js b/packages/dashboard/src/app/views/myStories/filters/test/storyFiltersProvider.js similarity index 100% rename from packages/dashboard/src/app/views/myStories/filters/test/provider.js rename to packages/dashboard/src/app/views/myStories/filters/test/storyFiltersProvider.js diff --git a/packages/dashboard/src/app/views/myStories/header/storyStatusToggle.js b/packages/dashboard/src/app/views/myStories/header/storyStatusToggle.js index 6f28306d1017..75880d011e54 100644 --- a/packages/dashboard/src/app/views/myStories/header/storyStatusToggle.js +++ b/packages/dashboard/src/app/views/myStories/header/storyStatusToggle.js @@ -55,11 +55,9 @@ function StoryStatusToggle({ const handleStatusChange = useCallback( (value) => { - if (currentStatus !== value) { - updateFilter('status', { filterId: value }); - } + updateFilter('status', { filterId: value }); }, - [currentStatus, updateFilter] + [updateFilter] ); useEffect(() => { From 9eba8701ea80c1fff67b1f005415ec4478b23480 Mon Sep 17 00:00:00 2001 From: mwritter Date: Fri, 8 Jul 2022 13:38:58 -0400 Subject: [PATCH 25/30] Updated registering status to use default filter --- .../src/app/views/exploreTemplates/header/index.js | 4 ++++ .../src/app/views/myStories/header/storyStatusToggle.js | 8 ++++++-- 2 files changed, 10 insertions(+), 2 deletions(-) diff --git a/packages/dashboard/src/app/views/exploreTemplates/header/index.js b/packages/dashboard/src/app/views/exploreTemplates/header/index.js index eb41b11cc9a1..4688b2dc0ad8 100644 --- a/packages/dashboard/src/app/views/exploreTemplates/header/index.js +++ b/packages/dashboard/src/app/views/exploreTemplates/header/index.js @@ -36,6 +36,7 @@ import { useFeature } from 'flagged'; */ import { DASHBOARD_VIEWS, + DEFAULT_TEMPLATE_FILTERS, TEMPLATES_GALLERY_SORT_MENU_ITEMS, TEMPLATES_GALLERY_SORT_OPTIONS, TEXT_INPUT_DEBOUNCE, @@ -76,6 +77,9 @@ function Header({ isLoading, totalTemplates, view, searchOptions = [] }) { useEffect(() => { registerFilters([{ key: 'search' }]); + registerFilters([ + { key: 'status', filterId: DEFAULT_TEMPLATE_FILTERS.filters.status }, + ]); }, [registerFilters]); const clearSearch = useCallback( diff --git a/packages/dashboard/src/app/views/myStories/header/storyStatusToggle.js b/packages/dashboard/src/app/views/myStories/header/storyStatusToggle.js index 75880d011e54..a643b284624e 100644 --- a/packages/dashboard/src/app/views/myStories/header/storyStatusToggle.js +++ b/packages/dashboard/src/app/views/myStories/header/storyStatusToggle.js @@ -27,7 +27,11 @@ import PropTypes from 'prop-types'; * Internal dependencies */ import useStoryFilters from '../filters/useStoryFilters'; -import { STORY_STATUS, STORY_STATUSES } from '../../../../constants'; +import { + DEFAULT_FILTERS, + STORY_STATUS, + STORY_STATUSES, +} from '../../../../constants'; import { TotalStoriesByStatusPropType } from '../../../../types'; const StyledPill = styled(Pill)` @@ -64,7 +68,7 @@ function StoryStatusToggle({ registerFilters([ { key: 'status', - filterId: STORY_STATUS.ALL, + filterId: DEFAULT_FILTERS.filters.status, }, ]); }, [registerFilters]); From e3995c608e555c71b6f9f57d5ee8f345c6e852ef Mon Sep 17 00:00:00 2001 From: mwritter Date: Fri, 8 Jul 2022 13:47:34 -0400 Subject: [PATCH 26/30] oof --- packages/dashboard/src/app/views/myStories/content/index.js | 1 - .../src/app/views/myStories/header/storyStatusToggle.js | 6 +----- 2 files changed, 1 insertion(+), 6 deletions(-) diff --git a/packages/dashboard/src/app/views/myStories/content/index.js b/packages/dashboard/src/app/views/myStories/content/index.js index 512fa5ffcc9c..d1c6ef5362a1 100644 --- a/packages/dashboard/src/app/views/myStories/content/index.js +++ b/packages/dashboard/src/app/views/myStories/content/index.js @@ -52,7 +52,6 @@ function NoAvailableContent({ filtersObject }) { search ); } else if (Object.keys(filtersObject).length !== 0) { - console.log(filtersObject); return __("Sorry, we couldn't find any results", 'web-stories'); } else { return __('Start telling Stories.', 'web-stories'); diff --git a/packages/dashboard/src/app/views/myStories/header/storyStatusToggle.js b/packages/dashboard/src/app/views/myStories/header/storyStatusToggle.js index a643b284624e..6f84acc54145 100644 --- a/packages/dashboard/src/app/views/myStories/header/storyStatusToggle.js +++ b/packages/dashboard/src/app/views/myStories/header/storyStatusToggle.js @@ -27,11 +27,7 @@ import PropTypes from 'prop-types'; * Internal dependencies */ import useStoryFilters from '../filters/useStoryFilters'; -import { - DEFAULT_FILTERS, - STORY_STATUS, - STORY_STATUSES, -} from '../../../../constants'; +import { DEFAULT_FILTERS, STORY_STATUSES } from '../../../../constants'; import { TotalStoriesByStatusPropType } from '../../../../types'; const StyledPill = styled(Pill)` From 73dde14a4dede6dfa75eaec6b6c07ff5309f8ad6 Mon Sep 17 00:00:00 2001 From: mwritter Date: Mon, 11 Jul 2022 15:07:07 -0400 Subject: [PATCH 27/30] Fixed dashboard text not diplaying correctly --- .../views/myStories/filters/StoryFiltersProvider/index.js | 7 ++----- 1 file changed, 2 insertions(+), 5 deletions(-) diff --git a/packages/dashboard/src/app/views/myStories/filters/StoryFiltersProvider/index.js b/packages/dashboard/src/app/views/myStories/filters/StoryFiltersProvider/index.js index f5f10c9074d2..7b03d72c77cc 100644 --- a/packages/dashboard/src/app/views/myStories/filters/StoryFiltersProvider/index.js +++ b/packages/dashboard/src/app/views/myStories/filters/StoryFiltersProvider/index.js @@ -58,9 +58,6 @@ export const filterContext = createContext({ * @return {Node} React node */ -const { filters: defaultStoryFilters, sort: defaultStorySort } = - DEFAULT_FILTERS; - export default function StoryFiltersProvider({ children }) { // each filter type will have its own logic for initilizing and querying const initializeTaxonomyFilters = useTaxonomyFilters(); @@ -68,8 +65,8 @@ export default function StoryFiltersProvider({ children }) { const [state, dispatch] = useReducer(reducer, { filters: [], - filtersObject: defaultStoryFilters, - sortObject: defaultStorySort, + filtersObject: {}, + sortObject: {}, }); /** From 7b8c37ecd24e992f2e012b10da9aaa968ae134c1 Mon Sep 17 00:00:00 2001 From: mwritter Date: Mon, 11 Jul 2022 15:07:59 -0400 Subject: [PATCH 28/30] Removed import --- .../app/views/myStories/filters/StoryFiltersProvider/index.js | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/dashboard/src/app/views/myStories/filters/StoryFiltersProvider/index.js b/packages/dashboard/src/app/views/myStories/filters/StoryFiltersProvider/index.js index 7b03d72c77cc..deba65e8a754 100644 --- a/packages/dashboard/src/app/views/myStories/filters/StoryFiltersProvider/index.js +++ b/packages/dashboard/src/app/views/myStories/filters/StoryFiltersProvider/index.js @@ -31,7 +31,6 @@ import PropTypes from 'prop-types'; /** * Internal dependencies */ -import { DEFAULT_FILTERS } from '../../../../../constants/stories'; import reducer from '../../../filters/reducer'; import * as types from '../../../filters/types'; import useTaxonomyFilters from './taxonomy/useTaxonomyFilters'; From acedfe12cdea2ea215edae8c0f15ea255aa574e0 Mon Sep 17 00:00:00 2001 From: mwritter Date: Tue, 12 Jul 2022 17:01:48 -0400 Subject: [PATCH 29/30] Fixed tests --- .../filters/test/templateFiltersProvider.js | 2 +- .../src/app/views/filters/test/reducer.js | 37 ++++++++++--------- 2 files changed, 21 insertions(+), 18 deletions(-) diff --git a/packages/dashboard/src/app/views/exploreTemplates/filters/test/templateFiltersProvider.js b/packages/dashboard/src/app/views/exploreTemplates/filters/test/templateFiltersProvider.js index a6a7a08a9dce..42f2ab0ef2d2 100644 --- a/packages/dashboard/src/app/views/exploreTemplates/filters/test/templateFiltersProvider.js +++ b/packages/dashboard/src/app/views/exploreTemplates/filters/test/templateFiltersProvider.js @@ -141,7 +141,7 @@ describe('provider', () => { expect(statusFilter.filterId).toBe('New'); }); - it('should be able to update the sortObject if the acceptable keys are use', () => { + it('should be able to update the sortObject if the acceptable keys are used', () => { const wrapper = ({ children }) => ( {children} ); diff --git a/packages/dashboard/src/app/views/filters/test/reducer.js b/packages/dashboard/src/app/views/filters/test/reducer.js index f547279e7e82..7dca0579818e 100644 --- a/packages/dashboard/src/app/views/filters/test/reducer.js +++ b/packages/dashboard/src/app/views/filters/test/reducer.js @@ -46,8 +46,8 @@ describe('reducer', () => { expect(filter.filterId).toBe(112); }); - it('should update set the filterId to null if the same filterId is given, unless the filter is "search" or "status"', () => { - let initial_state = { + it('should update set the filterId to null if the same filterId is given', () => { + const initial_state = { filters: [ { key: 'officers', @@ -57,7 +57,7 @@ describe('reducer', () => { ], }; - let args = { + const args = { type: types.UPDATE_FILTER, payload: { key: 'officers', @@ -65,18 +65,17 @@ describe('reducer', () => { }, }; - let state = reducer(initial_state, args); - let filter = state.filters.find((f) => f.key === 'officers'); + const state = reducer(initial_state, args); + const filter = state.filters.find((f) => f.key === 'officers'); expect(filter.filterId).toBeNull(); + }); - initial_state = { - filters: [ - { key: 'search', filterId: 'John' }, - { key: 'status', filterId: 'New' }, - ], + it('should not reset the filterId for "search" if the same filterId is given', () => { + const initial_state = { + filters: [{ key: 'search', filterId: 'John' }], }; // search - args = { + const args = { type: types.UPDATE_FILTER, payload: { key: 'search', @@ -84,12 +83,16 @@ describe('reducer', () => { }, }; - state = reducer(initial_state, args); - filter = state.filters.find((f) => f.key === 'search'); + const state = reducer(initial_state, args); + const filter = state.filters.find((f) => f.key === 'search'); expect(filter.filterId).toBe('John'); + }); - // status - args = { + it('should not reset the filterId for "status" if the same filterId is given', () => { + const initial_state = { + filters: [{ key: 'status', filterId: 'New' }], + }; + const args = { type: types.UPDATE_FILTER, payload: { key: 'status', @@ -97,8 +100,8 @@ describe('reducer', () => { }, }; - state = reducer(initial_state, args); - filter = state.filters.find((f) => f.key === 'status'); + const state = reducer(initial_state, args); + const filter = state.filters.find((f) => f.key === 'status'); expect(filter.filterId).toBe('New'); }); From 03cc6ced4f4ec013f755aa8d053924049a3ee0cf Mon Sep 17 00:00:00 2001 From: mwritter Date: Thu, 14 Jul 2022 10:18:58 -0400 Subject: [PATCH 30/30] Fixed tests --- .../karma/exploreTemplates.karma.js | 7 ++++--- .../templateDetails/karma/templateDetails.karma.js | 9 +++++---- .../app/views/myStories/karma/myStories.karma.js | 8 +++++--- packages/dashboard/src/karma/apiProviderFixture.js | 14 +++++++++++--- 4 files changed, 25 insertions(+), 13 deletions(-) diff --git a/packages/dashboard/src/app/views/exploreTemplates/karma/exploreTemplates.karma.js b/packages/dashboard/src/app/views/exploreTemplates/karma/exploreTemplates.karma.js index 9f6c551f9fa8..a00887c5cba6 100644 --- a/packages/dashboard/src/app/views/exploreTemplates/karma/exploreTemplates.karma.js +++ b/packages/dashboard/src/app/views/exploreTemplates/karma/exploreTemplates.karma.js @@ -41,9 +41,10 @@ describe('Grid view', () => { }); function navigateToExploreTemplates() { - const exploreTemplatesMenuItem = fixture.screen.queryByRole('link', { - name: /^Explore Templates/, - }); + const navigation = fixture.screen.queryByRole('navigation'); + const utils = within(navigation); + + const exploreTemplatesMenuItem = utils.getByText(/^Explore Templates/); return fixture.events.click(exploreTemplatesMenuItem); } diff --git a/packages/dashboard/src/app/views/exploreTemplates/modal/templateDetails/karma/templateDetails.karma.js b/packages/dashboard/src/app/views/exploreTemplates/modal/templateDetails/karma/templateDetails.karma.js index ce61446b8cba..87be4abb6dbc 100644 --- a/packages/dashboard/src/app/views/exploreTemplates/modal/templateDetails/karma/templateDetails.karma.js +++ b/packages/dashboard/src/app/views/exploreTemplates/modal/templateDetails/karma/templateDetails.karma.js @@ -41,9 +41,10 @@ describe('See template details modal', () => { }); async function navigateToFirstTemplate() { - const exploreTemplatesMenuItem = fixture.screen.queryByRole('link', { - name: /^Explore Templates/, - }); + const navigation = fixture.screen.queryByRole('navigation'); + let utils = within(navigation); + + const exploreTemplatesMenuItem = utils.getByText(/^Explore Templates/); await fixture.events.click(exploreTemplatesMenuItem); @@ -51,7 +52,7 @@ describe('See template details modal', () => { const firstTemplate = getTemplateElementById(templatesOrderById[0]); - const utils = within(firstTemplate); + utils = within(firstTemplate); await fixture.events.hover(firstTemplate); diff --git a/packages/dashboard/src/app/views/myStories/karma/myStories.karma.js b/packages/dashboard/src/app/views/myStories/karma/myStories.karma.js index dcd8c4787651..d09d423bfdf0 100644 --- a/packages/dashboard/src/app/views/myStories/karma/myStories.karma.js +++ b/packages/dashboard/src/app/views/myStories/karma/myStories.karma.js @@ -118,9 +118,11 @@ describe('CUJ: Creator can view their stories in grid view', () => { }); it('should navigate to Explore Templates', async () => { - const exploreTemplatesMenuItem = fixture.screen.queryByRole('link', { - name: /^Explore Templates/, - }); + const navigation = fixture.screen.queryByRole('navigation'); + const utils = within(navigation); + + const exploreTemplatesMenuItem = utils.getByText(/^Explore Templates/); + expect(exploreTemplatesMenuItem).toBeTruthy(); await fixture.events.click(exploreTemplatesMenuItem); diff --git a/packages/dashboard/src/karma/apiProviderFixture.js b/packages/dashboard/src/karma/apiProviderFixture.js index 63ae68a37529..923c4655c4a7 100644 --- a/packages/dashboard/src/karma/apiProviderFixture.js +++ b/packages/dashboard/src/karma/apiProviderFixture.js @@ -31,7 +31,7 @@ import formattedStoriesArray from '../dataUtils/formattedStoriesArray'; import formattedTaxonomiesArray from '../dataUtils/formattedTaxonomiesArray'; import formattedTaxonomyTermsObject from '../dataUtils/formattedTaxonomyTermsObject'; import formattedTemplatesArray from '../dataUtils/formattedTemplatesArray'; -import { STORY_SORT_OPTIONS } from '../constants/stories'; +import { STORY_SORT_OPTIONS, DEFAULT_FILTERS } from '../constants/stories'; import { groupTemplatesByTag } from '../testUtils'; /* eslint-disable jasmine/no-unsafe-spy */ @@ -145,8 +145,16 @@ function getStoriesState() { function fetchStories({ sort, filters }, currentState) { const storiesState = currentState ? { ...currentState } : getStoriesState(); - const { author, web_story_category, search = '', status } = filters; - const { orderby, order } = sort; + const { + author, + web_story_category, + search = '', + status = DEFAULT_FILTERS.filters.status, + } = filters; + const { + orderby = DEFAULT_FILTERS.sort.orderby, + order = DEFAULT_FILTERS.sort.order, + } = sort; const statuses = status.split(','); storiesState.storiesOrderById = Object.values(storiesState.stories)