Function TechnologyStack

components/TechnologyStack.tsx:27–511

({ repoFullName }: TechnologyStackProps)

}

export function TechnologyStack({ repoFullName }: TechnologyStackProps) {
  const [isLoading, setIsLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);
  const [packageJson, setPackageJson] = useState<any>(null);
  const [technologies, setTechnologies] = useState<Technology[]>([]);
  const [languages, setLanguages] = useState<Record<string, number>>({});
  
  useEffect(() => {
    const fetchTechStack = async () => {
      setIsLoading(true);
      setError(null);
      
      try {
        // Fetch repository structure which includes package.json if available
        const response = await fetch(`/api/get-repo-structure?repo=${repoFullName}`);
        const data = await response.json();
        
        if (response.ok) {
          setLanguages(data.languages || {});
          
          // Try to find package.json in the file tree
          const fileTree = data.tree || [];
          const packageJsonFile = fileTree.find((file: any) => 
            file.type === 'file' && file.path === 'package.json'
          );
          
          if (packageJsonFile) {
            // Fetch the package.json content
            const contentResponse = await fetch(`/api/get-file-content?repo=${repoFullName}&path=package.json`);
            const contentData = await contentResponse.json();
            
            if (contentResponse.ok && contentData.content) {
              try {
                const parsedPackageJson = JSON.parse(contentData.content);
                setPackageJson(parsedPackageJson);
                
                // Extract technologies from package.json
                const extractedTech = extractTechnologiesFromPackageJson(parsedPackageJson);
                setTechnologies(extractedTech);
              } catch (parseError) {
                console.error('Error parsing package.json:', parseError);
              }
            }
          } else {
            // If no package.json, infer technologies from languages
            const inferredTech = inferTechnologiesFromLanguages(data.languages || {});
            setTechnologies(inferredTech);
          }
        } else {
          setError(data.error || 'Failed to fetch repository structure');
        }
      } catch (err) {
        console.error('Error fetching tech stack:', err);
        setError('An error occurred while analyzing the technology stack');
      } finally {
        setIsLoading(false);
      }
    };