Function RepositoryKeyFiles

components/RepositoryKeyFiles.tsx:53–690

({ repoFullName }: { repoFullName: string })

}

export default function RepositoryKeyFiles({ repoFullName }: { repoFullName: string }) {
  const [keyFiles, setKeyFiles] = useState<KeyFile[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);
  const [selectedFile, setSelectedFile] = useState<KeyFile | null>(null);
  const [isDialogOpen, setIsDialogOpen] = useState(false);
  const [fileContent, setFileContent] = useState<string | null>(null);
  const [fileContentLoading, setFileContentLoading] = useState(false);

// Use a global cache on window to persist across remounts/tab switches
const getKeyFilesCache = (): { [key: string]: KeyFile[] } => {
  if (typeof window !== 'undefined') {
    
    if (!(window as any).__keyFilesCache) {
      (window as any).__keyFilesCache = {};
    }
   
    return (window as any).__keyFilesCache;
  }
  // SSR fallback (shouldn't happen for this component)
  return {};
};

  useEffect(() => {
    // Declare controller and timeoutId in the outer scope so they are accessible in cleanup
    let controller: AbortController;
    let timeoutId: ReturnType<typeof setTimeout>;

    const fetchKeyFiles = async () => {
      if (!repoFullName) return;
      const cache = getKeyFilesCache();
      if (cache[repoFullName]) {
        setKeyFiles(cache[repoFullName]);
        setLoading(false);
        return;
      }
      
      // Use AbortController to handle timeouts and cancellations
      controller = new AbortController();
      timeoutId = setTimeout(() => controller.abort(), 30000); // 30 second timeout
      
      setLoading(true);
      setError(null);
      try {
        // Use our API endpoint to get the repository structure
        const structureRes = await fetch(`/api/get-repo-structure?repo=${encodeURIComponent(repoFullName)}`);
        const structureData = await structureRes.json();
        // Debug: log the structureData for troubleshooting
        if (typeof window !== 'undefined') {
          // Only log in browser
          console.log('Repo structureData:', structureData);
        }
        // Get the file tree from the structure data
        
        let files: any[] = [];
        if (structureData.fileTree && Array.isArray(structureData.fileTree)) {
          // Extract all files from the hierarchical file tree