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

View File

@ -41,12 +41,12 @@ export default function Sidebar({ className }: { className?: string }) {
setActive(router.asPath); setActive(router.asPath);
}, [router, collections]); }, [router, collections]);
return ( return (
<div <div
id="sidebar" 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"> <div className="grid grid-cols-2 gap-2">
<SidebarHighlightLink <SidebarHighlightLink
@ -84,8 +84,9 @@ export default function Sidebar({ className }: { className?: string }) {
> >
<p className="text-sm">Collections</p> <p className="text-sm">Collections</p>
<i <i
className={`bi-chevron-down ${collectionDisclosure ? "rotate-reverse" : "rotate" className={`bi-chevron-down ${
}`} collectionDisclosure ? "rotate-reverse" : "rotate"
}`}
></i> ></i>
</Disclosure.Button> </Disclosure.Button>
<Transition <Transition
@ -110,8 +111,9 @@ export default function Sidebar({ className }: { className?: string }) {
> >
<p className="text-sm">Tags</p> <p className="text-sm">Tags</p>
<i <i
className={`bi-chevron-down ${tagDisclosure ? "rotate-reverse" : "rotate" className={`bi-chevron-down ${
}`} tagDisclosure ? "rotate-reverse" : "rotate"
}`}
></i> ></i>
</Disclosure.Button> </Disclosure.Button>
<Transition <Transition
@ -130,10 +132,11 @@ export default function Sidebar({ className }: { className?: string }) {
return ( return (
<Link key={i} href={`/tags/${e.id}`}> <Link key={i} href={`/tags/${e.id}`}>
<div <div
className={`${active === `/tags/${e.id}` className={`${
? "bg-primary/20" active === `/tags/${e.id}`
: "hover:bg-neutral/20" ? "bg-primary/20"
} duration-100 py-1 px-2 cursor-pointer flex items-center gap-2 w-full rounded-md h-8`} : "hover:bg-neutral/20"
} duration-100 py-1 px-2 cursor-pointer flex items-center gap-2 w-full rounded-md h-8`}
> >
<i className="bi-hash text-2xl text-primary drop-shadow"></i> <i className="bi-hash text-2xl text-primary drop-shadow"></i>
<p className="truncate w-full pr-7">{e.name}</p> <p className="truncate w-full pr-7">{e.name}</p>

View File

@ -44,10 +44,10 @@ export default async function postCollection(
color: collection.color, color: collection.color,
parent: collection.parentId parent: collection.parentId
? { ? {
connect: { connect: {
id: collection.parentId, id: collection.parentId,
}, },
} }
: undefined, : undefined,
}, },
include: { include: {
@ -78,7 +78,6 @@ export default async function postCollection(
}, },
}); });
createFolder({ filePath: `archives/${newCollection.id}` }); createFolder({ filePath: `archives/${newCollection.id}` });
return { response: newCollection, status: 200 }; return { response: newCollection, status: 200 };

View File

@ -97,18 +97,18 @@ export default async function updateUserById(
id: { not: userId }, id: { not: userId },
OR: emailEnabled OR: emailEnabled
? [ ? [
{ {
username: data.username.toLowerCase(), username: data.username.toLowerCase(),
}, },
{ {
email: data.email?.toLowerCase(), email: data.email?.toLowerCase(),
}, },
] ]
: [ : [
{ {
username: data.username.toLowerCase(), username: data.username.toLowerCase(),
}, },
], ],
}, },
}); });

View File

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