diff --git a/apps/web/pages/settings/profile/publications.js b/apps/web/pages/settings/profile/publications.js new file mode 100644 index 000000000..ada4bfc41 --- /dev/null +++ b/apps/web/pages/settings/profile/publications.js @@ -0,0 +1,173 @@ +import { useEffect, useState } from "react"; +import { X } from "react-bootstrap-icons"; + +import { getLayout } from "@calcom/features/settings/layouts/SettingsLayout"; +import { useLocale } from "@calcom/lib/hooks/useLocale"; +import { trpc } from "@calcom/trpc/react"; +import { + Button, + Label, + Meta, + TextArea, + showToast, + SkeletonButton, + SkeletonContainer, + SkeletonText, + Input, +} from "@calcom/ui"; + +import PageWrapper from "@components/PageWrapper"; +import EmptyState from "@components/edit-profile/Account/EmptyState"; + +const SkeletonLoader = ({ title, description }) => { + return ( + + +
+ + + + + + +
+
+ ); +}; + +const PublicationsSettings = () => { + const { t } = useLocale(); + + const { data: user, isLoading } = trpc.viewer.me.useQuery(); + if (isLoading) return ; + if (!user) { + throw new Error(t("something_went_wrong")); + } + return ; +}; + +const GeneralView = ({ user }) => { + const [data, setData] = useState(user?.publications || []); + const addPublicationMutation = trpc.viewer.addPublication.useMutation(); + const updatePublicationMutation = trpc.viewer.updatePublication.useMutation(); + const removePublicationMutation = trpc.viewer.removePublication.useMutation(); + + useEffect(() => { + setData(user?.publications); + }, [user?.publications]); + + const onSave = (e) => { + e.preventDefault(); + data?.map((pub) => { + const pubData = { + ...pub, + updatedAt: new Date(), + }; + + if (pub?.id) { + updatePublicationMutation.mutate(pubData); + } else if (pub?.title) { + addPublicationMutation.mutate(pubData); + } + }); + + showToast("Changes saved", "success"); + }; + + const removePublication = ({ index, id }) => { + if (id) { + removePublicationMutation.mutate({ id }); + } + setData((prev) => prev.filter((_, i) => i !== index)); + }; + + const addPublication = () => { + const newPublication = { + title: "", + url: "", + description: "", + }; + setData((prev) => [...prev, newPublication]); + }; + + return ( +
+ + {!data || + (data?.length === 0 && ( + + ))} +
+ {data?.length > 0 && + data?.map((publication, i) => ( +
+
+ + { + const newPublicationss = [...data]; + newPublicationss[i].title = e.target.value; + setData(newPublicationss); + }} + /> +
+
+ + { + const newPublicationss = [...data]; + newPublicationss[i].url = e.target.value; + setData(newPublicationss); + }} + /> +
+
+ +