Plan de Migración de Código

// src/utils/api.js — sin interfaces
const fetchSensors = async (farmId) => {
  const res = await fetch(
    `/api/farms/${farmId}/sensors`
  );
  if (!res.ok)
    throw new Error('Error al obtener sensores');
  return res.json();
  // ⚠ devuelve `any`
};

const updateSensor = async (id, data) => {
  const res = await fetch(`/api/sensors/${id}`, {
    method: 'PATCH',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(data),
  });
  return res.json();
};

module.exports = { fetchSensors, updateSensor };

// src/utils/api.ts — tipado completo
interface Sensor {
  id: string; farmId: string;
  type: 'humidity' | 'temperature' | 'ph';
  value: number; unit: string;
  lastSeen: string; active: boolean;
}

type SensorPatch = Partial<Pick<Sensor, 'value' | 'active'>>;

export const fetchSensors = async (
  farmId: string
): Promise<Sensor[]> => {
  const res = await fetch(
    `/api/farms/${farmId}/sensors`
  );
  if (!res.ok)
    throw new Error('Error al obtener sensores');
  return res.json() as Promise<Sensor[]>;
};

export const updateSensor = async (
  id: string, data: SensorPatch
): Promise<Sensor> => {
  const res = await fetch(`/api/sensors/${id}`, {
    method: 'PATCH',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(data),
  });
  return res.json() as Promise<Sensor>;
};

// SensorDashboard.jsx
class SensorDashboard
  extends React.Component {

  state = {
    sensors: [],
    loading: true,
    error: null,
  };

  componentDidMount() {
    this.loadSensors();
  }

  componentDidUpdate(prevProps) {
    if (prevProps.farmId !== this.props.farmId)
      this.loadSensors();
  }

  loadSensors() {
    this.setState({ loading: true });
    fetchSensors(this.props.farmId)
      .then(sensors =>
        this.setState({ sensors, loading: false })
      )
      .catch(err =>
        this.setState({ error: err.message })
      );
  }

  render() {
    const { loading, sensors } = this.state;
    if (loading) return <Spinner />;
    return <SensorList sensors={sensors} />;
  }
}

// hooks/useSensors.ts — hook extraído
function useSensors(farmId: string) {
  const [sensors, setSensors] =
    useState<Sensor[]>([]);
  const [loading, setLoading] =
    useState(true);
  const [error, setError] =
    useState<string | null>(null);

  useEffect(() => {
    setLoading(true);
    fetchSensors(farmId)
      .then(setSensors)
      .catch(e => setError(e.message))
      .finally(() => setLoading(false));
  }, [farmId]);

  return { sensors, loading, error };
}

// SensorDashboard.tsx — componente limpio
function SensorDashboard({
  farmId,
}: { farmId: string }) {
  const { sensors, loading, error } =
    useSensors(farmId);

  if (loading) return <Spinner />;
  if (error)
    return <ErrorBanner msg={error} />;
  return <SensorList sensors={sensors} />;
}