refactor(dashboard-v2): use a hook for adding skylinks to pubkeys

packages/dashboard-v2/src/components/APIKeyList/APIKey.js

@@ -36,11 +36,12 @@ export const APIKey = ({ apiKey, onRemoved, onEdited, onRemovalError }) => {
     editInitiated,
     prompt: promptEdit,
     abort: abortEdit,
+    addSkylink,
     removeSkylink,
   } = useAPIKeyEdit({
     key: apiKey,
-    onSkylinkRemoved: onSkylinkListEdited,
+    onSkylinkListUpdate: onSkylinkListEdited,
-    onSkylinkRemovalFailure: onSkylinkListEditFailure,
+    onSkylinkListUpdateFailure: onSkylinkListEditFailure,
   });
 
   const closeEditModal = useCallback(() => {
@@ -95,8 +96,8 @@ export const APIKey = ({ apiKey, onRemoved, onEdited, onRemovalError }) => {
           {skylinks?.length > 0 ? (
             <ul className="text-xs flex flex-col gap-2">
               {skylinks.map((skylink) => (
-                <li className="grid grid-cols-[1fr_min-content] w-full gap-4 items-center">
+                <li key={skylink} className="grid grid-cols-[1fr_min-content] w-full gap-4 items-center">
-                  <code className="whitespace-nowrap select-all truncate bg-palette-100 odd:bg-white rounded border border-palette-200/50 p-1">
+                  <code className="whitespace-nowrap select-all truncate bg-palette-100 odd:bg-white p-1">
                     {skylink}
                   </code>
                   <button className="p-1 transition-colors hover:text-error" onClick={() => removeSkylink(skylink)}>
@@ -111,7 +112,7 @@ export const APIKey = ({ apiKey, onRemoved, onEdited, onRemovalError }) => {
 
           <div className="flex flex-col gap-4">
             {error && <Alert $variant="error">{error}</Alert>}
-            <AddSkylinkToAPIKeyForm onSuccess={onSkylinkListEdited} onFailure={onSkylinkListEditFailure} keyId={id} />
+            <AddSkylinkToAPIKeyForm addSkylink={addSkylink} />
           </div>
           <div className="flex gap-4 justify-center mt-4">
             <Button onClick={closeEditModal}>Close</Button>

packages/dashboard-v2/src/components/APIKeyList/useAPIKeyEdit.js

@@ -1,31 +1,43 @@
 import { useCallback, useState } from "react";
 import accountsService from "../../services/accountsService";
 
-export const useAPIKeyEdit = ({ key, onSkylinkRemoved, onSkylinkRemovalFailure }) => {
+export const useAPIKeyEdit = ({ key, onSkylinkListUpdate, onSkylinkListUpdateFailure }) => {
   const [editInitiated, setEditInitiated] = useState(false);
 
   const prompt = () => setEditInitiated(true);
   const abort = () => setEditInitiated(false);
-  const removeSkylink = useCallback(
+  const updateSkylinkList = useCallback(
-    async (skylink) => {
+    async (action, skylink) => {
       try {
         await accountsService.patch(`user/apikeys/${key.id}`, {
           json: {
-            remove: [skylink],
+            [action]: [skylink],
           },
         });
-        onSkylinkRemoved();
+        onSkylinkListUpdate();
-      } catch {
+
-        onSkylinkRemovalFailure();
+        return true;
+      } catch (err) {
+        if (err.response) {
+          const { message } = await err.response.json();
+          onSkylinkListUpdateFailure(message);
+        } else {
+          onSkylinkListUpdateFailure("Unknown error occured, please try again.");
+        }
+
+        return false;
       }
     },
-    [onSkylinkRemoved, onSkylinkRemovalFailure, key]
+    [onSkylinkListUpdate, onSkylinkListUpdateFailure, key]
   );
+  const addSkylink = (skylink) => updateSkylinkList("add", skylink);
+  const removeSkylink = (skylink) => updateSkylinkList("remove", skylink);
 
   return {
     editInitiated,
     prompt,
     abort,
+    addSkylink,
     removeSkylink,
   };
 };

packages/dashboard-v2/src/components/APIKeyList/useAPIKeyRemoval.js

@@ -5,7 +5,10 @@ export const useAPIKeyRemoval = ({ key, onSuccess }) => {
   const [removalInitiated, setRemovalInitiated] = useState(false);
   const [removalError, setRemovalError] = useState(null);
 
-  const prompt = () => setRemovalInitiated(true);
+  const prompt = () => {
+    setRemovalError(null);
+    setRemovalInitiated(true);
+  };
   const abort = () => setRemovalInitiated(false);
 
   const confirm = useCallback(async () => {
@@ -19,7 +22,6 @@ export const useAPIKeyRemoval = ({ key, onSuccess }) => {
 
       if (err.response) {
         const response = await err.response.json();
-
         if (response.message) {
           message = response.message;
         }

packages/dashboard-v2/src/components/forms/AddSkylinkToAPIKeyForm.js

@@ -12,31 +12,15 @@ const newSkylinkSchema = Yup.object().shape({
   skylink: Yup.string().required("Provide a valid Skylink"), // TODO: Comprehensive Skylink validation
 });
 
-export const AddSkylinkToAPIKeyForm = ({ keyId, onSuccess, onFailure }) => (
+export const AddSkylinkToAPIKeyForm = ({ addSkylink }) => (
   <Formik
     initialValues={{
       skylink: "",
     }}
     validationSchema={newSkylinkSchema}
     onSubmit={async ({ skylink }, { resetForm }) => {
-      try {
+      if (await addSkylink(skylink)) {
-        await accountsService
-          .patch(`user/apikeys/${keyId}`, {
-            json: {
-              add: [skylink],
-            },
-          })
-          .json();
-
         resetForm();
-        onSuccess();
-      } catch (err) {
-        if (err.response) {
-          const { message } = await err.response.json();
-          onFailure(message);
-        } else {
-          onFailure("Unknown error occured, please try again.");
-        }
       }
     }}
   >
@@ -67,7 +51,5 @@ export const AddSkylinkToAPIKeyForm = ({ keyId, onSuccess, onFailure }) => (
 );
 
 AddSkylinkToAPIKeyForm.propTypes = {
-  onFailure: PropTypes.func.isRequired,
+  addSkylink: PropTypes.func.isRequired,
-  onSuccess: PropTypes.func.isRequired,
-  keyId: PropTypes.string.isRequired,
 };