diff --git a/client/src/components/UserSelection.css b/client/src/components/UserSelection.css new file mode 100644 index 0000000..6743d3d --- /dev/null +++ b/client/src/components/UserSelection.css @@ -0,0 +1,61 @@ +.user-selection-container { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + display: flex; + justify-content: center; + align-items: center; + background-color: rgba(0, 0, 0, 0.5); + z-index: 1000; +} + +.user-selection-card { + background-color: white; + padding: 2rem; + border-radius: 8px; + box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); + width: 90%; + max-width: 400px; +} + +.user-selection-card h2 { + margin: 0 0 1.5rem 0; + text-align: center; + color: #333; +} + +.user-list { + display: flex; + flex-direction: column; + gap: 1rem; +} + +.user-button { + padding: 1rem; + border: none; + border-radius: 4px; + background-color: #007bff; + color: white; + font-size: 1rem; + cursor: pointer; + transition: background-color 0.2s; +} + +.user-button:hover { + background-color: #0056b3; +} + +/* Mobile styles */ +@media (max-width: 480px) { + .user-selection-card { + padding: 1.5rem; + width: 95%; + } + + .user-button { + padding: 0.875rem; + font-size: 0.9rem; + } +} \ No newline at end of file diff --git a/client/src/components/UserSelection.tsx b/client/src/components/UserSelection.tsx new file mode 100644 index 0000000..a527de2 --- /dev/null +++ b/client/src/components/UserSelection.tsx @@ -0,0 +1,35 @@ +import React from 'react'; +import './UserSelection.css'; + +interface User { + id: number; + name: string; +} + +interface UserSelectionProps { + users: User[]; + onSelectUser: (user: User) => void; +} + +export const UserSelection: React.FC = ({ users, onSelectUser }) => { + console.log('UserSelection render:', { users }); + + return ( +
+
+

Select Your User

+
+ {users.map((user) => ( + + ))} +
+
+
+ ); +}; \ No newline at end of file diff --git a/client/src/graphql/client.ts b/client/src/graphql/client.ts index 058daba..034bb7f 100644 --- a/client/src/graphql/client.ts +++ b/client/src/graphql/client.ts @@ -5,14 +5,21 @@ const httpLink = createHttpLink({ uri: 'http://localhost:4000/graphql', }); -const errorLink = onError(({ graphQLErrors, networkError }) => { - if (graphQLErrors) +const errorLink = onError(({ graphQLErrors, networkError, operation }) => { + if (graphQLErrors) { + console.error('GraphQL Errors:', graphQLErrors); graphQLErrors.forEach(({ message, locations, path }) => console.error( `[GraphQL error]: Message: ${message}, Location: ${locations}, Path: ${path}` ) ); - if (networkError) console.error(`[Network error]: ${networkError}`); + } + + if (networkError) { + console.error('Network Error:', networkError); + console.error(`[Network error]: ${networkError}`); + console.error('Operation:', operation); + } }); export const client = new ApolloClient({ @@ -23,11 +30,25 @@ export const client = new ApolloClient({ fields: { groups: { merge(_, incoming) { + console.log('Merging groups:', incoming); return incoming; }, }, tasks: { merge(_, incoming) { + console.log('Merging tasks:', incoming); + return incoming; + }, + }, + recentTasks: { + merge(_, incoming) { + console.log('Merging recent tasks:', incoming); + return incoming; + }, + }, + frequentTasks: { + merge(_, incoming) { + console.log('Merging frequent tasks:', incoming); return incoming; }, }, @@ -35,4 +56,14 @@ export const client = new ApolloClient({ }, }, }), + defaultOptions: { + watchQuery: { + fetchPolicy: 'network-only', + errorPolicy: 'all', + }, + query: { + fetchPolicy: 'network-only', + errorPolicy: 'all', + }, + }, }); \ No newline at end of file diff --git a/client/src/graphql/queries.ts b/client/src/graphql/queries.ts index d0644d9..5467f13 100644 --- a/client/src/graphql/queries.ts +++ b/client/src/graphql/queries.ts @@ -17,6 +17,15 @@ export const GET_GROUPS = gql` order print_count last_printed_at + notes { + id + content + created_at + user { + id + name + } + } } } } diff --git a/client/src/hooks/useTaskData.ts b/client/src/hooks/useTaskData.ts index 9ee1deb..3635cc8 100644 --- a/client/src/hooks/useTaskData.ts +++ b/client/src/hooks/useTaskData.ts @@ -123,6 +123,21 @@ export function useTaskData() { const { data: recentTasksData, loading: recentTasksLoading } = useQuery(GET_RECENT_TASKS); const { data: frequentTasksData, loading: frequentTasksLoading } = useQuery(GET_FREQUENT_TASKS); + console.log('useTaskData state:', { + groupsData, + tasksData, + stepData, + recentTasksData, + frequentTasksData, + loading: { + groups: groupsLoading, + tasks: tasksLoading, + step: stepLoading, + recent: recentTasksLoading, + frequent: frequentTasksLoading + } + }); + const [printTask] = useMutation(PRINT_TASK); const [printStep] = useMutation(PRINT_STEP); const [createNote] = useMutation(CREATE_NOTE); @@ -252,28 +267,29 @@ export function useTaskData() { }, ]; - // Combine virtual groups with regular groups const allGroups = [...virtualGroups, ...groups]; - const tasks = isArray(tasksData?.tasks) - ? tasksData.tasks.map((task: GraphQLTask) => toTaskWithSteps(task)).filter(doesExist) - : []; + console.log('useTaskData processed data:', { + groups, + recentTasks, + frequentTasks, + allGroups + }); - const step = stepData?.step ? toStepWithNotes(stepData.step) : undefined; + const loading = groupsLoading || tasksLoading || stepLoading || recentTasksLoading || frequentTasksLoading; return { groups: allGroups, - tasks, - step, - loading: groupsLoading || tasksLoading || stepLoading || recentTasksLoading || frequentTasksLoading, + step: stepData?.step ? toStepWithNotes(stepData.step) : null, + loading, selectedGroup, selectedTask, selectedStep, setSelectedGroup, setSelectedTask, setSelectedStep, - handlePrintTask, handlePrintStep, + handlePrintTask, handleAddNote, handleCreateGroup, handleCreateTask, diff --git a/client/src/hooks/useUserSelection.ts b/client/src/hooks/useUserSelection.ts new file mode 100644 index 0000000..652fe02 --- /dev/null +++ b/client/src/hooks/useUserSelection.ts @@ -0,0 +1,45 @@ +import { useState, useCallback, useEffect } from 'react'; + +interface User { + id: number; + name: string; +} + +const DEFAULT_USER: User = { + id: 1, + name: 'Test User' +}; + +export const useUserSelection = () => { + const [selectedUser, setSelectedUser] = useState(() => { + // Try to load from localStorage first + const storedUser = localStorage.getItem('selectedUser'); + if (storedUser) { + try { + return JSON.parse(storedUser); + } catch (e) { + console.error('Error parsing stored user:', e); + } + } + // Start with no user selected + return null; + }); + + useEffect(() => { + console.log('useUserSelection: selectedUser changed:', selectedUser); + }, [selectedUser]); + + const users = [DEFAULT_USER]; + + const selectUser = useCallback((user: User) => { + console.log('Selecting user:', user); + setSelectedUser(user); + localStorage.setItem('selectedUser', JSON.stringify(user)); + }, []); + + return { + selectedUser, + users, + selectUser + }; +}; \ No newline at end of file diff --git a/client/src/layouts/DesktopLayout.tsx b/client/src/layouts/DesktopLayout.tsx index 61e1f0b..fbcb4de 100644 --- a/client/src/layouts/DesktopLayout.tsx +++ b/client/src/layouts/DesktopLayout.tsx @@ -28,6 +28,13 @@ export function DesktopLayout({ onPrintStep, onAddNote, }: DesktopLayoutProps) { + console.log('DesktopLayout render:', { + groups, + selectedGroup, + selectedTask, + selectedStep + }); + return ( {/* Groups panel */}