From 723cebfeca0497d285201c12d873a52a4ec88645 Mon Sep 17 00:00:00 2001 From: Kevin Wu Date: Fri, 12 Apr 2024 12:07:19 -0700 Subject: [PATCH] feat: refactor landing page, make example cards fetch current data --- app/page.tsx | 128 +--------------------- components/hero/ArticulableDefinition.tsx | 38 +++++++ components/hero/Examples.tsx | 89 +++++++++++++++ components/hero/Graphics.tsx | 36 ++++++ components/search/Search.tsx | 4 +- lib/utils/query-db.ts | 13 ++- 6 files changed, 178 insertions(+), 130 deletions(-) create mode 100644 components/hero/ArticulableDefinition.tsx create mode 100644 components/hero/Examples.tsx create mode 100644 components/hero/Graphics.tsx diff --git a/app/page.tsx b/app/page.tsx index 5515793..ed978ce 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -1,103 +1,12 @@ import { Button, buttonVariants } from "@/components/ui/button"; -import { - Card, - CardDescription, - CardFooter, - CardHeader, - CardTitle, -} from "@/components/ui/card"; -import { - Popover, - PopoverContent, - PopoverTrigger, -} from "@/components/ui/popover"; + import { cn } from "@/lib/utils"; -import { HelpCircle, Search } from "lucide-react"; +import { Search } from "lucide-react"; import Link from "next/link"; -const EXAMPLES = [ - { - uni: "UC Irvine", - ge: "GE IV - Arts and Humanities", - courses: 75, - link: "/search?uni=University%20of%20California%2C%20Irvine&ge=GE%20IV", - }, - { - uni: "UC Santa Barbara", - ge: "GE E - Culture and Thought", - courses: 75, - link: "/search?uni=University%20of%20California%2C%20Santa%20Barbara&ge=GE%20E", - }, - { - uni: "UC Irvine", - ge: "GE VII - Multicultural Studies", - courses: 50, - link: "/search?uni=University%20of%20California%2C%20Irvine&ge=GE%20VII", - }, -]; - -const ArticulableDefinition = () => { - return ( - - - - - -

- "An articulated course is a course... that can be used - to satisfy... general education requirements at another - college or university." -
- - - San Diego Mesa College - - -

- - - ); -}; - -const Graphics = () => { - return ( -
-
- -
- -
- ); -}; +import Examples from "@/components/hero/Examples"; +import Graphics from "@/components/hero/Graphics"; +import ArticulableDefinition from "@/components/hero/ArticulableDefinition"; export default function Home() { return ( @@ -168,32 +77,7 @@ export default function Home() {
-
- {EXAMPLES.map((example) => ( - - - - {example.uni} - - {example.ge} - - - - - {example.courses}+ - -  Courses  - - Found - - - - - ))} -
+ ); diff --git a/components/hero/ArticulableDefinition.tsx b/components/hero/ArticulableDefinition.tsx new file mode 100644 index 0000000..f552462 --- /dev/null +++ b/components/hero/ArticulableDefinition.tsx @@ -0,0 +1,38 @@ +import { + Popover, + PopoverContent, + PopoverTrigger, +} from "@/components/ui/popover"; +import { HelpCircle } from "lucide-react"; + +import Link from "next/link"; + +const ArticulableDefinition = () => { + return ( + + + + + +

+ "An articulated course is a course... that can be used + to satisfy... general education requirements at another + college or university." -
+ + + San Diego Mesa College + + +

+ + + ); +}; + +export default ArticulableDefinition; diff --git a/components/hero/Examples.tsx b/components/hero/Examples.tsx new file mode 100644 index 0000000..5421893 --- /dev/null +++ b/components/hero/Examples.tsx @@ -0,0 +1,89 @@ +"use client"; + +import { + Card, + CardDescription, + CardFooter, + CardHeader, + 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; + geText: string; + institution: string; + ge: string; + link: string; +} + +const EXAMPLES: Example[] = [ + { + name: "UC Irvine", + geText: "GE IV - Arts and Humanities", + institution: "UCI", + ge: "IV", + link: "/search?uni=UCI&ge=GE%20IV", + }, + { + name: "UCLA", + geText: "Life Sciences", + institution: "UCLA", + ge: "Scientific Inquiry: Life Sciences", + link: "search?uni=UCLA&ge=Scientific%20Inquiry%3A%20Life%20Sciences", + }, + { + name: "UC Santa Barbara", + geText: "GE E - Culture and Thought", + institution: "UCSB", + ge: "E", + link: "/search?uni=UCSB&ge=GE%20E", + }, +]; + +const ExampleCard = ({ example }: { example: Example }) => { + const [data, setData] = useState(); + + useEffect(() => { + const fetchData = async () => { + const courses = await queryDatabase( + example.institution, + example.ge, + ); + setData(courses); + }; + fetchData(); + }, [example.name, example.ge]); + + return ( + + + + {example.name} + {example.geText} + + + + {data?.data.length ?? "..."} + +  Courses  + Found + + + + ); +}; + +const Examples = () => { + return ( +
+ {EXAMPLES.map((example) => ( + + ))} +
+ ); +}; + +export default Examples; diff --git a/components/hero/Graphics.tsx b/components/hero/Graphics.tsx new file mode 100644 index 0000000..7e69e11 --- /dev/null +++ b/components/hero/Graphics.tsx @@ -0,0 +1,36 @@ +const Graphics = () => { + return ( +
+
+ +
+ +
+ ); +}; + +export default Graphics; diff --git a/components/search/Search.tsx b/components/search/Search.tsx index 619dd19..0ce880d 100644 --- a/components/search/Search.tsx +++ b/components/search/Search.tsx @@ -196,9 +196,7 @@ const Search = () => { const fetchData = async () => { try { - const universityParam = university; - const geParam = ge.includes("GE") ? ge.split(" ")[1] : ge; - const courses = await queryDatabase(universityParam, geParam); + const courses = await queryDatabase(university, ge); setCourses(courses.data); setLastUpdated(courses.lastUpdated); diff --git a/lib/utils/query-db.ts b/lib/utils/query-db.ts index 257f5aa..851058a 100644 --- a/lib/utils/query-db.ts +++ b/lib/utils/query-db.ts @@ -1,6 +1,6 @@ import { CourseObject } from "../../components/search/Search"; -type DatabaseReturn = { +export type DatabaseReturn = { data: CourseObject[]; lastUpdated: number; }; @@ -11,7 +11,10 @@ export async function queryDatabase( university: string, ge: string, ): Promise { - const cacheKey = university + ge; + const universityParam = university; + const geParam = ge.includes("GE") ? ge.split(" ")[1] : ge; + + const cacheKey = universityParam + geParam; if (cache[cacheKey] && cache[cacheKey][0]) { const [cachedDate, cachedData] = cache[cacheKey]; @@ -22,10 +25,10 @@ export async function queryDatabase( } } - const universityParam = encodeURIComponent(university); - const geParam = encodeURIComponent(ge); + const universityUri = encodeURIComponent(universityParam); + const geUri = encodeURIComponent(geParam); - const url = `https://ge-z.info/api/cvc-courses?institution=${universityParam}&ge=${geParam}`; + const url = `https://ge-z.info/api/cvc-courses?institution=${universityUri}&ge=${geUri}`; try { const response = await fetch(url);