Revert "search-bar component added"

This reverts commit 4ed194f397.

Two main functional issues was:

- When trying to upload files, if I would search something without results, the
  dialog would just close.

- 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.
This commit is contained in:
Manav Rathi 2024-04-30 12:31:24 +05:30
parent 09bc15ddd3
commit 92a066d322
No known key found for this signature in database

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