@samanhappy/mcphub 0.0.4 → 0.0.6

package/frontend/src/hooks/useMarketData.ts

@@ -0,0 +1,410 @@
+import { useState, useEffect, useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+import { MarketServer, ApiResponse } from '@/types';
+
+export const useMarketData = () => {
+  const { t } = useTranslation();
+  const [servers, setServers] = useState<MarketServer[]>([]);
+  const [allServers, setAllServers] = useState<MarketServer[]>([]);
+  const [categories, setCategories] = useState<string[]>([]);
+  const [tags, setTags] = useState<string[]>([]);
+  const [selectedCategory, setSelectedCategory] = useState<string>('');
+  const [selectedTag, setSelectedTag] = useState<string>('');
+  const [searchQuery, setSearchQuery] = useState<string>('');
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [currentServer, setCurrentServer] = useState<MarketServer | null>(null);
+  const [installedServers, setInstalledServers] = useState<string[]>([]);
+  
+  // Pagination states
+  const [currentPage, setCurrentPage] = useState(1);
+  const [serversPerPage, setServersPerPage] = useState(9);
+  const [totalPages, setTotalPages] = useState(1);
+
+  // Fetch all market servers
+  const fetchMarketServers = useCallback(async () => {
+    try {
+      setLoading(true);
+      const token = localStorage.getItem('mcphub_token');
+      const response = await fetch('/api/market/servers', {
+        headers: {
+          'x-auth-token': token || ''
+        }
+      });
+      
+      if (!response.ok) {
+        throw new Error(`Status: ${response.status}`);
+      }
+      
+      const data: ApiResponse<MarketServer[]> = await response.json();
+      
+      if (data && data.success && Array.isArray(data.data)) {
+        setAllServers(data.data);
+        // Apply pagination to the fetched data
+        applyPagination(data.data, currentPage);
+      } else {
+        console.error('Invalid market servers data format:', data);
+        setError(t('market.fetchError'));
+      }
+    } catch (err) {
+      console.error('Error fetching market servers:', err);
+      setError(err instanceof Error ? err.message : String(err));
+    } finally {
+      setLoading(false);
+    }
+  }, [t, currentPage]);
+
+  // Apply pagination to data
+  const applyPagination = useCallback((data: MarketServer[], page: number, itemsPerPage = serversPerPage) => {
+    const totalItems = data.length;
+    const calculatedTotalPages = Math.ceil(totalItems / itemsPerPage);
+    setTotalPages(calculatedTotalPages);
+
+    // Ensure current page is valid
+    const validPage = Math.max(1, Math.min(page, calculatedTotalPages));
+    if (validPage !== page) {
+      setCurrentPage(validPage);
+    }
+
+    const startIndex = (validPage - 1) * itemsPerPage;
+    const paginatedServers = data.slice(startIndex, startIndex + itemsPerPage);
+    setServers(paginatedServers);
+  }, [serversPerPage]);
+
+  // Change page
+  const changePage = useCallback((page: number) => {
+    setCurrentPage(page);
+    applyPagination(allServers, page, serversPerPage);
+  }, [allServers, applyPagination, serversPerPage]);
+
+  // Fetch all categories
+  const fetchCategories = useCallback(async () => {
+    try {
+      const token = localStorage.getItem('mcphub_token');
+      const response = await fetch('/api/market/categories', {
+        headers: {
+          'x-auth-token': token || ''
+        }
+      });
+      
+      if (!response.ok) {
+        throw new Error(`Status: ${response.status}`);
+      }
+      
+      const data: ApiResponse<string[]> = await response.json();
+      
+      if (data && data.success && Array.isArray(data.data)) {
+        setCategories(data.data);
+      } else {
+        console.error('Invalid categories data format:', data);
+      }
+    } catch (err) {
+      console.error('Error fetching categories:', err);
+    }
+  }, []);
+
+  // Fetch all tags
+  const fetchTags = useCallback(async () => {
+    try {
+      const token = localStorage.getItem('mcphub_token');
+      const response = await fetch('/api/market/tags', {
+        headers: {
+          'x-auth-token': token || ''
+        }
+      });
+      
+      if (!response.ok) {
+        throw new Error(`Status: ${response.status}`);
+      }
+      
+      const data: ApiResponse<string[]> = await response.json();
+      
+      if (data && data.success && Array.isArray(data.data)) {
+        setTags(data.data);
+      } else {
+        console.error('Invalid tags data format:', data);
+      }
+    } catch (err) {
+      console.error('Error fetching tags:', err);
+    }
+  }, []);
+
+  // Fetch server by name
+  const fetchServerByName = useCallback(async (name: string) => {
+    try {
+      setLoading(true);
+      const token = localStorage.getItem('mcphub_token');
+      const response = await fetch(`/api/market/servers/${name}`, {
+        headers: {
+          'x-auth-token': token || ''
+        }
+      });
+      
+      if (!response.ok) {
+        throw new Error(`Status: ${response.status}`);
+      }
+      
+      const data: ApiResponse<MarketServer> = await response.json();
+      
+      if (data && data.success && data.data) {
+        setCurrentServer(data.data);
+        return data.data;
+      } else {
+        console.error('Invalid server data format:', data);
+        setError(t('market.serverNotFound'));
+        return null;
+      }
+    } catch (err) {
+      console.error(`Error fetching server ${name}:`, err);
+      setError(err instanceof Error ? err.message : String(err));
+      return null;
+    } finally {
+      setLoading(false);
+    }
+  }, [t]);
+
+  // Search servers by query
+  const searchServers = useCallback(async (query: string) => {
+    try {
+      setLoading(true);
+      setSearchQuery(query);
+      
+      if (!query.trim()) {
+        // Fetch fresh data from server instead of just applying pagination
+        fetchMarketServers();
+        return;
+      }
+      
+      const token = localStorage.getItem('mcphub_token');
+      const response = await fetch(`/api/market/servers/search?query=${encodeURIComponent(query)}`, {
+        headers: {
+          'x-auth-token': token || ''
+        }
+      });
+      
+      if (!response.ok) {
+        throw new Error(`Status: ${response.status}`);
+      }
+      
+      const data: ApiResponse<MarketServer[]> = await response.json();
+      
+      if (data && data.success && Array.isArray(data.data)) {
+        setAllServers(data.data);
+        setCurrentPage(1);
+        applyPagination(data.data, 1);
+      } else {
+        console.error('Invalid search results format:', data);
+        setError(t('market.searchError'));
+      }
+    } catch (err) {
+      console.error('Error searching servers:', err);
+      setError(err instanceof Error ? err.message : String(err));
+    } finally {
+      setLoading(false);
+    }
+  }, [t, allServers, applyPagination, fetchMarketServers]);
+
+  // Filter servers by category
+  const filterByCategory = useCallback(async (category: string) => {
+    try {
+      setLoading(true);
+      setSelectedCategory(category);
+      setSelectedTag(''); // Reset tag filter when filtering by category
+      
+      if (!category) {
+        fetchMarketServers();
+        return;
+      }
+      
+      const token = localStorage.getItem('mcphub_token');
+      const response = await fetch(`/api/market/categories/${encodeURIComponent(category)}`, {
+        headers: {
+          'x-auth-token': token || ''
+        }
+      });
+      
+      if (!response.ok) {
+        throw new Error(`Status: ${response.status}`);
+      }
+      
+      const data: ApiResponse<MarketServer[]> = await response.json();
+      
+      if (data && data.success && Array.isArray(data.data)) {
+        setAllServers(data.data);
+        setCurrentPage(1);
+        applyPagination(data.data, 1);
+      } else {
+        console.error('Invalid category filter results format:', data);
+        setError(t('market.filterError'));
+      }
+    } catch (err) {
+      console.error('Error filtering servers by category:', err);
+      setError(err instanceof Error ? err.message : String(err));
+    } finally {
+      setLoading(false);
+    }
+  }, [t, fetchMarketServers, applyPagination]);
+
+  // Filter servers by tag
+  const filterByTag = useCallback(async (tag: string) => {
+    try {
+      setLoading(true);
+      setSelectedTag(tag);
+      setSelectedCategory(''); // Reset category filter when filtering by tag
+      
+      if (!tag) {
+        fetchMarketServers();
+        return;
+      }
+      
+      const token = localStorage.getItem('mcphub_token');
+      const response = await fetch(`/api/market/tags/${encodeURIComponent(tag)}`, {
+        headers: {
+          'x-auth-token': token || ''
+        }
+      });
+      
+      if (!response.ok) {
+        throw new Error(`Status: ${response.status}`);
+      }
+      
+      const data: ApiResponse<MarketServer[]> = await response.json();
+      
+      if (data && data.success && Array.isArray(data.data)) {
+        setAllServers(data.data);
+        setCurrentPage(1);
+        applyPagination(data.data, 1);
+      } else {
+        console.error('Invalid tag filter results format:', data);
+        setError(t('market.tagFilterError'));
+      }
+    } catch (err) {
+      console.error('Error filtering servers by tag:', err);
+      setError(err instanceof Error ? err.message : String(err));
+    } finally {
+      setLoading(false);
+    }
+  }, [t, fetchMarketServers, applyPagination]);
+
+  // Fetch installed servers
+  const fetchInstalledServers = useCallback(async () => {
+    try {
+      const token = localStorage.getItem('mcphub_token');
+      const response = await fetch('/api/servers', {
+        headers: {
+          'x-auth-token': token || ''
+        }
+      });
+      
+      if (!response.ok) {
+        throw new Error(`Status: ${response.status}`);
+      }
+      
+      const data = await response.json();
+      
+      if (data && data.success && Array.isArray(data.data)) {
+        // Extract server names
+        const installedServerNames = data.data.map((server: any) => server.name);
+        setInstalledServers(installedServerNames);
+      }
+    } catch (err) {
+      console.error('Error fetching installed servers:', err);
+    }
+  }, []);
+
+  // Check if a server is already installed
+  const isServerInstalled = useCallback((serverName: string) => {
+    return installedServers.includes(serverName);
+  }, [installedServers]);
+
+  // Install server to the local environment
+  const installServer = useCallback(async (server: MarketServer) => {
+    try {
+      const installType = server.installations?.npm ? 'npm' : Object.keys(server.installations || {}).length > 0 ? Object.keys(server.installations)[0] : null;
+      
+      if (!installType || !server.installations?.[installType]) {
+        setError(t('market.noInstallationMethod'));
+        return false;
+      }
+      
+      const installation = server.installations[installType];
+      
+      // Prepare server configuration
+      const serverConfig = {
+        name: server.name,
+        config: {
+          command: installation.command,
+          args: installation.args,
+          env: installation.env || {}
+        }
+      };
+      
+      // Call the createServer API
+      const token = localStorage.getItem('mcphub_token');
+      const response = await fetch('/api/servers', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+          'x-auth-token': token || ''
+        },
+        body: JSON.stringify(serverConfig),
+      });
+      
+      if (!response.ok) {
+        const errorData = await response.json();
+        throw new Error(errorData.message || `Status: ${response.status}`);
+      }
+      
+      // Update installed servers list after successful installation
+      await fetchInstalledServers();
+      return true;
+    } catch (err) {
+      console.error('Error installing server:', err);
+      setError(err instanceof Error ? err.message : String(err));
+      return false;
+    }
+  }, [t, fetchInstalledServers]);
+
+  // Change servers per page
+  const changeServersPerPage = useCallback((perPage: number) => {
+    setServersPerPage(perPage);
+    setCurrentPage(1);
+    applyPagination(allServers, 1, perPage);
+  }, [allServers, applyPagination]);
+
+  // Load initial data
+  useEffect(() => {
+    fetchMarketServers();
+    fetchCategories();
+    fetchTags();
+    fetchInstalledServers();
+  }, [fetchMarketServers, fetchCategories, fetchTags, fetchInstalledServers]);
+
+  return {
+    servers,
+    allServers,
+    categories,
+    tags,
+    selectedCategory,
+    selectedTag,
+    searchQuery,
+    loading,
+    error,
+    setError,
+    currentServer,
+    fetchMarketServers,
+    fetchServerByName,
+    searchServers,
+    filterByCategory,
+    filterByTag,
+    installServer,
+    // Pagination properties and methods
+    currentPage,
+    totalPages,
+    serversPerPage,
+    changePage,
+    changeServersPerPage,
+    // Installed servers methods
+    isServerInstalled
+  };
+};

package/frontend/src/hooks/useServerData.ts

@@ -0,0 +1,306 @@
+import { useState, useEffect, useRef, useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Server, ApiResponse } from '@/types';
+
+// Configuration options
+const CONFIG = {
+  // Initialization phase configuration
+  startup: {
+    maxAttempts: 60,                // Maximum number of attempts during initialization
+    pollingInterval: 3000           // Polling interval during initialization (3 seconds)
+  },
+  // Normal operation phase configuration
+  normal: {
+    pollingInterval: 10000          // Polling interval during normal operation (10 seconds)
+  }
+};
+
+export const useServerData = () => {
+  const { t } = useTranslation();
+  const [servers, setServers] = useState<Server[]>([]);
+  const [error, setError] = useState<string | null>(null);
+  const [refreshKey, setRefreshKey] = useState(0);
+  const [isInitialLoading, setIsInitialLoading] = useState(true);
+  const [fetchAttempts, setFetchAttempts] = useState(0);
+  
+  // Timer reference for polling
+  const intervalRef = useRef<NodeJS.Timeout | null>(null);
+  // Track current attempt count to avoid dependency cycles
+  const attemptsRef = useRef<number>(0);
+
+  // Clear the timer
+  const clearTimer = () => {
+    if (intervalRef.current) {
+      clearInterval(intervalRef.current);
+      intervalRef.current = null;
+    }
+  };
+
+  // Start normal polling
+  const startNormalPolling = useCallback(() => {
+    // Ensure no other timers are running
+    clearTimer();
+    
+    const fetchServers = async () => {
+      try {
+        const token = localStorage.getItem('mcphub_token');
+        const response = await fetch('/api/servers', {
+          headers: {
+            'x-auth-token': token || ''
+          }
+        });
+        const data = await response.json();
+        
+        if (data && data.success && Array.isArray(data.data)) {
+          setServers(data.data);
+        } else if (data && Array.isArray(data)) {
+          setServers(data);
+        } else {
+          console.error('Invalid server data format:', data);
+          setServers([]);
+        }
+        
+        // Reset error state
+        setError(null);
+      } catch (err) {
+        console.error('Error fetching servers during normal polling:', err);
+        
+        // Use friendly error message
+        if (!navigator.onLine) {
+          setError(t('errors.network'));
+        } else if (err instanceof TypeError && (
+          err.message.includes('NetworkError') || 
+          err.message.includes('Failed to fetch')
+        )) {
+          setError(t('errors.serverConnection'));
+        } else {
+          setError(t('errors.serverFetch'));
+        }
+      }
+    };
+    
+    // Execute immediately
+    fetchServers();
+    
+    // Set up regular polling
+    intervalRef.current = setInterval(fetchServers, CONFIG.normal.pollingInterval);
+  }, [t]);
+
+  useEffect(() => {
+    // Reset attempt count
+    if (refreshKey > 0) {
+      attemptsRef.current = 0;
+      setFetchAttempts(0);
+    }
+    
+    // Initialization phase request function
+    const fetchInitialData = async () => {
+      try {
+        const token = localStorage.getItem('mcphub_token');
+        const response = await fetch('/api/servers', {
+          headers: {
+            'x-auth-token': token || ''
+          }
+        });
+        const data = await response.json();
+        
+        // Handle API response wrapper object, extract data field
+        if (data && data.success && Array.isArray(data.data)) {
+          setServers(data.data);
+          setIsInitialLoading(false);
+          // Initialization successful, start normal polling
+          startNormalPolling();
+          return true;
+        } else if (data && Array.isArray(data)) {
+          // Compatibility handling, if API directly returns array
+          setServers(data);
+          setIsInitialLoading(false);
+          // Initialization successful, start normal polling
+          startNormalPolling();
+          return true;
+        } else {
+          // If data format is not as expected, set to empty array
+          console.error('Invalid server data format:', data);
+          setServers([]);
+          setIsInitialLoading(false);
+          // Initialization successful but data is empty, start normal polling
+          startNormalPolling();
+          return true;
+        }
+      } catch (err) {
+        // Increment attempt count, use ref to avoid triggering effect rerun
+        attemptsRef.current += 1;
+        console.error(`Initial loading attempt ${attemptsRef.current} failed:`, err);
+        
+        // Update state for display
+        setFetchAttempts(attemptsRef.current);
+        
+        // Set appropriate error message
+        if (!navigator.onLine) {
+          setError(t('errors.network'));
+        } else {
+          setError(t('errors.initialStartup'));
+        }
+        
+        // If maximum attempt count is exceeded, give up initialization and switch to normal polling
+        if (attemptsRef.current >= CONFIG.startup.maxAttempts) {
+          console.log('Maximum startup attempts reached, switching to normal polling');
+          setIsInitialLoading(false);
+          // Clear initialization polling
+          clearTimer();
+          // Switch to normal polling mode
+          startNormalPolling();
+        }
+        
+        return false;
+      }
+    };
+    
+    // On component mount, set appropriate polling based on current state
+    if (isInitialLoading) {
+      // Ensure no other timers are running
+      clearTimer();
+      
+      // Execute initial request immediately
+      fetchInitialData();
+      
+      // Set polling interval for initialization phase
+      intervalRef.current = setInterval(fetchInitialData, CONFIG.startup.pollingInterval);
+      console.log(`Started initial polling with interval: ${CONFIG.startup.pollingInterval}ms`);
+    } else {
+      // Initialization completed, start normal polling
+      startNormalPolling();
+    }
+    
+    // Cleanup function
+    return () => {
+      clearTimer();
+    };
+  }, [refreshKey, t, isInitialLoading, startNormalPolling]);
+
+  // Manually trigger refresh
+  const triggerRefresh = () => {
+    // Clear current timer
+    clearTimer();
+    
+    // If in initialization phase, reset initialization state
+    if (isInitialLoading) {
+      setIsInitialLoading(true);
+      attemptsRef.current = 0;
+      setFetchAttempts(0);
+    }
+    
+    // Change in refreshKey will trigger useEffect to run again
+    setRefreshKey(prevKey => prevKey + 1);
+  };
+
+  // Server related operations
+  const handleServerAdd = () => {
+    setRefreshKey(prevKey => prevKey + 1);
+  };
+
+  const handleServerEdit = async (server: Server) => {
+    try {
+      // Fetch settings to get the full server config before editing
+      const token = localStorage.getItem('mcphub_token');
+      const response = await fetch(`/api/settings`, {
+        headers: {
+          'x-auth-token': token || ''
+        }
+      });
+      
+      const settingsData: ApiResponse<{ mcpServers: Record<string, any> }> = await response.json();
+      
+      if (
+        settingsData &&
+        settingsData.success &&
+        settingsData.data &&
+        settingsData.data.mcpServers &&
+        settingsData.data.mcpServers[server.name]
+      ) {
+        const serverConfig = settingsData.data.mcpServers[server.name];
+        return {
+          name: server.name,
+          status: server.status,
+          tools: server.tools || [],
+          config: serverConfig,
+        };
+      } else {
+        console.error('Failed to get server config from settings:', settingsData);
+        setError(t('server.invalidConfig', { serverName: server.name }));
+        return null;
+      }
+    } catch (err) {
+      console.error('Error fetching server settings:', err);
+      setError(err instanceof Error ? err.message : String(err));
+      return null;
+    }
+  };
+
+  const handleServerRemove = async (serverName: string) => {
+    try {
+      const token = localStorage.getItem('mcphub_token');
+      const response = await fetch(`/api/servers/${serverName}`, {
+        method: 'DELETE',
+        headers: {
+          'x-auth-token': token || ''
+        }
+      });
+      const result = await response.json();
+
+      if (!response.ok) {
+        setError(result.message || t('server.deleteError', { serverName }));
+        return false;
+      }
+
+      setRefreshKey(prevKey => prevKey + 1);
+      return true;
+    } catch (err) {
+      setError(t('errors.general') + ': ' + (err instanceof Error ? err.message : String(err)));
+      return false;
+    }
+  };
+
+  const handleServerToggle = async (server: Server, enabled: boolean) => {
+    try {
+      const token = localStorage.getItem('mcphub_token');
+      const response = await fetch(`/api/servers/${server.name}/toggle`, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+          'x-auth-token': token || ''
+        },
+        body: JSON.stringify({ enabled }),
+      });
+
+      const result = await response.json();
+
+      if (!response.ok) {
+        console.error('Failed to toggle server:', result);
+        setError(t('server.toggleError', { serverName: server.name }));
+        return false;
+      }
+
+      // Update the UI immediately to reflect the change
+      setRefreshKey(prevKey => prevKey + 1);
+      return true;
+    } catch (err) {
+      console.error('Error toggling server:', err);
+      setError(err instanceof Error ? err.message : String(err));
+      return false;
+    }
+  };
+
+  return {
+    servers,
+    error,
+    setError,
+    isLoading: isInitialLoading,
+    fetchAttempts,
+    triggerRefresh,
+    handleServerAdd,
+    handleServerEdit,
+    handleServerRemove,
+    handleServerToggle
+  };
+};