[V0.3] Working dashboard calendar module
This commit is contained in:
c-d-p
@@ -3,6 +3,7 @@ import apiClient from './client';
|
||||
import { CalendarEvent, CalendarEventCreate, CalendarEventUpdate } from '../types/calendar';
|
||||
|
||||
export const getCalendarEvents = async (start?: Date, end?: Date): Promise<CalendarEvent[]> => {
|
||||
console.log(`Getting calendar events from ${start} - ${end}`);
|
||||
try {
|
||||
const params: Record<string, string> = {};
|
||||
if (start instanceof Date) {
|
||||
|
||||
@@ -8,13 +8,35 @@ import AsyncStorage from '@react-native-async-storage/async-storage';
|
||||
const API_BASE_URL = process.env.EXPO_PUBLIC_API_URL || 'http://192.168.255.221:8000/api'; // Use your machine's IP
|
||||
// const API_BASE_URL = process.env.EXPO_PUBLIC_API_URL || 'http://192.168.1.9:8000/api'; // Use your machine's IP
|
||||
// const API_BASE_URL = process.env.EXPO_PUBLIC_API_URL || 'http://localhost:8000/api'; // Use your machine's IP
|
||||
const TOKEN_KEY = 'maia_access_token';
|
||||
const ACCESS_TOKEN_KEY = 'maia_access_token'; // Renamed for clarity
|
||||
const REFRESH_TOKEN_KEY = 'maia_refresh_token'; // Key for refresh token
|
||||
|
||||
console.log("Using API Base URL:", API_BASE_URL);
|
||||
|
||||
// Helper functions for storage (assuming they are defined above or imported)
|
||||
// const getToken = async (): Promise<string | null> => { ... };
|
||||
// const deleteToken = async () => { ... };
|
||||
// Helper functions for storage
|
||||
const storeToken = async (key: string, token: string): Promise<void> => {
|
||||
if (Platform.OS === 'web') {
|
||||
await AsyncStorage.setItem(key, token);
|
||||
} else {
|
||||
await SecureStore.setItemAsync(key, token);
|
||||
}
|
||||
};
|
||||
|
||||
const getToken = async (key: string): Promise<string | null> => {
|
||||
if (Platform.OS === 'web') {
|
||||
return await AsyncStorage.getItem(key);
|
||||
} else {
|
||||
return await SecureStore.getItemAsync(key).catch(() => null);
|
||||
}
|
||||
};
|
||||
|
||||
const deleteToken = async (key: string): Promise<void> => {
|
||||
if (Platform.OS === 'web') {
|
||||
await AsyncStorage.removeItem(key);
|
||||
} else {
|
||||
await SecureStore.deleteItemAsync(key).catch(() => {}); // Ignore delete error
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
const apiClient = axios.create({
|
||||
@@ -23,16 +45,14 @@ const apiClient = axios.create({
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
timeout: 10000,
|
||||
...(Platform.OS === 'web' ? { withCredentials: true } : {}),
|
||||
// Remove withCredentials from default config if not needed globally
|
||||
// ...(Platform.OS === 'web' ? { withCredentials: true } : {}),
|
||||
});
|
||||
|
||||
// --- Request Interceptor remains the same ---
|
||||
// --- Request Interceptor ---
|
||||
apiClient.interceptors.request.use(
|
||||
async (config) => {
|
||||
// Using AsyncStorage for web token retrieval here too for consistency
|
||||
const token = Platform.OS === 'web'
|
||||
? await AsyncStorage.getItem(TOKEN_KEY)
|
||||
: await SecureStore.getItemAsync(TOKEN_KEY).catch(() => null); // Handle potential SecureStore error
|
||||
const token = await getToken(ACCESS_TOKEN_KEY); // Use helper
|
||||
|
||||
if (token) {
|
||||
config.headers.Authorization = `Bearer ${token}`;
|
||||
@@ -46,7 +66,6 @@ apiClient.interceptors.request.use(
|
||||
}
|
||||
);
|
||||
|
||||
|
||||
// --- Modified Response Interceptor ---
|
||||
apiClient.interceptors.response.use(
|
||||
(response) => {
|
||||
@@ -56,105 +75,126 @@ apiClient.interceptors.response.use(
|
||||
async (error: AxiosError) => { // Explicitly type error as AxiosError
|
||||
const originalRequest = error.config;
|
||||
|
||||
// Check if the error has a response object AND an original request config
|
||||
if (error.response && originalRequest) { // <-- Added check for originalRequest
|
||||
// Server responded with an error status code (4xx, 5xx)
|
||||
if (error.response && originalRequest) {
|
||||
console.error('[API Client] Response Error Status:', error.response.status);
|
||||
console.error('[API Client] Response Error Data:', error.response.data);
|
||||
|
||||
// Handle 401 specifically
|
||||
if (error.response.status === 401) {
|
||||
console.warn('[API Client] Unauthorized (401). Token might be expired or invalid.');
|
||||
|
||||
// Prevent refresh loops if the refresh endpoint itself returns 401
|
||||
if (originalRequest.url === '/auth/refresh') {
|
||||
console.error('[API Client] Refresh token attempt failed with 401. Not retrying.');
|
||||
// Clear token and reject without retry
|
||||
if (Platform.OS === 'web') {
|
||||
await AsyncStorage.removeItem(TOKEN_KEY);
|
||||
} else {
|
||||
await SecureStore.deleteItemAsync(TOKEN_KEY).catch(() => {}); // Ignore delete error
|
||||
}
|
||||
console.error('[API Client] Refresh token attempt failed with 401. Clearing tokens.');
|
||||
await deleteToken(ACCESS_TOKEN_KEY);
|
||||
await deleteToken(REFRESH_TOKEN_KEY); // Clear refresh token too
|
||||
delete apiClient.defaults.headers.common['Authorization'];
|
||||
return Promise.reject(error); // Reject immediately
|
||||
// TODO: Trigger logout flow in UI
|
||||
return Promise.reject(error);
|
||||
}
|
||||
|
||||
// Proceed with refresh logic only if it wasn't the refresh endpoint that failed
|
||||
// and if originalRequest exists (already checked above)
|
||||
if (!originalRequest._retry) { // Now TS knows _retry exists due to declaration file
|
||||
originalRequest._retry = true;
|
||||
// Check if we haven't already tried to refresh for this request
|
||||
// Need to declare _retry on AxiosRequestConfig interface or use a different check
|
||||
// Using a simple check here, consider a more robust solution if needed
|
||||
if (!(originalRequest as any)._retry) {
|
||||
(originalRequest as any)._retry = true;
|
||||
|
||||
try {
|
||||
const storedRefreshToken = await getToken(REFRESH_TOKEN_KEY);
|
||||
if (!storedRefreshToken) {
|
||||
console.error('[API Client] No refresh token found to attempt refresh.');
|
||||
await deleteToken(ACCESS_TOKEN_KEY); // Clear potentially invalid access token
|
||||
// TODO: Trigger logout flow in UI
|
||||
return Promise.reject(error); // Reject if no refresh token
|
||||
}
|
||||
|
||||
console.log('[API Client] Attempting token refresh...');
|
||||
const refreshResponse = await apiClient.post('/auth/refresh', {}, {
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
});
|
||||
// Send refresh token in the body, remove withCredentials
|
||||
const refreshResponse = await apiClient.post('/auth/refresh',
|
||||
{ refresh_token: storedRefreshToken }, // Send token in body
|
||||
{
|
||||
// No withCredentials needed
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
}
|
||||
);
|
||||
|
||||
if (refreshResponse.status === 200) {
|
||||
const newToken = refreshResponse.data?.access_token;
|
||||
if (refreshResponse.status === 200) {
|
||||
const newAccessToken = refreshResponse.data?.access_token; // Expecting only access token
|
||||
|
||||
if (newToken) {
|
||||
if (newAccessToken) {
|
||||
console.log('[API Client] Token refreshed successfully.');
|
||||
// Save the new token
|
||||
if (Platform.OS === 'web') {
|
||||
await AsyncStorage.setItem(TOKEN_KEY, newToken);
|
||||
} else {
|
||||
await SecureStore.setItemAsync(TOKEN_KEY, newToken);
|
||||
}
|
||||
await storeToken(ACCESS_TOKEN_KEY, newAccessToken); // Store new access token
|
||||
|
||||
// Update the Authorization header for future requests
|
||||
apiClient.defaults.headers.common['Authorization'] = `Bearer ${newToken}`;
|
||||
// Safely update original request headers
|
||||
// Update the default Authorization header for subsequent requests
|
||||
apiClient.defaults.headers.common['Authorization'] = `Bearer ${newAccessToken}`;
|
||||
|
||||
// Update the Authorization header in the original request config
|
||||
if (originalRequest.headers) {
|
||||
originalRequest.headers['Authorization'] = `Bearer ${newToken}`;
|
||||
originalRequest.headers['Authorization'] = `Bearer ${newAccessToken}`;
|
||||
}
|
||||
|
||||
// Retry the original request (originalRequest is guaranteed to exist here)
|
||||
// Retry the original request with the new access token
|
||||
return apiClient(originalRequest);
|
||||
} else {
|
||||
console.error('[API Client] Invalid token structure received during refresh:', refreshResponse.data);
|
||||
throw new Error('Invalid token received from server.');
|
||||
throw new Error('Invalid access token received from server during refresh.');
|
||||
}
|
||||
} else {
|
||||
// Handle non-200 responses from refresh endpoint if necessary
|
||||
console.error(`[API Client] Token refresh endpoint returned status ${refreshResponse.status}`);
|
||||
throw new Error(`Refresh failed with status ${refreshResponse.status}`);
|
||||
}
|
||||
} catch (refreshError: any) {
|
||||
console.error('[API Client] Token refresh failed:', refreshError);
|
||||
// Clear tokens if refresh fails
|
||||
await deleteToken(ACCESS_TOKEN_KEY);
|
||||
await deleteToken(REFRESH_TOKEN_KEY);
|
||||
delete apiClient.defaults.headers.common['Authorization'];
|
||||
// TODO: Trigger logout flow in UI
|
||||
// Propagate the refresh error instead of the original 401
|
||||
return Promise.reject(refreshError);
|
||||
}
|
||||
} else {
|
||||
console.warn('[API Client] Already retried this request. Not attempting refresh again.');
|
||||
}
|
||||
|
||||
// Clear potentially invalid token due to 401
|
||||
console.log('[API Client] Clearing potentially invalid token due to 401.');
|
||||
if (Platform.OS === 'web') {
|
||||
await AsyncStorage.removeItem(TOKEN_KEY);
|
||||
} else {
|
||||
await SecureStore.deleteItemAsync(TOKEN_KEY).catch(() => {}); // Ignore delete error
|
||||
}
|
||||
// If retry flag was already set, or if refresh attempt failed and fell through,
|
||||
// we might still end up here. Ensure tokens are cleared if a 401 persists.
|
||||
console.log('[API Client] Clearing tokens due to persistent 401 or failed refresh.');
|
||||
await deleteToken(ACCESS_TOKEN_KEY);
|
||||
await deleteToken(REFRESH_TOKEN_KEY);
|
||||
delete apiClient.defaults.headers.common['Authorization'];
|
||||
// TODO: Trigger logout flow in UI
|
||||
|
||||
// How to trigger logout? Propagating error is simplest for now.
|
||||
}
|
||||
} // End of 401 handling
|
||||
} else if (error.request) {
|
||||
// The request was made but no response was received
|
||||
// (e.g., network error, CORS block preventing response reading, server timeout)
|
||||
console.error('[API Client] Network Error or No Response:', error.message);
|
||||
// Log the request object for debugging if needed
|
||||
// console.error('[API Client] Error Request Object:', error.request);
|
||||
// If CORS is suspected, this is often where the error ends up.
|
||||
if (error.message.toLowerCase().includes('network error') && Platform.OS === 'web') {
|
||||
console.warn('[API Client] Hint: A "Network Error" on web often masks a CORS issue. Check browser console & backend CORS config.');
|
||||
}
|
||||
|
||||
} else {
|
||||
// Something happened in setting up the request that triggered an Error
|
||||
console.error('[API Client] Request Setup Error (Interceptor):', error.message);
|
||||
}
|
||||
|
||||
// Log the config that failed (optional, can be verbose)
|
||||
// console.error("[API Client] Failing Request Config:", error.config);
|
||||
|
||||
// Always reject the promise to propagate the error
|
||||
return Promise.reject(error);
|
||||
}
|
||||
);
|
||||
|
||||
export default apiClient;
|
||||
export default apiClient;
|
||||
|
||||
// Add functions to manage tokens globally if needed by UI components
|
||||
export const storeTokens = async (accessToken: string, refreshToken?: string) => {
|
||||
await storeToken(ACCESS_TOKEN_KEY, accessToken);
|
||||
if (refreshToken) {
|
||||
await storeToken(REFRESH_TOKEN_KEY, refreshToken);
|
||||
}
|
||||
apiClient.defaults.headers.common['Authorization'] = `Bearer ${accessToken}`; // Update client instance
|
||||
};
|
||||
|
||||
export const clearTokens = async () => {
|
||||
await deleteToken(ACCESS_TOKEN_KEY);
|
||||
await deleteToken(REFRESH_TOKEN_KEY);
|
||||
delete apiClient.defaults.headers.common['Authorization']; // Clear client instance header
|
||||
};
|
||||
|
||||
export const getRefreshToken = () => getToken(REFRESH_TOKEN_KEY);
|
||||
export const getAccessToken = () => getToken(ACCESS_TOKEN_KEY);
|
||||
@@ -1,15 +1,11 @@
|
||||
// src/contexts/AuthContext.tsx
|
||||
import React, { createContext, useState, useEffect, useContext, useMemo, useCallback } from 'react';
|
||||
import { Platform, ActivityIndicator, View, StyleSheet } from 'react-native'; // Import Platform
|
||||
import * as SecureStore from 'expo-secure-store';
|
||||
import AsyncStorage from '@react-native-async-storage/async-storage'; // Use AsyncStorage for web localStorage
|
||||
import apiClient from '../api/client';
|
||||
import { useTheme } from 'react-native-paper';
|
||||
|
||||
const TOKEN_KEY = 'maia_access_token'; // Use the same key
|
||||
import { getAccessToken, getRefreshToken, storeTokens, clearTokens } from '../api/client';
|
||||
|
||||
interface AuthContextData {
|
||||
authToken: string | null;
|
||||
isAuthenticated: boolean;
|
||||
isLoading: boolean;
|
||||
login: (username: string, password: string) => Promise<void>;
|
||||
@@ -17,7 +13,6 @@ interface AuthContextData {
|
||||
}
|
||||
|
||||
const AuthContext = createContext<AuthContextData>({
|
||||
authToken: null,
|
||||
isAuthenticated: false,
|
||||
isLoading: true,
|
||||
login: async () => { throw new Error('AuthContext not initialized'); },
|
||||
@@ -28,104 +23,42 @@ interface AuthProviderProps {
|
||||
children: React.ReactNode;
|
||||
}
|
||||
|
||||
// Helper functions for platform-specific storage
|
||||
const storeToken = async (token: string) => {
|
||||
if (Platform.OS === 'web') {
|
||||
try {
|
||||
// Use AsyncStorage for web (polyfilled to localStorage)
|
||||
await AsyncStorage.setItem(TOKEN_KEY, token);
|
||||
} catch (e) {
|
||||
console.error("Failed to save token to web storage", e);
|
||||
}
|
||||
} else {
|
||||
await SecureStore.setItemAsync(TOKEN_KEY, token);
|
||||
}
|
||||
};
|
||||
|
||||
const getToken = async (): Promise<string | null> => {
|
||||
if (Platform.OS === 'web') {
|
||||
try {
|
||||
return await AsyncStorage.getItem(TOKEN_KEY);
|
||||
} catch (e) {
|
||||
console.error("Failed to get token from web storage", e);
|
||||
return null;
|
||||
}
|
||||
} else {
|
||||
// SecureStore might throw if not available, handle gracefully
|
||||
try {
|
||||
return await SecureStore.getItemAsync(TOKEN_KEY);
|
||||
} catch (e) {
|
||||
console.error("Failed to get token from secure store", e);
|
||||
// If SecureStore fails on native, treat as no token found
|
||||
return null;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const deleteToken = async () => {
|
||||
if (Platform.OS === 'web') {
|
||||
try {
|
||||
await AsyncStorage.removeItem(TOKEN_KEY);
|
||||
} catch (e) {
|
||||
console.error("Failed to remove token from web storage", e);
|
||||
}
|
||||
} else {
|
||||
// Avoid potential crash if SecureStore is unavailable
|
||||
try {
|
||||
await SecureStore.deleteItemAsync(TOKEN_KEY);
|
||||
} catch (e) {
|
||||
console.error("Failed to delete token from secure store", e);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
export const AuthProvider: React.FC<AuthProviderProps> = ({ children }) => {
|
||||
const [authToken, setAuthToken] = useState<string | null>(null);
|
||||
const [isLoading, setIsLoading] = useState<boolean>(true);
|
||||
const [isAuthenticatedState, setIsAuthenticatedState] = useState<boolean>(false);
|
||||
|
||||
const loadToken = useCallback(async () => {
|
||||
console.log("[AuthContext] loadToken: Starting..."); // Log: Start
|
||||
const checkAuthStatus = useCallback(async () => {
|
||||
const token = await getAccessToken();
|
||||
const hasToken = !!token;
|
||||
if (hasToken !== isAuthenticatedState) {
|
||||
setIsAuthenticatedState(hasToken);
|
||||
}
|
||||
return hasToken;
|
||||
}, [isAuthenticatedState]);
|
||||
|
||||
const loadInitialAuth = useCallback(async () => {
|
||||
setIsLoading(true);
|
||||
try {
|
||||
console.log("[AuthContext] loadToken: Calling getToken()..."); // Log: Before await
|
||||
const storedToken = await getToken(); // Use helper
|
||||
console.log("[AuthContext] loadToken: getToken() returned:", storedToken); // Log: After await
|
||||
|
||||
if (storedToken) {
|
||||
console.log('[AuthContext] loadToken: Token found. Setting state and headers.'); // Log: Token Found Path
|
||||
setAuthToken(storedToken);
|
||||
apiClient.defaults.headers.common['Authorization'] = `Bearer ${storedToken}`;
|
||||
} else {
|
||||
console.log('[AuthContext] loadToken: No token found. Clearing state and headers.'); // Log: No Token Path
|
||||
setAuthToken(null);
|
||||
delete apiClient.defaults.headers.common['Authorization'];
|
||||
}
|
||||
console.log('[AuthContext] loadToken: Try block finished successfully.'); // Log: Try Success
|
||||
console.log("[AuthContext] loadInitialAuth: Checking initial auth status");
|
||||
await checkAuthStatus();
|
||||
console.log("[AuthContext] loadInitialAuth: Initial check complete.");
|
||||
} catch (error) {
|
||||
// **Log the actual error object**
|
||||
console.error("[AuthContext] loadToken: Caught error:", error); // Log: Catch Block
|
||||
setAuthToken(null); // Ensure logged out state on error
|
||||
delete apiClient.defaults.headers.common['Authorization'];
|
||||
console.error("[AuthContext] loadInitialAuth: Error loading initial token:", error);
|
||||
await clearTokens();
|
||||
setIsAuthenticatedState(false);
|
||||
} finally {
|
||||
console.log("[AuthContext] loadToken: Entering finally block."); // Log: Finally Start
|
||||
setIsLoading(false);
|
||||
console.log("[AuthContext] loadToken: setIsLoading(false) called."); // Log: Finally End
|
||||
}
|
||||
}, []);
|
||||
}, [checkAuthStatus]);
|
||||
|
||||
useEffect(() => {
|
||||
console.log("[AuthContext] useEffect: Component mounted, calling loadToken."); // Log: useEffect call
|
||||
loadToken();
|
||||
}, [loadToken]);
|
||||
loadInitialAuth();
|
||||
}, [loadInitialAuth]);
|
||||
|
||||
const login = useCallback(async (username: string, password: string) => {
|
||||
console.log("[AuthContext] login: Function called with:", username); // Log: Function entry
|
||||
console.log("[AuthContext] login: Function called with:", username);
|
||||
try {
|
||||
console.log("[AuthContext] login: Preparing to call apiClient.post for /auth/login");
|
||||
console.log("[AuthContext] login: Data being sent:", { username: username, password: password });
|
||||
|
||||
// const response = await apiClient.post(`/auth/login?grant_type=password&username=${username}&password=${password}`);
|
||||
const response = await apiClient.post(
|
||||
'/auth/login',
|
||||
'grant_type=password&username=' + encodeURIComponent(username) + '&password=' + encodeURIComponent(password) + '&scope=&client_id=&client_secret=',
|
||||
@@ -137,53 +70,61 @@ export const AuthProvider: React.FC<AuthProviderProps> = ({ children }) => {
|
||||
}
|
||||
);
|
||||
|
||||
console.log("[AuthContext] login: apiClient.post successful, response status:", response?.status); // Log success
|
||||
console.log("[AuthContext] login: apiClient.post successful, response status:", response?.status);
|
||||
const { access_token, refresh_token } = response.data;
|
||||
console.log("[AuthContext] login: Response data received.");
|
||||
|
||||
const { access_token } = response.data;
|
||||
|
||||
if (!access_token || typeof access_token !== 'string') {
|
||||
if (!access_token || typeof access_token !== 'string' || !refresh_token) {
|
||||
console.error("[AuthContext] login: Invalid token structure received:", response.data);
|
||||
throw new Error('Invalid token received from server.');
|
||||
}
|
||||
|
||||
console.log('[AuthContext] login: Login successful, received token.');
|
||||
setAuthToken(access_token);
|
||||
apiClient.defaults.headers.common['Authorization'] = `Bearer ${access_token}`;
|
||||
await storeToken(access_token); // Use helper
|
||||
console.log('[AuthContext] login: Login successful, storing tokens.');
|
||||
await storeTokens(access_token, refresh_token);
|
||||
setIsAuthenticatedState(true);
|
||||
|
||||
} catch (error: any) {
|
||||
// --- Log the error object *itself* ---
|
||||
console.error("[AuthContext] login: Caught Error Object:", error);
|
||||
|
||||
// --- Check if it's an Axios error with config details ---
|
||||
if (error.isAxiosError) {
|
||||
console.error("[AuthContext] login: Axios Error Details:");
|
||||
console.error(" Request Config:", error.config);
|
||||
console.error(" Response:", error.response); // This will likely still be undefined
|
||||
console.error(" Response:", error.response?.status, error.response?.data);
|
||||
console.error(" Message:", error.message);
|
||||
}
|
||||
|
||||
// Original logging (might be redundant now but keep for context)
|
||||
console.error("Login failed:", error.response?.data || error.message);
|
||||
throw error; // Re-throw
|
||||
await clearTokens();
|
||||
setIsAuthenticatedState(false);
|
||||
throw error;
|
||||
}
|
||||
}, []);
|
||||
|
||||
const logout = useCallback(async () => {
|
||||
console.log('Logging out.');
|
||||
setAuthToken(null);
|
||||
delete apiClient.defaults.headers.common['Authorization'];
|
||||
await deleteToken(); // Use helper
|
||||
await apiClient.post("/auth/logout");
|
||||
console.log('[AuthContext] logout: Logging out.');
|
||||
const refreshToken = await getRefreshToken();
|
||||
if (!refreshToken) {
|
||||
console.warn('[AuthContext] logout: No refresh token found to send to backend.');
|
||||
}
|
||||
|
||||
try {
|
||||
if (refreshToken) {
|
||||
console.log('[AuthContext] logout: Calling backend /auth/logout');
|
||||
await apiClient.post("/auth/logout", { refresh_token: refreshToken });
|
||||
console.log('[AuthContext] logout: Backend logout call successful (or ignored error).');
|
||||
}
|
||||
} catch (error: any) {
|
||||
console.error('[AuthContext] logout: Error calling backend logout:', error.response?.data || error.message);
|
||||
} finally {
|
||||
await clearTokens();
|
||||
setIsAuthenticatedState(false);
|
||||
console.log('[AuthContext] logout: Local tokens cleared and state updated.');
|
||||
}
|
||||
}, []);
|
||||
|
||||
const contextValue = useMemo(() => ({
|
||||
authToken,
|
||||
isAuthenticated: !!authToken,
|
||||
isAuthenticated: isAuthenticatedState,
|
||||
isLoading,
|
||||
login,
|
||||
logout,
|
||||
}), [authToken, isLoading, login, logout]);
|
||||
}), [isAuthenticatedState, isLoading, login, logout]);
|
||||
|
||||
return (
|
||||
<AuthContext.Provider value={contextValue}>
|
||||
|
||||
@@ -1,9 +1,20 @@
|
||||
// src/screens/ChatScreen.tsx
|
||||
import React, { useState, useCallback, useRef, useEffect } from 'react';
|
||||
import { View, StyleSheet, FlatList, KeyboardAvoidingView, Platform, TextInput as RNTextInput, NativeSyntheticEvent, TextInputKeyPressEventData } from 'react-native';
|
||||
import { Text, useTheme, TextInput, Button, IconButton, PaperProvider } from 'react-native-paper';
|
||||
import {
|
||||
View,
|
||||
StyleSheet,
|
||||
FlatList,
|
||||
KeyboardAvoidingView,
|
||||
Platform,
|
||||
TextInput as RNTextInput, // Keep if needed for specific props, otherwise can remove
|
||||
NativeSyntheticEvent,
|
||||
TextInputKeyPressEventData,
|
||||
ActivityIndicator // Import ActivityIndicator
|
||||
} from 'react-native';
|
||||
import { Text, useTheme, TextInput, IconButton } from 'react-native-paper';
|
||||
import { SafeAreaView } from 'react-native-safe-area-context';
|
||||
import apiClient from '../api/client'; // Import the apiClient
|
||||
import { useRoute, RouteProp } from '@react-navigation/native'; // Import useRoute and RouteProp
|
||||
|
||||
// Define the structure for a message
|
||||
interface Message {
|
||||
@@ -26,73 +37,49 @@ interface ChatHistoryResponse {
|
||||
timestamp: string; // Backend sends ISO string
|
||||
}
|
||||
|
||||
// Define the type for the navigation route parameters
|
||||
type RootStackParamList = {
|
||||
Chat: { // Assuming 'Chat' is the name of the route for this screen
|
||||
initialQuestion?: string; // Make initialQuestion optional
|
||||
};
|
||||
// Add other routes here if needed
|
||||
};
|
||||
|
||||
type ChatScreenRouteProp = RouteProp<RootStackParamList, 'Chat'>;
|
||||
|
||||
const ChatScreen = () => {
|
||||
const theme = useTheme();
|
||||
const route = useRoute<ChatScreenRouteProp>(); // Get route params
|
||||
const initialQuestion = route.params?.initialQuestion; // Extract initialQuestion
|
||||
|
||||
const [messages, setMessages] = useState<Message[]>([]);
|
||||
const [inputText, setInputText] = useState('');
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const [isHistoryLoading, setIsHistoryLoading] = useState(true); // Add state for history loading
|
||||
const [isLoading, setIsLoading] = useState(false); // Loading state for sending messages
|
||||
const [isHistoryLoading, setIsHistoryLoading] = useState(true); // Loading state for initial history fetch
|
||||
const flatListRef = useRef<FlatList>(null);
|
||||
|
||||
// --- Load messages from backend API on mount ---
|
||||
useEffect(() => {
|
||||
const loadHistory = async () => {
|
||||
setIsHistoryLoading(true);
|
||||
try {
|
||||
console.log("[ChatScreen] Fetching chat history from /nlp/history");
|
||||
const response = await apiClient.get<ChatHistoryResponse[]>('/nlp/history');
|
||||
console.log("[ChatScreen] Received history:", response.data);
|
||||
|
||||
if (response.data && Array.isArray(response.data)) {
|
||||
// Map backend response to frontend Message format
|
||||
const historyMessages = response.data.map((msg) => ({
|
||||
id: msg.id.toString(), // Convert backend ID to string for keyExtractor
|
||||
text: msg.text,
|
||||
sender: msg.sender,
|
||||
timestamp: new Date(msg.timestamp), // Convert ISO string to Date
|
||||
}));
|
||||
setMessages(historyMessages);
|
||||
} else {
|
||||
console.warn("[ChatScreen] Received invalid history data:", response.data);
|
||||
setMessages([]); // Set to empty array if data is invalid
|
||||
}
|
||||
} catch (error: any) {
|
||||
console.error("Failed to load chat history from backend:", error.response?.data || error.message || error);
|
||||
// Optionally, show an error message to the user
|
||||
// For now, just start with an empty chat
|
||||
setMessages([]);
|
||||
} finally {
|
||||
setIsHistoryLoading(false);
|
||||
}
|
||||
};
|
||||
loadHistory();
|
||||
}, []); // Empty dependency array ensures this runs only once on mount
|
||||
|
||||
// Function to handle sending a message
|
||||
const handleSend = useCallback(async () => {
|
||||
const trimmedText = inputText.trim();
|
||||
if (!trimmedText || isLoading) return; // Prevent sending while loading
|
||||
// --- Function to send a message to the backend --- (Extracted logic)
|
||||
const sendMessageToApi = useCallback(async (textToSend: string) => {
|
||||
if (!textToSend) return; // Don't send empty messages
|
||||
|
||||
const userMessage: Message = {
|
||||
id: Date.now().toString() + '-user', // Temporary frontend ID
|
||||
text: trimmedText,
|
||||
text: textToSend,
|
||||
sender: 'user',
|
||||
timestamp: new Date(),
|
||||
};
|
||||
|
||||
// Add user message optimistically
|
||||
setMessages(prevMessages => [...prevMessages, userMessage]);
|
||||
|
||||
setInputText('');
|
||||
setIsLoading(true);
|
||||
|
||||
// Scroll to bottom after sending user message
|
||||
// Scroll to bottom after adding user message
|
||||
setTimeout(() => flatListRef.current?.scrollToEnd({ animated: true }), 100);
|
||||
|
||||
// --- Call Backend API ---
|
||||
try {
|
||||
console.log(`[ChatScreen] Sending to /nlp/process-command: ${trimmedText}`);
|
||||
const response = await apiClient.post<NlpResponse>('/nlp/process-command', { user_input: trimmedText });
|
||||
console.log(`[ChatScreen] Sending to /nlp/process-command: ${textToSend}`);
|
||||
const response = await apiClient.post<NlpResponse>('/nlp/process-command', { user_input: textToSend });
|
||||
console.log("[ChatScreen] Received response:", response.data);
|
||||
|
||||
const aiResponses: Message[] = [];
|
||||
@@ -100,7 +87,7 @@ const ChatScreen = () => {
|
||||
response.data.responses.forEach((responseText, index) => {
|
||||
aiResponses.push({
|
||||
id: `${Date.now()}-ai-${index}`, // Temporary frontend ID
|
||||
text: responseText || "...",
|
||||
text: responseText || "...", // Handle potentially empty strings
|
||||
sender: 'ai',
|
||||
timestamp: new Date(),
|
||||
});
|
||||
@@ -109,7 +96,7 @@ const ChatScreen = () => {
|
||||
console.warn("[ChatScreen] Received invalid or empty responses array:", response.data);
|
||||
aiResponses.push({
|
||||
id: Date.now().toString() + '-ai-fallback',
|
||||
text: "Sorry, I didn't get a valid response.",
|
||||
text: "Sorry, I couldn't process that properly.",
|
||||
sender: 'ai',
|
||||
timestamp: new Date(),
|
||||
});
|
||||
@@ -133,13 +120,92 @@ const ChatScreen = () => {
|
||||
setTimeout(() => flatListRef.current?.scrollToEnd({ animated: true }), 100);
|
||||
}
|
||||
// --- End API Call ---
|
||||
// NOTE: Removed `messages` from dependency array to prevent potential loops.
|
||||
// State updates within useCallback using the functional form `setMessages(prev => ...)`
|
||||
// don't require the state itself as a dependency.
|
||||
}, []);
|
||||
|
||||
}, [inputText, isLoading, messages]); // Add isLoading and messages to dependency array
|
||||
// --- Load messages from backend API on mount & handle initial question ---
|
||||
useEffect(() => {
|
||||
let isMounted = true; // Flag to prevent state updates on unmounted component
|
||||
|
||||
const loadHistoryAndSendInitial = async () => {
|
||||
console.log("[ChatScreen] Component mounted. Loading history...");
|
||||
setIsHistoryLoading(true);
|
||||
let historyLoadedSuccessfully = false;
|
||||
try {
|
||||
const response = await apiClient.get<ChatHistoryResponse[]>('/nlp/history');
|
||||
if (isMounted) {
|
||||
console.log("[ChatScreen] Received history:", response.data);
|
||||
if (response.data && Array.isArray(response.data)) {
|
||||
const historyMessages = response.data.map((msg) => ({
|
||||
id: msg.id.toString(),
|
||||
text: msg.text,
|
||||
sender: msg.sender,
|
||||
timestamp: new Date(msg.timestamp),
|
||||
}));
|
||||
setMessages(historyMessages);
|
||||
historyLoadedSuccessfully = true; // Mark history as loaded
|
||||
} else {
|
||||
console.warn("[ChatScreen] Received invalid history data:", response.data);
|
||||
setMessages([]);
|
||||
}
|
||||
}
|
||||
} catch (error: any) {
|
||||
if (isMounted) {
|
||||
console.error("Failed to load chat history:", error.response?.data || error.message || error);
|
||||
setMessages([]); // Clear messages on error
|
||||
}
|
||||
} finally {
|
||||
if (isMounted) {
|
||||
setIsHistoryLoading(false);
|
||||
console.log("[ChatScreen] History loading finished. History loaded:", historyLoadedSuccessfully);
|
||||
// Send initial question *after* history load attempt, if provided
|
||||
if (initialQuestion) {
|
||||
console.log("[ChatScreen] Initial question provided:", initialQuestion);
|
||||
// Check if the initial question is already the last message from history (simple check)
|
||||
const lastMessageText = messages[messages.length - 1]?.text;
|
||||
if (lastMessageText !== initialQuestion) {
|
||||
console.log("[ChatScreen] Sending initial question now.");
|
||||
// Use a timeout to ensure history state update is processed before sending
|
||||
setTimeout(() => sendMessageToApi(initialQuestion), 0);
|
||||
} else {
|
||||
console.log("[ChatScreen] Initial question seems to match last history message, not sending again.");
|
||||
}
|
||||
} else {
|
||||
console.log("[ChatScreen] No initial question provided.");
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
loadHistoryAndSendInitial();
|
||||
|
||||
return () => {
|
||||
isMounted = false; // Cleanup function to set flag on unmount
|
||||
console.log("[ChatScreen] Component unmounted.");
|
||||
};
|
||||
// Run only once on mount. `initialQuestion` is stable after mount.
|
||||
// `sendMessageToApi` is memoized by useCallback.
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [initialQuestion, sendMessageToApi]);
|
||||
|
||||
// Function to handle sending a message via input button
|
||||
const handleSend = useCallback(async () => {
|
||||
const trimmedText = inputText.trim();
|
||||
if (!trimmedText || isLoading) return;
|
||||
|
||||
setInputText(''); // Clear input immediately
|
||||
await sendMessageToApi(trimmedText); // Use the extracted function
|
||||
|
||||
}, [inputText, isLoading, sendMessageToApi]);
|
||||
|
||||
// Function to handle Enter key press for sending
|
||||
const handleKeyPress = (e: NativeSyntheticEvent<TextInputKeyPressEventData>) => {
|
||||
// Check if Enter is pressed without Shift key
|
||||
if (e.nativeEvent.key === 'Enter' && !(e.nativeEvent as any).shiftKey) {
|
||||
e.preventDefault(); // Prevent new line
|
||||
handleSend();
|
||||
e.preventDefault(); // Prevent default behavior (like newline)
|
||||
handleSend(); // Trigger send action
|
||||
}
|
||||
};
|
||||
|
||||
@@ -164,6 +230,12 @@ const ChatScreen = () => {
|
||||
flex: 1,
|
||||
backgroundColor: theme.colors.background,
|
||||
},
|
||||
loadingContainer: { // Centering container for loading indicator
|
||||
flex: 1,
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
backgroundColor: theme.colors.background,
|
||||
},
|
||||
keyboardAvoidingContainer: { // Style for KAV
|
||||
flex: 1,
|
||||
},
|
||||
@@ -181,39 +253,33 @@ const ChatScreen = () => {
|
||||
paddingVertical: 8, // Add some vertical padding
|
||||
borderTopWidth: StyleSheet.hairlineWidth,
|
||||
borderTopColor: theme.colors.outlineVariant,
|
||||
backgroundColor: theme.colors.background, // Or theme.colors.surface
|
||||
backgroundColor: theme.colors.surface, // Use surface color for input area
|
||||
},
|
||||
textInput: {
|
||||
flex: 1, // Take available horizontal space
|
||||
marginRight: 8,
|
||||
backgroundColor: theme.colors.surface,
|
||||
paddingTop: 10, // Keep the vertical alignment fix for placeholder
|
||||
paddingHorizontal: 10,
|
||||
// Add some vertical padding inside the input itself
|
||||
paddingVertical: Platform.OS === 'ios' ? 10 : 5, // Adjust padding for different platforms if needed
|
||||
backgroundColor: theme.colors.surface, // Match container background
|
||||
// Remove explicit padding if mode="outlined" handles it well
|
||||
maxHeight: 100, // Optional: prevent input from getting too tall with multiline
|
||||
},
|
||||
sendButton: {
|
||||
marginVertical: 4, // Adjust vertical alignment if needed
|
||||
// Ensure button doesn't shrink
|
||||
height: 40, // Match TextInput height approx.
|
||||
justifyContent: 'center',
|
||||
margin: 0, // Remove default margins if IconButton has them
|
||||
},
|
||||
messageBubble: {
|
||||
maxWidth: '80%',
|
||||
padding: 10,
|
||||
borderRadius: 15,
|
||||
padding: 12, // Slightly larger padding
|
||||
borderRadius: 18, // More rounded corners
|
||||
marginBottom: 10,
|
||||
},
|
||||
userBubble: {
|
||||
alignSelf: 'flex-end',
|
||||
backgroundColor: theme.colors.primary,
|
||||
borderBottomRightRadius: 5,
|
||||
borderBottomRightRadius: 5, // Keep the chat bubble tail effect
|
||||
},
|
||||
aiBubble: {
|
||||
alignSelf: 'flex-start',
|
||||
backgroundColor: theme.colors.surfaceVariant,
|
||||
borderBottomLeftRadius: 5,
|
||||
borderBottomLeftRadius: 5, // Keep the chat bubble tail effect
|
||||
},
|
||||
timestamp: {
|
||||
fontSize: 10,
|
||||
@@ -223,13 +289,12 @@ const ChatScreen = () => {
|
||||
}
|
||||
});
|
||||
|
||||
// Optionally, show a loading indicator while history loads
|
||||
// Show a loading indicator while history loads
|
||||
if (isHistoryLoading) {
|
||||
return (
|
||||
<SafeAreaView style={styles.container} edges={['bottom', 'left', 'right']}>
|
||||
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
|
||||
<Text>Loading chat history...</Text>
|
||||
</View>
|
||||
<SafeAreaView style={styles.loadingContainer} edges={['bottom', 'left', 'right']}>
|
||||
<ActivityIndicator animating={true} size="large" color={theme.colors.primary} />
|
||||
<Text style={{ marginTop: 10, color: theme.colors.onBackground }}>Loading chat history...</Text>
|
||||
</SafeAreaView>
|
||||
);
|
||||
}
|
||||
@@ -237,13 +302,9 @@ const ChatScreen = () => {
|
||||
return (
|
||||
<SafeAreaView style={styles.container} edges={['bottom', 'left', 'right']}>
|
||||
<KeyboardAvoidingView
|
||||
style={styles.keyboardAvoidingContainer} // Use style with flex: 1
|
||||
// Use 'padding' for both iOS and Android
|
||||
behavior={Platform.OS === "ios" ? "padding" : "padding"}
|
||||
// Remove keyboardVerticalOffset for Android when using padding.
|
||||
// Keep iOS offset if needed (e.g., for header).
|
||||
// Assuming headerHeight might be needed for iOS, otherwise set to 0.
|
||||
keyboardVerticalOffset={Platform.OS === "ios" ? 60 : 0} // Example iOS offset, adjust if necessary
|
||||
style={styles.keyboardAvoidingContainer}
|
||||
behavior={Platform.OS === "ios" ? "padding" : "height"} // Use height for Android if padding causes issues
|
||||
keyboardVerticalOffset={Platform.OS === "ios" ? 60 : 0} // Adjust as needed
|
||||
>
|
||||
{/* List container takes available space */}
|
||||
<View style={styles.listContainer}>
|
||||
@@ -252,9 +313,11 @@ const ChatScreen = () => {
|
||||
data={messages}
|
||||
renderItem={renderMessage}
|
||||
keyExtractor={(item) => item.id}
|
||||
contentContainerStyle={styles.messageList} // Padding inside the scrollable content
|
||||
onContentSizeChange={() => flatListRef.current?.scrollToEnd({ animated: false })}
|
||||
onLayout={() => flatListRef.current?.scrollToEnd({ animated: false })}
|
||||
contentContainerStyle={styles.messageList}
|
||||
// Optimization: remove onContentSizeChange/onLayout if not strictly needed for scrolling
|
||||
// onContentSizeChange={() => flatListRef.current?.scrollToEnd({ animated: false })}
|
||||
// onLayout={() => flatListRef.current?.scrollToEnd({ animated: false })}
|
||||
// Consider initialScrollIndex or other props if performance is an issue
|
||||
/>
|
||||
</View>
|
||||
|
||||
@@ -264,13 +327,14 @@ const ChatScreen = () => {
|
||||
style={styles.textInput}
|
||||
value={inputText}
|
||||
onChangeText={setInputText}
|
||||
placeholder="Type your message..."
|
||||
mode="outlined" // Keep outlined or flat as preferred
|
||||
placeholder="Ask MAIA..."
|
||||
mode="outlined"
|
||||
multiline
|
||||
onKeyPress={handleKeyPress}
|
||||
onKeyPress={handleKeyPress} // Use onKeyPress for web/desktop-like Enter behavior
|
||||
blurOnSubmit={false} // Keep false for multiline + send button
|
||||
disabled={isLoading}
|
||||
dense // Try making the input slightly smaller vertically
|
||||
disabled={isLoading} // Disable input while AI is responding
|
||||
outlineStyle={{ borderRadius: 20 }} // Make input more rounded
|
||||
dense // Reduce vertical padding
|
||||
/>
|
||||
<IconButton
|
||||
icon="send"
|
||||
@@ -280,7 +344,8 @@ const ChatScreen = () => {
|
||||
mode="contained"
|
||||
iconColor={theme.colors.onPrimary}
|
||||
containerColor={theme.colors.primary}
|
||||
style={styles.sendButton} // Apply style for alignment
|
||||
style={styles.sendButton}
|
||||
animated // Add subtle animation
|
||||
/>
|
||||
</View>
|
||||
</KeyboardAvoidingView>
|
||||
|
||||
@@ -1,18 +1,212 @@
|
||||
// src/screens/DashboardScreen.tsx
|
||||
import React from 'react';
|
||||
import { View, StyleSheet } from 'react-native';
|
||||
import { Text, useTheme } from 'react-native-paper';
|
||||
import React, { useState, useEffect } from 'react'; // Added useEffect
|
||||
import { View, StyleSheet, ScrollView } from 'react-native'; // Added ScrollView
|
||||
import { Text, TextInput, Button, useTheme, Card, List, Divider } from 'react-native-paper'; // Added Card, List, Divider
|
||||
import { useNavigation } from '@react-navigation/native';
|
||||
import { StackNavigationProp } from '@react-navigation/stack';
|
||||
import { format, addDays, startOfDay, isSameDay, parseISO, endOfDay } from 'date-fns'; // Added date-fns imports
|
||||
import { getCalendarEvents } from '../api/calendar';
|
||||
import { CalendarEvent } from '../types/calendar';
|
||||
|
||||
|
||||
// Placeholder for the TODO component
|
||||
const TodoComponent = () => (
|
||||
<View style={{ marginVertical: 10, padding: 10, borderWidth: 1, borderColor: 'grey' }}>
|
||||
<Text>TODO Component Placeholder</Text>
|
||||
</View>
|
||||
);
|
||||
|
||||
// --- Calendar Preview Component Implementation ---
|
||||
const CalendarPreview = () => {
|
||||
const theme = useTheme();
|
||||
const [eventsByDay, setEventsByDay] = useState<{ [key: string]: CalendarEvent[] }>({});
|
||||
const today = startOfDay(new Date());
|
||||
const days = [today, addDays(today, 1), addDays(today, 2)];
|
||||
|
||||
useEffect(() => {
|
||||
const fetchAndProcessEvents = async () => {
|
||||
try {
|
||||
// Fetch events for the entire 3-day range once
|
||||
const endDate = endOfDay(addDays(today, 2)); // Calculate end date to include the whole day
|
||||
const allEvents = await getCalendarEvents(today, endDate); // Fetch events until the end of the third day
|
||||
|
||||
// Process events: Group by day
|
||||
const groupedEvents: { [key: string]: CalendarEvent[] } = {};
|
||||
days.forEach(day => {
|
||||
const dayStr = format(day, 'yyyy-MM-dd');
|
||||
// Filter events for the current day and sort them
|
||||
groupedEvents[dayStr] = allEvents
|
||||
.filter(event => isSameDay(parseISO(event.start), day))
|
||||
.sort((a, b) => parseISO(a.start).getTime() - parseISO(b.start).getTime());
|
||||
});
|
||||
setEventsByDay(groupedEvents);
|
||||
} catch (error) {
|
||||
console.error("Failed to fetch calendar events:", error);
|
||||
// Optionally, set an error state here to display to the user
|
||||
}
|
||||
};
|
||||
fetchAndProcessEvents();
|
||||
}, []); // Run once on mount
|
||||
|
||||
const formatDateHeader = (date: Date): string => {
|
||||
if (isSameDay(date, today)) return `Today, ${format(date, 'MMMM d')}`;
|
||||
if (isSameDay(date, addDays(today, 1))) return `Tomorrow, ${format(date, 'MMMM d')}`;
|
||||
return format(date, 'EEEE, MMMM d');
|
||||
};
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
card: {
|
||||
marginVertical: 8,
|
||||
backgroundColor: theme.colors.background,
|
||||
},
|
||||
dayHeader: {
|
||||
fontSize: 16,
|
||||
fontWeight: 'bold',
|
||||
paddingLeft: 16,
|
||||
paddingTop: 12,
|
||||
paddingBottom: 8,
|
||||
color: theme.colors.primary,
|
||||
},
|
||||
listItem: {
|
||||
paddingVertical: 4, // Reduce padding slightly
|
||||
},
|
||||
eventTime: {
|
||||
fontSize: 14,
|
||||
color: theme.colors.onSurfaceVariant, // Ensure contrast
|
||||
},
|
||||
eventTitle: {
|
||||
fontSize: 15,
|
||||
color: theme.colors.onSurface,
|
||||
},
|
||||
noEventsText: {
|
||||
paddingLeft: 16,
|
||||
paddingBottom: 12,
|
||||
fontStyle: 'italic',
|
||||
color: theme.colors.onSurfaceDisabled,
|
||||
},
|
||||
divider: {
|
||||
marginHorizontal: 16,
|
||||
}
|
||||
});
|
||||
|
||||
return (
|
||||
<Card style={styles.card} elevation={1}>
|
||||
<Card.Content style={{ paddingHorizontal: 0, paddingVertical: 0 }}>
|
||||
{days.map((day, index) => {
|
||||
const dayStr = format(day, 'yyyy-MM-dd');
|
||||
const dailyEvents = eventsByDay[dayStr] || [];
|
||||
return (
|
||||
<View key={dayStr}>
|
||||
<Text style={styles.dayHeader}>{formatDateHeader(day)}</Text>
|
||||
{dailyEvents.length > 0 ? (
|
||||
dailyEvents.map((event, eventIndex) => (
|
||||
<React.Fragment key={event.id}>
|
||||
<List.Item
|
||||
title={event.title}
|
||||
titleStyle={styles.eventTitle}
|
||||
description={format(parseISO(event.start), 'p')} // Format time like '1:30 PM'
|
||||
descriptionStyle={styles.eventTime}
|
||||
style={styles.listItem}
|
||||
left={props => <List.Icon {...props} icon="circle-small" />} // Simple indicator
|
||||
/>
|
||||
{eventIndex < dailyEvents.length - 1 && <Divider style={styles.divider} />}
|
||||
</React.Fragment>
|
||||
))
|
||||
) : (
|
||||
<Text style={styles.noEventsText}>No events scheduled.</Text>
|
||||
)}
|
||||
{/* Add divider between days, except after the last day */}
|
||||
{index < days.length - 1 && <Divider style={{marginTop: 8}} />}
|
||||
</View>
|
||||
);
|
||||
})}
|
||||
</Card.Content>
|
||||
</Card>
|
||||
);
|
||||
};
|
||||
// --- End Calendar Preview Component ---
|
||||
|
||||
// Define the type for the navigation stack parameters
|
||||
// Ensure this matches the navigator's configuration
|
||||
type RootStackParamList = {
|
||||
Dashboard: undefined; // No params expected for Dashboard itself
|
||||
Chat: { initialQuestion?: string }; // Chat screen expects an optional initialQuestion
|
||||
// Add other screens in your stack here
|
||||
};
|
||||
|
||||
// Define the specific navigation prop type for DashboardScreen
|
||||
type DashboardScreenNavigationProp = StackNavigationProp<RootStackParamList, 'Dashboard'>;
|
||||
|
||||
const DashboardScreen = () => {
|
||||
const theme = useTheme();
|
||||
// Use the specific navigation prop type
|
||||
const navigation = useNavigation<DashboardScreenNavigationProp>();
|
||||
const [question, setQuestion] = useState('');
|
||||
|
||||
const handleQuestionSubmit = () => {
|
||||
const trimmedQuestion = question.trim();
|
||||
if (trimmedQuestion) {
|
||||
// Navigate to ChatScreen, passing the question as a param
|
||||
navigation.navigate('Chat', { initialQuestion: trimmedQuestion });
|
||||
// console.log('Navigating to ChatScreen with question:', question); // Keep for debugging if needed
|
||||
setQuestion(''); // Clear input after submission
|
||||
}
|
||||
};
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: { flex: 1, alignItems: 'center', justifyContent: 'center', padding: 16, backgroundColor: theme.colors.background },
|
||||
text: { fontSize: 20, color: theme.colors.text }
|
||||
container: {
|
||||
flex: 1,
|
||||
// alignItems: 'center', // Keep removed
|
||||
justifyContent: 'flex-start',
|
||||
padding: 16,
|
||||
backgroundColor: theme.colors.background
|
||||
},
|
||||
title: {
|
||||
fontSize: 24,
|
||||
fontWeight: 'bold',
|
||||
marginBottom: 20,
|
||||
color: theme.colors.primary, // Use theme color
|
||||
alignSelf: 'center' // Center the title
|
||||
},
|
||||
inputContainer: {
|
||||
marginBottom: 20,
|
||||
},
|
||||
textInput: {
|
||||
marginBottom: 10,
|
||||
},
|
||||
scrollViewContent: {
|
||||
paddingBottom: 20, // Add padding at the bottom of the scroll view
|
||||
}
|
||||
});
|
||||
|
||||
return (
|
||||
<View style={styles.container}>
|
||||
<Text style={styles.text}>Dashboard</Text>
|
||||
</View>
|
||||
// Wrap content in ScrollView to handle potential overflow
|
||||
<ScrollView style={{ flex: 1, backgroundColor: theme.colors.background }} contentContainerStyle={styles.scrollViewContent}>
|
||||
<View style={styles.container}>
|
||||
<Text style={styles.title}>Dashboard</Text>
|
||||
|
||||
{/* AI Question Input */}
|
||||
<View style={styles.inputContainer}>
|
||||
<TextInput
|
||||
label="Ask MAIA anything..."
|
||||
value={question}
|
||||
onChangeText={setQuestion}
|
||||
mode="outlined" // Use outlined style for better visibility
|
||||
style={styles.textInput}
|
||||
onSubmitEditing={handleQuestionSubmit} // Allow submission via keyboard
|
||||
/>
|
||||
<Button mode="contained" onPress={handleQuestionSubmit}>
|
||||
Ask
|
||||
</Button>
|
||||
</View>
|
||||
|
||||
{/* Calendar Preview */}
|
||||
<CalendarPreview />
|
||||
|
||||
{/* TODO Component */}
|
||||
<TodoComponent />
|
||||
</View>
|
||||
</ScrollView>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
Reference in New Issue
Block a user