fix client user selection

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;
+  }
+}

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<UserSelectionProps> = ({ users, onSelectUser }) => {
+  console.log('UserSelection render:', { users });
+
+  return (
+    <div className="user-selection-container">
+      <div className="user-selection-card">
+        <h2>Select Your User</h2>
+        <div className="user-list">
+          {users.map((user) => (
+            <button
+              key={user.id}
+              className="user-button"
+              onClick={() => onSelectUser(user)}
+            >
+              {user.name}
+            </button>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+};

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',
+    },
+  },
 });

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
+            }
+          }
         }
       }
     }

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,

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<User | null>(() => {
+    // 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
+  };
+};

client/src/layouts/DesktopLayout.tsx

@@ -28,6 +28,13 @@ export function DesktopLayout({
   onPrintStep,
   onAddNote,
 }: DesktopLayoutProps) {
+  console.log('DesktopLayout render:', {
+    groups,
+    selectedGroup,
+    selectedTask,
+    selectedStep
+  });
+
   return (
     <Box sx={{ display: 'flex', height: '100vh' }}>
       {/* Groups panel */}