diff --git a/components/InputSelect/CollectionSelection.tsx b/components/InputSelect/CollectionSelection.tsx index 234d5bcb..991557f4 100644 --- a/components/InputSelect/CollectionSelection.tsx +++ b/components/InputSelect/CollectionSelection.tsx @@ -47,7 +47,6 @@ export default function CollectionSelection({ onChange, defaultValue }: Props) { isClearable className="react-select-container" classNamePrefix="react-select" - placeholder="Default: Unnamed Collection" onChange={onChange} options={options} styles={styles} diff --git a/components/Modal/Link/AddOrEditLink.tsx b/components/Modal/Link/AddOrEditLink.tsx index 00fc24b1..c7e2cbf8 100644 --- a/components/Modal/Link/AddOrEditLink.tsx +++ b/components/Modal/Link/AddOrEditLink.tsx @@ -7,12 +7,13 @@ import useLinkStore from "@/store/links"; import { faPlus } from "@fortawesome/free-solid-svg-icons"; import RequiredBadge from "../../RequiredBadge"; import { useSession } from "next-auth/react"; -import useCollectionStore from "@/store/collections"; -import { useRouter } from "next/router"; +// import useCollectionStore from "@/store/collections"; +// import { useRouter } from "next/router"; import SubmitButton from "../../SubmitButton"; import { toast } from "react-hot-toast"; import Link from "next/link"; import TextInput from "@/components/TextInput"; +import unescapeString from "@/lib/client/unescapeString"; type Props = | { @@ -33,6 +34,10 @@ export default function AddOrEditLink({ }: Props) { const [submitLoader, setSubmitLoader] = useState(false); + const [optionsExpanded, setOptionsExpanded] = useState( + method === "UPDATE" ? true : false + ); + const { data } = useSession(); const [link, setLink] = useState( @@ -50,27 +55,27 @@ export default function AddOrEditLink({ const { updateLink, addLink } = useLinkStore(); - const router = useRouter(); + // const router = useRouter(); - const { collections } = useCollectionStore(); + // const { collections } = useCollectionStore(); - useEffect(() => { - if (router.query.id) { - const currentCollection = collections.find( - (e) => e.id == Number(router.query.id) - ); + // useEffect(() => { + // if (router.query.id) { + // const currentCollection = collections.find( + // (e) => e.id == Number(router.query.id) + // ); - if (currentCollection && currentCollection.ownerId) - setLink({ - ...link, - collection: { - id: currentCollection.id, - name: currentCollection.name, - ownerId: currentCollection.ownerId, - }, - }); - } - }, []); + // if (currentCollection && currentCollection.ownerId) + // setLink({ + // ...link, + // collection: { + // id: currentCollection.id, + // name: currentCollection.name, + // ownerId: currentCollection.ownerId, + // }, + // }); + // } + // }, []); const setTags = (e: any) => { const tagNames = e.map((e: any) => { @@ -116,7 +121,7 @@ export default function AddOrEditLink({
{method === "UPDATE" ? (

@@ -126,80 +131,128 @@ export default function AddOrEditLink({ ) : null} {method === "CREATE" ? ( -

-

- Address (URL) - -

- setLink({ ...link, url: e.target.value })} - placeholder="e.g. http://example.com/" - /> +
+
+

+ Address (URL) + +

+ setLink({ ...link, url: e.target.value })} + placeholder="e.g. http://example.com/" + /> +
+
+

+ Collection +

+ +
) : null} -
-
+ + {optionsExpanded ? (
-

Collection

- +
+
+

Name

+ setLink({ ...link, name: e.target.value })} + placeholder="e.g. Example Link" + /> +
+ + {method === "UPDATE" ? ( +
+

+ Collection +

+ + /> +
+ ) : undefined} + +
+

Tags

+ { + return { label: e.name, value: e.id }; + })} + /> +
+ +
+

+ Description +

+