chore: misc. improvements

laurelin60 · Nov 29, 2024 · 1286549 · 1286549
1 parent 0e08c51
commit 1286549
Show file tree

Hide file tree

Showing 21 changed files with 346 additions and 330 deletions.
diff --git a/package.json b/package.json
@@ -19,13 +19,12 @@
         "class-variance-authority": "^0.7.1",
         "clsx": "^2.1.1",
         "date-fns": "^3.6.0",
-        "lucide-react": "^0.303.0",
-        "next": "^14.0.2",
+        "lucide-react": "0.462.0",
+        "next": "^14.2.18",
         "next-pwa": "^5.6.0",
         "react": "^18.2.0",
         "react-day-picker": "^8.10.0",
         "react-dom": "^18.2.0",
-        "react-icons": "^4.12.0",
         "react-lazy-load": "^4.0.1",
         "tailwind-merge": "^2.5.5",
         "tailwindcss-animate": "^1.0.7"
@@ -38,16 +37,16 @@
         "@types/node": "^20",
         "@types/react": "^18",
         "@types/react-dom": "^18",
-        "@typescript-eslint/eslint-plugin": "^7.5.0",
-        "@typescript-eslint/parser": "^7.5.0",
+        "@typescript-eslint/eslint-plugin": "8.16.0",
+        "@typescript-eslint/parser": "8.16.0",
         "autoprefixer": "^10.0.1",
-        "eslint": "^8",
+        "eslint": "9.15.0",
         "eslint-config-next": "14.0.2",
         "jest": "^29.7.0",
         "jest-environment-jsdom": "^29.7.0",
         "postcss": "^8",
         "prettier": "^3.1.0",
-        "prettier-plugin-tailwindcss": "^0.5.14",
+        "prettier-plugin-tailwindcss": "^0.6.9",
         "tailwindcss": "^3.3.0",
         "ts-node": "^10.9.2",
         "typescript": "^5"

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -1,9 +1,11 @@
 import type { Metadata } from "next";
 import { Inter } from "next/font/google";
+
 import "./globals.css";
-import Header from "@/components/Header";
+
 import Footer from "@/components/Footer";
 import GoogleAnalytics from "@/components/GoogleAnalytics";
+import Header from "@/components/Header";
 import { Toaster } from "@/components/ui/toaster";
 
 const inter = Inter({ subsets: ["latin"], fallback: ["sans-serif"] });

diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -1,12 +1,10 @@
-import { Button, buttonVariants } from "@/components/ui/button";
-
-import { cn } from "@/lib/utils";
-import { Search } from "lucide-react";
 import Link from "next/link";
-
+import ArticulableDefinition from "@/components/hero/ArticulableDefinition";
 import Examples from "@/components/hero/Examples";
 import Graphics from "@/components/hero/Graphics";
-import ArticulableDefinition from "@/components/hero/ArticulableDefinition";
+import { Button, buttonVariants } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+import { Search } from "lucide-react";
 
 export default function Home() {
     return (
@@ -54,7 +52,7 @@ export default function Home() {
                             buttonVariants({
                                 size: "lg",
                             }),
-                            "flex-center w-fit gap-2 text-lg text-white",
+                            "flex-center w-fit gap-2 text-lg text-white"
                         )}
                     >
                         Discover Courses <Search className="h-5 w-5" />

diff --git a/src/app/search/page.tsx b/src/app/search/page.tsx
@@ -1,11 +1,11 @@
+import React, { Suspense } from "react";
 import Search from "@/components/search/Search";
-import React from "react";
 
 const SearchPage = () => {
     return (
-        <>
+        <Suspense>
             <Search />
-        </>
+        </Suspense>
     );
 };
 

diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { FaGithub } from "react-icons/fa6";
+import { GithubIcon } from "lucide-react";
 
 const Footer = () => {
     return (
@@ -18,7 +18,7 @@ const Footer = () => {
                         referrerPolicy="no-referrer"
                         aria-label="GE-Z GitHub"
                     >
-                        <FaGithub />
+                        <GithubIcon />
                     </a>
                 </div>
             </div>

diff --git a/src/components/Header.tsx b/src/components/Header.tsx
@@ -1,5 +1,5 @@
-import Link from "next/link";
 import React from "react";
+import Link from "next/link";
 
 const Header = () => {
     return (

diff --git a/src/components/hero/ArticulableDefinition.tsx b/src/components/hero/ArticulableDefinition.tsx
@@ -1,12 +1,11 @@
+import Link from "next/link";
 import {
     Popover,
     PopoverContent,
     PopoverTrigger,
 } from "@/components/ui/popover";
 import { HelpCircle } from "lucide-react";
 
-import Link from "next/link";
-
 const ArticulableDefinition = () => {
     return (
         <Popover>

diff --git a/src/components/hero/Examples.tsx b/src/components/hero/Examples.tsx
@@ -1,5 +1,7 @@
 "use client";
 
+import { useEffect, useState } from "react";
+import Link from "next/link";
 import {
     Card,
     CardDescription,
@@ -8,8 +10,6 @@ import {
     CardTitle,
 } from "@/components/ui/card";
 import { DatabaseReturn, queryDatabase } from "@/lib/utils/query-db";
-import Link from "next/link";
-import { useEffect, useState } from "react";
 
 interface Example {
     name: string;
@@ -50,15 +50,18 @@ const ExampleCard = ({ example }: { example: Example }) => {
         const fetchData = async () => {
             const courses = await queryDatabase(
                 example.institution,
-                example.ge,
+                example.ge
             );
             setData(courses);
         };
         fetchData();
     }, [example.name, example.ge]);
 
     return (
-        <Link href={example.link} key={example.name + example.ge}>
+        <Link
+            href={example.link}
+            key={example.name + example.ge}
+        >
             <Card className="w-[275px] drop-shadow-md hover:shadow-md sm:w-[300px]">
                 <CardHeader>
                     <CardTitle>{example.name}</CardTitle>
@@ -80,7 +83,10 @@ const Examples = () => {
     return (
         <div className="flex flex-wrap gap-4 px-6 sm:justify-center lg:px-8">
             {EXAMPLES.map((example) => (
-                <ExampleCard key={example.institution + example.ge}example={example} />
+                <ExampleCard
+                    key={example.institution + example.ge}
+                    example={example}
+                />
             ))}
         </div>
     );

diff --git a/src/components/search/Blurb.tsx b/src/components/search/Blurb.tsx
@@ -1,10 +1,11 @@
 import React, { useEffect, useState } from "react";
+
 import { CourseObject, FilterValues } from "./Search";
 
 interface BlurbProps {
     filterData: (
         data: CourseObject[],
-        filterValues: FilterValues,
+        filterValues: FilterValues
     ) => CourseObject[];
     courses: CourseObject[] | undefined;
     lastUpdated: number | undefined;

diff --git a/src/components/search/ScrollToTop.tsx b/src/components/search/ScrollToTop.tsx
@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from "react";
-import { FaChevronUp } from "react-icons/fa";
+import { ChevronUpIcon } from "lucide-react";
 
 const ScrollToTop = () => {
     const [isVisible, setIsVisible] = useState(false);
@@ -36,7 +36,7 @@ const ScrollToTop = () => {
             onClick={scrollToTop}
         >
             <div className="flex items-center justify-center">
-                <FaChevronUp style={{ color: "white" }} />
+                <ChevronUpIcon style={{ color: "white" }} />
                 <span className={"hidden px-2 group-hover:inline-flex"}>
                     <p className="line-clamp-1 overflow-hidden truncate text-clip font-medium tracking-wide text-white">
                         Back to top

diff --git a/src/components/search/Search.tsx b/src/components/search/Search.tsx
@@ -1,23 +1,23 @@
 "use client";
 
 import React, { useEffect, useState } from "react";
-import { SortDropdown } from "./filter/FilterComponents";
+import Link from "next/link";
 import { useRouter, useSearchParams } from "next/navigation";
-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 "./filter/Filters";
-import Blurb from "./Blurb";
-import { filterData } from "../../lib/utils/filter";
+import { analyticsEnum, logAnalytics } from "@/lib/analytics";
 import { UNIVERSITY_GE } from "@/lib/constants";
+import { getDismissedRecently, getNumSearches } from "@/lib/utils/search";
+import { ListFilterIcon } from "lucide-react";
 
-import { analyticsEnum, logAnalytics } from "@/lib/analytics";
-import { useToast } from "../ui/use-toast";
+import { filterData } from "../../lib/utils/filter";
+import { queryDatabase } from "../../lib/utils/query-db";
 import { ToastAction } from "../ui/toast";
-import Link from "next/link";
+import { useToast } from "../ui/use-toast";
+import Blurb from "./Blurb";
+import { SortDropdown } from "./filter/FilterComponents";
+import { SearchFilterPage, SearchFilters } from "./filter/Filters";
+import ScrollToTop from "./ScrollToTop";
+import SearchResults from "./SearchResults";
 import { SearchSelect } from "./SearchSelect";
-import { getDismissedRecently, getNumSearches } from "@/lib/utils/search";
 
 export interface CourseObject {
     sendingInstitution: string;
@@ -99,7 +99,7 @@ const Search = () => {
     const searchGE = searchParams.get("ge");
 
     const [university, setUniversity] = useState(
-        searchUniversity || Object.keys(UNIVERSITY_GE)[0],
+        searchUniversity || Object.keys(UNIVERSITY_GE)[0]
     );
     const [ge, setGE] = useState(searchGE || UNIVERSITY_GE[university][4]);
 
@@ -236,13 +236,13 @@ const Search = () => {
 
                     window.localStorage.setItem(
                         "enjoymentDismissalTime",
-                        Date.now().toString(),
+                        Date.now().toString()
                     );
                 }
 
                 window.localStorage.setItem(
                     "gezSearches",
-                    (numSearches + 1).toString(),
+                    (numSearches + 1).toString()
                 );
             } catch (error) {
                 setLoading(false);
@@ -337,7 +337,7 @@ const Search = () => {
                             onClick={handleFilterButtonClick}
                             className="flex items-center gap-2 rounded-full border-2 bg-primary px-4 py-2 text-white transition-all active:border-primary active:bg-transparent active:text-primary xl:hidden"
                         >
-                            <FaFilter />
+                            <ListFilterIcon />
                             Search Filters
                         </button>
 

diff --git a/src/components/search/SearchResults.tsx b/src/components/search/SearchResults.tsx
@@ -1,8 +1,9 @@
 // import LazyLoad from "react-lazy-load";
-import { FaUpRightFromSquare } from "react-icons/fa6";
+import { format } from "date-fns";
+import { ExternalLinkIcon } from "lucide-react";
+
 import { CourseObject } from "./Search";
 import Tags from "./Tags";
-import { format } from "date-fns";
 
 const formatTime = (date: number) => {
     return format(new Date(date), "MMM d");
@@ -93,10 +94,10 @@ const SearchResults = (props: SearchResultsProps) => {
                                                             obj.category;
 
                                                         return category.includes(
-                                                            ":",
+                                                            ":"
                                                         )
                                                             ? category.split(
-                                                                  ": ",
+                                                                  ": "
                                                               )[1]
                                                             : category;
                                                     })
@@ -109,7 +110,7 @@ const SearchResults = (props: SearchResultsProps) => {
                                             </div>
                                             <div className="flex flex-row gap-2 text-base font-light">
                                                 {result.articulatesTo.join(
-                                                    ", ",
+                                                    ", "
                                                 )}
                                             </div>
                                         </div>
@@ -132,7 +133,7 @@ const SearchResults = (props: SearchResultsProps) => {
                                                 className="flex flex-row items-center gap-2"
                                             >
                                                 Assist
-                                                <FaUpRightFromSquare />
+                                                <ExternalLinkIcon />
                                             </a>
                                         </button>
                                         <button className="rounded-lg border-2 px-4 py-1 text-primary transition-all active:border-primary active:bg-primary active:text-white">
@@ -143,7 +144,7 @@ const SearchResults = (props: SearchResultsProps) => {
                                                 className="flex flex-row items-center gap-2"
                                             >
                                                 CVC
-                                                <FaUpRightFromSquare />
+                                                <ExternalLinkIcon />
                                             </a>
                                         </button>
                                     </div>

diff --git a/src/components/search/SearchSelect.tsx b/src/components/search/SearchSelect.tsx
@@ -20,7 +20,10 @@ export const SearchSelect = (props: DropdownComponentProps) => {
 
     return (
         <div className="relative flex h-12 w-[300px] md:h-16">
-            <Select value={value} onValueChange={onChange}>
+            <Select
+                value={value}
+                onValueChange={onChange}
+            >
                 <SelectTrigger className="h-full w-full overflow-ellipsis rounded-xl border-2 border-gray px-4 text-left text-base md:text-2xl">
                     <SelectValue placeholder={placeholder} />
                 </SelectTrigger>

diff --git a/src/components/search/Tags.tsx b/src/components/search/Tags.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { FaChalkboard, FaAward, FaHandHoldingDollar } from "react-icons/fa6";
+import { AwardIcon, HandCoinsIcon, PresentationIcon } from "lucide-react";
 
 interface TagsProps {
     tag: string;
@@ -12,7 +12,7 @@ const Tags = (props: TagsProps) => {
         return (
             <div className="flex w-fit flex-row items-center gap-2 whitespace-nowrap rounded-full border-2 border-gray px-4 py-1 font-medium text-gray">
                 <div className="text-black">
-                    <FaChalkboard />
+                    <PresentationIcon />
                 </div>
                 <div>Online Tutoring</div>
             </div>
@@ -23,7 +23,7 @@ const Tags = (props: TagsProps) => {
         return (
             <div className="flex w-fit flex-row items-center gap-2 whitespace-nowrap rounded-full border-2 border-gray px-4 py-1 font-medium text-gray">
                 <div className="text-black">
-                    <FaHandHoldingDollar />
+                    <HandCoinsIcon />
                 </div>
                 <div>Zero Textbook Cost</div>
             </div>
@@ -34,7 +34,7 @@ const Tags = (props: TagsProps) => {
         return (
             <div className="flex w-fit flex-row items-center gap-2 whitespace-nowrap rounded-full border-2 border-gray px-4 py-1 font-medium text-gray">
                 <div className="text-black">
-                    <FaAward />
+                    <AwardIcon />
                 </div>
                 <div>Quality Reviewed</div>
             </div>