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 styles from './catalog-filters.module.css';
const FiltersTable = ({
localFilterItems,
setLocalFilterItems,
onSave,
}: {
localFilterItems: any[];
setLocalFilterItems: React.Dispatch<React.SetStateAction<any[]>>;
onSave: () => void;
}) => {
const FiltersTable = ({ onSave }: { onSave: () => void }) => {
const { t } = useTranslation();
const { saveAndApplyFilters } = useCatalogFiltersStore();
const { filterItems, saveAndApplyFilters } = useCatalogFiltersStore();
const [localFilterItems, setLocalFilterItems] = useState(filterItems);
const handleAddFilter = useCallback(() => {
setLocalFilterItems((prev) => [...prev, { text: '', enabled: true }]);
}, [setLocalFilterItems]);
}, []);
const handleSave = useCallback(() => {
const nonEmptyFilters = localFilterItems.filter((item) => item.text.trim() !== '');
@@ -27,31 +21,22 @@ const FiltersTable = ({
onSave();
}, [saveAndApplyFilters, localFilterItems, onSave]);
const updateLocalFilterItem = useCallback(
(index: number, item: any) => {
setLocalFilterItems((prev) => prev.map((f, i) => (i === index ? item : f)));
},
[setLocalFilterItems],
);
const updateLocalFilterItem = useCallback((index: number, item: any) => {
setLocalFilterItems((prev) => prev.map((f, i) => (i === index ? item : f)));
}, []);
const removeLocalFilterItem = useCallback(
(index: number) => {
setLocalFilterItems((prev) => prev.filter((_, i) => i !== index));
},
[setLocalFilterItems],
);
const removeLocalFilterItem = useCallback((index: number) => {
setLocalFilterItems((prev) => prev.filter((_, i) => i !== index));
}, []);
const moveLocalFilterItemUp = useCallback(
(index: number) => {
if (index === 0) return;
setLocalFilterItems((prev) => {
const newItems = [...prev];
[newItems[index - 1], newItems[index]] = [newItems[index], newItems[index - 1]];
return newItems;
});
},
[setLocalFilterItems],
);
const moveLocalFilterItemUp = useCallback((index: number) => {
if (index === 0) return;
setLocalFilterItems((prev) => {
const newItems = [...prev];
[newItems[index - 1], newItems[index]] = [newItems[index], newItems[index - 1]];
return newItems;
});
}, []);
return (
<table className={styles.filtersTable}>
@@ -115,38 +100,12 @@ const FiltersTable = ({
const FiltersModal = ({ closeModal }: { closeModal: () => void }) => {
const { t } = useTranslation();
const { showAdultBoards, setShowAdultBoards, showGoreBoards, setShowGoreBoards, showTextOnlyThreads, setShowTextOnlyThreads, filterItems, saveAndApplyFilters } =
useCatalogFiltersStore();
const [localShowAdultBoards, setLocalShowAdultBoards] = useState(showAdultBoards);
const [localShowGoreBoards, setLocalShowGoreBoards] = useState(showGoreBoards);
const [localShowTextOnlyThreads, setLocalShowTextOnlyThreads] = useState(showTextOnlyThreads);
const [localFilterItems, setLocalFilterItems] = useState(filterItems);
const { showAdultBoards, setShowAdultBoards, showGoreBoards, setShowGoreBoards, showTextOnlyThreads, setShowTextOnlyThreads } = useCatalogFiltersStore();
const location = useLocation();
const params = useParams();
const isInCatalogView = isCatalogView(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 (
<>
<div className={styles.overlay} onClick={closeModal} />
@@ -159,7 +118,7 @@ const FiltersModal = ({ closeModal }: { closeModal: () => void }) => {
{isInCatalogView && (
<div>
<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')}
</label>
</div>
@@ -168,20 +127,20 @@ const FiltersModal = ({ closeModal }: { closeModal: () => void }) => {
<div className={styles.nsfwLabels}>
<div>
<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
</label>
</div>
<div>
<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
</label>
</div>
</div>
)}
</div>
{isInCatalogView && <FiltersTable localFilterItems={localFilterItems} setLocalFilterItems={setLocalFilterItems} onSave={handleSave} />}
{isInCatalogView && <FiltersTable onSave={closeModal} />}
</div>
</>
);