format
This commit is contained in:
parent
dbfdb587b6
commit
d2e59d48c2
|
@ -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"
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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 };
|
||||||
|
|
|
@ -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(),
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
|
@ -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}
|
||||||
|
|
Ŝarĝante…
Reference in New Issue