react

React Rules for Code-Index-MCP

Overview

This file defines React patterns and best practices for any future web UI components in the Code-Index-MCP project.

Component Structure

Functional Components with TypeScript

import React, { useState, useCallback, memo } from 'react';

interface CodeSearchProps {
  onSearch: (query: string) => Promise<void>;
  placeholder?: string;
  className?: string;
}

export const CodeSearch = memo<CodeSearchProps>(({ 
  onSearch, 
  placeholder = "Search code...",
  className = ""
}) => {
  const [query, setQuery] = useState('');
  const [isSearching, setIsSearching] = useState(false);

  const handleSearch = useCallback(async (e: React.FormEvent) => {
    e.preventDefault();
    if (!query.trim()) return;

    setIsSearching(true);
    try {
      await onSearch(query);
    } finally {
      setIsSearching(false);
    }
  }, [query, onSearch]);

  return (
    <form onSubmit={handleSearch} className={className}>
      <input
        type="text"
        value={query}
        onChange={(e) => setQuery(e.target.value)}
        placeholder={placeholder}
        disabled={isSearching}
      />
      <button type="submit" disabled={isSearching}>
        {isSearching ? 'Searching...' : 'Search'}
      </button>
    </form>
  );
});

CodeSearch.displayName = 'CodeSearch';

Custom Hooks

Data Fetching Hook

import { useState, useEffect, useCallback } from 'react';

interface UseApiOptions<T> {
  initialData?: T;
  onError?: (error: Error) => void;
}

function useApi<T>(
  apiCall: () => Promise<T>,
  options: UseApiOptions<T> = {}
) {
  const [data, setData] = useState<T | undefined>(options.initialData);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState<Error | null>(null);

  const execute = useCallback(async () => {
    setLoading(true);
    setError(null);

    try {
      const result = await apiCall();
      setData(result);
      return result;
    } catch (err) {
      const error = err instanceof Error ? err : new Error(String(err));
      setError(error);
      options.onError?.(error);
      throw error;
    } finally {
      setLoading(false);
    }
  }, [apiCall, options.onError]);

  return { data, loading, error, execute };
}

// Usage
function SymbolViewer({ symbolName }: { symbolName: string }) {
  const { data, loading, error, execute } = useApi(
    () => client.getSymbolDefinition(symbolName),
    { onError: (err) => console.error('Failed to load symbol:', err) }
  );

  useEffect(() => {
    execute();
  }, [execute]);

  if (loading) return <div>Loading...</div>;
  if (error) return <div>Error: {error.message}</div>;
  if (!data) return null;

  return <SymbolDetails symbol={data} />;
}