Add field season

See ownrecipes/OwnRecipes#2
ownrecipes · Nov 14, 2024 · 507e264 · 507e264
1 parent ef9fbf1
commit 507e264
Show file tree

Hide file tree

Showing 35 changed files with 521 additions and 120 deletions.
diff --git a/src/app/components/IntlMessagesCreator.tsx b/src/app/components/IntlMessagesCreator.tsx
@@ -4,6 +4,7 @@ import { useIntl } from 'react-intl';
 import initCourses from './messages/Courses';
 import initCuisines from './messages/Cuisines';
 import initMeasurements from './messages/Measurements';
+import initSeasons from './messages/Seasons';
 import initTags from './messages/Tags';
 import initValidations from './messages/Validations';
 
@@ -14,6 +15,7 @@ const IntlMessagesCreator = () => {
     initCourses();
     initCuisines();
     initMeasurements();
+    initSeasons();
     initTags();
     initValidations();
   }, [locale]);

diff --git a/src/app/components/messages/Seasons.ts b/src/app/components/messages/Seasons.ts
@@ -0,0 +1,22 @@
+import { defineMessages } from 'react-intl';
+
+export default function initSeasons() {
+  defineMessages({
+    season_spring: {
+      id: 'season.Spring',
+      defaultMessage: 'Spring',
+    },
+    season_summer: {
+      id: 'season.Summer',
+      defaultMessage: 'Summer',
+    },
+    season_autumn: {
+      id: 'season.Autumn',
+      defaultMessage: 'Autumn',
+    },
+    season_winter: {
+      id: 'season.Winter',
+      defaultMessage: 'Winter',
+    },
+  });
+}
diff --git a/src/browse/components/SearchMenu.tsx b/src/browse/components/SearchMenu.tsx
@@ -9,6 +9,7 @@ import '../css/filter.css';
 import Icon from '../../common/components/Icon';
 import P from '../../common/components/P';
 import Chip from '../../common/components/Chip';
+import Tooltip from '../../common/components/Tooltip';
 import { CategoryCount, RatingCount } from '../store/FilterTypes';
 import Filter from './Filter';
 
@@ -33,6 +34,11 @@ const messages = defineMessages({
     description: 'Filter field rating',
     defaultMessage: 'Ratings',
   },
+  filter_season: {
+    id: 'filter.filter_season',
+    description: 'Filter field season',
+    defaultMessage: 'Seasons',
+  },
   filter_tag: {
     id: 'filter.filter_tag',
     description: 'Filter field tag',
@@ -95,6 +101,7 @@ export interface ISearchMenuProps {
   courses:  Array<CategoryCount> | undefined;
   cuisines: Array<CategoryCount> | undefined;
   ratings:  Array<RatingCount>   | undefined;
+  seasons:  Array<CategoryCount> | undefined;
   tags:     Array<CategoryCount> | undefined;
 
   activeFilters: Record<string, string>;
@@ -106,7 +113,7 @@ export interface ISearchMenuProps {
 }
 
 const SearchMenu: React.FC<ISearchMenuProps> = ({
-    qs, courses, cuisines, ratings, tags,
+    qs, courses, cuisines, ratings, seasons, tags,
     activeFilters, resetFilterUrl, openFilters, setOpenFilters,
     buildUrl }: ISearchMenuProps) => {
   const { formatMessage } = useIntl();
@@ -153,9 +160,11 @@ const SearchMenu: React.FC<ISearchMenuProps> = ({
         {activeFiltersCount > 0 && (
           <>
             <Chip color='primary'>{activeFiltersCount}</Chip>
-            <Link className='clear-filter-desktop btn btn-transparent' to={resetFilterUrl} aria-label={formatMessage(messages.reset_filters)}>
-              <Icon icon='arrow-counterclockwise' variant='light' />
-            </Link>
+            <Tooltip id='clear-filter-desktop-btn-tooltip' tooltip={formatMessage(messages.reset_filters)}>
+              <Link className='clear-filter-desktop btn btn-transparent' to={resetFilterUrl} aria-label={formatMessage(messages.reset_filters)}>
+                <Icon icon='arrow-counterclockwise' variant='light' />
+              </Link>
+            </Tooltip>
           </>
         )}
       </Card.Header>
@@ -190,6 +199,13 @@ const SearchMenu: React.FC<ISearchMenuProps> = ({
               multiSelect
               buildUrl = {buildUrl}
               sort = 'off' />
+          <Filter
+              title    = {formatMessage(messages.filter_season)}
+              qsTitle  = 'season'
+              data     = {seasons}
+              qs       = {qs}
+              multiSelect
+              buildUrl = {buildUrl} />
           <Filter
               title    = {formatMessage(messages.filter_tag)}
               qsTitle  = 'tag'

diff --git a/src/browse/containers/SearchMenuContainer.tsx b/src/browse/containers/SearchMenuContainer.tsx
@@ -19,10 +19,11 @@ const SearchMenuContainer: React.FC<ISearchMenuContainerProps> = ({
     qs, qsString, buildUrl }: ISearchMenuContainerProps) => {
   const dispatch = useDispatch();
 
-  const courses  = useSelector((state: RootState) => state.browse.browserFilter.courses.items);
-  const cuisines = useSelector((state: RootState) => state.browse.browserFilter.cuisines.items);
-  const ratings  = useSelector((state: RootState) => state.browse.browserFilter.ratings.items);
-  const tags     = useSelector((state: RootState) => state.browse.browserFilter.tags.items);
+  const courses  = useSelector((state: RootState) => state.browse.browserFilter.filter_courses.items);
+  const cuisines = useSelector((state: RootState) => state.browse.browserFilter.filter_cuisines.items);
+  const ratings  = useSelector((state: RootState) => state.browse.browserFilter.filter_ratings.items);
+  const seasons  = useSelector((state: RootState) => state.browse.browserFilter.filter_seasons.items);
+  const tags     = useSelector((state: RootState) => state.browse.browserFilter.filter_tags.items);
 
   const [openFilters, setOpenFilters] = useState<Array<string>>(Object.keys(qs));
 
@@ -40,6 +41,9 @@ const SearchMenuContainer: React.FC<ISearchMenuContainerProps> = ({
     if (openFilters.includes('rating') && ratings?.[qsString] == null) {
       dispatchQueue.push(FilterActions.loadRatings(qsMergedDefaults));
     }
+    if (openFilters.includes('season') && seasons?.[qsString] == null) {
+      dispatchQueue.push(FilterActions.loadSeasons(qsMergedDefaults));
+    }
     if (openFilters.includes('tag') && tags?.[qsString] == null) {
       dispatchQueue.push(FilterActions.loadTags(qsMergedDefaults));
     }
@@ -74,6 +78,7 @@ const SearchMenuContainer: React.FC<ISearchMenuContainerProps> = ({
         courses  = {courses?.[qsString]}
         cuisines = {cuisines?.[qsString]}
         ratings  = {ratings?.[qsString]}
+        seasons  = {seasons?.[qsString]}
         tags     = {tags?.[qsString]}
         qs       = {qs}
 

diff --git a/src/browse/css/filter.css b/src/browse/css/filter.css
@@ -15,8 +15,12 @@
   border: none;
 }
 .container.browser .sidebar .filter-group .list-group-title {
-  padding: 0 10px 0.25em 10px;
+  padding: 0 10px;
   font-weight: bold;
+  margin-bottom: 0.25em;
+
+  min-height: 1.4em;
+  align-content: center;
 }
 .container.browser .sidebar .filter-group .list-group-title .chip {
   padding: 0.25em 0.5em;
@@ -46,10 +50,12 @@ html[data-theme="dark"] .container.browser .sidebar .filter-group .list-group-ti
 .container.browser .sidebar .filter-group .list-group-item:hover {
   border: 0;
   border-radius: 4px;
-}
-.container.browser .sidebar .filter-group .list-group-item:hover {
   background-color: var(--hoverBg);
   color: var(--primaryMain);
+  box-shadow: 0 0 0 1px var(--primaryText) inset;
+}
+.container.browser .sidebar .filter-group .list-group-item:focus {
+  box-shadow: 0 0 0 2px var(--primaryText) inset;
 }
 .container.browser .sidebar .filter-group .list-group-item.active {
   background-color: transparent;
@@ -77,6 +83,7 @@ html[data-theme="dark"] .container.browser .sidebar .filter-group .list-group-ti
 
 .container.browser .filter-panel .card-header h2 {
   font-size: inherit;
+  font-weight: bold;
   margin-bottom: 0;
 }
 

diff --git a/src/browse/store/FilterActions.ts b/src/browse/store/FilterActions.ts
@@ -6,7 +6,7 @@ import { ACTION } from '../../common/store/ReduxHelper';
 import { handleError } from '../../common/requestUtils';
 import { objToSearchString } from '../../common/utility';
 import { toBasicAction } from '../../common/store/redux';
-import { BROWSE_FILTER_COURSE_STORE, BROWSE_FILTER_CUISINE_STORE, BROWSE_FILTER_RATING_STORE, BROWSE_FILTER_TAGS_STORE, FilterDispatch } from './FilterTypes';
+import { BROWSE_FILTER_COURSE_STORE, BROWSE_FILTER_CUISINE_STORE, BROWSE_FILTER_RATING_STORE, BROWSE_FILTER_SEASON_STORE, BROWSE_FILTER_TAGS_STORE, FilterDispatch } from './FilterTypes';
 import { extractSearchStringToFields } from './SearchActions';
 
 const parsedFilter = (filters: Record<string, string>): Record<string, string> => {
@@ -72,6 +72,25 @@ export const loadRatings = (filter: Record<string, string>) => (dispatch: Filter
     .catch(err => dispatch(handleError(err, BROWSE_FILTER_RATING_STORE)));
 };
 
+export const loadSeasons = (filters: Record<string, string>) => (dispatch: FilterDispatch) => {
+  dispatch({ ...toBasicAction(BROWSE_FILTER_SEASON_STORE, ACTION.LOADING) });
+
+  request()
+    .get(serverURLs.season_count)
+    .query(parsedFilter(filters))
+    .then(res => (
+      dispatch({
+        ...toBasicAction(
+          BROWSE_FILTER_SEASON_STORE,
+          ACTION.GET_SUCCESS
+        ),
+        id: objToSearchString(filters),
+        payload: res.body.results,
+      })
+    ))
+    .catch(err => dispatch(handleError(err, BROWSE_FILTER_SEASON_STORE)));
+};
+
 export const loadTags = (filters: Record<string, string>) => (dispatch: FilterDispatch) => {
   dispatch({ ...toBasicAction(BROWSE_FILTER_TAGS_STORE, ACTION.LOADING) });
 

diff --git a/src/browse/store/FilterReducer.ts b/src/browse/store/FilterReducer.ts
@@ -1,11 +1,12 @@
 import { combineReducers, Reducer } from 'redux';
 
 import ReduxHelper from '../../common/store/ReduxHelper';
-import { BROWSE_FILTER_COURSE_STORE, BROWSE_FILTER_CUISINE_STORE, BROWSE_FILTER_RATING_STORE, BROWSE_FILTER_TAGS_STORE, CategoryCount, FilterAction, FilterState, RatingCount } from './FilterTypes';
+import { BROWSE_FILTER_COURSE_STORE, BROWSE_FILTER_CUISINE_STORE, BROWSE_FILTER_RATING_STORE, BROWSE_FILTER_SEASON_STORE, BROWSE_FILTER_TAGS_STORE, CategoryCount, FilterAction, FilterState, RatingCount } from './FilterTypes';
 
 const defaultCourseState  = ReduxHelper.getMapReducerDefaultState<Array<CategoryCount>>(BROWSE_FILTER_COURSE_STORE);
 const defaultCuisineState = ReduxHelper.getMapReducerDefaultState<Array<CategoryCount>>(BROWSE_FILTER_CUISINE_STORE);
 const defaultRatingsState = ReduxHelper.getMapReducerDefaultState<Array<RatingCount>>(BROWSE_FILTER_RATING_STORE);
+const defaultSeasonState  = ReduxHelper.getMapReducerDefaultState<Array<CategoryCount>>(BROWSE_FILTER_SEASON_STORE);
 const defaultTagsState    = ReduxHelper.getMapReducerDefaultState<Array<RatingCount>>(BROWSE_FILTER_TAGS_STORE);
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -20,6 +21,7 @@ const filters: Reducer<FilterState, FilterAction> = combineReducers({
   [BROWSE_FILTER_COURSE_STORE]:  createFilterWithNamedType(defaultCourseState),
   [BROWSE_FILTER_CUISINE_STORE]: createFilterWithNamedType(defaultCuisineState),
   [BROWSE_FILTER_RATING_STORE]:  createFilterWithNamedType(defaultRatingsState),
+  [BROWSE_FILTER_SEASON_STORE]:  createFilterWithNamedType(defaultSeasonState),
   [BROWSE_FILTER_TAGS_STORE]:    createFilterWithNamedType(defaultTagsState),
 });
 

diff --git a/src/browse/store/FilterTypes.ts b/src/browse/store/FilterTypes.ts
@@ -17,19 +17,21 @@ export interface RatingCount {
 
 export const BROWSE_FILTER_STORE = 'browserFilter';
 
-export const BROWSE_FILTER_COURSE_STORE  = 'courses';
-export const BROWSE_FILTER_CUISINE_STORE = 'cuisines';
-export const BROWSE_FILTER_RATING_STORE  = 'ratings';
-export const BROWSE_FILTER_TAGS_STORE    = 'tags';
+export const BROWSE_FILTER_COURSE_STORE  = 'filter_courses';
+export const BROWSE_FILTER_CUISINE_STORE = 'filter_cuisines';
+export const BROWSE_FILTER_RATING_STORE  = 'filter_ratings';
+export const BROWSE_FILTER_SEASON_STORE  = 'filter_seasons';
+export const BROWSE_FILTER_TAGS_STORE    = 'filter_tags';
 
 export type CategoryCountState = MapReducerType<Array<CategoryCount>>;
 export type RatingCountState   = MapReducerType<Array<RatingCount>>;
 
 export type FilterAction   = GenericMapReducerAction<Array<CategoryCount>> | GenericMapReducerAction<Array<RatingCount>>;
 export type FilterDispatch = ReduxDispatch<FilterAction>;
 export interface FilterState {
-  courses:  CategoryCountState;
-  cuisines: CategoryCountState;
-  ratings:  RatingCountState;
-  tags:     CategoryCountState;
+  filter_courses:  CategoryCountState;
+  filter_cuisines: CategoryCountState;
+  filter_ratings:  RatingCountState;
+  filter_seasons:  CategoryCountState;
+  filter_tags:     CategoryCountState;
 }
diff --git a/src/browse/store/SearchActions.ts b/src/browse/store/SearchActions.ts
@@ -8,13 +8,14 @@ import { BROWSER_SEARCH_STORE, SearchDispatch, SearchResultDto, toSearchResult }
 import { parseCSV } from '../utilts/utility';
 
 const FILTER_QUERY_PARAMETER_MAPPING: Record<string, string> = {
-  cuisine: 'cuisine__slug',
+  author:  'author__username',
   course:  'course__slug',
+  cuisine: 'cuisine__slug',
+  season:  'season__slug',
   tag:     'tag__slug',
-  author:  'author__username',
 };
 
-const FIELDS = ['author', 'cuisine', 'course', 'directions', 'info', 'ordering', 'rating', 'source', 'tag', 'title'];
+const FIELDS = ['author', 'course', 'cuisine', 'directions', 'info', 'ordering', 'rating', 'season', 'source', 'tag', 'title'];
 
 export function extractSearchStringToFields(filters: Record<string, string>): Record<string, string> {
   if (!filters.search || !filters.search.includes(':')) return filters;

diff --git a/src/common/config.ts b/src/common/config.ts
@@ -9,10 +9,12 @@ export const serverURLs = {
   revoke_token: `${apiUrl}/accounts/revoke-auth-token/`,
   browse: `${apiUrl}/recipe/recipes/?fields=id,slug,title,pub_date,rating,rating_count,tags,photo_thumbnail,info`,
   mini_browse: `${apiUrl}/recipe/mini-browse/?fields=id,slug,title,pub_date,rating,rating_count,tags,photo_thumbnail,info`,
-  cuisine_count: `${apiUrl}/recipe_groups/cuisine-count/`,
-  cuisine: `${apiUrl}/recipe_groups/cuisine/`,
-  course_count: `${apiUrl}/recipe_groups/course-count/`,
   course: `${apiUrl}/recipe_groups/course/`,
+  course_count: `${apiUrl}/recipe_groups/course-count/`,
+  cuisine: `${apiUrl}/recipe_groups/cuisine/`,
+  cuisine_count: `${apiUrl}/recipe_groups/cuisine-count/`,
+  season: `${apiUrl}/recipe_groups/season/`,
+  season_count: `${apiUrl}/recipe_groups/season-count/`,
   ratings: `${apiUrl}/rating/rating/`,
   rating_count: `${apiUrl}/rating/rating-count/`,
   tag: `${apiUrl}/recipe_groups/tag/`,

diff --git a/src/demo/store/browse.ts b/src/demo/store/browse.ts
@@ -1,10 +1,11 @@
 /* eslint-disable func-names */
 
 import { CategoryCount, RatingCount } from '../../browse/store/FilterTypes';
-import { CourseDto, CuisineDto, RecipeDto, TagDto } from '../../recipe/store/RecipeTypes';
+import { CourseDto, CuisineDto, RecipeDto, SeasonDto, TagDto } from '../../recipe/store/RecipeTypes';
 import { demoCourses } from './courses';
 import { demoCuisines } from './cuisines';
 import { demoRecipes } from './recipe';
+import { demoSeasons } from './seasons';
 import { demoFindSearchRecipes } from './search';
 import { demoGetAllTags } from './tags';
 import { ObjectIterator, toQueryParams } from './utils';
@@ -37,6 +38,41 @@ export const ratingCountConfig = {
   },
 };
 
+export const courseCountConfig = {
+  pattern: '(.*)/recipe_groups/course-count/(.*)',
+  fixtures: function (match: Array<string>) {
+    // console.log(`fixtures running for courseCountConfig. match=${JSON.stringify(match)}`);
+
+    if (match.length < 3) return {};
+    const queryParams: URLSearchParams = toQueryParams(match[2]);
+    const resultRecipes: Array<RecipeDto> = demoFindSearchRecipes(demoRecipes, queryParams);
+
+    const allCourses: Array<CourseDto> = demoCourses;
+
+    const courseCounts: Array<CategoryCount> = [];
+    allCourses.forEach(c => {
+      courseCounts.push({
+        id:    c.id,
+        total: resultRecipes.filter(rec => rec.course?.title === c.title).length,
+        title: c.title,
+        slug:  c.title,
+      });
+    });
+
+    const result: ObjectIterator<CategoryCount> = {
+      count:    courseCounts.length,
+      next:     null,
+      previous: null,
+      results:  courseCounts,
+    };
+
+    return result;
+  },
+  get: function (_match: Array<string>, data: Record<string, string | number | boolean>) {
+    return { body : data };
+  },
+};
+
 export const cuisineCountConfig = {
   pattern: '(.*)/recipe_groups/cuisine-count/(.*)',
   fixtures: function (match: Array<string>) {
@@ -72,32 +108,32 @@ export const cuisineCountConfig = {
   },
 };
 
-export const courseCountConfig = {
-  pattern: '(.*)/recipe_groups/course-count/(.*)',
+export const seasonCountConfig = {
+  pattern: '(.*)/recipe_groups/season-count/(.*)',
   fixtures: function (match: Array<string>) {
-    // console.log(`fixtures running for courseCountConfig. match=${JSON.stringify(match)}`);
+    // console.log(`fixtures running for seasonCountConfig. match=${JSON.stringify(match)}`);
 
     if (match.length < 3) return {};
     const queryParams: URLSearchParams = toQueryParams(match[2]);
     const resultRecipes: Array<RecipeDto> = demoFindSearchRecipes(demoRecipes, queryParams);
 
-    const allCourses: Array<CourseDto> = demoCourses;
+    const allSeasons: Array<SeasonDto> = demoSeasons;
 
-    const courseCounts: Array<CategoryCount> = [];
-    allCourses.forEach(c => {
-      courseCounts.push({
+    const seasonCounts: Array<CategoryCount> = [];
+    allSeasons.forEach(c => {
+      seasonCounts.push({
         id:    c.id,
-        total: resultRecipes.filter(rec => rec.course?.title === c.title).length,
+        total: resultRecipes.filter(rec => rec.season?.title === c.title).length,
         title: c.title,
         slug:  c.title,
       });
     });
 
     const result: ObjectIterator<CategoryCount> = {
-      count:    courseCounts.length,
+      count:    seasonCounts.length,
       next:     null,
       previous: null,
-      results:  courseCounts,
+      results:  seasonCounts,
     };
 
     return result;