diff --git a/components/filters/FilterModal/index.module.scss b/components/filters/FilterModal/index.module.scss index e47ec8bb..e2b68ed2 100644 --- a/components/filters/FilterModal/index.module.scss +++ b/components/filters/FilterModal/index.module.scss @@ -14,6 +14,23 @@ } } +.notice { + background-color: var(--notice-bg); + border-radius: $input-corner; + + padding: $unit-2x; + display: flex; + align-items: center; + + p { + color: var(--notice-text); + + strong { + font-weight: $bold; + } + } +} + .fields { display: flex; flex-direction: column; diff --git a/components/filters/FilterModal/index.tsx b/components/filters/FilterModal/index.tsx index 9eab5c51..bc55ce0a 100644 --- a/components/filters/FilterModal/index.tsx +++ b/components/filters/FilterModal/index.tsx @@ -1,7 +1,7 @@ import React, { useEffect, useState } from 'react' import { getCookie, setCookie } from 'cookies-next' import { useRouter } from 'next/router' -import { useTranslation } from 'react-i18next' +import { Trans, useTranslation } from 'react-i18next' import { Dialog, DialogTrigger } from '~components/common/Dialog' import DialogHeader from '~components/common/DialogHeader' @@ -22,6 +22,7 @@ import styles from './index.module.scss' interface Props extends DialogProps { defaultFilterSet: FilterSet filterSet: FilterSet + persistFilters?: boolean sendAdvancedFilters: (filters: FilterSet) => void } @@ -126,7 +127,10 @@ const FilterModal = (props: Props) => { if (maxButtonsCount) filters.button_count = maxButtonsCount if (maxTurnsCount) filters.turn_count = maxTurnsCount - setCookie('filters', filters, { path: '/' }) + if (props.persistFilters) { + setCookie('filters', filters, { path: '/' }) + } + props.sendAdvancedFilters(filters) openChange() } @@ -311,6 +315,7 @@ const FilterModal = (props: Props) => { onOpenChange={() => openSelect('charge_attack')} onClose={() => setChargeAttackOpen(false)} onChange={handleChargeAttackValueChange} + autoFocus={true} > {t('modals.filters.options.on_and_off')} @@ -375,6 +380,20 @@ const FilterModal = (props: Props) => { /> ) + const filterNotice = () => { + if (props.persistFilters) return null + return ( +
+

+ + Filters set on user profiles and in{' '} + Your saved teams will not be saved + +

+
+ ) + } + return ( {props.children} @@ -387,6 +406,7 @@ const FilterModal = (props: Props) => { >
+ {filterNotice()} {chargeAttackField()} {fullAutoField()} {autoGuardField()} @@ -421,4 +441,8 @@ const FilterModal = (props: Props) => { ) } +FilterModal.defaultProps = { + persistFilters: true, +} + export default FilterModal