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:
parent
09bc15ddd3
commit
92a066d322
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