Added autocomplete for programs on Generate form (#1605)

Author: matt-dahlgren

CHANGELOG.md

@@ -11,6 +11,7 @@
 - Updated the export button on the graph and grid pages to Awesome Icons; also added highlight effect and tooltip popup on hover
 - Added an autocomplete feature to the search bar `js/components/generate/GenerateForm`, also rewrote tests related to this feature
 - Added a route to access all POST codes stored in the database with test coverage
+- Added the `js/components/generate/AutocompleteDropdown.js` component to the program field of Generate
 
 ### 🐛 Bug fixes
 

app/Controllers/Program.hs

@@ -2,7 +2,8 @@ module Controllers.Program(index, retrieveProgram) where
 
 import Config (runDb)
 import Control.Monad.IO.Class (liftIO)
-import qualified Data.Text as T (Text, unlines)
+import qualified Data.Set as S
+import qualified Data.Text as T (Text, null, strip, unlines)
 import Database.Persist (Entity)
 import Database.Persist.Sqlite (SqlPersistM, entityVal, selectList)
 import Database.Tables as Tables (Post, postCode, postModified)
@@ -17,7 +18,9 @@ index = do
     response <- liftIO $ runDb $ do
         programsList :: [Entity Post] <- selectList [] []
         let codes = map (postCode . entityVal) programsList
-        return $ T.unlines codes :: SqlPersistM T.Text
+            rmEmpty = filter (not . T.null . T.strip) codes
+            rmDups = S.toList (S.fromList rmEmpty)
+        return $ T.unlines rmDups :: SqlPersistM T.Text
     return $ toResponse response
 
 -- | Takes a http request with a program code and sends a JSON response containing the program data

backend-test/Controllers/ProgramControllerTests.hs

@@ -22,7 +22,7 @@ indexTestCases =
     [ ("Empty database", [], "")
     , ("One program", ["ASMAJ1689"], "ASMAJ1689\n")
     , ("Multiple programs", ["ASMAJ1689", "ASSPE1376", "ASMAJ0506", "ASMIN1165", "ASMIN2289"],
-       "ASMAJ1689\nASSPE1376\nASMAJ0506\nASMIN1165\nASMIN2289\n")
+       "ASMAJ0506\nASMAJ1689\nASMIN1165\nASMIN2289\nASSPE1376\n")
     ]
 
 -- | Run a test case (case, input, expected output) on the index function.

js/components/generate/AutocompleteDropdown.js

@@ -16,12 +16,21 @@ export default function AutocompleteDropdown({
   const [optionList, setOptionList] = useState([])
 
   useEffect(() => {
-    fetch("/courses")
-      .then(response => response.text())
-      .then(data => {
-        const courses = data.split("\n").map(course => course.substring(0, 8))
-        setOptionList(courses)
-      })
+    if (id == "courses") {
+      fetch("/courses")
+        .then(response => response.text())
+        .then(data => {
+          const courses = data.split("\n").map(course => course.substring(0, 8))
+          setOptionList(courses)
+        })
+    } else if (id == "programs") {
+      fetch("/programs")
+        .then(response => response.text())
+        .then(data => {
+          const programs = data.split("\n")
+          setOptionList(programs)
+        })
+    }
   }, [])
 
   return (

js/components/generate/GenerateForm.js

@@ -14,6 +14,7 @@ export default class GenerateForm extends React.Component {
     this.state = {
       fceCount: 0,
       selectedCourses: [],
+      selectedPrograms: [],
     }
 
     this.graph = React.createRef()
@@ -31,6 +32,10 @@ export default class GenerateForm extends React.Component {
     this.setState({ selectedCourses: newCourse })
   }
 
+  handleProgramsChange = newProgram => {
+    this.setState({ selectedPrograms: newProgram })
+  }
+
   handleSubmit = (values, { setErrors }) => {
     const data = {}
 
@@ -399,7 +404,7 @@ export default class GenerateForm extends React.Component {
                             component="div"
                           />
                         </div>
-                        <h1 className="chosen-courses">
+                        <h1 className="dropdown-chosen">
                           Selected Courses: {this.state.selectedCourses.join(", ")}
                         </h1>
                       </>
@@ -420,11 +425,13 @@ export default class GenerateForm extends React.Component {
                           ></a>
                           <Tooltip id="programs-tooltip" place="right" />
                         </div>
-                        <Field
+                        <AutocompleteDropdown
                           id="programs"
+                          aria-label="programs"
                           name="programs"
-                          type="text"
                           placeholder="e.g., ASMAJ1689, ASFOC1689B"
+                          onSelectedChange={this.handleProgramsChange}
+                          className="autocomplete"
                         />
                         <div className="error-container">
                           <ErrorMessage
@@ -433,6 +440,9 @@ export default class GenerateForm extends React.Component {
                             component="div"
                           />
                         </div>
+                        <h1 className="dropdown-chosen">
+                          Selected Programs: {this.state.selectedPrograms.join(", ")}
+                        </h1>
                       </>
                     )}
                   </div>

js/components/generate/__tests__/generate.test.js

@@ -244,66 +244,70 @@ describe("Handle invalid department inputs appropriately", () => {
   })
 })
 
-describe("Handle invalid program inputs appropriately", () => {
+describe("Handle an incorrect program input appropriately", () => {
   beforeEach(() => {
+    cleanup()
+    fetchMock.restore()
+    fetchMock.get("/programs", "")
+    fetchMock.get("/courses", "")
     render(<GenerateForm />)
   })
-  it.each([
-    {
-      programInputText: "ASMAJ1234, asdasdasd, ABCDE1234",
-      expectedWarning: "Invalid program code: asdasdasd",
-    },
-    {
-      programInputText: "ASMIN1689 ASFOC1689F",
-      expectedWarning: "Invalid program code: ASMIN1689 ASFOC1689F",
-    },
-    {
-      programInputText: "",
-      expectedWarning: "Cannot generate graph – no programs entered!",
-    },
-    {
-      programInputText: "   ",
-      expectedWarning: "Cannot generate graph – no programs entered!",
-    },
-  ])(".$programInputText", async ({ programInputText, expectedWarning }) => {
+
+  it("Entering no text should return an error", async () => {
     const user = userEvent.setup()
+    const categorySelect = screen.getByDisplayValue("Courses")
+    await user.selectOptions(categorySelect, "programs")
+    const genButton = screen.getByText("Generate")
+    await user.click(genButton)
+    const errorMessage = await screen.findByText(
+      "Cannot generate graph – no programs entered!"
+    )
+    expect(errorMessage).not.toBeNull()
+  })
 
+  it("Entering blank text should return an error", async () => {
+    const user = userEvent.setup()
     const categorySelect = screen.getByDisplayValue("Courses")
     await user.selectOptions(categorySelect, "programs")
+    const coursesInputField = screen.getByRole("combobox", { name: "programs" })
+    await user.click(coursesInputField)
+    await user.tripleClick(coursesInputField)
 
-    const programsInputField = screen.getByPlaceholderText(
-      "e.g., ASMAJ1689, ASFOC1689B"
-    )
-    await user.click(programsInputField)
-    await user.tripleClick(programsInputField)
-    if (programInputText === "") {
-      programInputText = "{Backspace}"
-    }
-    await user.keyboard(programInputText)
+    await user.keyboard("  ")
+
+    expect(
+      screen.queryByText("Cannot generate graph – no programs entered!")
+    ).toBeNull()
 
-    expect(screen.queryByText(expectedWarning)).toBeNull()
     const genButton = screen.getByText("Generate")
     await user.click(genButton)
-
-    const errorMessage = await screen.findByText(expectedWarning)
+    const errorMessage = await screen.findByText(
+      "Cannot generate graph – no programs entered!"
+    )
     expect(errorMessage).not.toBeNull()
   })
 })
 
 it("No warning for valid program input strings", async () => {
-  const user = userEvent.setup()
+  cleanup()
+  fetchMock.restore()
+  fetchMock.get("/courses", "")
+  fetchMock.get("/programs", "ASFOC1689D\n")
   render(<GenerateForm />)
 
+  const user = userEvent.setup()
   const categorySelect = screen.getByDisplayValue("Courses")
   await user.selectOptions(categorySelect, "programs")
 
   const programInputText = "ASFOC1689D"
-  const programsInputField = screen.getByPlaceholderText("e.g., ASMAJ1689, ASFOC1689B")
+  const programsInputField = screen.getByRole("combobox", { name: "programs" })
   await user.click(programsInputField)
   await user.tripleClick(programsInputField)
   await user.keyboard(programInputText)
+  await user.keyboard("{ArrowDown}{enter}")
+  await expect(screen.findByText("Selected Programs: ASFOC1689D")).toBeDefined()
   expect(screen.queryByText("Invalid Program Input")).toBeNull()
   const genButton = screen.getByText("Generate")
   await user.click(genButton)
-  await expect(screen.findByText(/invalid/i)).rejects.toThrow()
+  await expect(screen.findByText("Invalid Program Input")).rejects.toThrow()
 })

style/app.scss

@@ -2079,7 +2079,7 @@ main-filter input {
   font-size: 1.3rem;
 }
 
-.chosen-courses {
+.dropdown-chosen {
   color: #5c497e;
   font-size: 0.8rem;
 }