feat: Enhance result analysis and error display

frontend/src/App.tsx

@@ -2,7 +2,6 @@ import React from 'react';
 import { ThemeProvider, CssBaseline } from '@mui/material';
 import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
 import theme from './theme';
-import StartPage from './pages/StartPage';
 import CreateSession from './pages/CreateSession';
 
 import SessionPage from './pages/SessionPage';
@@ -13,8 +12,7 @@ function App() {
       <CssBaseline />
       <Router>
         <Routes>
-          <Route path="/" element={<StartPage />} />
-          <Route path="/create" element={<CreateSession />} />
+          <Route path="/" element={<CreateSession />} />
           {/* Other routes will be added here */}
           <Route path="/session/:sessionId" element={<SessionPage />} />
         </Routes>

frontend/src/components/ResultsDisplay.tsx

@@ -8,11 +8,11 @@ interface ResultsDisplayProps {
     decision: Decision;
 }
 
-const CategorySection: React.FC<{ title: string; desires: string[]; defaultExpanded?: boolean }>
-    = ({ title, desires, defaultExpanded = true }) => {
+const CategorySection: React.FC<{ title: string; desire: string; defaultExpanded?: boolean }>
+    = ({ title, desire, defaultExpanded = true }) => {
         const [expanded, setExpanded] = React.useState(defaultExpanded);
 
-        if (!desires || desires.length === 0) {
+        if (!desire) {
             return null;
         }
 
@@ -27,13 +27,9 @@ const CategorySection: React.FC<{ title: string; desires: string[]; defaultExpan
                     </IconButton>
                 </Box>
                 <Collapse in={expanded} timeout="auto" unmountOnExit>
-                    <List dense>
-                        {desires.map((desire, index) => (
-                            <ListItem key={index}>
-                                <ListItemText primary={desire} />
-                            </ListItem>
-                        ))}
-                    </List>
+                    <Typography variant="body1" sx={{ mt: 1 }}>
+                        {desire}
+                    </Typography>
                 </Collapse>
             </Box>
         );
@@ -50,11 +46,11 @@ const ResultsDisplay: React.FC<ResultsDisplayProps> = ({ decision }) => {
                 Cooperative Decision
             </Typography>
 
-            <CategorySection title="Go-to" desires={decision.goTo} />
-            <CategorySection title="Also good" desires={decision.alsoGood} />
-            <CategorySection title="Considerable" desires={decision.considerable} defaultExpanded={false} />
-            <CategorySection title="No-goes" desires={decision.noGoes} />
-            <CategorySection title="Needs discussion" desires={decision.needsDiscussion} />
+            <CategorySection title="Go-to" desire={decision.goTo} />
+            <CategorySection title="Also good" desire={decision.alsoGood} />
+            <CategorySection title="Considerable" desire={decision.considerable} defaultExpanded={false} />
+            <CategorySection title="No-goes" desire={decision.noGoes} />
+            <CategorySection title="Needs discussion" desire={decision.needsDiscussion} />
         </Box>
     );
 };

frontend/src/hooks/useSession.ts

@@ -18,11 +18,11 @@ export interface DesireSet {
 }
 
 export interface Decision {
-    goTo: string[];
-    alsoGood: string[];
-    considerable: string[];
-    noGoes: string[];
-    needsDiscussion: string[];
+    goTo: string;
+    alsoGood: string;
+    considerable: string;
+    noGoes: string;
+    needsDiscussion: string;
 }
 
 // Define the SessionState enum (mirroring backend)
@@ -54,8 +54,9 @@ const getOrCreateClientId = (): string => {
     return clientId;
 };
 
-export const useSession = (sessionId: string): [Session | null, Dispatch<SetStateAction<Session | null>>, (message: any) => void, string] => {
+export const useSession = (sessionId: string): [Session | null, Dispatch<SetStateAction<Session | null>>, (message: any) => void, string, string | null] => {
     const clientId = getOrCreateClientId(); // Get or create clientId
+    const [error, setError] = useState<string | null>(null);
 
     const getInitialState = useCallback((): Session | null => {
         try {
@@ -78,9 +79,10 @@ export const useSession = (sessionId: string): [Session | null, Dispatch<SetStat
             console.log('useSession: Processing incoming message:', message);
             if (message.type === 'STATE_UPDATE') {
                 setSession(message.payload.session);
+                setError(null); // Clear error on successful state update
             } else if (message.type === 'ERROR') {
                 console.error('WebSocket Error:', message.payload.message);
-                // Optionally, handle error display to the user
+                setError(message.payload.message);
             }
             // Add other message types as needed
         };
@@ -108,5 +110,6 @@ export const useSession = (sessionId: string): [Session | null, Dispatch<SetStat
         webSocketService.sendMessage(message);
     }, []);
 
-    return [session, setSession, sendMessage, clientId];
+    return [session, setSession, sendMessage, clientId, error];
 };
+

frontend/src/pages/SessionPage.tsx

@@ -8,8 +8,7 @@ import ResultsDisplay from '../components/ResultsDisplay';
 
 const SessionPage = () => {
     const { sessionId } = useParams<{ sessionId: string }>();
-    const [session, setSession, sendMessage, clientId] = useSession(sessionId || '');
-    const [error, setError] = useState<string | null>(null);
+    const [session, setSession, sendMessage, clientId, wsError] = useSession(sessionId || '');
     const [expectedResponses, setExpectedResponses] = useState(2);
     const [topic, setTopic] = useState('');
 
@@ -43,7 +42,7 @@ const SessionPage = () => {
     return (
         <Container maxWidth="md">
             <Box sx={{ mt: 4 }}>
-                {error && <Alert severity="error" sx={{ mb: 2 }}>{error}</Alert>}
+                {wsError && <Alert severity="error" sx={{ mb: 2 }}>{wsError}</Alert>}
 
                 <Typography variant="h4" component="h1" gutterBottom>
                     Session: {session.topic || session.sessionId}

frontend/src/pages/StartPage.tsx

@@ -1,42 +0,0 @@
-import React from 'react';
-import { Box, Typography, Container, Button } from '@mui/material';
-import { useNavigate } from 'react-router-dom';
-
-const StartPage = () => {
-    const navigate = useNavigate();
-
-    const handleCreateClick = () => {
-        navigate('/create');
-    };
-
-    return (
-        <Container maxWidth="sm">
-            <Box
-                sx={{
-                    marginTop: 8,
-                    display: 'flex',
-                    flexDirection: 'column',
-                    alignItems: 'center',
-                    textAlign: 'center'
-                }}
-            >
-                <Typography component="h1" variant="h4" gutterBottom>
-                    Welcome to Agree on Desires
-                </Typography>
-                <Typography variant="h6" color="text.secondary" paragraph>
-                    A simple tool to help groups of people make decisions together.
-                </Typography>
-                <Button
-                    variant="contained"
-                    size="large"
-                    sx={{ mt: 4 }}
-                    onClick={handleCreateClick}
-                >
-                    Create a New Session
-                </Button>
-            </Box>
-        </Container>
-    );
-};
-
-export default StartPage;