Merge pull request #34 from microsoft/won

Error handling on start & invalid page entry handling

Client/src/components/Form/Dropdown/Dropdown.tsx

@@ -33,12 +33,12 @@ export function Dropdown(props: DropdownProps): React.ReactElement {
         className="dropdown-root"
         onChange={handleDropdownChanged}
         name={props.name}
+        value={props.value}
       >
         {props.options.map((option) => (
           <option
             key={option.value}
             value={option.value}
-            selected={option.value === props.value}
           >
             {option.label}
           </option>

Client/src/components/Form/ErrorAlert/ErrorAlert.scss

@@ -0,0 +1,15 @@
+@import "../../../variables.scss";
+
+.error-alert-root {
+    background-color: $error-color;
+    color: white;
+    padding: 10px;
+    border-radius: 5px;
+    margin-top: 20px;
+    margin-bottom: 20px;
+    text-align: center;
+}
+
+.error-alert-bold {
+    font-weight: 500;
+}

Client/src/components/Form/ErrorAlert/ErrorAlert.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import "./ErrorAlert.scss";
+
+export type ErrorAlertProps = {
+    message?: string | null;
+}
+
+export function ErrorAlert(props: ErrorAlertProps): React.ReactElement | null {
+    const ref = React.useRef<HTMLDivElement>(null);
+
+    React.useEffect(() => {
+        ref.current?.focus();
+    }, [props.message])
+
+    if (!props.message) {
+        return null;
+    }
+
+    return <div className="error-alert-root focusable" tabIndex={-1} ref={ref}>
+        <span className="error-alert-bold">Error! </span>
+        {props.message}</div>
+}

Client/src/components/Form/ErrorAlert/index.ts

@@ -0,0 +1 @@
+export * from './ErrorAlert';

Client/src/hooks/useCareerGame.ts

@@ -19,14 +19,17 @@ export function useCareerGame() {
       );
 
       if (response.ok && response.data) {
+        if (response.data.round?.options?.length === 0)
+          throw new Error("InvalidCareerChoice");
+
         setGameId(response.data.conversationId)
         addRound({
           ...response.data.round,
           optionSelected: null,
         });
       }
     } catch (error: any) {
-      console.log(error)
+      throw new Error("FailedToStartGame")
     } finally {
       setLoading(false);
     }

Client/src/index.scss

@@ -36,6 +36,7 @@ button,
 input,
 select,
 textarea,
+.focusable,
 #main {
   &:focus {
     outline: 2px dashed $background-dark;

Client/src/screens/GameScreen/GameScreen.tsx

@@ -26,11 +26,17 @@ export function GameScreen(): React.ReactElement {
   } = React.useContext<IAppContext>(AppContext);
   const round = rounds[selectedRound];
 
+  React.useEffect(() => {
+    if (!isLoading && !gameId) {
+      navigate("/");
+    }
+  }, [gameId, navigate, isLoading]);
+
   const handlePreviousRoundButtonClicked = () => {
     selectRound(selectedRound - 1);
   };
 
-  const handleNextRoundbuttonClicked = () => {
+  const handleNextRoundButtonClicked = () => {
     selectRound(selectedRound + 1);
   };
 
@@ -86,7 +92,7 @@ export function GameScreen(): React.ReactElement {
 
         {isRoundCompleted && (
           <DefaultButton
-            onClick={handleNextRoundbuttonClicked}
+            onClick={handleNextRoundButtonClicked}
             title="Go to next round"
             label="Next round"
           />

Client/src/screens/StartScreen/StartScreen.tsx

@@ -1,4 +1,5 @@
 import React from "react";
+import { ErrorAlert } from "../../components/Form/ErrorAlert";
 import { useCareerGame } from "../../hooks/useCareerGame";
 import { IAppContext } from "../../models/IAppContext";
 import { AppContext } from "../../context/AppContext";
@@ -18,10 +19,15 @@ export function StartScreen(): React.ReactElement {
     React.useContext<IAppContext>(AppContext);
   const [title, setTitle] = React.useState<string>("");
   const navigate = useNavigate();
+  const [error, setError] = React.useState<string | null>(null);
 
   const handleStartButtonClicked = async (): Promise<void> => {
-    await startGame(title);
-    navigate(`/career-game`);
+    try {
+      await startGame(title);
+      navigate(`/career-game`);
+    } catch {
+      setError("Please try again with a valid career choice.");
+    }
   };
 
   React.useEffect(() => {
@@ -38,6 +44,8 @@ export function StartScreen(): React.ReactElement {
       <H1>Welcome!</H1>
       <H1>What career would you like to explore?</H1>
 
+      <ErrorAlert message={error} />
+
       <TextField
         label="Career"
         name="title"

Client/src/variables.scss

@@ -1,6 +1,7 @@
 // Primary colors
 $primary-color: #1F76A7;
 $default-color: white;
+$error-color: #d32f2f;
 
 // Light theme colors
 $background-light: white;