External/5chan
1
0
Fork 0
mirror of https://github.com/bitsocialnet/5chan.git synced 2026-08-03 07:41:04 +02:00
Code Issues Packages Projects Releases Wiki Activity

Revert "fix(catalog filters): clicking "hide threads without images" would run the filter before clicking save"

Browse Source 
This reverts commit 319ff28b51.
This commit is contained in:
Tom (plebeius.eth)
2024-09-11 21:34:25 +02:00
parent f232890172
commit 1cfd823ad9
1 changed files with 24 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/views/catalog/catalog-filters/catalog-filters.tsx
+24 -65
View File
@@ -5,21 +5,15 @@ import { isAllView, isCatalogView } from '../../../lib/utils/view-utils';
import useCatalogFiltersStore from '../../../stores/use-catalog-filters-store'; import useCatalogFiltersStore from '../../../stores/use-catalog-filters-store';
import styles from './catalog-filters.module.css'; import styles from './catalog-filters.module.css';
const FiltersTable = ({ const FiltersTable = ({ onSave }: { onSave: () => void }) => {
localFilterItems,
setLocalFilterItems,
onSave,
}: {
localFilterItems: any[];
setLocalFilterItems: React.Dispatch<React.SetStateAction<any[]>>;
onSave: () => void;
}) => {
const { t } = useTranslation(); const { t } = useTranslation();
const { saveAndApplyFilters } = useCatalogFiltersStore(); const { filterItems, saveAndApplyFilters } = useCatalogFiltersStore();
const [localFilterItems, setLocalFilterItems] = useState(filterItems);
const handleAddFilter = useCallback(() => { const handleAddFilter = useCallback(() => {
setLocalFilterItems((prev) => [...prev, { text: '', enabled: true }]); setLocalFilterItems((prev) => [...prev, { text: '', enabled: true }]);
}, [setLocalFilterItems]); }, []);
const handleSave = useCallback(() => { const handleSave = useCallback(() => {
const nonEmptyFilters = localFilterItems.filter((item) => item.text.trim() !== ''); const nonEmptyFilters = localFilterItems.filter((item) => item.text.trim() !== '');
@@ -27,31 +21,22 @@ const FiltersTable = ({
onSave(); onSave();
}, [saveAndApplyFilters, localFilterItems, onSave]); }, [saveAndApplyFilters, localFilterItems, onSave]);
const updateLocalFilterItem = useCallback( const updateLocalFilterItem = useCallback((index: number, item: any) => {
(index: number, item: any) => { setLocalFilterItems((prev) => prev.map((f, i) => (i === index ? item : f)));
setLocalFilterItems((prev) => prev.map((f, i) => (i === index ? item : f))); }, []);
},
[setLocalFilterItems],
);
const removeLocalFilterItem = useCallback( const removeLocalFilterItem = useCallback((index: number) => {
(index: number) => { setLocalFilterItems((prev) => prev.filter((_, i) => i !== index));
setLocalFilterItems((prev) => prev.filter((_, i) => i !== index)); }, []);
},
[setLocalFilterItems],
);
const moveLocalFilterItemUp = useCallback( const moveLocalFilterItemUp = useCallback((index: number) => {
(index: number) => { if (index === 0) return;
if (index === 0) return; setLocalFilterItems((prev) => {
setLocalFilterItems((prev) => { const newItems = [...prev];
const newItems = [...prev]; [newItems[index - 1], newItems[index]] = [newItems[index], newItems[index - 1]];
[newItems[index - 1], newItems[index]] = [newItems[index], newItems[index - 1]]; return newItems;
return newItems; });
}); }, []);
},
[setLocalFilterItems],
);
return ( return (
<table className={styles.filtersTable}> <table className={styles.filtersTable}>
@@ -115,38 +100,12 @@ const FiltersTable = ({
const FiltersModal = ({ closeModal }: { closeModal: () => void }) => { const FiltersModal = ({ closeModal }: { closeModal: () => void }) => {
const { t } = useTranslation(); const { t } = useTranslation();
const { showAdultBoards, setShowAdultBoards, showGoreBoards, setShowGoreBoards, showTextOnlyThreads, setShowTextOnlyThreads, filterItems, saveAndApplyFilters } = const { showAdultBoards, setShowAdultBoards, showGoreBoards, setShowGoreBoards, showTextOnlyThreads, setShowTextOnlyThreads } = useCatalogFiltersStore();
useCatalogFiltersStore();
const [localShowAdultBoards, setLocalShowAdultBoards] = useState(showAdultBoards);
const [localShowGoreBoards, setLocalShowGoreBoards] = useState(showGoreBoards);
const [localShowTextOnlyThreads, setLocalShowTextOnlyThreads] = useState(showTextOnlyThreads);
const [localFilterItems, setLocalFilterItems] = useState(filterItems);
const location = useLocation(); const location = useLocation();
const params = useParams(); const params = useParams();
const isInCatalogView = isCatalogView(location.pathname, params); const isInCatalogView = isCatalogView(location.pathname, params);
const isInAllView = isAllView(location.pathname, params); const isInAllView = isAllView(location.pathname, params);
const handleSave = useCallback(() => {
setShowAdultBoards(localShowAdultBoards);
setShowGoreBoards(localShowGoreBoards);
setShowTextOnlyThreads(localShowTextOnlyThreads);
const nonEmptyFilters = localFilterItems.filter((item) => item.text.trim() !== '');
saveAndApplyFilters(nonEmptyFilters);
closeModal();
}, [
localShowAdultBoards,
localShowGoreBoards,
localShowTextOnlyThreads,
localFilterItems,
setShowAdultBoards,
setShowGoreBoards,
setShowTextOnlyThreads,
saveAndApplyFilters,
closeModal,
]);
return ( return (
<> <>
<div className={styles.overlay} onClick={closeModal} /> <div className={styles.overlay} onClick={closeModal} />
@@ -159,7 +118,7 @@ const FiltersModal = ({ closeModal }: { closeModal: () => void }) => {
{isInCatalogView && ( {isInCatalogView && (
<div> <div>
<label className='capitalize'> <label className='capitalize'>
<input type='checkbox' checked={!localShowTextOnlyThreads} onChange={(e) => setLocalShowTextOnlyThreads(!e.target.checked)} /> <input type='checkbox' checked={!showTextOnlyThreads} onChange={(e) => setShowTextOnlyThreads(!e.target.checked)} />
{t('hide_threads_without_images')} {t('hide_threads_without_images')}
</label> </label>
</div> </div>
@@ -168,20 +127,20 @@ const FiltersModal = ({ closeModal }: { closeModal: () => void }) => {
<div className={styles.nsfwLabels}> <div className={styles.nsfwLabels}>
<div> <div>
<label> <label>
<input type='checkbox' checked={!localShowGoreBoards} onChange={(e) => setLocalShowGoreBoards(!e.target.checked)} /> <input type='checkbox' checked={!showGoreBoards} onChange={(e) => setShowGoreBoards(!e.target.checked)} />
hide gore content hide gore content
</label> </label>
</div> </div>
<div> <div>
<label> <label>
<input type='checkbox' checked={!localShowAdultBoards} onChange={(e) => setLocalShowAdultBoards(!e.target.checked)} /> <input type='checkbox' checked={!showAdultBoards} onChange={(e) => setShowAdultBoards(!e.target.checked)} />
hide adult content hide adult content
</label> </label>
</div> </div>
</div> </div>
)} )}
</div> </div>
{isInCatalogView && <FiltersTable localFilterItems={localFilterItems} setLocalFilterItems={setLocalFilterItems} onSave={handleSave} />} {isInCatalogView && <FiltersTable onSave={closeModal} />}
</div> </div>
</> </>
); );