From 9034569792276a15a06d587c72f80ccf01e54b1b Mon Sep 17 00:00:00 2001 From: Kevin Wu Date: Wed, 3 Apr 2024 12:50:16 -0700 Subject: [PATCH] refactor: search page and utils --- __tests__/search-filters.test.ts | 6 +- components/search/Search.tsx | 276 +++++++++--------- .../search/{ => filter}/FilterComponents.tsx | 4 +- components/search/{ => filter}/Filters.tsx | 2 +- .../filter-utils.ts => lib/utils/filter.ts | 2 +- {components/search => lib/utils}/query-db.ts | 2 +- lib/utils/search.ts | 18 ++ 7 files changed, 160 insertions(+), 150 deletions(-) rename components/search/{ => filter}/FilterComponents.tsx (99%) rename components/search/{ => filter}/Filters.tsx (98%) rename components/search/filter-utils.ts => lib/utils/filter.ts (97%) rename {components/search => lib/utils}/query-db.ts (94%) create mode 100644 lib/utils/search.ts diff --git a/__tests__/search-filters.test.ts b/__tests__/search-filters.test.ts index ee78c82..828713a 100644 --- a/__tests__/search-filters.test.ts +++ b/__tests__/search-filters.test.ts @@ -1,9 +1,5 @@ import { FilterValues } from "@/components/search/Search"; -import { - endsBefore, - filterData, - startsAfter, -} from "@/components/search/filter-utils"; +import { endsBefore, filterData, startsAfter } from "@/lib/utils/filter"; import "@testing-library/jest-dom"; const data = { diff --git a/components/search/Search.tsx b/components/search/Search.tsx index c074f9e..9acd274 100644 --- a/components/search/Search.tsx +++ b/components/search/Search.tsx @@ -1,15 +1,15 @@ "use client"; import React, { useEffect, useState } from "react"; -import { SortDropdown } from "./FilterComponents"; +import { SortDropdown } from "./filter/FilterComponents"; import { useRouter, useSearchParams } from "next/navigation"; -import { queryDatabase } from "./query-db"; +import { queryDatabase } from "../../lib/utils/query-db"; import SearchResults from "./SearchResults"; import ScrollToTop from "./ScrollToTop"; import { FaFilter } from "react-icons/fa6"; -import { SearchFilterPage, SearchFilters } from "./Filters"; +import { SearchFilterPage, SearchFilters } from "./filter/Filters"; import Blurb from "./Blurb"; -import { filterData } from "./filter-utils"; +import { filterData } from "../../lib/utils/filter"; import { UNIVERSITY_GE } from "@/lib/constants"; import { analyticsEnum, logAnalytics } from "@/lib/analytics"; @@ -17,6 +17,7 @@ import { useToast } from "../ui/use-toast"; import { ToastAction } from "../ui/toast"; import Link from "next/link"; import { SearchSelect } from "./SearchSelect"; +import { getDismissedRecently, getNumSearches } from "@/lib/utils/search"; export interface CollegeObject { sendingInstitution: string; @@ -52,6 +53,38 @@ export type FilterValues = { sort: string; }; +const FILTER_PAGE_BREAKPOINT = 1280; + +const LoadingState = () => { + return ( +
+
+ loading gif +
+
Loading...
+
+ ); +}; + +const ErrorState = () => { + return ( +
+
+ error +
+
An error occurred...
+
+ ); +}; + const Search = () => { const router = useRouter(); const searchParams = useSearchParams(); @@ -124,8 +157,6 @@ const Search = () => { setOpen((open) => !open); }; - const maxWidthForOpen = 1280; - const handleResize = () => { setWidth(window.innerWidth); }; @@ -170,17 +201,8 @@ const Search = () => { setLoading(false); setError(false); - const enjoymentDismissalTime = window.localStorage.getItem( - "enjoymentDismissalTime", - ); - const dismissedRecently = - enjoymentDismissalTime !== null && - Date.now() - parseInt(enjoymentDismissalTime) < - 4 * 7 * 24 * 3600 * 1000; - - const gezSearches = window.localStorage.getItem("gezSearches"); - - const numSearches = gezSearches ? parseInt(gezSearches) : 0; + const dismissedRecently = getDismissedRecently(); + const numSearches = getNumSearches(); if (!dismissedRecently && numSearches > 2) { toast({ @@ -239,141 +261,115 @@ const Search = () => { fetchData(); }, [university, ge, toast]); + if (open && width < FILTER_PAGE_BREAKPOINT) { + return ( + + ); + } + return ( - <> - {open && width < maxWidthForOpen ? ( - +
+ Search  For Courses +
+
+
+ + +
+
+ +
+ - ) : ( -
-
- Search{" "} - -  For Courses - -
-
-
- - +
+
+
+ Search Filters
-
-
- -
-
-
- Search Filters -
- -
+
-
-
- - -
-
- Sort By: -
- -
+
+
+ + +
+
+ Sort By:
- {loading ? ( -
-
- loading gif -
-
- Loading... -
-
- ) : error ? ( -
-
- error -
-
- An error occurred... -
-
- ) : ( - - )} - +
+ + {loading ? ( + + ) : error ? ( + + ) : ( + + )} +
- )} - +
+
); }; diff --git a/components/search/FilterComponents.tsx b/components/search/filter/FilterComponents.tsx similarity index 99% rename from components/search/FilterComponents.tsx rename to components/search/filter/FilterComponents.tsx index a24aff3..14ef6f0 100644 --- a/components/search/FilterComponents.tsx +++ b/components/search/filter/FilterComponents.tsx @@ -2,7 +2,7 @@ import React, { ChangeEvent, Dispatch, SetStateAction, useState } from "react"; import { FaCheck, FaChevronDown } from "react-icons/fa"; -import { CollegeObject } from "./Search"; +import { CollegeObject } from "../Search"; import { format } from "date-fns"; import { Calendar } from "@/components/ui/calendar"; @@ -12,7 +12,7 @@ import { PopoverTrigger, } from "@/components/ui/popover"; -import { Button } from "../ui/button"; +import { Button } from "../../ui/button"; import { CalendarIcon } from "lucide-react"; import { cn } from "@/lib/utils"; diff --git a/components/search/Filters.tsx b/components/search/filter/Filters.tsx similarity index 98% rename from components/search/Filters.tsx rename to components/search/filter/Filters.tsx index 8fc3113..87ceb00 100644 --- a/components/search/Filters.tsx +++ b/components/search/filter/Filters.tsx @@ -6,7 +6,7 @@ import { UnitsFilter, } from "./FilterComponents"; import { FaCircleXmark } from "react-icons/fa6"; -import { CollegeObject, FilterValues } from "./Search"; +import { CollegeObject, FilterValues } from "../Search"; interface SearchFilterProps { handleClick: () => void; diff --git a/components/search/filter-utils.ts b/lib/utils/filter.ts similarity index 97% rename from components/search/filter-utils.ts rename to lib/utils/filter.ts index 76333d0..5f6ce7c 100644 --- a/components/search/filter-utils.ts +++ b/lib/utils/filter.ts @@ -1,4 +1,4 @@ -import { CollegeObject, FilterValues } from "./Search"; +import { CollegeObject, FilterValues } from "../../components/search/Search"; export const startsAfter = (start: Date, result: CollegeObject) => { const month = result.startMonth.toString().padStart(2, "0"); diff --git a/components/search/query-db.ts b/lib/utils/query-db.ts similarity index 94% rename from components/search/query-db.ts rename to lib/utils/query-db.ts index b5db4da..d2c4b0b 100644 --- a/components/search/query-db.ts +++ b/lib/utils/query-db.ts @@ -1,4 +1,4 @@ -import { CollegeObject } from "./Search"; +import { CollegeObject } from "../../components/search/Search"; const cache: Record = {}; diff --git a/lib/utils/search.ts b/lib/utils/search.ts new file mode 100644 index 0000000..0ac73f5 --- /dev/null +++ b/lib/utils/search.ts @@ -0,0 +1,18 @@ +export const getDismissedRecently = () => { + const enjoymentDismissalTime = window.localStorage.getItem( + "enjoymentDismissalTime", + ); + const dismissedRecently = + enjoymentDismissalTime !== null && + Date.now() - parseInt(enjoymentDismissalTime) < + 4 * 7 * 24 * 3600 * 1000; + + return dismissedRecently; +}; + +export const getNumSearches = () => { + const gezSearches = window.localStorage.getItem("gezSearches"); + const numSearches = gezSearches ? parseInt(gezSearches) : 0; + + return numSearches; +};