refactor: export into services api calls

Author: fabiovincenzi

src/ui/components/CustomButtons/CodeActionButton.jsx

@@ -1,5 +1,4 @@
 import React, { useState, useEffect } from 'react';
-import axios from 'axios';
 import Popper from '@material-ui/core/Popper';
 import Paper from '@material-ui/core/Paper';
 import {
@@ -10,8 +9,7 @@ import {
   TerminalIcon,
   KeyIcon,
 } from '@primer/octicons-react';
-
-const API_BASE = import.meta.env.VITE_API_URI ?? '';
+import { getSshConfig } from '../../services/ssh';
 
 const CodeActionButton = ({ cloneURL }) => {
   const [anchorEl, setAnchorEl] = useState(null);
@@ -22,15 +20,14 @@ const CodeActionButton = ({ cloneURL }) => {
 
   const [sshCfg, setSshCfg] = useState({ enabled: true, port: 22 });
   useEffect(() => {
-    axios
-      .get(`${API_BASE}/api/v1/config/ssh`, { withCredentials: true })
-      .then((res) => {
-        const { enabled = true, port = 22 } = res.data || {};
-        setSshCfg({ enabled, port });
-      })
-      .catch((err) => {
-        console.error('Failed to load SSH config:', err);
-      });
+    let active = true;
+    (async () => {
+      const cfg = await getSshConfig();
+      if (active) setSshCfg(cfg);
+    })();
+    return () => {
+      active = false;
+    };
   }, []);
 
   const getSSHUrl = () => {

src/ui/components/SSHKeysManager/SSHKeysManager.jsx

@@ -13,8 +13,9 @@ import Alert from '@material-ui/lab/Alert';
 import { makeStyles } from '@material-ui/core/styles';
 import DeleteIcon from '@material-ui/icons/Delete';
 import VpnKeyIcon from '@material-ui/icons/VpnKey';
-import axios from 'axios';
-import dayjs from 'dayjs'; //   npm i dayjs
+import dayjs from 'dayjs';
+
+import { getSSHKeys, deleteSSHKey, addSSHKey } from '../../services/ssh';
 
 const useStyles = makeStyles((theme) => ({
   root: { padding: theme.spacing(3), width: '100%' },
@@ -36,8 +37,6 @@ const useStyles = makeStyles((theme) => ({
   formField: { marginBottom: theme.spacing(2) },
 }));
 
-const API_BASE = `${import.meta.env.VITE_API_URI}/api/v1/user`;
-
 export default function SSHKeysManager({ username }) {
   const classes = useStyles();
 
@@ -52,11 +51,8 @@ export default function SSHKeysManager({ username }) {
   const loadKeys = useCallback(async () => {
     if (!username) return;
     try {
-      const res = await axios.get(`${API_BASE}/${username}/ssh-keys`, {
-        withCredentials: true,
-      });
-      // API now returns [{name,fingerprint,addedAt}]
-      setKeys(res.data.publicKeys || []);
+      const data = await getSSHKeys(username);
+      setKeys(data);
     } catch (err) {
       console.error(err);
       setBanner({ type: 'error', text: 'Failed to load SSH keys' });
@@ -71,10 +67,7 @@ export default function SSHKeysManager({ username }) {
   const handleDelete = async (index) => {
     const { fingerprint } = keys[index];
     try {
-      await axios.delete(`${API_BASE}/${username}/ssh-keys/fingerprint`, {
-        data: { fingerprint },
-        withCredentials: true,
-      });
+      await deleteSSHKey(username, fingerprint);
       await loadKeys();
       setBanner({ type: 'success', text: 'SSH key removed' });
     } catch (err) {
@@ -90,16 +83,12 @@ export default function SSHKeysManager({ username }) {
    * Add new public key, then refresh list
    * --------------------------------------------------------- */
   const handleAddKey = async () => {
-    const key = newKeyValue.trim();
+    const publicKey = newKeyValue.trim();
     const name = newKeyName.trim();
-    if (!key || !name) return;
+    if (!publicKey || !name) return;
 
     try {
-      await axios.post(
-        `${API_BASE}/${username}/ssh-keys`,
-        { publicKey: key, name },
-        { withCredentials: true },
-      );
+      await addSSHKey(username, { publicKey, name });
       await loadKeys();
       setBanner({ type: 'success', text: 'SSH key added' });
       setNewKeyValue('');
@@ -116,7 +105,6 @@ export default function SSHKeysManager({ username }) {
 
   return (
     <div className={classes.root}>
-      {/* ---------- Snackbar ---------- */}
       <Snackbar
         open={Boolean(banner)}
         autoHideDuration={4000}
@@ -169,7 +157,6 @@ export default function SSHKeysManager({ username }) {
         </Paper>
       ))}
 
-      {/* ---------- Modal ---------- */}
       <Modal open={isModalOpen} onClose={() => setIsModalOpen(false)} className={classes.modal}>
         <div className={classes.modalContent}>
           <Typography variant='h6' gutterBottom>

src/ui/services/config.js

@@ -32,9 +32,17 @@ const getUIRouteAuth = async (setData) => {
   });
 };
 
-export {
-  getAttestationConfig,
-  getURLShortener,
-  getEmailContact,
-  getUIRouteAuth,
+const getSSHConfig = async (setData) => {
+  const url = new URL(`${baseUrl}/config/ssh`);
+  await axios(url.toString(), { withCredentials: true })
+    .then((response) => {
+      const { enabled = true, port = 22 } = response.data ?? {};
+      setData({ enabled, port });
+    })
+    .catch((err) => {
+      console.error('Failed to load SSH config:', err);
+      setData({ enabled: true, port: 22 });
+    });
 };
+
+export { getAttestationConfig, getURLShortener, getEmailContact, getUIRouteAuth, getSSHConfig };

src/ui/services/ssh.js

@@ -0,0 +1,23 @@
+import axios from 'axios';
+
+const BASE_URL = import.meta.env.VITE_API_URI
+  ? `${import.meta.env.VITE_API_URI}/api/v1/user`
+  : `${location.origin}/api/v1/user`;
+
+const AXIOS_CFG = { withCredentials: true };
+
+export async function getSSHKeys(username) {
+  const { data } = await axios.get(`${BASE_URL}/${username}/ssh-keys`, AXIOS_CFG);
+  return data.publicKeys || [];
+}
+
+export async function deleteSSHKey(username, fingerprint) {
+  await axios.delete(`${BASE_URL}/${username}/ssh-keys/fingerprint`, {
+    ...AXIOS_CFG,
+    data: { fingerprint },
+  });
+}
+
+export async function addSSHKey(username, key) {
+  await axios.post(`${BASE_URL}/${username}/ssh-keys`, key, AXIOS_CFG);
+}