This commit is contained in:
Isaac Wise 2024-02-22 02:51:24 -06:00
parent dbfdb587b6
commit d2e59d48c2
5 changed files with 60 additions and 42 deletions

View File

@ -4,7 +4,12 @@ import { CollectionIncludingMembersAndLinkCount } from "@/types/global";
import Link from "next/link";
import { useRouter } from "next/router";
import React, { useEffect, useState } from "react";
import { DragDropContext, Draggable, DraggableProvided, Droppable } from "react-beautiful-dnd";
import {
DragDropContext,
Draggable,
DraggableProvided,
Droppable,
} from "react-beautiful-dnd";
type Props = {
links: boolean;
@ -14,7 +19,9 @@ const CollectionSelection = ({ links }: Props) => {
const { collections } = useCollectionStore();
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
const [localCollectionOrder, setLocalCollectionOrder] = useState<number[] | []>([]);
const [localCollectionOrder, setLocalCollectionOrder] = useState<
number[] | []
>([]);
const [active, setActive] = useState("");
const router = useRouter();
@ -40,8 +47,15 @@ const CollectionSelection = ({ links }: Props) => {
}
const updatedCollectionOrder = [...account.collectionOrder];
const [movedCollectionId] = updatedCollectionOrder.splice(result.source.index, 1);
updatedCollectionOrder.splice(result.destination.index, 0, movedCollectionId);
const [movedCollectionId] = updatedCollectionOrder.splice(
result.source.index,
1
);
updatedCollectionOrder.splice(
result.destination.index,
0,
movedCollectionId
);
// Update local state with the new collection order
setLocalCollectionOrder(updatedCollectionOrder);
@ -134,7 +148,8 @@ const CollectionItem = ({
<div
ref={innerRef}
{...props}
className={`${active === `/collections/${collection.id}`
className={`${
active === `/collections/${collection.id}`
? "bg-primary/20"
: "hover:bg-neutral/20"
} duration-100 rounded-md flex w-full items-center cursor-pointer mb-1 px-2 gap-1`}
@ -144,7 +159,8 @@ const CollectionItem = ({
className="flex items-center"
>
<i
className={`bi-chevron-down ${isOpen ? "rotate-reverse" : "rotate"
className={`bi-chevron-down ${
isOpen ? "rotate-reverse" : "rotate"
}`}
></i>
</button>
@ -189,7 +205,8 @@ const CollectionItem = ({
<div ref={innerRef} {...props}>
<Link href={`/collections/${collection.id}`} className="w-full">
<div
className={`${active === `/collections/${collection.id}`
className={`${
active === `/collections/${collection.id}`
? "bg-primary/20"
: "hover:bg-neutral/20"
} duration-100 py-1 px-2 cursor-pointer flex items-center gap-2 w-full rounded-md h-8 capitalize mb-1`}

View File

@ -41,11 +41,11 @@ export default function Sidebar({ className }: { className?: string }) {
setActive(router.asPath);
}, [router, collections]);
return (
<div
id="sidebar"
className={`bg-base-200 h-full w-80 overflow-y-auto border-solid border border-base-200 border-r-neutral-content p-2 z-20 ${className || ""
className={`bg-base-200 h-full w-80 overflow-y-auto border-solid border border-base-200 border-r-neutral-content p-2 z-20 ${
className || ""
}`}
>
<div className="grid grid-cols-2 gap-2">
@ -84,7 +84,8 @@ export default function Sidebar({ className }: { className?: string }) {
>
<p className="text-sm">Collections</p>
<i
className={`bi-chevron-down ${collectionDisclosure ? "rotate-reverse" : "rotate"
className={`bi-chevron-down ${
collectionDisclosure ? "rotate-reverse" : "rotate"
}`}
></i>
</Disclosure.Button>
@ -110,7 +111,8 @@ export default function Sidebar({ className }: { className?: string }) {
>
<p className="text-sm">Tags</p>
<i
className={`bi-chevron-down ${tagDisclosure ? "rotate-reverse" : "rotate"
className={`bi-chevron-down ${
tagDisclosure ? "rotate-reverse" : "rotate"
}`}
></i>
</Disclosure.Button>
@ -130,7 +132,8 @@ export default function Sidebar({ className }: { className?: string }) {
return (
<Link key={i} href={`/tags/${e.id}`}>
<div
className={`${active === `/tags/${e.id}`
className={`${
active === `/tags/${e.id}`
? "bg-primary/20"
: "hover:bg-neutral/20"
} duration-100 py-1 px-2 cursor-pointer flex items-center gap-2 w-full rounded-md h-8`}

View File

@ -78,7 +78,6 @@ export default async function postCollection(
},
});
createFolder({ filePath: `archives/${newCollection.id}` });
return { response: newCollection, status: 200 };

View File

@ -54,7 +54,6 @@ export default function App({
<link rel="manifest" href="/site.webmanifest" />
</Head>
<AuthRedirect>
<Toaster
position="top-center"
reverseOrder={false}