[web] Revert "search-bar component added" (#1561)
This reverts commit 4ed194f397
.
@daviddeepan I had to revert your PR unfortunately.
Two main functional issues was:
- When trying to upload files, if I would search something without
results, the dialog would just close instantly.
- As a user, I expect to be able to move out of the search bar with
escape. However, pressing escape closes the whole dialog, causing the
user's drag and dropped or selected files to be lost. This is not
specifically a problem with the code added in this commit, however this
UX will need to be fixed in some way before introducing the search bar.
One medium issue:
- The dialog box kept changing size when I searched. This is visually
jarring.
Other minor issues:
- The input element did not match the look and feel for the rest of the
search input elements in the app. Aligning the search bar to the left
and right of the album thumbnails and using the MUI Input element (as
our code uses MUI elements in other places) might've fixed it.
- There were various debugging console.logs left over, once of which
even seemed like a case we need to handle.
- The strings were not localized.
---
Again, I appreciate your effort, but I think let us leave this for now,
we can come back to it in the future after having thought more about the
UX.
This commit is contained in:
commit
2099663a93
1 changed files with 5 additions and 33 deletions
|
@ -39,7 +39,6 @@ interface Props {
|
|||
collections: Collection[];
|
||||
collectionSummaries: CollectionSummaries;
|
||||
}
|
||||
|
||||
function CollectionSelector({
|
||||
attributes,
|
||||
collectionSummaries,
|
||||
|
@ -47,7 +46,7 @@ function CollectionSelector({
|
|||
...props
|
||||
}: Props) {
|
||||
const appContext = useContext(AppContext);
|
||||
const [searchQuery, setSearchQuery] = useState("");
|
||||
|
||||
const [collectionsToShow, setCollectionsToShow] = useState<
|
||||
CollectionSummary[]
|
||||
>([]);
|
||||
|
@ -82,7 +81,6 @@ function CollectionSelector({
|
|||
return isMoveToAllowedCollection(type);
|
||||
}
|
||||
})
|
||||
|
||||
.sort((a, b) => {
|
||||
return a.name.localeCompare(b.name);
|
||||
})
|
||||
|
@ -91,24 +89,15 @@ function CollectionSelector({
|
|||
COLLECTION_SORT_ORDER.get(a.type) -
|
||||
COLLECTION_SORT_ORDER.get(b.type)
|
||||
);
|
||||
})
|
||||
.filter((collection) =>
|
||||
collection.name
|
||||
.toLowerCase()
|
||||
.includes(searchQuery.toLowerCase()),
|
||||
);
|
||||
});
|
||||
if (collectionsToShow.length === 0) {
|
||||
if (searchQuery !== "") {
|
||||
return console.log("No Albums with that name...");
|
||||
} else {
|
||||
props.onClose();
|
||||
attributes.showNextModal();
|
||||
}
|
||||
props.onClose();
|
||||
attributes.showNextModal();
|
||||
}
|
||||
setCollectionsToShow(collectionsToShow);
|
||||
};
|
||||
main();
|
||||
}, [collectionSummaries, attributes, props.open, searchQuery]);
|
||||
}, [collectionSummaries, attributes, props.open]);
|
||||
|
||||
if (!collectionsToShow?.length) {
|
||||
return <></>;
|
||||
|
@ -132,12 +121,6 @@ function CollectionSelector({
|
|||
props.onClose();
|
||||
};
|
||||
|
||||
const handleSearchInputChange = (e) => {
|
||||
if (e) {
|
||||
setSearchQuery(e.target.value);
|
||||
} else console.log("No collections to show.....");
|
||||
};
|
||||
|
||||
return (
|
||||
<AllCollectionDialog
|
||||
onClose={onUserTriggeredClose}
|
||||
|
@ -159,17 +142,6 @@ function CollectionSelector({
|
|||
? t("UNHIDE_TO_COLLECTION")
|
||||
: t("SELECT_COLLECTION")}
|
||||
</DialogTitleWithCloseButton>
|
||||
<input
|
||||
style={{
|
||||
height: "50px",
|
||||
fontSize: "16px",
|
||||
borderRadius: "10px",
|
||||
margin: "10px",
|
||||
}}
|
||||
placeholder="Search Albums..."
|
||||
value={searchQuery}
|
||||
onChange={handleSearchInputChange}
|
||||
/>
|
||||
<DialogContent sx={{ "&&&": { padding: 0 } }}>
|
||||
<FlexWrapper flexWrap="wrap" gap={"4px"} padding={"16px"}>
|
||||
<AddCollectionButton
|
||||
|
|
Loading…
Add table
Reference in a new issue