From d0399e3c0d450487cc8e2396c15eaff2f426d22e Mon Sep 17 00:00:00 2001 From: kim Date: Fri, 25 Oct 2024 13:50:19 +0200 Subject: [PATCH] refactor: apply PR requested changes --- src/components/collection/Collection.tsx | 2 +- .../collection/summary/SummaryDetails.tsx | 8 +++----- src/components/filters/CategoryFilter.tsx | 13 ++++++------- src/components/filters/Filter.tsx | 18 ++++++++---------- src/components/filters/FilterHeader.tsx | 6 +++--- src/components/filters/FilterPopper.tsx | 7 +++---- src/components/filters/LangFilter.tsx | 15 +++++++-------- 7 files changed, 31 insertions(+), 38 deletions(-) diff --git a/src/components/collection/Collection.tsx b/src/components/collection/Collection.tsx index 93082dfc..121561b0 100644 --- a/src/components/collection/Collection.tsx +++ b/src/components/collection/Collection.tsx @@ -76,7 +76,7 @@ const Collection = ({ id }: Props) => { canPublish={canPublish} isPublished={ isLoadingPublishedEntry || - (!!itemPublishEntry && !isErrorPublishedEntry) + (Boolean(itemPublishEntry) && !isErrorPublishedEntry) } currentMember={currentMember} /> diff --git a/src/components/collection/summary/SummaryDetails.tsx b/src/components/collection/summary/SummaryDetails.tsx index 6c3e6d63..9cfb1e90 100644 --- a/src/components/collection/summary/SummaryDetails.tsx +++ b/src/components/collection/summary/SummaryDetails.tsx @@ -127,11 +127,9 @@ const SummaryDetails: React.FC = ({ ?.filter((c) => c.category.type === CategoryType.Discipline) ?.map((c) => c.category); - let langValue = langs[DEFAULT_LANG]; - if (collection.lang in langs) { - // @ts-ignore - langValue = langs[collection.lang]; - } + const langKey = collection.lang in langs ? collection.lang : DEFAULT_LANG; + // @ts-ignore + const langValue = langs[langKey]; return ( void; onClearOptions: () => void; isLoading: boolean; @@ -27,9 +26,9 @@ export function CategoryFilter({ onOptionChange, onClearOptions, options, - selectedOptions, + selectedOptionIds, isLoading, -}: FilterProps) { +}: CategoryFilterProps) { const { t: translateCategories } = useCategoriesTranslation(); return ( @@ -39,7 +38,7 @@ export function CategoryFilter({ title={title} isLoading={isLoading} options={options?.map((c) => [c.id, translateCategories(c.name)])} - selectedOptions={selectedOptions} + selectedOptionIds={selectedOptionIds} onOptionChange={onOptionChange} onClearOptions={onClearOptions} /> diff --git a/src/components/filters/Filter.tsx b/src/components/filters/Filter.tsx index 0e1e706e..33f1f685 100644 --- a/src/components/filters/Filter.tsx +++ b/src/components/filters/Filter.tsx @@ -8,10 +8,9 @@ import { useLibraryTranslation } from '../../config/i18n'; import LIBRARY from '../../langs/constants'; import { FilterPopper, FilterPopperProps } from './FilterPopper'; -type FilterProps = { +export type FilterProps = { title: string; - // IDs of selected options. - selectedOptions: string[]; + selectedOptionIds: string[]; isLoading?: boolean; onClearOptions: FilterPopperProps['onClearOptions']; onOptionChange: FilterPopperProps['onOptionChange']; @@ -20,10 +19,9 @@ type FilterProps = { options?: FilterPopperProps['options']; }; -// eslint-disable-next-line import/prefer-default-export export const Filter = ({ title, - selectedOptions, + selectedOptionIds, isLoading, onClearOptions, onOptionChange, @@ -85,16 +83,16 @@ export const Filter = ({ whiteSpace="nowrap" width="100%" textAlign="left" - color={selectedOptions.length ? 'black' : 'gray'} + color={selectedOptionIds.length ? 'black' : 'gray'} variant="h6" textOverflow="ellipsis" overflow="hidden" > - {options?.find((o) => o[0] === selectedOptions[0])?.[1] ?? + {options?.find((o) => o[0] === selectedOptionIds[0])?.[1] ?? t(LIBRARY.FILTER_DROPDOWN_NO_FILTER)} - {selectedOptions.length > 1 && ( + {selectedOptionIds.length > 1 && ( - {`+${selectedOptions.length - 1}`} + {`+${selectedOptionIds.length - 1}`} )} @@ -128,7 +126,7 @@ export const Filter = ({ open={showPopper} options={options} anchorEl={popperAnchor.current} - selectedOptions={selectedOptions} + selectedOptionIds={selectedOptionIds} onOptionChange={onOptionChange} onClearOptions={onClearOptions} /> diff --git a/src/components/filters/FilterHeader.tsx b/src/components/filters/FilterHeader.tsx index 87317a1f..578209f7 100644 --- a/src/components/filters/FilterHeader.tsx +++ b/src/components/filters/FilterHeader.tsx @@ -172,7 +172,7 @@ const FilterHeader: FC = ({ category={CategoryType.Level} title={translateCategories(CategoryType.Level)} options={levelList} - selectedOptions={selectedLevelOptions} + selectedOptionIds={selectedLevelOptions} onOptionChange={onFilterChanged} onClearOptions={() => onClearCategory(levelList?.map((l) => l.id))} isLoading={isCategoriesLoading} @@ -182,7 +182,7 @@ const FilterHeader: FC = ({ category={CategoryType.Discipline} title={translateCategories(CategoryType.Discipline)} options={disciplineList} - selectedOptions={selectedDisciplineOptions} + selectedOptionIds={selectedDisciplineOptions} onOptionChange={onFilterChanged} onClearOptions={() => onClearCategory(disciplineList?.map((d) => d.id))} isLoading={isCategoriesLoading} @@ -190,7 +190,7 @@ const FilterHeader: FC = ({ , ]; diff --git a/src/components/filters/FilterPopper.tsx b/src/components/filters/FilterPopper.tsx index 4149ea86..53b48fed 100644 --- a/src/components/filters/FilterPopper.tsx +++ b/src/components/filters/FilterPopper.tsx @@ -33,8 +33,7 @@ export type FilterPopperProps = { open: boolean; anchorEl: HTMLElement | null; options?: [k: string, v: string][]; - // IDs of selected options. - selectedOptions: string[]; + selectedOptionIds: string[]; onOptionChange: (id: string, newSelected: boolean) => void; onClearOptions: () => void; }; @@ -46,7 +45,7 @@ export const FilterPopper = React.forwardRef( anchorEl, onOptionChange, open, - selectedOptions, + selectedOptionIds, onClearOptions, }, ref, @@ -67,7 +66,7 @@ export const FilterPopper = React.forwardRef( {options?.sort(compare).map(([k, v], idx) => { - const isSelected = selectedOptions.includes(k); + const isSelected = selectedOptionIds.includes(k); return ( void; }; // eslint-disable-next-line react/function-component-definition export function LangFilter({ title, - selectedOptions, + selectedOptionIds, setLangs, }: LangFilterProps) { const onLangChange = (option: string) => { - if (selectedOptions.includes(option)) { - setLangs(selectedOptions.filter((l) => l !== option)); + if (selectedOptionIds.includes(option)) { + setLangs(selectedOptionIds.filter((l) => l !== option)); } else { - setLangs([...selectedOptions, option]); + setLangs([...selectedOptionIds, option]); } }; @@ -36,7 +35,7 @@ export function LangFilter({ id={SEARCH_FILTER_LANG_ID} title={title} options={Object.entries(langs)} - selectedOptions={selectedOptions} + selectedOptionIds={selectedOptionIds} onOptionChange={onLangChange} onClearOptions={clearLang} buttonId={SEARCH_FILTER_POPPER_LANG_ID}