Replaces TextField for theme and title with a react-select dropdown of options from dictionary.com, formatted to only allow capitalized, singularized words

Author: khalidh223

components/canvas/QuestionMasterDialog.tsx

@@ -7,11 +7,11 @@ import {
   Button,
   Dialog,
   DialogContent,
-  TextField,
   Typography,
 } from "@mui/material"
 import React, { useEffect, useState } from "react"
-import { sendWebSocketMessage } from "./utils"
+import { OptionType, sendWebSocketMessage } from "./utils"
+import WordSearchSelect from "./WordSearchSelect"
 
 const QuestionMasterDialog = ({
   gameCode,
@@ -22,6 +22,12 @@ const QuestionMasterDialog = ({
 }) => {
   const [theme, setTheme] = useState("")
   const [title, setTitle] = useState("")
+  const [selectedTheme, setSelectedTheme] = useState<OptionType | undefined>(
+    undefined
+  )
+  const [selectedTitle, setSelectedTitle] = useState<OptionType | undefined>(
+    undefined
+  )
   const [isOpen, setIsOpen] = useState(true)
   const [isBackDropOpen, setIsBackDropOpen] = useState(false)
 
@@ -83,30 +89,26 @@ const QuestionMasterDialog = ({
     }
   }
 
-  const capitalizeAndOneWord = (input: string) => {
-    const words = input.split(/\s+/) // Split by any whitespace
-    if (words.length > 0) {
-      const firstWord = words[0]
-      return (
-        firstWord.charAt(0).toUpperCase() + firstWord.slice(1).toLowerCase()
-      )
-    }
-    return ""
-  }
-
-  const handleThemeChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    setTheme(capitalizeAndOneWord(e.target.value))
+  const handleThemeSelectChange = (option: OptionType | null) => {
+    setSelectedTheme(option ?? undefined)
+    setTheme(option ? option.value : "")
   }
 
-  const handleTitleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    setTitle(capitalizeAndOneWord(e.target.value))
+  const handleTitleSelectChange = (option: OptionType | null) => {
+    setSelectedTitle(option ?? undefined)
+    setTitle(option ? option.value : "")
   }
 
   return (
     <>
-      <Dialog open={isOpen}>
+      <Dialog open={isOpen} PaperProps={{ style: { overflowY: "visible" } }}>
         <DialogContent
-          sx={{ textAlign: "center", minWidth: "400px", paddingBottom: 1 }}
+          sx={{
+            textAlign: "center",
+            minWidth: "400px",
+            paddingBottom: 1,
+            overflowY: "visible",
+          }}
         >
           <Typography variant="h6" fontWeight="bold">
             You are the Question Master!
@@ -124,24 +126,20 @@ const QuestionMasterDialog = ({
               <Box marginLeft={"-1em"} marginBottom={"0.2em"}>
                 <Typography variant="body2">① What is your theme?</Typography>
               </Box>
-              <TextField
-                fullWidth
-                variant="standard"
-                placeholder="Animals"
-                value={theme}
-                onChange={handleThemeChange}
+              <WordSearchSelect
+                placeholder="Animal"
+                onChange={handleThemeSelectChange}
+                value={selectedTheme}
               />
             </Box>
             <Box width="45%">
               <Box marginLeft={"-2em"} marginBottom={"0.2em"}>
                 <Typography variant="body2">② What is your title?</Typography>
               </Box>
-              <TextField
-                fullWidth
-                variant="standard"
+              <WordSearchSelect
                 placeholder="Lion"
-                value={title}
-                onChange={handleTitleChange}
+                onChange={handleTitleSelectChange}
+                value={selectedTitle}
               />
             </Box>
           </Box>

components/canvas/WordSearchSelect.tsx

@@ -0,0 +1,49 @@
+import React from "react"
+import AsyncSelect from "react-select/async"
+import { debounce } from "lodash"
+import { OptionType } from "./utils"
+
+interface WordSearchSelectProps {
+  placeholder?: string
+  onChange: (selectedOption: any) => void
+  value: OptionType | undefined
+}
+
+const WordSearchSelect: React.FC<WordSearchSelectProps> = ({
+  placeholder,
+  onChange,
+  value,
+}) => {
+  const loadOptions = (
+    inputValue: string,
+    callback: (options: OptionType[]) => void
+  ) => {
+    fetch(`/api/words/search?text=${inputValue}`)
+      .then((response) => response.json())
+      .then((data) => {
+        const options = data.map((word: string) => ({
+          label: word,
+          value: word,
+        }))
+        callback(options)
+      })
+  }
+
+  const debouncedLoadOptions = debounce(loadOptions, 500)
+
+  const customStyles = {
+    menu: (provided: any) => ({ ...provided, zIndex: 9999 }),
+  }
+
+  return (
+    <AsyncSelect<OptionType>
+      loadOptions={debouncedLoadOptions}
+      onChange={onChange}
+      value={value}
+      placeholder={placeholder}
+      styles={customStyles}
+    />
+  )
+}
+
+export default WordSearchSelect

components/canvas/YouWereCaughtDialog.tsx

@@ -1,14 +1,9 @@
 "use client"
 
-import {
-  Box,
-  Button,
-  DialogContent,
-  TextField,
-  Typography,
-} from "@mui/material"
+import { Box, Button, DialogContent, Typography } from "@mui/material"
 import React, { useState } from "react"
-import { sendWebSocketMessage } from "./utils"
+import { OptionType, sendWebSocketMessage } from "./utils"
+import WordSearchSelect from "./WordSearchSelect"
 
 const YouWereCaughtDialog = ({
   canvasWebSocket,
@@ -18,20 +13,13 @@ const YouWereCaughtDialog = ({
   gameCode: string
 }) => {
   const [title, setTitle] = useState("")
+  const [selectedTitle, setSelectedTitle] = useState<OptionType | undefined>(
+    undefined
+  )
 
-  const capitalizeAndOneWord = (input: string) => {
-    const words = input.split(/\s+/) // Split by any whitespace
-    if (words.length > 0) {
-      const firstWord = words[0]
-      return (
-        firstWord.charAt(0).toUpperCase() + firstWord.slice(1).toLowerCase()
-      )
-    }
-    return ""
-  }
-
-  const handleTitleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    setTitle(capitalizeAndOneWord(e.target.value))
+  const handleTitleSelectChange = (option: OptionType | null) => {
+    setSelectedTitle(option ?? undefined)
+    setTitle(option ? option.value : "")
   }
 
   const handleSubmitTitle = () => {
@@ -50,8 +38,9 @@ const YouWereCaughtDialog = ({
       paddingRight={4}
       width={"40em"}
       height={"24em"}
+      sx={{ overflowY: "visible" }}
     >
-      <DialogContent>
+      <DialogContent sx={{ overflowY: "visible" }}>
         <Box
           display="flex"
           flexDirection="column"
@@ -71,12 +60,11 @@ const YouWereCaughtDialog = ({
           </Box>
           <Box display={"flex"} flexDirection={"row"} gap={2}>
             <Typography variant="body1">What is the title?</Typography>
-            <Box marginTop={"-3px"}>
-              <TextField
-                variant="standard"
+            <Box marginTop={"-8px"} width={"15em"}>
+              <WordSearchSelect
                 placeholder="Title"
-                value={title}
-                onChange={handleTitleChange}
+                onChange={handleTitleSelectChange}
+                value={selectedTitle}
               />
             </Box>
           </Box>

components/canvas/utils.ts

@@ -14,3 +14,8 @@ export const sendWebSocketMessage = (socket: WebSocket | null, data: object) =>
     }
   }
 }
+
+export interface OptionType {
+  label: string
+  value: string
+}