EditAgent.jsx

Go to the documentation of this file.

import React, { useState, useEffect } from 'react';
import { apiFetch } from '../lib/api';
import MainLayout from '../components/Layout/MainLayout';
import { useParams, useNavigate } from 'react-router-dom';
 
function EditAgent() {
  const { agentId } = useParams();
  const navigate = useNavigate();
  const [agent, setAgent] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);
  const [form, setForm] = useState({ name: '', customer: '' });
 
  useEffect(() => {
    const token = localStorage.getItem('token');
    let tenantId = '';
    if (token) {
      try {
        const payload = token.split('.')[1];
        const decoded = JSON.parse(atob(payload.replace(/-/g, '+').replace(/_/g, '/')));
        tenantId = decoded.tenant_id || decoded.tenantId || '';
      } catch {}
    }
    apiFetch(`/agent/${agentId}`, {
      headers: {
        'X-Tenant-Id': tenantId
      }
    })
      .then(res => res.json())
      .then(data => {
        setAgent(data);
        setForm({ name: data.name || '', customer: data.customer || '' });
        setLoading(false);
      })
      .catch(() => {
        setError('Failed to load agent');
        setLoading(false);
      });
  }, [agentId]);
 
  const handleChange = e => {
    setForm({ ...form, [e.target.name]: e.target.value });
  };
 
  const handleSubmit = async e => {
    e.preventDefault();
    setLoading(true);
    setError(null);
    try {
      const token = localStorage.getItem('token');
      let tenantId = '';
      if (token) {
        try {
          const payload = token.split('.')[1];
          const decoded = JSON.parse(atob(payload.replace(/-/g, '+').replace(/_/g, '/')));
          tenantId = decoded.tenant_id || decoded.tenantId || '';
        } catch {}
      }
      const res = await apiFetch(`/agent/${agentId}`, {
        method: 'PUT',
        headers: {
          'Content-Type': 'application/json',
          'X-Tenant-Id': tenantId
        },
        body: JSON.stringify(form),
      });
      if (!res.ok) throw new Error('Failed to update agent');
      navigate(`/agents/${agentId}`);
    } catch (err) {
      setError(err.message);
      setLoading(false);
    }
  };
 
  const handleDelete = async () => {
    if (!window.confirm('Are you sure you want to delete and unenroll this agent? This action cannot be undone.')) return;
    setLoading(true);
    setError(null);
    try {
      const token = localStorage.getItem('token');
      let tenantId = '';
      if (token) {
        try {
          const payload = token.split('.')[1];
          const decoded = JSON.parse(atob(payload.replace(/-/g, '+').replace(/_/g, '/')));
          tenantId = decoded.tenant_id || decoded.tenantId || '';
        } catch {}
      }
      const res = await apiFetch(`/agent/${agentId}`, {
        method: 'DELETE',
        headers: {
          'Content-Type': 'application/json',
          'X-Tenant-Id': tenantId
        }
      });
      if (!res.ok) throw new Error('Failed to delete agent');
      navigate('/agents');
    } catch (err) {
      setError(err.message);
      setLoading(false);
    }
  };
 
  if (loading) return <MainLayout><div>Loading...</div></MainLayout>;
  if (error) return <MainLayout><div className="error">{error}</div></MainLayout>;
 
  return (
    <MainLayout>
      <h2>Edit Agent</h2>
      <form onSubmit={handleSubmit} style={{ maxWidth: 400 }}>
        <div style={{ marginBottom: 16 }}>
          <label>Name:</label>
          <input
            type="text"
            name="name"
            value={form.name}
            onChange={handleChange}
            style={{ width: '100%', padding: 8 }}
          />
        </div>
        <div style={{ marginBottom: 16 }}>
          <label>Customer:</label>
          <input
            type="text"
            name="customer"
            value={form.customer}
            onChange={handleChange}
            style={{ width: '100%', padding: 8 }}
          />
        </div>
        <button type="submit" style={{ padding: '8px 20px', fontSize: '1rem' }}>Save</button>
        <button
          type="button"
          onClick={handleDelete}
          style={{ marginLeft: 16, padding: '8px 20px', fontSize: '1rem', background: '#d9534f', color: 'white', border: 'none', borderRadius: 4 }}
        >
          Delete Agent
        </button>
      </form>
    </MainLayout>
  );
}
 
export default EditAgent;