Skip to content

Commit

Permalink
chore: reenable lazy load
Browse files Browse the repository at this point in the history
  • Loading branch information
@KevinWu098
KevinWu098 committed Nov 29, 2024
1 parent 08d5901 commit 35824da
Showing 1 changed file with 110 additions and 106 deletions.
216 changes: 110 additions & 106 deletions src/components/search/SearchResults.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
// import LazyLoad from "react-lazy-load";
import { format } from "date-fns";
import { ExternalLinkIcon } from "lucide-react";
import LazyLoad from "react-lazy-load";

import { CourseObject } from "./Search";
import Tags from "./Tags";
Expand All @@ -27,130 +27,134 @@ const SearchResults = (props: SearchResultsProps) => {
const endTime = formatTime(result.endDate);

return (
// <LazyLoad
// key={
// result.courseCode +
// result.courseName +
// result.sendingInstitution
// }
// offset={500}
// >
<div
className="rounded-t-lg border-2 border-gray"
<LazyLoad
key={
result.courseCode +
result.courseName +
result.sendingInstitution
}
offset={500}
>
<div className="flex flex-col gap-2 rounded-t-lg bg-bg_secondary px-4 py-2 md:px-8 md:py-4">
<div className="overflow-hidden text-ellipsis whitespace-nowrap text-lg font-semibold text-primary md:text-xl">
{result.sendingInstitution}
</div>
<div className="text-2xl font-bold md:text-3xl">
{result.courseCode}{" "}
<span>{result.courseName}</span>
</div>
</div>
{result.niceToHaves.length > 0 && (
<div className="flex flex-row overflow-hidden">
<div className="flex flex-row gap-2 overflow-x-auto px-4 py-2 md:px-8 md:py-4">
{result.niceToHaves.map((tag) => (
<Tags
tag={tag}
key={tag.toString()}
/>
))}
<div
className="rounded-t-lg border-2 border-gray"
key={
result.courseCode +
result.courseName +
result.sendingInstitution
}
>
<div className="flex flex-col gap-2 rounded-t-lg bg-bg_secondary px-4 py-2 md:px-8 md:py-4">
<div className="overflow-hidden text-ellipsis whitespace-nowrap text-lg font-semibold text-primary md:text-xl">
{result.sendingInstitution}
</div>
<div className="text-2xl font-bold md:text-3xl">
{result.courseCode}{" "}
<span>{result.courseName}</span>
</div>
</div>
)}
<div className="border-2 border-t border-bg_secondary"></div>
<div className="flex justify-between overflow-hidden">
<div className="flex flex-row gap-4 overflow-x-auto px-4 py-2 md:gap-8 md:px-8 md:py-4">
<div className="flex flex-col whitespace-nowrap">
<div className="text-sm font-medium">
Units
</div>
<div className="text-base font-light">
{`${result.units} Units`}
{result.niceToHaves.length > 0 && (
<div className="flex flex-row overflow-hidden">
<div className="flex flex-row gap-2 overflow-x-auto px-4 py-2 md:px-8 md:py-4">
{result.niceToHaves.map(
(tag) => (
<Tags
tag={tag}
key={tag.toString()}
/>
)
)}
</div>
</div>
<div className="flex flex-col whitespace-nowrap">
<div className="text-sm font-medium">
Term
)}
<div className="border-2 border-t border-bg_secondary"></div>
<div className="flex justify-between overflow-hidden">
<div className="flex flex-row gap-4 overflow-x-auto px-4 py-2 md:gap-8 md:px-8 md:py-4">
<div className="flex flex-col whitespace-nowrap">
<div className="text-sm font-medium">
Units
</div>
<div className="text-base font-light">
{`${result.units} Units`}
</div>
</div>
<div className="text-base font-light">
{startTime + " - " + endTime}
</div>
</div>
<div className="flex flex-col whitespace-nowrap">
<div className="text-sm font-medium">
GEs
<div className="flex flex-col whitespace-nowrap">
<div className="text-sm font-medium">
Term
</div>
<div className="text-base font-light">
{startTime +
" - " +
endTime}
</div>
</div>
<div className="flex flex-row gap-2 text-base font-light">
{result.fulfillsGEs
.map((obj) => {
const category =
obj.category;
<div className="flex flex-col whitespace-nowrap">
<div className="text-sm font-medium">
GEs
</div>
<div className="flex flex-row gap-2 text-base font-light">
{result.fulfillsGEs
.map((obj) => {
const category =
obj.category;

return category.includes(
":"
)
? category.split(
": "
)[1]
: category;
})
.join(", ")}
return category.includes(
":"
)
? category.split(
": "
)[1]
: category;
})
.join(", ")}
</div>
</div>
</div>
<div className="flex flex-col whitespace-nowrap">
<div className="text-sm font-medium">
Articulates To
</div>
<div className="flex flex-row gap-2 text-base font-light">
{result.articulatesTo.join(
", "
)}
<div className="flex flex-col whitespace-nowrap">
<div className="text-sm font-medium">
Articulates To
</div>
<div className="flex flex-row gap-2 text-base font-light">
{result.articulatesTo.join(
", "
)}
</div>
</div>
</div>
</div>
</div>
<div className="border-2 border-t border-bg_secondary"></div>
<div className="flex flex-col justify-between gap-y-2 px-4 py-2 md:flex-row md:px-8 md:py-4">
<div className="flex flex-row items-center gap-3 text-2xl font-semibold">
Tuition:{" "}
<span className="text-primary">
{`$${result.tuition.toFixed(2)}`}
</span>
</div>
<div className="flex items-center gap-4 font-medium">
<button className="rounded-lg border-2 border-primary bg-primary px-4 py-1 text-white transition-all active:border-primary active:bg-transparent active:text-primary">
<a
href={`https://assist.org/${result.assistPath}`}
target="_blank"
referrerPolicy="no-referrer"
className="flex flex-row items-center gap-2"
>
Assist
<ExternalLinkIcon className="size-5" />
</a>
</button>
<button className="flex items-center rounded-lg border-2 px-4 py-1 text-primary transition-all active:border-primary active:bg-primary active:text-white">
<a
href={`https://search.cvc.edu/courses/${result.cvcId}`}
target="_blank"
referrerPolicy="no-referrer"
className="flex flex-row items-center gap-2"
>
CVC
<ExternalLinkIcon className="size-5" />
</a>
</button>
<div className="border-2 border-t border-bg_secondary"></div>
<div className="flex flex-col justify-between gap-y-2 px-4 py-2 md:flex-row md:px-8 md:py-4">
<div className="flex flex-row items-center gap-3 text-2xl font-semibold">
Tuition:{" "}
<span className="text-primary">
{`$${result.tuition.toFixed(2)}`}
</span>
</div>
<div className="flex items-center gap-4 font-medium">
<button className="rounded-lg border-2 border-primary bg-primary px-4 py-1 text-white transition-all active:border-primary active:bg-transparent active:text-primary">
<a
href={`https://assist.org/${result.assistPath}`}
target="_blank"
referrerPolicy="no-referrer"
className="flex flex-row items-center gap-2"
>
Assist
<ExternalLinkIcon className="size-5" />
</a>
</button>
<button className="flex items-center rounded-lg border-2 px-4 py-1 text-primary transition-all active:border-primary active:bg-primary active:text-white">
<a
href={`https://search.cvc.edu/courses/${result.cvcId}`}
target="_blank"
referrerPolicy="no-referrer"
className="flex flex-row items-center gap-2"
>
CVC
<ExternalLinkIcon className="size-5" />
</a>
</button>
</div>
</div>
</div>
</div>
// </LazyLoad>
</LazyLoad>
);
})
) : (
Expand Down

0 comments on commit 35824da

Please sign in to comment.