remove tag functionality

pages/api/v1/payment/index.ts

@@ -17,9 +17,9 @@ export default async function users(req: NextApiRequest, res: NextApiResponse) {
 
   let PRICE_ID = MONTHLY_PRICE_ID;
 
-  if ((Number(req.query.plan) as unknown as Plan) === Plan.monthly)
+  if ((Number(req.query.plan) as Plan) === Plan.monthly)
     PRICE_ID = MONTHLY_PRICE_ID;
-  else if ((Number(req.query.plan) as unknown as Plan) === Plan.yearly)
+  else if ((Number(req.query.plan) as Plan) === Plan.yearly)
     PRICE_ID = YEARLY_PRICE_ID;
 
   if (req.method === "GET") {

pages/api/v1/tags/[id].ts

@@ -1,6 +1,7 @@
 import type { NextApiRequest, NextApiResponse } from "next";
-import updateTag from "@/lib/api/controllers/tags/tagId/updeteTagById";
+import updeteTagById from "@/lib/api/controllers/tags/tagId/updeteTagById";
 import authenticateUser from "@/lib/api/authenticateUser";
+import deleteTagById from "@/lib/api/controllers/tags/tagId/deleteTagById";
 
 export default async function tags(req: NextApiRequest, res: NextApiResponse) {
   const user = await authenticateUser({ req, res });
@@ -9,7 +10,10 @@ export default async function tags(req: NextApiRequest, res: NextApiResponse) {
   const tagId = Number(req.query.id);
 
   if (req.method === "PUT") {
-    const tags = await updateTag(user.id, tagId, req.body);
+    const tags = await updeteTagById(user.id, tagId, req.body);
+    return res.status(tags.status).json({ response: tags.response });
+  } else if (req.method === "DELETE") {
+    const tags = await deleteTagById(user.id, tagId);
     return res.status(tags.status).json({ response: tags.response });
   }
 }

pages/links/index.tsx

@@ -32,7 +32,7 @@ export default function Links() {
               </p>
 
               <p className="capitalize text-black dark:text-white">
-                All Links from every Collections
+                Links from every Collections
               </p>
             </div>
           </div>

pages/settings/account.tsx

@@ -87,19 +87,19 @@ export default function Account() {
     if (response.ok) {
       toast.success("Settings Applied!");
 
-      if (user.email !== account.email) {
-        update({
-          id: data?.user.id,
-        });
+      // if (user.email !== account.email) {
+      //   update({
+      //     id: data?.user.id,
+      //   });
 
-        signOut();
-      } else if (
-        user.username !== account.username ||
-        user.name !== account.name
-      )
-        update({
-          id: data?.user.id,
-        });
+      //   signOut();
+      // } else if (
+      //   user.username !== account.username ||
+      //   user.name !== account.name
+      // )
+      //   update({
+      //     id: data?.user.id,
+      //   });
     } else toast.error(response.data as string);
     setSubmitLoader(false);
   };
@@ -172,18 +172,14 @@ export default function Account() {
         <div className="grid sm:grid-cols-2 gap-3 auto-rows-auto">
           <div className="flex flex-col gap-3">
             <div>
-              <p className="text-sm text-black dark:text-white mb-2">
-                Display Name
-              </p>
+              <p className="text-black dark:text-white mb-2">Display Name</p>
               <TextInput
                 value={user.name || ""}
                 onChange={(e) => setUser({ ...user, name: e.target.value })}
               />
             </div>
             <div>
-              <p className="text-sm text-black dark:text-white mb-2">
-                Username
-              </p>
+              <p className="text-black dark:text-white mb-2">Username</p>
               <TextInput
                 value={user.username || ""}
                 onChange={(e) => setUser({ ...user, username: e.target.value })}
@@ -192,23 +188,23 @@ export default function Account() {
 
             {emailEnabled ? (
               <div>
-                <p className="text-sm text-black dark:text-white mb-2">Email</p>
+                <p className="text-black dark:text-white mb-2">Email</p>
+                {user.email !== account.email &&
+                process.env.NEXT_PUBLIC_STRIPE_IS_ACTIVE === "true" ? (
+                  <p className="text-gray-500 dark:text-gray-400 mb-2 text-sm">
+                    Updating this field will change your billing email as well
+                  </p>
+                ) : undefined}
                 <TextInput
                   value={user.email || ""}
                   onChange={(e) => setUser({ ...user, email: e.target.value })}
                 />
               </div>
             ) : undefined}
-
-            {user.email !== account.email ? (
-              <p className="text-gray-500 dark:text-gray-400">
-                You will need to log back in after you apply this Email.
-              </p>
-            ) : undefined}
           </div>
 
           <div className="sm:row-span-2 sm:justify-self-center mx-auto my-3">
-            <p className="text-sm text-black dark:text-white mb-2 text-center">
+            <p className="text-black dark:text-white mb-2 text-center">
               Profile Photo
             </p>
             <div className="w-28 h-28 flex items-center justify-center rounded-full relative">
@@ -258,7 +254,7 @@ export default function Account() {
 
           <div className="flex gap-3 flex-col">
             <div>
-              <p className="text-sm text-black dark:text-white mb-2">
+              <p className="text-black dark:text-white mb-2">
                 Import your data from other platforms.
               </p>
               <div
@@ -323,7 +319,7 @@ export default function Account() {
             </div>
 
             <div>
-              <p className="text-sm text-black dark:text-white mb-2">
+              <p className="text-black dark:text-white mb-2">
                 Download your data instantly.
               </p>
               <Link className="w-fit" href="/api/v1/migration">
@@ -347,7 +343,6 @@ export default function Account() {
           <Checkbox
             label="Make profile private"
             state={user.isPrivate}
-            className="text-sm sm:text-base"
             onClick={() => setUser({ ...user, isPrivate: !user.isPrivate })}
           />
 
@@ -357,7 +352,7 @@ export default function Account() {
 
           {user.isPrivate && (
             <div>
-              <p className="text-sm text-black dark:text-white mt-2">
+              <p className="text-black dark:text-white mt-2">
                 Whitelisted Users
               </p>
               <p className="text-gray-500 dark:text-gray-300 text-sm mb-3">

pages/settings/appearance.tsx

@@ -8,7 +8,7 @@ export default function Appearance() {
 
   return (
     <SettingsLayout>
-      <p className="mb-3 text-sm">Select Theme</p>
+      <p className="mb-3">Select Theme</p>
       <div className="flex gap-3 w-full">
         <div
           className={`w-full text-center outline-solid outline-sky-100 outline dark:outline-neutral-700 h-40 duration-100 rounded-md flex items-center justify-center cursor-pointer select-none bg-black ${

pages/settings/delete.tsx

@@ -79,7 +79,7 @@ export default function Password() {
         </p>
 
         <div>
-          <p className="text-sm mb-2 text-black dark:text-white">
+          <p className="mb-2 text-black dark:text-white">
             Confirm Your Password
           </p>
 

pages/settings/password.tsx

@@ -51,7 +51,7 @@ export default function Password() {
         should be at least 8 characters.
       </p>
       <div className="w-full flex flex-col gap-2 justify-between">
-        <p className="text-sm text-black dark:text-white">New Password</p>
+        <p className="text-black dark:text-white">New Password</p>
 
         <TextInput
           value={newPassword}
@@ -60,9 +60,7 @@ export default function Password() {
           type="password"
         />
 
-        <p className="text-sm text-black dark:text-white">
-          Confirm New Password
-        </p>
+        <p className="text-black dark:text-white">Confirm New Password</p>
 
         <TextInput
           value={newPassword2}

pages/tags/[id].tsx

@@ -23,7 +23,7 @@ export default function Index() {
   const router = useRouter();
 
   const { links } = useLinkStore();
-  const { tags, updateTag } = useTagStore();
+  const { tags, updateTag, removeTag } = useTagStore();
 
   const [sortDropdown, setSortDropdown] = useState(false);
   const [sortBy, setSortBy] = useState<Sort>(Sort.DateNewestFirst);
@@ -81,6 +81,25 @@ export default function Index() {
     setRenameTag(false);
   };
 
+  const remove = async () => {
+    setSubmitLoader(true);
+
+    const load = toast.loading("Applying...");
+
+    let response;
+
+    if (activeTag?.id) response = await removeTag(activeTag?.id);
+
+    toast.dismiss(load);
+
+    if (response?.ok) {
+      toast.success("Tag Removed.");
+      router.push("/links");
+    } else toast.error(response?.data as string);
+    setSubmitLoader(false);
+    setRenameTag(false);
+  };
+
   return (
     <MainLayout>
       <div className="p-5 flex flex-col gap-5 w-full">
@@ -153,6 +172,13 @@ export default function Index() {
                               setExpandDropdown(false);
                             },
                           },
+                          {
+                            name: "Remove Tag",
+                            onClick: () => {
+                              remove();
+                              setExpandDropdown(false);
+                            },
+                          },
                         ]}
                         onClickOutside={(e: Event) => {
                           const target = e.target as HTMLInputElement;