Merge pull request #49 from sqrl-planner/develop

Refactor Search and remove comments

components/sidebar/SearchView/SearchResults.tsx

@@ -0,0 +1,159 @@
+import { AddIcon } from "@chakra-ui/icons"
+import {
+  Text,
+  Flex,
+  FlexProps,
+  useColorModeValue,
+  Box,
+  VStack,
+  Spinner,
+} from "@chakra-ui/react"
+import { motion } from "framer-motion"
+import React, { SetStateAction } from "react"
+import { Dispatch } from "react"
+import { Course } from "../../../src/Course"
+import { breakdownCourseCode } from "../../../src/utils/course"
+
+type Props = {
+  courses: Array<Course>
+  fullCourseLoading: boolean
+  fullCourseData: any
+  getFullCourse: (any: any) => any
+  setChosenCourse: Dispatch<SetStateAction<string>>
+  chosenCourse: string
+}
+
+const MotionFlex = motion<FlexProps>(Flex)
+
+const SearchResults = ({
+  courses,
+  fullCourseLoading,
+  setChosenCourse,
+  getFullCourse,
+  fullCourseData,
+  chosenCourse,
+}: Props) => {
+  const hoverBackground = useColorModeValue("gray.100", "gray.600")
+
+  return (
+    <React.Fragment>
+      {courses.map((course: Course, i: number) => {
+        const { department, numeral, suffix } = breakdownCourseCode(course.code)
+        return (
+          <MotionFlex
+            key={course.id}
+            layout
+            layoutId={course.id}
+            role="button"
+            variants={{
+              hidden: {
+                opacity: 0,
+                y: -10,
+              },
+              visible: (i) => ({
+                opacity: 1,
+                y: 0,
+                transition: {
+                  delay: i * 0.01,
+                },
+              }),
+            }}
+            custom={i}
+            initial="hidden"
+            animate="visible"
+            alignItems="center"
+            width="100%"
+            pr={5}
+            py={3}
+            boxShadow={`inset 0 2px 3px -3px rgba(0,0,0,0.5)`}
+            _hover={{
+              background: hoverBackground,
+            }}
+            _last={{
+              marginBottom: 4,
+            }}
+            tabIndex={0}
+            onClick={() => {
+              if (fullCourseLoading) return
+
+              setChosenCourse(course.id)
+
+              getFullCourse({
+                variables: {
+                  id: course.id,
+                },
+              })
+            }}
+            cursor={fullCourseLoading ? "not-allowed" : "pointer"}
+          >
+            <Flex ml={5} mr={4} w={4} h={4} alignItems="center">
+              {(fullCourseLoading || !fullCourseData) &&
+              chosenCourse === course.id ? (
+                <Spinner size="sm" />
+              ) : (
+                <AddIcon h={4} w={4} />
+              )}
+            </Flex>
+            <Flex
+              key={course.code}
+              fontSize="xl"
+              width="100%"
+              fontWeight={500}
+              alignItems="baseline"
+              // flexWrap="wrap"
+              flexDirection="column"
+            >
+              <Flex
+                fontSize="0.8em"
+                width="100%"
+                alignItems="center"
+                justifyContent="space-between"
+              >
+                <Box>
+                  <Text fontSize="1.25em" as="span" fontWeight={600}>
+                    {department + numeral}
+                  </Text>
+                  <Text as="span">{suffix}</Text>
+                  <Text as="span" ml={1}>
+                    {(() => {
+                      if (course.term === "FIRST_SEMESTER") return "F"
+                      if (course.term === "SECOND_SEMESTER") return "S"
+                      return "Y"
+                    })()}
+                  </Text>
+                </Box>
+                <VStack
+                  fontSize="0.7em"
+                  fontWeight={700}
+                  opacity={0.7}
+                  spacing={0}
+                  alignItems="flex-end"
+                >
+                  <Text>{course.campus.toUpperCase().replace(/_/g, " ")}</Text>
+                  {(() => {
+                    const categories = course.breadthCategories.match(/\d/g)
+                    if (!categories) return ""
+                    return (
+                      <Text>
+                        <Text as="span" fontWeight={500} opacity={0.8}>
+                          {categories.length > 1 ? "BREADTHS" : "BREADTH"}
+                        </Text>{" "}
+                        {categories.sort().join(", ")}
+                      </Text>
+                    )
+                  })()}
+                </VStack>
+              </Flex>
+              <Text as="span" opacity="0.7" fontSize="0.8em">
+                {course.title}
+              </Text>
+              {/* {course.code}: {course.title} */}
+            </Flex>
+          </MotionFlex>
+        )
+      })}
+    </React.Fragment>
+  )
+}
+
+export default SearchResults

components/sidebar/SearchView/SearchView.test.tsx

@@ -0,0 +1,43 @@
+import { fireEvent, render, screen } from "@testing-library/react"
+import SearchView from "./SearchView"
+import { HoverContextProvider } from "../../../src/HoverContext"
+import { AppContextProvider } from "../../../src/SqrlContext"
+import { PreferencesProvider } from "../../../src/PreferencesContext"
+import { MockedProvider } from "@apollo/client/testing"
+
+describe("Search view", () => {
+  it("renders correctly", () => {
+    render(
+      <AppContextProvider>
+        <HoverContextProvider>
+          <PreferencesProvider>
+            <MockedProvider>
+              <SearchView searchQuery="" setSearchQuery={() => {}} />
+            </MockedProvider>
+          </PreferencesProvider>
+        </HoverContextProvider>
+      </AppContextProvider>
+    )
+  })
+
+  it("should render the search query", () => {
+    const { getByDisplayValue } = render(
+      <AppContextProvider>
+        <HoverContextProvider>
+          <PreferencesProvider>
+            <MockedProvider>
+              <SearchView
+                searchQuery="qwerty-query"
+                setSearchQuery={() => {}}
+              />
+            </MockedProvider>
+          </PreferencesProvider>
+        </HoverContextProvider>
+      </AppContextProvider>
+    )
+
+    expect(getByDisplayValue("qwerty-query")).toBeInTheDocument()
+  })
+
+})
+