improved modals
This commit is contained in:
daniel31x13
parent
692b9b99e7
commit
93e0fe6172
|
|
@ -1,112 +0,0 @@
|
||||||
import { Tab } from "@headlessui/react";
|
|
||||||
import React, { useEffect, useState } from "react";
|
|
||||||
import { Toaster } from "react-hot-toast";
|
|
||||||
import NewLink from "./Tabs.tsx/NewLink";
|
|
||||||
import NewCollection from "./Tabs.tsx/NewCollection";
|
|
||||||
|
|
||||||
type Props = {
|
|
||||||
index?: number;
|
|
||||||
modalId: string;
|
|
||||||
isOpen: boolean;
|
|
||||||
onClose: Function;
|
|
||||||
};
|
|
||||||
|
|
||||||
export default function New({ index, modalId, isOpen, onClose }: Props) {
|
|
||||||
const newModal = document.getElementById(modalId);
|
|
||||||
const [tabIndex, setTabIndex] = useState(index);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
setTabIndex(index);
|
|
||||||
|
|
||||||
newModal?.addEventListener("close", () => {
|
|
||||||
onClose();
|
|
||||||
});
|
|
||||||
|
|
||||||
return () => {
|
|
||||||
newModal?.addEventListener("close", () => {
|
|
||||||
onClose();
|
|
||||||
});
|
|
||||||
};
|
|
||||||
}, [isOpen]);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<dialog
|
|
||||||
id={modalId}
|
|
||||||
className="modal backdrop-blur-sm overflow-y-auto"
|
|
||||||
open={isOpen}
|
|
||||||
>
|
|
||||||
<Toaster
|
|
||||||
position="top-center"
|
|
||||||
reverseOrder={false}
|
|
||||||
toastOptions={{
|
|
||||||
className:
|
|
||||||
"border border-sky-100 dark:border-neutral-700 dark:bg-neutral-900 dark:text-white",
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
<div className="modal-box max-h-full overflow-y-visible border border-neutral-content w-11/12 max-w-2xl">
|
|
||||||
<form method="dialog">
|
|
||||||
<button className="btn btn-sm outline-none btn-circle btn-ghost absolute right-5 top-5">
|
|
||||||
✕
|
|
||||||
</button>
|
|
||||||
</form>
|
|
||||||
|
|
||||||
<Tab.Group
|
|
||||||
onChange={(i: any) => setTabIndex(i)}
|
|
||||||
selectedIndex={tabIndex}
|
|
||||||
>
|
|
||||||
<Tab.List className="tabs-boxed flex w-fit mr-auto justify-center gap-1 p-1">
|
|
||||||
<Tab
|
|
||||||
className={({ selected }) =>
|
|
||||||
`${
|
|
||||||
selected ? "btn-primary" : "btn-ghost"
|
|
||||||
} outline-none rounded-md btn btn-sm w-24`
|
|
||||||
}
|
|
||||||
>
|
|
||||||
Link
|
|
||||||
</Tab>
|
|
||||||
{/* <Tab
|
|
||||||
className={({ selected }) =>
|
|
||||||
`${
|
|
||||||
selected ? "btn-primary" : "btn-ghost"
|
|
||||||
} outline-none rounded-md btn btn-sm w-24`
|
|
||||||
}
|
|
||||||
>
|
|
||||||
File
|
|
||||||
</Tab> */}
|
|
||||||
{/* <Tab
|
|
||||||
className={({ selected }) =>
|
|
||||||
`${
|
|
||||||
selected ? "btn-primary" : "btn-ghost"
|
|
||||||
} outline-none rounded-md btn btn-sm w-24`
|
|
||||||
}
|
|
||||||
>
|
|
||||||
Note
|
|
||||||
</Tab> */}
|
|
||||||
<Tab
|
|
||||||
className={({ selected }) =>
|
|
||||||
`${
|
|
||||||
selected ? "btn-primary" : "btn-ghost"
|
|
||||||
} outline-none rounded-md btn btn-sm w-24`
|
|
||||||
}
|
|
||||||
>
|
|
||||||
Collection
|
|
||||||
</Tab>
|
|
||||||
</Tab.List>
|
|
||||||
<Tab.Panels className="mt-5">
|
|
||||||
<Tab.Panel>
|
|
||||||
<NewLink isOpen={isOpen} modalId={modalId} />
|
|
||||||
</Tab.Panel>
|
|
||||||
{/* <Tab.Panel>File</Tab.Panel> */}
|
|
||||||
{/* <Tab.Panel>Note</Tab.Panel> */}
|
|
||||||
<Tab.Panel>
|
|
||||||
<NewCollection isOpen={isOpen} modalId={modalId} />
|
|
||||||
</Tab.Panel>
|
|
||||||
</Tab.Panels>
|
|
||||||
</Tab.Group>
|
|
||||||
</div>
|
|
||||||
<form method="dialog" className="modal-backdrop">
|
|
||||||
<button>close</button>
|
|
||||||
</form>
|
|
||||||
</dialog>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
@ -0,0 +1,162 @@
|
||||||
|
import React, { useEffect, useState } from "react";
|
||||||
|
import TextInput from "@/components/TextInput";
|
||||||
|
import useCollectionStore from "@/store/collections";
|
||||||
|
import toast, { Toaster } from "react-hot-toast";
|
||||||
|
import { faFolder } from "@fortawesome/free-solid-svg-icons";
|
||||||
|
import { HexColorPicker } from "react-colorful";
|
||||||
|
import { Collection } from "@prisma/client";
|
||||||
|
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
||||||
|
|
||||||
|
type Props = {
|
||||||
|
modalId: string;
|
||||||
|
isOpen: boolean;
|
||||||
|
onClose: Function;
|
||||||
|
};
|
||||||
|
|
||||||
|
export default function NewCollectionModal({
|
||||||
|
modalId,
|
||||||
|
isOpen,
|
||||||
|
onClose,
|
||||||
|
}: Props) {
|
||||||
|
const newModal = document.getElementById(modalId);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
newModal?.addEventListener("close", () => {
|
||||||
|
onClose();
|
||||||
|
});
|
||||||
|
|
||||||
|
return () => {
|
||||||
|
newModal?.addEventListener("close", () => {
|
||||||
|
onClose();
|
||||||
|
});
|
||||||
|
};
|
||||||
|
}, [isOpen]);
|
||||||
|
|
||||||
|
const initial = {
|
||||||
|
name: "",
|
||||||
|
description: "",
|
||||||
|
color: "#0ea5e9",
|
||||||
|
};
|
||||||
|
|
||||||
|
const [collection, setCollection] = useState<Partial<Collection>>(initial);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
setCollection(initial);
|
||||||
|
}, [isOpen]);
|
||||||
|
|
||||||
|
const [submitLoader, setSubmitLoader] = useState(false);
|
||||||
|
const { addCollection } = useCollectionStore();
|
||||||
|
|
||||||
|
const submit = async () => {
|
||||||
|
if (!submitLoader) {
|
||||||
|
setSubmitLoader(true);
|
||||||
|
if (!collection) return null;
|
||||||
|
|
||||||
|
setSubmitLoader(true);
|
||||||
|
|
||||||
|
const load = toast.loading("Creating...");
|
||||||
|
|
||||||
|
let response;
|
||||||
|
|
||||||
|
response = await addCollection(collection as any);
|
||||||
|
|
||||||
|
toast.dismiss(load);
|
||||||
|
|
||||||
|
if (response.ok) {
|
||||||
|
toast.success(`Collection "Created!"`);
|
||||||
|
(document.getElementById(modalId) as any).close();
|
||||||
|
} else toast.error(response.data as string);
|
||||||
|
|
||||||
|
setSubmitLoader(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<dialog
|
||||||
|
id={modalId}
|
||||||
|
className="modal backdrop-blur-sm overflow-y-auto"
|
||||||
|
open={isOpen}
|
||||||
|
>
|
||||||
|
<Toaster
|
||||||
|
position="top-center"
|
||||||
|
reverseOrder={false}
|
||||||
|
toastOptions={{
|
||||||
|
className:
|
||||||
|
"border border-sky-100 dark:border-neutral-700 dark:bg-neutral-900 dark:text-white",
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<div className="modal-box max-h-full overflow-y-visible border border-neutral-content w-11/12 max-w-2xl">
|
||||||
|
<form method="dialog">
|
||||||
|
<button className="btn btn-sm outline-none btn-circle btn-ghost absolute right-3 top-3">
|
||||||
|
✕
|
||||||
|
</button>
|
||||||
|
</form>
|
||||||
|
|
||||||
|
<p className="text-xl mb-5 font-thin">Create a New Collection</p>
|
||||||
|
|
||||||
|
<div className="flex flex-col gap-3">
|
||||||
|
<div className="flex flex-col sm:flex-row gap-3">
|
||||||
|
<div className="w-full">
|
||||||
|
<p className="mb-2">Name</p>
|
||||||
|
<div className="flex flex-col gap-3">
|
||||||
|
<TextInput
|
||||||
|
className="bg-base-200"
|
||||||
|
value={collection.name}
|
||||||
|
placeholder="e.g. Example Collection"
|
||||||
|
onChange={(e) =>
|
||||||
|
setCollection({ ...collection, name: e.target.value })
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
<div className="color-picker flex justify-between">
|
||||||
|
<div className="flex flex-col justify-between items-center w-32">
|
||||||
|
<p className="w-full mb-2">Color</p>
|
||||||
|
<div style={{ color: collection.color }}>
|
||||||
|
<FontAwesomeIcon
|
||||||
|
icon={faFolder}
|
||||||
|
className="w-12 h-12 drop-shadow"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
className="btn btn-ghost btn-xs"
|
||||||
|
onClick={() =>
|
||||||
|
setCollection({ ...collection, color: "#0ea5e9" })
|
||||||
|
}
|
||||||
|
>
|
||||||
|
Reset
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<HexColorPicker
|
||||||
|
color={collection.color}
|
||||||
|
onChange={(e) => setCollection({ ...collection, color: e })}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="w-full">
|
||||||
|
<p className="mb-2">Description</p>
|
||||||
|
<textarea
|
||||||
|
className="w-full h-[11rem] resize-none border rounded-md duration-100 bg-base-200 p-2 outline-none border-neutral-content focus:border-primary"
|
||||||
|
placeholder="The purpose of this Collection..."
|
||||||
|
value={collection.description}
|
||||||
|
onChange={(e) =>
|
||||||
|
setCollection({
|
||||||
|
...collection,
|
||||||
|
description: e.target.value,
|
||||||
|
})
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<button className="btn btn-accent w-fit ml-auto" onClick={submit}>
|
||||||
|
Create Collection
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<form method="dialog" className="modal-backdrop">
|
||||||
|
<button>close</button>
|
||||||
|
</form>
|
||||||
|
</dialog>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,246 @@
|
||||||
|
import React, { useEffect, useState } from "react";
|
||||||
|
import { Toaster } from "react-hot-toast";
|
||||||
|
import CollectionSelection from "@/components/InputSelect/CollectionSelection";
|
||||||
|
import TagSelection from "@/components/InputSelect/TagSelection";
|
||||||
|
import TextInput from "@/components/TextInput";
|
||||||
|
import unescapeString from "@/lib/client/unescapeString";
|
||||||
|
import useCollectionStore from "@/store/collections";
|
||||||
|
import useLinkStore from "@/store/links";
|
||||||
|
import { LinkIncludingShortenedCollectionAndTags } from "@/types/global";
|
||||||
|
import { useSession } from "next-auth/react";
|
||||||
|
import { useRouter } from "next/router";
|
||||||
|
import toast from "react-hot-toast";
|
||||||
|
|
||||||
|
type Props = {
|
||||||
|
modalId: string;
|
||||||
|
isOpen: boolean;
|
||||||
|
onClose: Function;
|
||||||
|
};
|
||||||
|
|
||||||
|
export default function NewLinkModal({ modalId, isOpen, onClose }: Props) {
|
||||||
|
const newModal = document.getElementById(modalId);
|
||||||
|
|
||||||
|
const { data } = useSession();
|
||||||
|
|
||||||
|
const initial = {
|
||||||
|
name: "",
|
||||||
|
url: "",
|
||||||
|
description: "",
|
||||||
|
tags: [],
|
||||||
|
screenshotPath: "",
|
||||||
|
pdfPath: "",
|
||||||
|
readabilityPath: "",
|
||||||
|
textContent: "",
|
||||||
|
collection: {
|
||||||
|
name: "",
|
||||||
|
ownerId: data?.user.id as number,
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
const [link, setLink] =
|
||||||
|
useState<LinkIncludingShortenedCollectionAndTags>(initial);
|
||||||
|
|
||||||
|
const { addLink } = useLinkStore();
|
||||||
|
const [submitLoader, setSubmitLoader] = useState(false);
|
||||||
|
|
||||||
|
const [optionsExpanded, setOptionsExpanded] = useState(false);
|
||||||
|
|
||||||
|
const router = useRouter();
|
||||||
|
const { collections } = useCollectionStore();
|
||||||
|
|
||||||
|
const setCollection = (e: any) => {
|
||||||
|
if (e?.__isNew__) e.value = null;
|
||||||
|
|
||||||
|
setLink({
|
||||||
|
...link,
|
||||||
|
collection: { id: e?.value, name: e?.label, ownerId: e?.ownerId },
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const setTags = (e: any) => {
|
||||||
|
const tagNames = e.map((e: any) => {
|
||||||
|
return { name: e.label };
|
||||||
|
});
|
||||||
|
|
||||||
|
setLink({ ...link, tags: tagNames });
|
||||||
|
};
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
setOptionsExpanded(false);
|
||||||
|
if (router.query.id) {
|
||||||
|
const currentCollection = collections.find(
|
||||||
|
(e) => e.id == Number(router.query.id)
|
||||||
|
);
|
||||||
|
|
||||||
|
if (
|
||||||
|
currentCollection &&
|
||||||
|
currentCollection.ownerId &&
|
||||||
|
router.asPath.startsWith("/collections/")
|
||||||
|
)
|
||||||
|
setLink({
|
||||||
|
...initial,
|
||||||
|
collection: {
|
||||||
|
id: currentCollection.id,
|
||||||
|
name: currentCollection.name,
|
||||||
|
ownerId: currentCollection.ownerId,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
} else
|
||||||
|
setLink({
|
||||||
|
...initial,
|
||||||
|
collection: {
|
||||||
|
// id: ,
|
||||||
|
name: "Unorganized",
|
||||||
|
ownerId: data?.user.id as number,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
newModal?.addEventListener("close", () => {
|
||||||
|
onClose();
|
||||||
|
});
|
||||||
|
|
||||||
|
return () => {
|
||||||
|
newModal?.addEventListener("close", () => {
|
||||||
|
onClose();
|
||||||
|
});
|
||||||
|
};
|
||||||
|
}, [isOpen]);
|
||||||
|
|
||||||
|
const submit = async () => {
|
||||||
|
if (!submitLoader) {
|
||||||
|
setSubmitLoader(true);
|
||||||
|
|
||||||
|
let response;
|
||||||
|
|
||||||
|
const load = toast.loading("Creating...");
|
||||||
|
|
||||||
|
response = await addLink(link);
|
||||||
|
|
||||||
|
toast.dismiss(load);
|
||||||
|
|
||||||
|
if (response.ok) {
|
||||||
|
toast.success(`Created!`);
|
||||||
|
(document.getElementById(modalId) as any).close();
|
||||||
|
} else toast.error(response.data as string);
|
||||||
|
|
||||||
|
setSubmitLoader(false);
|
||||||
|
|
||||||
|
return response;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<dialog
|
||||||
|
id={modalId}
|
||||||
|
className="modal backdrop-blur-sm overflow-y-auto"
|
||||||
|
open={isOpen}
|
||||||
|
>
|
||||||
|
<Toaster
|
||||||
|
position="top-center"
|
||||||
|
reverseOrder={false}
|
||||||
|
toastOptions={{
|
||||||
|
className:
|
||||||
|
"border border-sky-100 dark:border-neutral-700 dark:bg-neutral-900 dark:text-white",
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<div className="modal-box max-h-full overflow-y-visible border border-neutral-content w-11/12 max-w-2xl">
|
||||||
|
<form method="dialog">
|
||||||
|
<button className="btn btn-sm outline-none btn-circle btn-ghost absolute right-3 top-3">
|
||||||
|
✕
|
||||||
|
</button>
|
||||||
|
</form>
|
||||||
|
|
||||||
|
<p className="text-xl mb-5 font-thin">Create a New Link</p>
|
||||||
|
<div className="grid grid-flow-row-dense sm:grid-cols-5 gap-3">
|
||||||
|
<div className="sm:col-span-3 col-span-5">
|
||||||
|
<p className="mb-2">Link</p>
|
||||||
|
<TextInput
|
||||||
|
value={link.url}
|
||||||
|
onChange={(e) => setLink({ ...link, url: e.target.value })}
|
||||||
|
placeholder="e.g. http://example.com/"
|
||||||
|
className="bg-base-200"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="sm:col-span-2 col-span-5">
|
||||||
|
<p className="mb-2">Collection</p>
|
||||||
|
{link.collection.name ? (
|
||||||
|
<CollectionSelection
|
||||||
|
onChange={setCollection}
|
||||||
|
// defaultValue={{
|
||||||
|
// label: link.collection.name,
|
||||||
|
// value: link.collection.id,
|
||||||
|
// }}
|
||||||
|
defaultValue={
|
||||||
|
link.collection.id
|
||||||
|
? {
|
||||||
|
value: link.collection.id,
|
||||||
|
label: link.collection.name,
|
||||||
|
}
|
||||||
|
: {
|
||||||
|
value: null as unknown as number,
|
||||||
|
label: "Unorganized",
|
||||||
|
}
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
) : null}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{optionsExpanded ? (
|
||||||
|
<div className="mt-5">
|
||||||
|
{/* <hr className="mb-3 border border-neutral-content" /> */}
|
||||||
|
<div className="grid sm:grid-cols-2 gap-3">
|
||||||
|
<div>
|
||||||
|
<p className="mb-2">Name</p>
|
||||||
|
<TextInput
|
||||||
|
value={link.name}
|
||||||
|
onChange={(e) => setLink({ ...link, name: e.target.value })}
|
||||||
|
placeholder="e.g. Example Link"
|
||||||
|
className="bg-base-200"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<p className="mb-2">Tags</p>
|
||||||
|
<TagSelection
|
||||||
|
onChange={setTags}
|
||||||
|
defaultValue={link.tags.map((e) => {
|
||||||
|
return { label: e.name, value: e.id };
|
||||||
|
})}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="sm:col-span-2">
|
||||||
|
<p className="mb-2">Description</p>
|
||||||
|
<textarea
|
||||||
|
value={unescapeString(link.description) as string}
|
||||||
|
onChange={(e) =>
|
||||||
|
setLink({ ...link, description: e.target.value })
|
||||||
|
}
|
||||||
|
placeholder="Will be auto generated if nothing is provided."
|
||||||
|
className="resize-none w-full rounded-md p-2 border-neutral-content bg-base-200 focus:border-sky-300 dark:focus:border-sky-600 border-solid border outline-none duration-100"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
) : undefined}
|
||||||
|
|
||||||
|
<div className="flex justify-between items-center mt-5">
|
||||||
|
<div
|
||||||
|
onClick={() => setOptionsExpanded(!optionsExpanded)}
|
||||||
|
className={`rounded-md cursor-pointer btn btn-sm btn-ghost duration-100 flex items-center px-2 w-fit text-sm`}
|
||||||
|
>
|
||||||
|
<p>{optionsExpanded ? "Hide" : "More"} Options</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<button className="btn btn-accent" onClick={submit}>
|
||||||
|
Create Link
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<form method="dialog" className="modal-backdrop">
|
||||||
|
<button>close</button>
|
||||||
|
</form>
|
||||||
|
</dialog>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
@ -1,119 +0,0 @@
|
||||||
import { useEffect, useState } from "react";
|
|
||||||
import { faFolder } from "@fortawesome/free-solid-svg-icons";
|
|
||||||
import useCollectionStore from "@/store/collections";
|
|
||||||
import { HexColorPicker } from "react-colorful";
|
|
||||||
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
|
||||||
import { toast } from "react-hot-toast";
|
|
||||||
import TextInput from "@/components/TextInput";
|
|
||||||
import { useRouter } from "next/router";
|
|
||||||
import { Collection } from "@prisma/client";
|
|
||||||
|
|
||||||
type Props = {
|
|
||||||
isOpen: boolean;
|
|
||||||
modalId: string;
|
|
||||||
};
|
|
||||||
|
|
||||||
export default function NewCollection({ isOpen, modalId }: Props) {
|
|
||||||
const router = useRouter();
|
|
||||||
|
|
||||||
const initial = {
|
|
||||||
name: "",
|
|
||||||
description: "",
|
|
||||||
color: "#0ea5e9",
|
|
||||||
};
|
|
||||||
|
|
||||||
const [collection, setCollection] = useState<Partial<Collection>>(initial);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
setCollection(initial);
|
|
||||||
}, [isOpen]);
|
|
||||||
|
|
||||||
const [submitLoader, setSubmitLoader] = useState(false);
|
|
||||||
const { addCollection } = useCollectionStore();
|
|
||||||
|
|
||||||
const submit = async () => {
|
|
||||||
if (!submitLoader) {
|
|
||||||
setSubmitLoader(true);
|
|
||||||
if (!collection) return null;
|
|
||||||
|
|
||||||
setSubmitLoader(true);
|
|
||||||
|
|
||||||
const load = toast.loading("Creating...");
|
|
||||||
|
|
||||||
let response;
|
|
||||||
|
|
||||||
response = await addCollection(collection as any);
|
|
||||||
|
|
||||||
toast.dismiss(load);
|
|
||||||
|
|
||||||
if (response.ok) {
|
|
||||||
toast.success(`Collection "Created!"`);
|
|
||||||
(document.getElementById(modalId) as any).close();
|
|
||||||
} else toast.error(response.data as string);
|
|
||||||
|
|
||||||
setSubmitLoader(false);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="flex flex-col gap-3">
|
|
||||||
<div className="flex flex-col sm:flex-row gap-3">
|
|
||||||
<div className="w-full">
|
|
||||||
<p className="mb-2">Name</p>
|
|
||||||
<div className="flex flex-col gap-3">
|
|
||||||
<TextInput
|
|
||||||
className="bg-base-200"
|
|
||||||
value={collection.name}
|
|
||||||
placeholder="e.g. Example Collection"
|
|
||||||
onChange={(e) =>
|
|
||||||
setCollection({ ...collection, name: e.target.value })
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
<div className="color-picker flex justify-between">
|
|
||||||
<div className="flex flex-col justify-between items-center w-32">
|
|
||||||
<p className="w-full mb-2">Color</p>
|
|
||||||
<div style={{ color: collection.color }}>
|
|
||||||
<FontAwesomeIcon
|
|
||||||
icon={faFolder}
|
|
||||||
className="w-12 h-12 drop-shadow"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
className="btn btn-ghost btn-xs"
|
|
||||||
onClick={() =>
|
|
||||||
setCollection({ ...collection, color: "#0ea5e9" })
|
|
||||||
}
|
|
||||||
>
|
|
||||||
Reset
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<HexColorPicker
|
|
||||||
color={collection.color}
|
|
||||||
onChange={(e) => setCollection({ ...collection, color: e })}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="w-full">
|
|
||||||
<p className="mb-2">Description</p>
|
|
||||||
<textarea
|
|
||||||
className="w-full h-[11rem] resize-none border rounded-md duration-100 bg-base-200 p-2 outline-none border-neutral-content focus:border-primary"
|
|
||||||
placeholder="The purpose of this Collection..."
|
|
||||||
value={collection.description}
|
|
||||||
onChange={(e) =>
|
|
||||||
setCollection({
|
|
||||||
...collection,
|
|
||||||
description: e.target.value,
|
|
||||||
})
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<button className="btn btn-accent w-fit ml-auto" onClick={submit}>
|
|
||||||
Create Collection
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
@ -1,208 +0,0 @@
|
||||||
import CollectionSelection from "@/components/InputSelect/CollectionSelection";
|
|
||||||
import TagSelection from "@/components/InputSelect/TagSelection";
|
|
||||||
import TextInput from "@/components/TextInput";
|
|
||||||
import unescapeString from "@/lib/client/unescapeString";
|
|
||||||
import useCollectionStore from "@/store/collections";
|
|
||||||
import useLinkStore from "@/store/links";
|
|
||||||
import { LinkIncludingShortenedCollectionAndTags } from "@/types/global";
|
|
||||||
import { useSession } from "next-auth/react";
|
|
||||||
import { useRouter } from "next/router";
|
|
||||||
import React, { useEffect, useState } from "react";
|
|
||||||
import toast from "react-hot-toast";
|
|
||||||
|
|
||||||
type Props = {
|
|
||||||
isOpen: boolean;
|
|
||||||
modalId: string;
|
|
||||||
};
|
|
||||||
|
|
||||||
export default function NewLink({ isOpen, modalId }: Props) {
|
|
||||||
const { data } = useSession();
|
|
||||||
|
|
||||||
const initial = {
|
|
||||||
name: "",
|
|
||||||
url: "",
|
|
||||||
description: "",
|
|
||||||
tags: [],
|
|
||||||
screenshotPath: "",
|
|
||||||
pdfPath: "",
|
|
||||||
readabilityPath: "",
|
|
||||||
textContent: "",
|
|
||||||
collection: {
|
|
||||||
name: "",
|
|
||||||
ownerId: data?.user.id as number,
|
|
||||||
},
|
|
||||||
};
|
|
||||||
|
|
||||||
const [link, setLink] =
|
|
||||||
useState<LinkIncludingShortenedCollectionAndTags>(initial);
|
|
||||||
|
|
||||||
const { addLink } = useLinkStore();
|
|
||||||
const [submitLoader, setSubmitLoader] = useState(false);
|
|
||||||
|
|
||||||
const [optionsExpanded, setOptionsExpanded] = useState(false);
|
|
||||||
|
|
||||||
const router = useRouter();
|
|
||||||
const { collections } = useCollectionStore();
|
|
||||||
|
|
||||||
const setCollection = (e: any) => {
|
|
||||||
if (e?.__isNew__) e.value = null;
|
|
||||||
|
|
||||||
setLink({
|
|
||||||
...link,
|
|
||||||
collection: { id: e?.value, name: e?.label, ownerId: e?.ownerId },
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
const setTags = (e: any) => {
|
|
||||||
const tagNames = e.map((e: any) => {
|
|
||||||
return { name: e.label };
|
|
||||||
});
|
|
||||||
|
|
||||||
setLink({ ...link, tags: tagNames });
|
|
||||||
};
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
setOptionsExpanded(false);
|
|
||||||
if (router.query.id) {
|
|
||||||
const currentCollection = collections.find(
|
|
||||||
(e) => e.id == Number(router.query.id)
|
|
||||||
);
|
|
||||||
|
|
||||||
if (
|
|
||||||
currentCollection &&
|
|
||||||
currentCollection.ownerId &&
|
|
||||||
router.asPath.startsWith("/collections/")
|
|
||||||
)
|
|
||||||
setLink({
|
|
||||||
...initial,
|
|
||||||
collection: {
|
|
||||||
id: currentCollection.id,
|
|
||||||
name: currentCollection.name,
|
|
||||||
ownerId: currentCollection.ownerId,
|
|
||||||
},
|
|
||||||
});
|
|
||||||
} else
|
|
||||||
setLink({
|
|
||||||
...initial,
|
|
||||||
collection: {
|
|
||||||
// id: ,
|
|
||||||
name: "Unorganized",
|
|
||||||
ownerId: data?.user.id as number,
|
|
||||||
},
|
|
||||||
});
|
|
||||||
}, [isOpen]);
|
|
||||||
|
|
||||||
const submit = async () => {
|
|
||||||
if (!submitLoader) {
|
|
||||||
setSubmitLoader(true);
|
|
||||||
|
|
||||||
let response;
|
|
||||||
|
|
||||||
const load = toast.loading("Creating...");
|
|
||||||
|
|
||||||
response = await addLink(link);
|
|
||||||
|
|
||||||
toast.dismiss(load);
|
|
||||||
|
|
||||||
if (response.ok) {
|
|
||||||
toast.success(`Created!`);
|
|
||||||
(document.getElementById(modalId) as any).close();
|
|
||||||
} else toast.error(response.data as string);
|
|
||||||
|
|
||||||
setSubmitLoader(false);
|
|
||||||
|
|
||||||
return response;
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div>
|
|
||||||
<div className="grid grid-flow-row-dense sm:grid-cols-5 gap-3">
|
|
||||||
<div className="sm:col-span-3 col-span-5">
|
|
||||||
<p className="mb-2">Link</p>
|
|
||||||
<TextInput
|
|
||||||
value={link.url}
|
|
||||||
onChange={(e) => setLink({ ...link, url: e.target.value })}
|
|
||||||
placeholder="e.g. http://example.com/"
|
|
||||||
className="bg-base-200"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div className="sm:col-span-2 col-span-5">
|
|
||||||
<p className="mb-2">Collection</p>
|
|
||||||
{link.collection.name ? (
|
|
||||||
<CollectionSelection
|
|
||||||
onChange={setCollection}
|
|
||||||
// defaultValue={{
|
|
||||||
// label: link.collection.name,
|
|
||||||
// value: link.collection.id,
|
|
||||||
// }}
|
|
||||||
defaultValue={
|
|
||||||
link.collection.id
|
|
||||||
? {
|
|
||||||
value: link.collection.id,
|
|
||||||
label: link.collection.name,
|
|
||||||
}
|
|
||||||
: {
|
|
||||||
value: null as unknown as number,
|
|
||||||
label: "Unorganized",
|
|
||||||
}
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
) : null}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{optionsExpanded ? (
|
|
||||||
<div className="mt-5">
|
|
||||||
{/* <hr className="mb-3 border border-neutral-content" /> */}
|
|
||||||
<div className="grid sm:grid-cols-2 gap-3">
|
|
||||||
<div>
|
|
||||||
<p className="mb-2">Name</p>
|
|
||||||
<TextInput
|
|
||||||
value={link.name}
|
|
||||||
onChange={(e) => setLink({ ...link, name: e.target.value })}
|
|
||||||
placeholder="e.g. Example Link"
|
|
||||||
className="bg-base-200"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<p className="mb-2">Tags</p>
|
|
||||||
<TagSelection
|
|
||||||
onChange={setTags}
|
|
||||||
defaultValue={link.tags.map((e) => {
|
|
||||||
return { label: e.name, value: e.id };
|
|
||||||
})}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="sm:col-span-2">
|
|
||||||
<p className="mb-2">Description</p>
|
|
||||||
<textarea
|
|
||||||
value={unescapeString(link.description) as string}
|
|
||||||
onChange={(e) =>
|
|
||||||
setLink({ ...link, description: e.target.value })
|
|
||||||
}
|
|
||||||
placeholder="Will be auto generated if nothing is provided."
|
|
||||||
className="resize-none w-full rounded-md p-2 border-neutral-content bg-base-200 focus:border-sky-300 dark:focus:border-sky-600 border-solid border outline-none duration-100"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
) : undefined}
|
|
||||||
|
|
||||||
<div className="flex justify-between items-center mt-5">
|
|
||||||
<div
|
|
||||||
onClick={() => setOptionsExpanded(!optionsExpanded)}
|
|
||||||
className={`rounded-md cursor-pointer btn btn-sm btn-ghost duration-100 flex items-center px-2 w-fit text-sm`}
|
|
||||||
>
|
|
||||||
<p>{optionsExpanded ? "Hide" : "More"} Options</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<button className="btn btn-accent" onClick={submit}>
|
|
||||||
Create Link
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
||||||
import { signOut } from "next-auth/react";
|
import { signOut } from "next-auth/react";
|
||||||
import { faPlus, faBars } from "@fortawesome/free-solid-svg-icons";
|
import { faPlus, faBars, faCaretDown } from "@fortawesome/free-solid-svg-icons";
|
||||||
import { useEffect, useState } from "react";
|
import { useEffect, useState } from "react";
|
||||||
import Dropdown from "@/components/Dropdown";
|
import Dropdown from "@/components/Dropdown";
|
||||||
import ClickAwayHandler from "@/components/ClickAwayHandler";
|
import ClickAwayHandler from "@/components/ClickAwayHandler";
|
||||||
|
|
@ -12,7 +12,8 @@ import ProfilePhoto from "@/components/ProfilePhoto";
|
||||||
import useWindowDimensions from "@/hooks/useWindowDimensions";
|
import useWindowDimensions from "@/hooks/useWindowDimensions";
|
||||||
import ToggleDarkMode from "./ToggleDarkMode";
|
import ToggleDarkMode from "./ToggleDarkMode";
|
||||||
import useLocalSettingsStore from "@/store/localSettings";
|
import useLocalSettingsStore from "@/store/localSettings";
|
||||||
import New from "./Modals/New";
|
import NewLinkModal from "./Modals/NewLink";
|
||||||
|
import NewCollectionModal from "./Modals/NewCollectionModal";
|
||||||
|
|
||||||
export default function Navbar() {
|
export default function Navbar() {
|
||||||
const { settings, updateSettings } = useLocalSettingsStore();
|
const { settings, updateSettings } = useLocalSettingsStore();
|
||||||
|
|
@ -47,8 +48,11 @@ export default function Navbar() {
|
||||||
setSidebar(!sidebar);
|
setSidebar(!sidebar);
|
||||||
};
|
};
|
||||||
|
|
||||||
const [newModalIsOpen, setNewModalIsOpen] = useState(false);
|
const [newLinkModalIsOpen, setNewLinkModalIsOpen] = useState(false);
|
||||||
const closeNewModal = () => setNewModalIsOpen(false);
|
const closeNewLinkModal = () => setNewLinkModalIsOpen(false);
|
||||||
|
const [newCollectionModalIsOpen, setNewCollectionModalIsOpen] =
|
||||||
|
useState(false);
|
||||||
|
const closeNewCollectionModal = () => setNewCollectionModalIsOpen(false);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="flex justify-between gap-2 items-center px-5 py-2 border-solid border-b-neutral-content border-b">
|
<div className="flex justify-between gap-2 items-center px-5 py-2 border-solid border-b-neutral-content border-b">
|
||||||
|
|
@ -62,18 +66,38 @@ export default function Navbar() {
|
||||||
<div className="flex items-center gap-2">
|
<div className="flex items-center gap-2">
|
||||||
<ToggleDarkMode className="sm:inline-grid hidden" />
|
<ToggleDarkMode className="sm:inline-grid hidden" />
|
||||||
|
|
||||||
<button
|
<div className="dropdown dropdown-end">
|
||||||
className="inline-flex sm:gap-1 relative sm:w-[5rem] items-center duration-100 group btn btn-accent text-white btn-sm"
|
<div className="tooltip tooltip-bottom" data-tip="Create New...">
|
||||||
onClick={() => setNewModalIsOpen(true)}
|
<div
|
||||||
|
tabIndex={0}
|
||||||
|
role="button"
|
||||||
|
className="flex items-center group btn btn-accent text-white btn-sm"
|
||||||
>
|
>
|
||||||
<FontAwesomeIcon
|
<FontAwesomeIcon icon={faPlus} className="w-5 h-5" />
|
||||||
icon={faPlus}
|
<FontAwesomeIcon icon={faCaretDown} className="w-3 h-3" />
|
||||||
className="w-5 h-5 sm:group-hover:ml-5 sm:absolute duration-100 left-2"
|
</div>
|
||||||
/>
|
</div>
|
||||||
<span className="hidden sm:block group-hover:opacity-0 text-right w-full duration-100">
|
<ul className="dropdown-content z-[1] menu p-2 shadow bg-base-200 border border-neutral-content rounded-box w-52">
|
||||||
New
|
<li>
|
||||||
</span>
|
<div
|
||||||
</button>
|
onClick={() => setNewLinkModalIsOpen(true)}
|
||||||
|
tabIndex={0}
|
||||||
|
role="button"
|
||||||
|
>
|
||||||
|
New Link
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<div
|
||||||
|
onClick={() => setNewCollectionModalIsOpen(true)}
|
||||||
|
tabIndex={0}
|
||||||
|
role="button"
|
||||||
|
>
|
||||||
|
New Collection
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div className="relative">
|
<div className="relative">
|
||||||
<div
|
<div
|
||||||
|
|
@ -133,11 +157,15 @@ export default function Navbar() {
|
||||||
) : null}
|
) : null}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<New
|
<NewLinkModal
|
||||||
index={0}
|
isOpen={newLinkModalIsOpen}
|
||||||
isOpen={newModalIsOpen}
|
onClose={closeNewLinkModal}
|
||||||
onClose={closeNewModal}
|
modalId="new-link-modal"
|
||||||
modalId="new-modal-0"
|
/>
|
||||||
|
<NewCollectionModal
|
||||||
|
isOpen={newCollectionModalIsOpen}
|
||||||
|
onClose={closeNewCollectionModal}
|
||||||
|
modalId="new-collection-modal"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|
|
||||||
|
|
@ -15,7 +15,7 @@ import useModalStore from "@/store/modals";
|
||||||
import SortDropdown from "@/components/SortDropdown";
|
import SortDropdown from "@/components/SortDropdown";
|
||||||
import { Sort } from "@/types/global";
|
import { Sort } from "@/types/global";
|
||||||
import useSort from "@/hooks/useSort";
|
import useSort from "@/hooks/useSort";
|
||||||
import New from "@/components/Modals/New";
|
import NewCollectionModal from "@/components/Modals/NewCollectionModal";
|
||||||
|
|
||||||
export default function Collections() {
|
export default function Collections() {
|
||||||
const { collections } = useCollectionStore();
|
const { collections } = useCollectionStore();
|
||||||
|
|
@ -121,7 +121,7 @@ export default function Collections() {
|
||||||
})}
|
})}
|
||||||
|
|
||||||
<div
|
<div
|
||||||
className="card card-compact shadow-md hover:shadow-none duration-200 border border-neutral-content p-5 bg-base-200 self-stretch min-h-[12rem] rounded-2xl cursor-pointer flex flex-col gap-4 justify-center items-center group"
|
className="card card-compact shadow-md hover:shadow-none duration-200 border border-neutral-content p-5 bg-base-200 self-stretch min-h-[12rem] rounded-2xl cursor-pointer flex flex-col gap-4 justify-center items-center group btn"
|
||||||
onClick={() => setNewModalIsOpen(true)}
|
onClick={() => setNewModalIsOpen(true)}
|
||||||
>
|
>
|
||||||
<p className="group-hover:opacity-0 duration-100">New Collection</p>
|
<p className="group-hover:opacity-0 duration-100">New Collection</p>
|
||||||
|
|
@ -158,11 +158,10 @@ export default function Collections() {
|
||||||
</>
|
</>
|
||||||
) : undefined}
|
) : undefined}
|
||||||
</div>
|
</div>
|
||||||
<New
|
<NewCollectionModal
|
||||||
index={1}
|
|
||||||
isOpen={newModalIsOpen}
|
isOpen={newModalIsOpen}
|
||||||
onClose={closeNewModal}
|
onClose={closeNewModal}
|
||||||
modalId="new-modal-1"
|
modalId="new-collection-modal-1"
|
||||||
/>
|
/>
|
||||||
</MainLayout>
|
</MainLayout>
|
||||||
);
|
);
|
||||||
|
|
|
||||||
Ŝarĝante…
Reference in New Issue