xwx.moe/el.xwx.moe
xwx.moe/ el.xwx.moe
1
0
Disbranĉigi 0
Fontkodo Issues Tirpetoj Actions Packages Projects Eldonoj Wiki Activity

Refactor collection selection component and update navbar styling

This commit is contained in:
daniel31x13 2024-02-28 10:33:53 -05:00
parent 4442ce8705
commit f77ef58396
2 changed files with 31 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
components/CollectionListing.tsx
View File

@ -15,7 +15,7 @@ type Props = {
links: boolean; links: boolean;
}; };
const CollectionSelection = ({ links }: Props) => { const CollectionListing = ({ links }: Props) => {
const { collections } = useCollectionStore(); const { collections } = useCollectionStore();
const { account, updateAccount } = useAccountStore(); const { account, updateAccount } = useAccountStore();
// Use local state to store the collection order so we don't have to wait for a response from the API to update the UI // Use local state to store the collection order so we don't have to wait for a response from the API to update the UI
@ -29,30 +29,38 @@ const CollectionSelection = ({ links }: Props) => {
setActive(router.asPath); setActive(router.asPath);
setLocalCollectionOrder(account.collectionOrder || []); setLocalCollectionOrder(account.collectionOrder || []);
if (!account.collectionOrder || account.collectionOrder.length === 0) { // if a collection wasn't in the collectionOrder, add it to the end
if (account.username) {
if (!account.collectionOrder || account.collectionOrder.length === 0)
updateAccount({ updateAccount({
...account, ...account,
collectionOrder: collections collectionOrder: collections
.filter((e) => e.parentId === null) // Filter out collections with non-null parentId .filter((e) => e.parentId === null) // Filter out collections with non-null parentId
.map((e) => e.id as number), // Use "as number" to assert that e.id is a number .map((e) => e.id as number), // Use "as number" to assert that e.id is a number
}); });
} else {
const newCollectionOrder: number[] = [
...(account.collectionOrder || []),
];
// if a collection wasn't in the collectionOrder, add it to the end collections?.forEach((collection) => {
collections.forEach((collection) => {
if ( if (
!account.collectionOrder.includes(collection.id as number) && account.username &&
!newCollectionOrder.includes(collection.id as number) &&
(!collection.parentId || collection.ownerId !== account.id) (!collection.parentId || collection.ownerId !== account.id)
) { ) {
updateAccount({ newCollectionOrder.push(collection.id as number);
...account,
collectionOrder: [
...account.collectionOrder,
collection.id as number,
],
});
} }
}); });
if (newCollectionOrder.length > account.collectionOrder.length) {
updateAccount({
...account,
collectionOrder: newCollectionOrder,
});
}
}
}
}, [router, collections, account]); }, [router, collections, account]);
return ( return (
@ -119,7 +127,7 @@ const CollectionSelection = ({ links }: Props) => {
); );
}; };
export default CollectionSelection; export default CollectionListing;
const CollectionItem = ({ const CollectionItem = ({
collection, collection,
@ -166,7 +174,7 @@ const CollectionItem = ({
{...props} {...props}
className={`${ className={`${
active === `/collections/${collection.id}` active === `/collections/${collection.id}`
? "bg-primary/20" ? "bg-primary/20 is-active"
: "hover:bg-neutral/20" : "hover:bg-neutral/20"
} duration-100 rounded-md flex w-full items-center cursor-pointer mb-1 px-2 gap-1`} } duration-100 rounded-md flex w-full items-center cursor-pointer mb-1 px-2 gap-1`}
> >

2
components/Navbar.tsx
View File

@ -56,7 +56,7 @@ export default function Navbar() {
setSidebar(true); setSidebar(true);
document.body.style.overflow = "hidden"; document.body.style.overflow = "hidden";
}} }}
className="text-neutral btn btn-square btn-sm btn-ghost lg:hidden hidden sm:inline-flex" className="text-neutral btn btn-square btn-sm btn-ghost lg:hidden sm:inline-flex"
> >
<i className="bi-list text-2xl leading-none"></i> <i className="bi-list text-2xl leading-none"></i>
</div> </div>