diff --git a/components/CollectionCard.tsx b/components/CollectionCard.tsx index e2b85f8..955bd30 100644 --- a/components/CollectionCard.tsx +++ b/components/CollectionCard.tsx @@ -10,6 +10,8 @@ import usePermissions from "@/hooks/usePermissions"; import useLocalSettingsStore from "@/store/localSettings"; import getPublicUserData from "@/lib/client/getPublicUserData"; import useAccountStore from "@/store/account"; +import EditCollectionModal from "./Modals/EditCollectionModal"; +import EditCollectionSharingModal from "./Modals/EditCollectionSharingModal"; type Props = { collection: CollectionIncludingMembersAndLinkCount; @@ -57,6 +59,10 @@ export default function CollectionCard({ collection, className }: Props) { fetchOwner(); }, [collection]); + const [editCollectionModal, setEditCollectionModal] = useState(false); + const [editCollectionSharingModal, setEditCollectionSharingModal] = + useState(false); + return (
@@ -71,19 +77,12 @@ export default function CollectionCard({ collection, className }: Props) { {permissions === true ? (
  • { (document?.activeElement as HTMLElement)?.blur(); - collection && - setModal({ - modal: "COLLECTION", - state: true, - method: "UPDATE", - isOwner: permissions === true, - active: collection, - }); + setEditCollectionModal(true); }} > Edit Collection Info @@ -97,15 +96,7 @@ export default function CollectionCard({ collection, className }: Props) { tabIndex={0} onClick={() => { (document?.activeElement as HTMLElement)?.blur(); - collection && - setModal({ - modal: "COLLECTION", - state: true, - method: "UPDATE", - isOwner: permissions === true, - active: collection, - defaultIndex: permissions === true ? 1 : 0, - }); + setEditCollectionSharingModal(true); }} > {permissions === true ? "Share and Collaborate" : "View Team"} @@ -136,17 +127,7 @@ export default function CollectionCard({ collection, className }: Props) {
    - collection && - setModal({ - modal: "COLLECTION", - state: true, - method: "UPDATE", - isOwner: permissions === true, - active: collection, - defaultIndex: permissions === true ? 1 : 0, - }) - } + onClick={() => setEditCollectionSharingModal(true)} > {collectionOwner.id ? (
    + setEditCollectionModal(false)} + modalId={"edit-collection-modal" + collection.id} + activeCollection={collection} + /> + setEditCollectionSharingModal(false)} + modalId={"edit-collection-sharing-modal" + collection.id} + activeCollection={collection} + />
    • ); } diff --git a/components/InputSelect/styles.ts b/components/InputSelect/styles.ts index 8fa42d5..96aad6d 100644 --- a/components/InputSelect/styles.ts +++ b/components/InputSelect/styles.ts @@ -24,7 +24,7 @@ export const styles: StylesConfig = { ? "1px solid oklch(var(--p))" : "1px solid oklch(var(--nc))", boxShadow: "none", - height: "2.6rem", + minHeight: "2.6rem", }), container: (styles, state) => ({ ...styles, diff --git a/components/LinkCard.tsx b/components/LinkCard.tsx index 0fdc1f9..bce3a51 100644 --- a/components/LinkCard.tsx +++ b/components/LinkCard.tsx @@ -22,6 +22,7 @@ import isValidUrl from "@/lib/client/isValidUrl"; import Link from "next/link"; import unescapeString from "@/lib/client/unescapeString"; import { useRouter } from "next/router"; +import EditLinkModal from "./Modals/EditLinkModal"; type Props = { link: LinkIncludingShortenedCollectionAndTags; @@ -135,147 +136,142 @@ export default function LinkCard({ link, count, className }: Props) { } ); + const [newLinkModal, setNewLinkModal] = useState(false); + return ( - <> +
    + {permissions === true || + permissions?.canUpdate || + permissions?.canDelete ? ( +
    +
    + +
    +
      + {permissions === true ? ( +
    • +
      { + (document?.activeElement as HTMLElement)?.blur(); + pinLink(); + }} + > + {link?.pinnedBy && link.pinnedBy[0] + ? "Unpin" + : "Pin to Dashboard"} +
      +
      • + ) : undefined} + {permissions === true || permissions?.canUpdate ? ( +
    • +
      { + (document?.activeElement as HTMLElement)?.blur(); + setNewLinkModal(true); + }} + > + Edit +
      +
      • + ) : undefined} + {permissions === true ? ( +
    • +
      { + (document?.activeElement as HTMLElement)?.blur(); + updateArchive(); + }} + > + Refresh Link +
      +
      • + ) : undefined} + {permissions === true || permissions?.canDelete ? ( +
    • +
      { + (document?.activeElement as HTMLElement)?.blur(); + deleteLink(); + }} + > + Delete +
      +
      • + ) : undefined} +
    +
    + ) : undefined} +
    router.push("/links/" + link.id)} + className="flex items-start cursor-pointer gap-5 sm:gap-10 h-full w-full p-4" > - {permissions === true || - permissions?.canUpdate || - permissions?.canDelete ? ( -
    -
    { + const target = e.target as HTMLElement; + target.style.display = "none"; + }} + /> + )} + +
    +
    +
    +

    {count + 1}

    +

    + {unescapeString(link.name || link.description)} +

    +
    + { + e.stopPropagation(); + }} + className="flex items-center gap-1 max-w-full w-fit my-1 hover:opacity-70 duration-100" > -
    -
      - {permissions === true ? ( -
    • -
      { - (document?.activeElement as HTMLElement)?.blur(); - pinLink(); - }} - > - {link?.pinnedBy && link.pinnedBy[0] - ? "Unpin" - : "Pin to Dashboard"} -
      -
      • - ) : undefined} - {permissions === true || permissions?.canUpdate ? ( -
    • -
      { - (document?.activeElement as HTMLElement)?.blur(); - collection && - setModal({ - modal: "LINK", - state: true, - method: "UPDATE", - active: link, - }); - }} - > - Edit -
      -
      • - ) : undefined} - {permissions === true ? ( -
    • -
      { - (document?.activeElement as HTMLElement)?.blur(); - updateArchive(); - }} - > - Refresh Link -
      -
      • - ) : undefined} - {permissions === true || permissions?.canDelete ? ( -
    • -
      { - (document?.activeElement as HTMLElement)?.blur(); - deleteLink(); - }} - > - Delete -
      -
      • - ) : undefined} -
    -
    - ) : undefined} +

    {collection?.name}

    + -
    router.push("/links/" + link.id)} - className="flex items-start cursor-pointer gap-5 sm:gap-10 h-full w-full p-4" - > - {url && account.displayLinkIcons && ( - { - const target = e.target as HTMLElement; - target.style.display = "none"; - }} - /> - )} - -
    -
    -
    -

    {count + 1}

    -

    - {unescapeString(link.name || link.description)} -

    -
    - { - e.stopPropagation(); - }} - className="flex items-center gap-1 max-w-full w-fit my-1 hover:opacity-70 duration-100" - > - -

    {collection?.name}

    - - - {/* {link.tags[0] ? ( + {/* {link.tags[0] ? (
    {link.tags.map((e, i) => ( @@ -295,25 +291,30 @@ export default function LinkCard({ link, count, className }: Props) {
    ) : undefined} */} - { - e.stopPropagation(); - }} - className="flex items-center gap-1 max-w-full w-fit text-neutral hover:opacity-70 duration-100" - > - -

    {shortendURL}

    - -
    - -

    {formattedDate}

    -
    + { + e.stopPropagation(); + }} + className="flex items-center gap-1 max-w-full w-fit text-neutral hover:opacity-70 duration-100" + > + +

    {shortendURL}

    + +
    + +

    {formattedDate}

    - + setNewLinkModal(false)} + modalId={"edit-link-modal" + link.id} + activeLink={link} + /> +
    ); } diff --git a/components/Modal/Collection/TeamManagement.tsx b/components/Modal/Collection/TeamManagement.tsx index 50d63aa..9736c4e 100644 --- a/components/Modal/Collection/TeamManagement.tsx +++ b/components/Modal/Collection/TeamManagement.tsx @@ -139,7 +139,7 @@ export default function TeamManagement({ ) : null} {permissions !== true && collection.isPublic && ( -
    +
    )} {permissions === true && ( diff --git a/components/Modal/Collection/ViewTeam.tsx b/components/Modal/Collection/ViewTeam.tsx index 9a941db..4896efd 100644 --- a/components/Modal/Collection/ViewTeam.tsx +++ b/components/Modal/Collection/ViewTeam.tsx @@ -34,7 +34,7 @@ export default function ViewTeam({ collection }: Props) {
    { + modal?.addEventListener("close", () => { + onClose(); + }); + + return () => { + modal?.addEventListener("close", () => { + onClose(); + }); + }; + }, [isOpen]); + + const [collection, setCollection] = + useState(activeCollection); + + useEffect(() => { + setCollection(activeCollection); + }, [isOpen]); + + const [submitLoader, setSubmitLoader] = useState(false); + const { updateCollection } = useCollectionStore(); + + const submit = async () => { + if (!submitLoader) { + setSubmitLoader(true); + if (!collection) return null; + + setSubmitLoader(true); + + const load = toast.loading("Updating..."); + + let response; + + response = await updateCollection(collection as any); + + toast.dismiss(load); + + if (response.ok) { + toast.success(`Updated!`); + (document.getElementById(modalId) as any).close(); + } else toast.error(response.data as string); + + setSubmitLoader(false); + } + }; + + return ( + + +
    +
    + +
    + +

    Edit Collection Info

    + +
    +
    +
    +

    Name

    +
    + + setCollection({ ...collection, name: e.target.value }) + } + /> +
    +

    Color

    +
    +
    +
    + +
    +
    + setCollection({ ...collection, color: "#0ea5e9" }) + } + > + Reset +
    +
    + + setCollection({ ...collection, color: e }) + } + /> +
    +
    +
    +
    + +
    +

    Description

    +