Finally facing the consequences of hacky code

By fixing it with more hacky code
This commit is contained in:
Lim Chee Aun 2024-03-26 23:45:22 +08:00
parent 0a695410d9
commit 7049166b40

View file

@ -180,6 +180,8 @@ function Filters() {
); );
} }
let _id = 1;
const incID = () => _id++;
function FiltersAddEdit({ filter, onClose }) { function FiltersAddEdit({ filter, onClose }) {
const { masto } = api(); const { masto } = api();
const [uiState, setUIState] = useState('default'); const [uiState, setUIState] = useState('default');
@ -193,7 +195,12 @@ function FiltersAddEdit({ filter, onClose }) {
// Hacky way of handling removed keywords for both existing and new ones // Hacky way of handling removed keywords for both existing and new ones
const [removedKeywordIDs, setRemovedKeywordIDs] = useState([]); const [removedKeywordIDs, setRemovedKeywordIDs] = useState([]);
const [removedNewKeywordIndices, setRemovedNewKeywordIndices] = useState([]); const [removedKeyword_IDs, setRemovedKeyword_IDs] = useState([]);
const filteredEditKeywords = editKeywords.filter(
(k) =>
!removedKeywordIDs.includes(k.id) && !removedKeyword_IDs.includes(k._id),
);
return ( return (
<div class="sheet" id="filters-add-edit-modal"> <div class="sheet" id="filters-add-edit-modal">
@ -335,16 +342,12 @@ function FiltersAddEdit({ filter, onClose }) {
</label> </label>
</div> </div>
<div class="filter-form-keywords" ref={keywordsRef}> <div class="filter-form-keywords" ref={keywordsRef}>
{editKeywords.length ? ( {filteredEditKeywords.length ? (
<ul class="filter-keywords"> <ul class="filter-keywords">
{editKeywords.map((k, index) => { {filteredEditKeywords.map((k) => {
const { id, keyword, wholeWord } = k; const { id, keyword, wholeWord, _id } = k;
const removed =
removedKeywordIDs.includes(id) ||
removedNewKeywordIndices.includes(index);
if (removed) return null;
return ( return (
<li key={`${index}-${id}`}> <li key={`${id}-${_id}`}>
<input <input
type="hidden" type="hidden"
name="keyword_attributes[][id]" name="keyword_attributes[][id]"
@ -376,12 +379,9 @@ function FiltersAddEdit({ filter, onClose }) {
if (id) { if (id) {
removedKeywordIDs.push(id); removedKeywordIDs.push(id);
setRemovedKeywordIDs([...removedKeywordIDs]); setRemovedKeywordIDs([...removedKeywordIDs]);
} else { } else if (_id) {
// If no id, remove by index removedKeyword_IDs.push(_id);
removedNewKeywordIndices.push(index); setRemovedKeyword_IDs([...removedKeyword_IDs]);
setRemovedNewKeywordIndices([
...removedNewKeywordIndices,
]);
} }
}} }}
> >
@ -405,6 +405,7 @@ function FiltersAddEdit({ filter, onClose }) {
setEditKeywords([ setEditKeywords([
...editKeywords, ...editKeywords,
{ {
_id: incID(),
keyword: '', keyword: '',
wholeWord: true, wholeWord: true,
}, },
@ -421,10 +422,10 @@ function FiltersAddEdit({ filter, onClose }) {
> >
Add keyword Add keyword
</button>{' '} </button>{' '}
{editKeywords?.length > 1 && ( {filteredEditKeywords?.length > 1 && (
<small class="insignificant"> <small class="insignificant">
{editKeywords.length} keyword {filteredEditKeywords.length} keyword
{editKeywords.length === 1 ? '' : 's'} {filteredEditKeywords.length === 1 ? '' : 's'}
</small> </small>
)} )}
</footer> </footer>