bug fix + code cleanup
This commit is contained in:
Daniel
parent
69a5d2abd2
commit
3628d4281a
|
|
@ -5,10 +5,9 @@ import { CollectionIncludingMembers } from "@/types/global";
|
|||
import useLinkStore from "@/store/links";
|
||||
import Dropdown from "./Dropdown";
|
||||
import { useState } from "react";
|
||||
import Modal from "@/components/Modal";
|
||||
import CollectionModal from "@/components/Modal/Collection";
|
||||
import ProfilePhoto from "./ProfilePhoto";
|
||||
import { faCalendarDays } from "@fortawesome/free-regular-svg-icons";
|
||||
import useModalStore from "@/store/modals";
|
||||
|
||||
type Props = {
|
||||
collection: CollectionIncludingMembers;
|
||||
|
|
@ -16,6 +15,8 @@ type Props = {
|
|||
};
|
||||
|
||||
export default function CollectionCard({ collection, className }: Props) {
|
||||
const { setModal } = useModalStore();
|
||||
|
||||
const { links } = useLinkStore();
|
||||
const formattedDate = new Date(collection.createdAt as string).toLocaleString(
|
||||
"en-US",
|
||||
|
|
@ -27,21 +28,6 @@ export default function CollectionCard({ collection, className }: Props) {
|
|||
);
|
||||
|
||||
const [expandDropdown, setExpandDropdown] = useState(false);
|
||||
const [editCollectionModal, setEditCollectionModal] = useState(false);
|
||||
const [collectionMembersModal, setCollectionMembersModal] = useState(false);
|
||||
const [deleteCollectionModal, setDeleteCollectionModal] = useState(false);
|
||||
|
||||
const toggleEditCollectionModal = () => {
|
||||
setEditCollectionModal(!editCollectionModal);
|
||||
};
|
||||
|
||||
const toggleCollectionMembersModal = () => {
|
||||
setCollectionMembersModal(!collectionMembersModal);
|
||||
};
|
||||
|
||||
const toggleDeleteCollectionModal = () => {
|
||||
setDeleteCollectionModal(!deleteCollectionModal);
|
||||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
|
|
@ -103,21 +89,38 @@ export default function CollectionCard({ collection, className }: Props) {
|
|||
{
|
||||
name: "Edit Collection",
|
||||
onClick: () => {
|
||||
toggleEditCollectionModal();
|
||||
setModal({
|
||||
modal: "COLLECTION",
|
||||
state: true,
|
||||
method: "UPDATE",
|
||||
active: collection,
|
||||
});
|
||||
setExpandDropdown(false);
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "Share/Collaborate",
|
||||
onClick: () => {
|
||||
toggleCollectionMembersModal();
|
||||
setModal({
|
||||
modal: "COLLECTION",
|
||||
state: true,
|
||||
method: "UPDATE",
|
||||
active: collection,
|
||||
defaultIndex: 1,
|
||||
});
|
||||
setExpandDropdown(false);
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "Delete Collection",
|
||||
onClick: () => {
|
||||
toggleDeleteCollectionModal();
|
||||
setModal({
|
||||
modal: "COLLECTION",
|
||||
state: true,
|
||||
method: "UPDATE",
|
||||
active: collection,
|
||||
defaultIndex: 2,
|
||||
});
|
||||
setExpandDropdown(false);
|
||||
},
|
||||
},
|
||||
|
|
@ -130,35 +133,6 @@ export default function CollectionCard({ collection, className }: Props) {
|
|||
className="absolute top-[3.2rem] right-5 z-10 w-36"
|
||||
/>
|
||||
) : null}
|
||||
{editCollectionModal ? (
|
||||
<Modal toggleModal={toggleEditCollectionModal}>
|
||||
<CollectionModal
|
||||
toggleCollectionModal={toggleEditCollectionModal}
|
||||
activeCollection={collection}
|
||||
method="UPDATE"
|
||||
/>
|
||||
</Modal>
|
||||
) : null}
|
||||
{collectionMembersModal ? (
|
||||
<Modal toggleModal={toggleCollectionMembersModal}>
|
||||
<CollectionModal
|
||||
defaultIndex={1}
|
||||
toggleCollectionModal={toggleCollectionMembersModal}
|
||||
activeCollection={collection}
|
||||
method="UPDATE"
|
||||
/>
|
||||
</Modal>
|
||||
) : null}
|
||||
{deleteCollectionModal ? (
|
||||
<Modal toggleModal={toggleDeleteCollectionModal}>
|
||||
<CollectionModal
|
||||
defaultIndex={2}
|
||||
activeCollection={collection}
|
||||
toggleCollectionModal={toggleDeleteCollectionModal}
|
||||
method="UPDATE"
|
||||
/>
|
||||
</Modal>
|
||||
) : null}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -13,10 +13,9 @@ import { useEffect, useState } from "react";
|
|||
import Image from "next/image";
|
||||
import Dropdown from "./Dropdown";
|
||||
import useLinkStore from "@/store/links";
|
||||
import Modal from "./Modal";
|
||||
import LinkModal from "./Modal/LinkModal";
|
||||
import Link from "next/link";
|
||||
import useCollectionStore from "@/store/collections";
|
||||
import useModalStore from "@/store/modals";
|
||||
|
||||
type Props = {
|
||||
link: LinkIncludingCollectionAndTags;
|
||||
|
|
@ -25,8 +24,9 @@ type Props = {
|
|||
};
|
||||
|
||||
export default function LinkCard({ link, count, className }: Props) {
|
||||
const { setModal } = useModalStore();
|
||||
|
||||
const [expandDropdown, setExpandDropdown] = useState(false);
|
||||
const [editModal, setEditModal] = useState(false);
|
||||
|
||||
const { collections } = useCollectionStore();
|
||||
|
||||
|
|
@ -56,25 +56,11 @@ export default function LinkCard({ link, count, className }: Props) {
|
|||
}
|
||||
);
|
||||
|
||||
const toggleEditModal = () => {
|
||||
setEditModal(!editModal);
|
||||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
className={`bg-gradient-to-tr from-slate-200 from-10% to-gray-50 via-20% shadow-sm p-5 rounded-2xl relative group/item ${className}`}
|
||||
>
|
||||
<div className="flex items-start gap-5 sm:gap-10 h-full w-full">
|
||||
{editModal ? (
|
||||
<Modal toggleModal={toggleEditModal}>
|
||||
<LinkModal
|
||||
toggleLinkModal={toggleEditModal}
|
||||
activeLink={link}
|
||||
method="UPDATE"
|
||||
/>
|
||||
</Modal>
|
||||
) : null}
|
||||
|
||||
<Image
|
||||
src={`https://t2.gstatic.com/faviconV2?client=SOCIAL&type=FAVICON&fallback_opts=TYPE,SIZE,URL&url=${url.origin}&size=32`}
|
||||
width={42}
|
||||
|
|
@ -203,7 +189,12 @@ export default function LinkCard({ link, count, className }: Props) {
|
|||
{
|
||||
name: "Edit",
|
||||
onClick: () => {
|
||||
setEditModal(true);
|
||||
setModal({
|
||||
modal: "LINK",
|
||||
state: true,
|
||||
method: "UPDATE",
|
||||
active: link,
|
||||
});
|
||||
setExpandDropdown(false);
|
||||
},
|
||||
},
|
||||
|
|
|
|||
|
|
@ -80,7 +80,7 @@ export default function ProfileSettings({
|
|||
<div className="w-28 h-28 flex items-center justify-center border border-sky-100 rounded-full relative">
|
||||
<ProfilePhoto
|
||||
src={user.profilePic}
|
||||
className="h-28 w-28 border-[1px]"
|
||||
className="h-auto aspect-square w-28 border-[0px]"
|
||||
status={handleProfileStatus}
|
||||
/>
|
||||
{profileStatus && (
|
||||
|
|
|
|||
|
|
@ -0,0 +1,51 @@
|
|||
import useModalStore from "@/store/modals";
|
||||
import Modal from "./Modal";
|
||||
import LinkModal from "./Modal/LinkModal";
|
||||
import {
|
||||
AccountSettings,
|
||||
CollectionIncludingMembers,
|
||||
LinkIncludingCollectionAndTags,
|
||||
} from "@/types/global";
|
||||
import CollectionModal from "./Modal/Collection";
|
||||
import UserModal from "./Modal/User";
|
||||
|
||||
export default function ModalManagement() {
|
||||
const { modal, setModal } = useModalStore();
|
||||
|
||||
const toggleModal = () => {
|
||||
setModal(null);
|
||||
};
|
||||
|
||||
if (modal && modal.modal === "LINK")
|
||||
return (
|
||||
<Modal toggleModal={toggleModal}>
|
||||
<LinkModal
|
||||
toggleLinkModal={toggleModal}
|
||||
method={modal.method}
|
||||
activeLink={modal.active as LinkIncludingCollectionAndTags}
|
||||
/>
|
||||
</Modal>
|
||||
);
|
||||
else if (modal && modal.modal === "COLLECTION")
|
||||
return (
|
||||
<Modal toggleModal={toggleModal}>
|
||||
<CollectionModal
|
||||
toggleCollectionModal={toggleModal}
|
||||
method={modal.method}
|
||||
defaultIndex={modal.defaultIndex}
|
||||
activeCollection={modal.active as CollectionIncludingMembers}
|
||||
/>
|
||||
</Modal>
|
||||
);
|
||||
else if (modal && modal.modal === "ACCOUNT")
|
||||
return (
|
||||
<Modal toggleModal={toggleModal}>
|
||||
<UserModal
|
||||
toggleSettingsModal={toggleModal}
|
||||
defaultIndex={modal.defaultIndex}
|
||||
activeUser={modal.active as AccountSettings}
|
||||
/>
|
||||
</Modal>
|
||||
);
|
||||
else return <></>;
|
||||
}
|
||||
|
|
@ -7,23 +7,21 @@ import {
|
|||
} from "@fortawesome/free-solid-svg-icons";
|
||||
import { useEffect, useState } from "react";
|
||||
import Dropdown from "@/components/Dropdown";
|
||||
import Modal from "@/components/Modal";
|
||||
import LinkModal from "@/components/Modal/LinkModal";
|
||||
import ClickAwayHandler from "@/components/ClickAwayHandler";
|
||||
import Sidebar from "@/components/Sidebar";
|
||||
import { useRouter } from "next/router";
|
||||
import Search from "@/components/Search";
|
||||
import UserModal from "@/components/Modal/User";
|
||||
import useAccountStore from "@/store/account";
|
||||
import ProfilePhoto from "@/components/ProfilePhoto";
|
||||
import useModalStore from "@/store/modals";
|
||||
|
||||
export default function Navbar() {
|
||||
const { setModal } = useModalStore();
|
||||
|
||||
const { account } = useAccountStore();
|
||||
|
||||
const [profileDropdown, setProfileDropdown] = useState(false);
|
||||
|
||||
const [linkModal, setLinkModal] = useState(false);
|
||||
const [settingsModal, setSettingsModal] = useState(false);
|
||||
const [sidebar, setSidebar] = useState(false);
|
||||
|
||||
const router = useRouter();
|
||||
|
|
@ -38,14 +36,6 @@ export default function Navbar() {
|
|||
setSidebar(!sidebar);
|
||||
};
|
||||
|
||||
const toggleLinkModal = () => {
|
||||
setLinkModal(!linkModal);
|
||||
};
|
||||
|
||||
const toggleSettingsModal = () => {
|
||||
setSettingsModal(!settingsModal);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex justify-between gap-2 items-center px-5 py-2 border-solid border-b-sky-100 border-b h-16">
|
||||
<div
|
||||
|
|
@ -57,7 +47,13 @@ export default function Navbar() {
|
|||
<Search />
|
||||
<div className="flex items-center gap-2">
|
||||
<div
|
||||
onClick={toggleLinkModal}
|
||||
onClick={() => {
|
||||
setModal({
|
||||
modal: "LINK",
|
||||
state: true,
|
||||
method: "CREATE",
|
||||
});
|
||||
}}
|
||||
className="inline-flex gap-1 relative sm:w-[7.2rem] items-center font-semibold select-none cursor-pointer p-[0.687rem] sm:p-2 sm:px-3 rounded-md sm:rounded-full hover:bg-sky-100 text-sky-500 sm:text-white sm:bg-sky-500 sm:hover:bg-sky-400 duration-100 group"
|
||||
>
|
||||
<FontAwesomeIcon
|
||||
|
|
@ -102,7 +98,12 @@ export default function Navbar() {
|
|||
{
|
||||
name: "Settings",
|
||||
onClick: () => {
|
||||
toggleSettingsModal();
|
||||
setModal({
|
||||
modal: "ACCOUNT",
|
||||
state: true,
|
||||
method: "CREATE",
|
||||
active: account,
|
||||
});
|
||||
setProfileDropdown(!profileDropdown);
|
||||
},
|
||||
},
|
||||
|
|
@ -122,21 +123,6 @@ export default function Navbar() {
|
|||
/>
|
||||
) : null}
|
||||
|
||||
{linkModal ? (
|
||||
<Modal toggleModal={toggleLinkModal}>
|
||||
<LinkModal toggleLinkModal={toggleLinkModal} method="CREATE" />
|
||||
</Modal>
|
||||
) : null}
|
||||
|
||||
{settingsModal ? (
|
||||
<Modal toggleModal={toggleSettingsModal}>
|
||||
<UserModal
|
||||
toggleSettingsModal={toggleSettingsModal}
|
||||
activeUser={account}
|
||||
/>
|
||||
</Modal>
|
||||
) : null}
|
||||
|
||||
{sidebar ? (
|
||||
<div className="fixed top-0 bottom-0 right-0 left-0 bg-gray-500 bg-opacity-10 backdrop-blur-sm flex items-center fade-in z-30">
|
||||
<ClickAwayHandler onClickOutside={toggleSidebar}>
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@ import { useSession } from "next-auth/react";
|
|||
import Loader from "../components/Loader";
|
||||
import useRedirect from "@/hooks/useRedirect";
|
||||
import { useRouter } from "next/router";
|
||||
import ModalManagement from "@/components/ModalManagement";
|
||||
|
||||
interface Props {
|
||||
children: ReactNode;
|
||||
|
|
@ -18,16 +19,20 @@ export default function MainLayout({ children }: Props) {
|
|||
|
||||
if (status === "authenticated" && !redirect && routeExists)
|
||||
return (
|
||||
<div className="flex">
|
||||
<div className="hidden lg:block">
|
||||
<Sidebar className="fixed" />
|
||||
</div>
|
||||
<>
|
||||
<ModalManagement />
|
||||
|
||||
<div className="w-full lg:ml-64 xl:ml-80">
|
||||
<Navbar />
|
||||
{children}
|
||||
<div className="flex">
|
||||
<div className="hidden lg:block">
|
||||
<Sidebar className="fixed" />
|
||||
</div>
|
||||
|
||||
<div className="w-full lg:ml-64 xl:ml-80">
|
||||
<Navbar />
|
||||
{children}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
else if ((status === "unauthenticated" && !redirect) || !routeExists)
|
||||
return <>{children}</>;
|
||||
|
|
|
|||
|
|
@ -1,8 +1,5 @@
|
|||
import Dropdown from "@/components/Dropdown";
|
||||
import LinkCard from "@/components/LinkCard";
|
||||
import Modal from "@/components/Modal";
|
||||
import LinkModal from "@/components/Modal/LinkModal";
|
||||
import CollectionModal from "@/components/Modal/Collection";
|
||||
import useCollectionStore from "@/store/collections";
|
||||
import useLinkStore from "@/store/links";
|
||||
import { CollectionIncludingMembers } from "@/types/global";
|
||||
|
|
@ -18,8 +15,11 @@ import MainLayout from "@/layouts/MainLayout";
|
|||
import { useSession } from "next-auth/react";
|
||||
import ProfilePhoto from "@/components/ProfilePhoto";
|
||||
import SortLinkDropdown from "@/components/SortLinkDropdown";
|
||||
import useModalStore from "@/store/modals";
|
||||
|
||||
export default function Index() {
|
||||
const { setModal } = useModalStore();
|
||||
|
||||
const router = useRouter();
|
||||
|
||||
const { links } = useLinkStore();
|
||||
|
|
@ -28,10 +28,6 @@ export default function Index() {
|
|||
const { data } = useSession();
|
||||
|
||||
const [expandDropdown, setExpandDropdown] = useState(false);
|
||||
const [linkModal, setLinkModal] = useState(false);
|
||||
const [collectionInfoModal, setCollectionInfoModal] = useState(false);
|
||||
const [collectionMembersModal, setCollectionMembersModal] = useState(false);
|
||||
const [deleteCollectionModal, setDeleteCollectionModal] = useState(false);
|
||||
const [sortDropdown, setSortDropdown] = useState(false);
|
||||
const [sortBy, setSortBy] = useState("Name (A-Z)");
|
||||
|
||||
|
|
@ -40,22 +36,6 @@ export default function Index() {
|
|||
|
||||
const [sortedLinks, setSortedLinks] = useState(links);
|
||||
|
||||
const toggleLinkModal = () => {
|
||||
setLinkModal(!linkModal);
|
||||
};
|
||||
|
||||
const toggleCollectionInfoModal = () => {
|
||||
setCollectionInfoModal(!collectionInfoModal);
|
||||
};
|
||||
|
||||
const toggleCollectionMembersModal = () => {
|
||||
setCollectionMembersModal(!collectionMembersModal);
|
||||
};
|
||||
|
||||
const toggleDeleteCollectionModal = () => {
|
||||
setDeleteCollectionModal(!deleteCollectionModal);
|
||||
};
|
||||
|
||||
const handleSortChange = (event: ChangeEvent<HTMLInputElement>) => {
|
||||
setSortBy(event.target.value);
|
||||
};
|
||||
|
|
@ -124,7 +104,16 @@ export default function Index() {
|
|||
}`}
|
||||
>
|
||||
<div
|
||||
onClick={toggleCollectionMembersModal}
|
||||
onClick={() =>
|
||||
activeCollection &&
|
||||
setModal({
|
||||
modal: "COLLECTION",
|
||||
state: true,
|
||||
method: "UPDATE",
|
||||
active: activeCollection,
|
||||
defaultIndex: 1,
|
||||
})
|
||||
}
|
||||
className="flex justify-center sm:justify-end items-center w-fit mx-auto sm:mr-0 sm:ml-auto group cursor-pointer"
|
||||
>
|
||||
<div
|
||||
|
|
@ -203,28 +192,52 @@ export default function Index() {
|
|||
{
|
||||
name: "Add Link Here",
|
||||
onClick: () => {
|
||||
toggleLinkModal();
|
||||
setModal({
|
||||
modal: "LINK",
|
||||
state: true,
|
||||
method: "CREATE",
|
||||
});
|
||||
setExpandDropdown(false);
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "Edit Collection Info",
|
||||
onClick: () => {
|
||||
toggleCollectionInfoModal();
|
||||
activeCollection &&
|
||||
setModal({
|
||||
modal: "COLLECTION",
|
||||
state: true,
|
||||
method: "UPDATE",
|
||||
active: activeCollection,
|
||||
});
|
||||
setExpandDropdown(false);
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "Share/Collaborate",
|
||||
onClick: () => {
|
||||
toggleCollectionMembersModal();
|
||||
activeCollection &&
|
||||
setModal({
|
||||
modal: "COLLECTION",
|
||||
state: true,
|
||||
method: "UPDATE",
|
||||
active: activeCollection,
|
||||
defaultIndex: 1,
|
||||
});
|
||||
setExpandDropdown(false);
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "Delete Collection",
|
||||
onClick: () => {
|
||||
toggleDeleteCollectionModal();
|
||||
activeCollection &&
|
||||
setModal({
|
||||
modal: "COLLECTION",
|
||||
state: true,
|
||||
method: "UPDATE",
|
||||
active: activeCollection,
|
||||
defaultIndex: 2,
|
||||
});
|
||||
setExpandDropdown(false);
|
||||
},
|
||||
},
|
||||
|
|
@ -237,47 +250,6 @@ export default function Index() {
|
|||
className="absolute top-8 right-0 z-10 w-40"
|
||||
/>
|
||||
) : null}
|
||||
|
||||
{linkModal ? (
|
||||
<Modal toggleModal={toggleLinkModal}>
|
||||
<LinkModal
|
||||
toggleLinkModal={toggleLinkModal}
|
||||
method="CREATE"
|
||||
/>
|
||||
</Modal>
|
||||
) : null}
|
||||
|
||||
{collectionInfoModal && activeCollection ? (
|
||||
<Modal toggleModal={toggleCollectionInfoModal}>
|
||||
<CollectionModal
|
||||
toggleCollectionModal={toggleCollectionInfoModal}
|
||||
activeCollection={activeCollection}
|
||||
method="UPDATE"
|
||||
/>
|
||||
</Modal>
|
||||
) : null}
|
||||
|
||||
{collectionMembersModal && activeCollection ? (
|
||||
<Modal toggleModal={toggleCollectionMembersModal}>
|
||||
<CollectionModal
|
||||
defaultIndex={1}
|
||||
toggleCollectionModal={toggleCollectionMembersModal}
|
||||
activeCollection={activeCollection}
|
||||
method="UPDATE"
|
||||
/>
|
||||
</Modal>
|
||||
) : null}
|
||||
|
||||
{deleteCollectionModal && activeCollection ? (
|
||||
<Modal toggleModal={toggleDeleteCollectionModal}>
|
||||
<CollectionModal
|
||||
defaultIndex={2}
|
||||
toggleCollectionModal={toggleDeleteCollectionModal}
|
||||
activeCollection={activeCollection}
|
||||
method="UPDATE"
|
||||
/>
|
||||
</Modal>
|
||||
) : null}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -9,12 +9,11 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
|||
import CollectionCard from "@/components/CollectionCard";
|
||||
import Dropdown from "@/components/Dropdown";
|
||||
import { ChangeEvent, useEffect, useState } from "react";
|
||||
import Modal from "@/components/Modal";
|
||||
import MainLayout from "@/layouts/MainLayout";
|
||||
import ClickAwayHandler from "@/components/ClickAwayHandler";
|
||||
import RadioButton from "@/components/RadioButton";
|
||||
import CollectionModal from "@/components/Modal/Collection";
|
||||
import { useSession } from "next-auth/react";
|
||||
import useModalStore from "@/store/modals";
|
||||
|
||||
export default function Collections() {
|
||||
const { collections } = useCollectionStore();
|
||||
|
|
@ -23,13 +22,9 @@ export default function Collections() {
|
|||
const [sortBy, setSortBy] = useState("Name (A-Z)");
|
||||
const [sortedCollections, setSortedCollections] = useState(collections);
|
||||
|
||||
const [collectionModal, setCollectionModal] = useState(false);
|
||||
|
||||
const session = useSession();
|
||||
|
||||
const toggleCollectionModal = () => {
|
||||
setCollectionModal(!collectionModal);
|
||||
};
|
||||
const { setModal } = useModalStore();
|
||||
|
||||
const handleSortChange = (event: ChangeEvent<HTMLInputElement>) => {
|
||||
setSortBy(event.target.value);
|
||||
|
|
@ -109,7 +104,19 @@ export default function Collections() {
|
|||
{
|
||||
name: "New Collection",
|
||||
onClick: () => {
|
||||
toggleCollectionModal();
|
||||
setModal({
|
||||
modal: "COLLECTION",
|
||||
state: true,
|
||||
method: "CREATE",
|
||||
active: {
|
||||
name: "",
|
||||
description: "",
|
||||
color: "#0ea5e9",
|
||||
isPublic: false,
|
||||
ownerId: session.data?.user.id as number,
|
||||
members: [],
|
||||
},
|
||||
});
|
||||
setExpandDropdown(false);
|
||||
},
|
||||
},
|
||||
|
|
@ -198,7 +205,21 @@ export default function Collections() {
|
|||
|
||||
<div
|
||||
className="p-5 self-stretch bg-gradient-to-tr from-sky-100 from-10% via-gray-100 via-20% min-h-[12rem] rounded-2xl cursor-pointer shadow duration-100 hover:shadow-none flex flex-col gap-4 justify-center items-center group"
|
||||
onClick={toggleCollectionModal}
|
||||
onClick={() => {
|
||||
setModal({
|
||||
modal: "COLLECTION",
|
||||
state: true,
|
||||
method: "CREATE",
|
||||
active: {
|
||||
name: "",
|
||||
description: "",
|
||||
color: "#0ea5e9",
|
||||
isPublic: false,
|
||||
ownerId: session.data?.user.id as number,
|
||||
members: [],
|
||||
},
|
||||
});
|
||||
}}
|
||||
>
|
||||
<p className="text-sky-900 group-hover:opacity-0 duration-100">
|
||||
New Collection
|
||||
|
|
@ -210,23 +231,6 @@ export default function Collections() {
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{collectionModal ? (
|
||||
<Modal toggleModal={toggleCollectionModal}>
|
||||
<CollectionModal
|
||||
activeCollection={{
|
||||
name: "",
|
||||
description: "",
|
||||
color: "#0ea5e9",
|
||||
isPublic: false,
|
||||
ownerId: session.data?.user.id as number,
|
||||
members: [],
|
||||
}}
|
||||
toggleCollectionModal={toggleCollectionModal}
|
||||
method="CREATE"
|
||||
/>
|
||||
</Modal>
|
||||
) : null}
|
||||
</MainLayout>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,48 @@
|
|||
import {
|
||||
AccountSettings,
|
||||
CollectionIncludingMembers,
|
||||
LinkIncludingCollectionAndTags,
|
||||
} from "@/types/global";
|
||||
import { create } from "zustand";
|
||||
|
||||
type Modal =
|
||||
| {
|
||||
modal: "ACCOUNT";
|
||||
state: boolean;
|
||||
active: AccountSettings;
|
||||
defaultIndex?: number;
|
||||
}
|
||||
| {
|
||||
modal: "LINK";
|
||||
state: boolean;
|
||||
method: "CREATE";
|
||||
active?: LinkIncludingCollectionAndTags;
|
||||
}
|
||||
| {
|
||||
modal: "LINK";
|
||||
state: boolean;
|
||||
method: "UPDATE";
|
||||
active: LinkIncludingCollectionAndTags;
|
||||
}
|
||||
| {
|
||||
modal: "COLLECTION";
|
||||
state: boolean;
|
||||
method: "CREATE" | "UPDATE";
|
||||
active: CollectionIncludingMembers;
|
||||
defaultIndex?: number;
|
||||
}
|
||||
| null;
|
||||
|
||||
type ModalsStore = {
|
||||
modal: Modal;
|
||||
setModal: (modal: Modal) => void;
|
||||
};
|
||||
|
||||
const useLocalSettingsStore = create<ModalsStore>((set) => ({
|
||||
modal: null,
|
||||
setModal: (modal: Modal) => {
|
||||
set({ modal });
|
||||
},
|
||||
}));
|
||||
|
||||
export default useLocalSettingsStore;
|
||||
Ŝarĝante…
Reference in New Issue