Fetch projects from API and refine auth types

frontend/AutoDocOps-Frontend/src/contexts/AuthContext.tsx

@@ -10,7 +10,8 @@ type AuthAction =
   | { type: 'LOGIN_SUCCESS'; payload: { user: User; token: string } }
   | { type: 'LOGOUT' }
   | { type: 'UPDATE_USER'; payload: User }
-  | { type: 'RESTORE_SESSION'; payload: { user: User; token: string } };
+  | { type: 'RESTORE_SESSION'; payload: { user: User; token: string } }
+  | { type: 'UPDATE_TOKEN'; payload: string };
 
 // Initial state
 const initialState: AuthState = {
@@ -57,6 +58,11 @@ const authReducer = (state: AuthState, action: AuthAction): AuthState => {
         isAuthenticated: true,
         isLoading: false,
       };
+    case 'UPDATE_TOKEN':
+      return {
+        ...state,
+        token: action.payload,
+      };
     default:
       return state;
   }
@@ -126,7 +132,10 @@ export const AuthProvider: React.FC<AuthProviderProps> = ({ children }) => {
     try {
       dispatch({ type: 'SET_LOADING', payload: true });
 
-      const response = await apiService.post('/auth/login', credentials);
+      const response = await apiService.post<{ user: User; token: string }>(
+        '/auth/login',
+        credentials
+      );
 
       if (response.success && response.data) {
         const { user, token } = response.data;
@@ -152,7 +161,10 @@ export const AuthProvider: React.FC<AuthProviderProps> = ({ children }) => {
     try {
       dispatch({ type: 'SET_LOADING', payload: true });
 
-      const response = await apiService.post('/auth/register', userData);
+      const response = await apiService.post<{ user: User; token: string }>(
+        '/auth/register',
+        userData
+      );
 
       if (response.success && response.data) {
         const { user, token } = response.data;
@@ -194,12 +206,13 @@ export const AuthProvider: React.FC<AuthProviderProps> = ({ children }) => {
 
   const refreshToken = async (): Promise<void> => {
     try {
-      const response = await apiService.post('/auth/refresh');
-      
+      const response = await apiService.post<{ token: string }>('/auth/refresh');
+
       if (response.success && response.data) {
         const { token } = response.data;
         await apiService.setAuthToken(token);
         await SecureStore.setItemAsync(STORAGE_KEYS.AUTH_TOKEN, token);
+        dispatch({ type: 'UPDATE_TOKEN', payload: token });
       }
     } catch (error) {
       console.error('Error refreshing token:', error);

frontend/AutoDocOps-Frontend/src/screens/ChatScreen.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { View, Text, StyleSheet } from 'react-native';
-import { COLORS, TYPOGRAPHY } from '../../constants';
+import { COLORS, TYPOGRAPHY } from '../constants';
 
 const ChatScreen: React.FC = () => {
   return (

frontend/AutoDocOps-Frontend/src/screens/DocumentationScreen.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { View, Text, StyleSheet } from 'react-native';
-import { COLORS, TYPOGRAPHY } from '../../constants';
+import { COLORS, TYPOGRAPHY } from '../constants';
 
 const DocumentationScreen: React.FC = () => {
   return (

frontend/AutoDocOps-Frontend/src/screens/ProfileScreen.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { View, Text, StyleSheet } from 'react-native';
-import { COLORS, TYPOGRAPHY } from '../../constants';
+import { COLORS, TYPOGRAPHY } from '../constants';
 
 const ProfileScreen: React.FC = () => {
   return (

frontend/AutoDocOps-Frontend/src/screens/SettingsScreen.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { View, Text, StyleSheet } from 'react-native';
-import { COLORS, TYPOGRAPHY } from '../../constants';
+import { COLORS, TYPOGRAPHY } from '../constants';
 
 const SettingsScreen: React.FC = () => {
   return (

frontend/AutoDocOps-Frontend/src/screens/projects/ProjectsListScreen.tsx

@@ -7,10 +7,12 @@ import {
   StyleSheet,
   RefreshControl,
   Alert,
+  ActivityIndicator,
 } from 'react-native';
 import { Ionicons } from '@expo/vector-icons';
 import { Project, ProjectStatus, ProjectType } from '../../types';
 import { COLORS, TYPOGRAPHY, SPACING, BORDER_RADIUS, PROJECT_STATUS } from '../../constants';
+import projectService from '../../services/projectService';
 
 interface ProjectsListScreenProps {
   navigation: any;
@@ -25,102 +27,25 @@ const ProjectsListScreen: React.FC<ProjectsListScreenProps> = ({ navigation }) =
     loadProjects();
   }, []);
 
-  const loadProjects = async (): Promise<void> => {
+  const loadProjects = async (showLoading = true): Promise<void> => {
     try {
-      setIsLoading(true);
-      // TODO: Implement API call to load projects
-      // const response = await projectService.getProjects();
-      // setProjects(response.data);
-
-      // Mock data for now
-      const mockProjects: Project[] = [
-        {
-          id: '1',
-          name: 'API E-Commerce',
-          description: 'API para sistema de comercio electrónico',
-          type: ProjectType.DotNetApi,
-          status: ProjectStatus.DocumentationGenerated,
-          connectionConfig: {
-            connectionString: 'https://api.ecommerce.com',
-            authenticationType: 'Bearer',
-            isEnabled: true,
-            timeoutSeconds: 30,
-          },
-          repositoryUrl: 'https://github.com/company/ecommerce-api',
-          branch: 'main',
-          preferredLanguage: 1,
-          documentationConfig: {
-            generateOpenApi: true,
-            generateSwaggerUI: true,
-            generatePostmanCollection: true,
-            generateTypeScriptSDK: true,
-            generateCSharpSDK: false,
-            generateERDiagrams: false,
-            generateDataDictionary: false,
-            generateUsageGuides: true,
-            enableSemanticChat: true,
-            diagramFormat: 'PNG',
-            theme: 'Default',
-            includeCodeExamples: true,
-            includeVersioning: true,
-          },
-          lastAnalyzedAt: '2024-08-01T10:30:00Z',
-          version: '1.2.0',
-          createdAt: '2024-07-15T09:00:00Z',
-          updatedAt: '2024-08-01T10:30:00Z',
-          createdBy: 'user1',
-          updatedBy: 'user1',
-          isActive: true,
-        },
-        {
-          id: '2',
-          name: 'Base de Datos Inventario',
-          description: 'Esquema de base de datos para gestión de inventario',
-          type: ProjectType.SqlServerDatabase,
-          status: ProjectStatus.Analyzing,
-          connectionConfig: {
-            connectionString: 'Server=localhost;Database=Inventory;',
-            authenticationType: 'SqlServer',
-            username: 'sa',
-            isEnabled: true,
-            timeoutSeconds: 30,
-          },
-          preferredLanguage: 1,
-          documentationConfig: {
-            generateOpenApi: false,
-            generateSwaggerUI: false,
-            generatePostmanCollection: false,
-            generateTypeScriptSDK: false,
-            generateCSharpSDK: false,
-            generateERDiagrams: true,
-            generateDataDictionary: true,
-            generateUsageGuides: true,
-            enableSemanticChat: true,
-            diagramFormat: 'SVG',
-            theme: 'Default',
-            includeCodeExamples: true,
-            includeVersioning: false,
-          },
-          version: '1.0.0',
-          createdAt: '2024-07-20T14:00:00Z',
-          updatedAt: '2024-08-02T08:15:00Z',
-          createdBy: 'user1',
-          updatedBy: 'user1',
-          isActive: true,
-        },
-      ];
-
-      setProjects(mockProjects);
+      if (showLoading) {
+        setIsLoading(true);
+      }
+      const data = await projectService.getProjects();
+      setProjects(data);
     } catch (error) {
       Alert.alert('Error', 'No se pudieron cargar los proyectos');
     } finally {
-      setIsLoading(false);
+      if (showLoading) {
+        setIsLoading(false);
+      }
     }
   };
 
   const onRefresh = async (): Promise<void> => {
     setRefreshing(true);
-    await loadProjects();
+    await loadProjects(false);
     setRefreshing(false);
   };
 
@@ -195,6 +120,14 @@ const ProjectsListScreen: React.FC<ProjectsListScreenProps> = ({ navigation }) =
     </View>
   );
 
+  if (isLoading) {
+    return (
+      <View style={styles.loadingContainer}>
+        <ActivityIndicator size="large" color={COLORS.primary} />
+      </View>
+    );
+  }
+
   return (
     <View style={styles.container}>
       <FlatList
@@ -215,7 +148,7 @@ const ProjectsListScreen: React.FC<ProjectsListScreenProps> = ({ navigation }) =
         ListEmptyComponent={renderEmptyState}
         showsVerticalScrollIndicator={false}
       />
-      
+
       {projects.length > 0 && (
         <TouchableOpacity
           style={styles.fab}
@@ -233,6 +166,12 @@ const styles = StyleSheet.create({
     flex: 1,
     backgroundColor: COLORS.background,
   },
+  loadingContainer: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: COLORS.background,
+  },
   listContainer: {
     padding: SPACING.md,
   },

frontend/AutoDocOps-Frontend/src/services/projectService.ts

@@ -0,0 +1,14 @@
+import apiService from './api';
+import { Project } from '../types';
+
+const projectService = {
+  async getProjects(): Promise<Project[]> {
+    const response = await apiService.get<Project[]>('/projects');
+    if (!response.success) {
+      throw new Error(response.message || 'Failed to load projects');
+    }
+    return response.data;
+  },
+};
+
+export default projectService;

frontend/AutoDocOps-Frontend/src/types/index.ts

@@ -193,7 +193,10 @@ export interface SemanticSearchResult {
 // Navigation types
 export type RootStackParamList = {
   Auth: undefined;
+  Login: undefined;
+  Register: undefined;
   Main: undefined;
+  CreateProject: undefined;
   ProjectDetail: { projectId: string };
   DocumentationViewer: { projectId: string; type: 'api' | 'database' };
   Settings: undefined;