[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:
Manav Rathi 2024-04-30 12:38:57 +05:30 committed by GitHub
commit 2099663a93
No known key found for this signature in database
GPG key ID: B5690EEEBB952194

View file

@ -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