Skip to content

Commit

Permalink
Merge pull request #7 from scottylabs-labrador/cici-react-frontend
Browse files Browse the repository at this point in the history 
edited search function and improved search card
  • Loading branch information
@qianxuege
qianxuege authored Jun 29, 2024
2 parents 2b01823 + 32451cf commit 8fa8ffc
Show file tree
Hide file tree
Showing 2 changed files with 126 additions and 33 deletions.
140 changes: 114 additions & 26 deletions src/components/Search.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,11 @@ import "react-dropdown/style.css";
import "./Search.css";
import { SavedSearchBtn } from "./SavedSearches";
// import useSearch from "../../utils/hooks/useSearch";
import DITData from "../../backend/scraper/drop_in.json";
import PTData from "../../backend/scraper/peer_tutoring.json";
import SIData from "../../backend/scraper/si.json";
import ClubsData from "../../backend/scraper/tartanconnect.json";
import CareerData from "../../backend/scraper/handshake.json";


// https://plainenglish.io/blog/how-to-implement-a-search-bar-in-react-js
Expand All @@ -43,20 +47,21 @@ const Search: React.FC<SearchComponentProps> = ({ page }) => {
// search results
// const [data, setData] = useState(null)
// date picker
const [startDate, setStartDate] = useState<Dayjs | null>(dayjs());
const [endDate, setEndDate] = useState<Dayjs | null>(dayjs());
const [startDate, setStartDate] = useState<Dayjs>(dayjs());
const [endDate, setEndDate] = useState<Dayjs>(dayjs().add(7, 'day'));
const showDatePicker = true;


// useEffect(()=> {
// const [data, setData] = useState([]);
useEffect(()=> {
// const [data, setData] = useState([]);

// const fuse = new Fuse(SIData, {
// keys: ["course_id", "course_name"],
// });
// const fuse = new Fuse(SIData, {
// keys: ["course_id", "course_name"],
// });

// setData([fuse.search(searchInput)]);
// },[searchInput])
// setData([fuse.search(searchInput)]);
getCategoryData(page);
},[categoryName])


// search
Expand All @@ -77,6 +82,68 @@ const Search: React.FC<SearchComponentProps> = ({ page }) => {
);
};

const inDateRange = (date: string) => {
const startDateObj = startDate.toDate();
const endDateObj = endDate.toDate();
const eventDate = new Date(date);
return eventDate >= startDateObj && eventDate <= endDateObj;
}

const getCategoryData = (currPage:string) => {
// console.log("running category data");
switch(currPage) {
case "academics":
const optionsAcademics = { keys: ['resource_type', 'course_id', 'course_name'] }
let combinedData = [...DITData, ...SIData, ...PTData];
const fuseAcademics = new Fuse(combinedData, optionsAcademics);
// const fuse = new Fuse(SIData, options);
if (categoryName.length == 0 || categoryName.length==4) {
return fuseAcademics.search(searchInput);
} else {
if (!categoryName.includes("Supplemental Instructions")) {
fuseAcademics.remove((doc) => {
return doc.resource_type === 'SI';
})
}
if (!categoryName.includes("Drop-in Tutoring")) {
fuseAcademics.remove((doc) => {
return doc.resource_type === 'DIT';
})
}
if (!categoryName.includes("Peer Tutoring")) {
fuseAcademics.remove((doc) => {
return doc.resource_type === 'PT'
})
}
return fuseAcademics.search(searchInput);
}
break;
case "clubs":
const optionsClubs = { keys: ['resource_type', 'event_name', 'event_host', 'categories'] }
const fuseClubs = new Fuse(ClubsData, optionsClubs);
return fuseClubs.search(searchInput);
break;
case "career":
const optionsCareer = { keys: ['resource_type', 'event_name', 'event_host', 'categories'] }
const fuseCareer = new Fuse(CareerData, optionsCareer);
return fuseCareer.search(searchInput);
break;
}
}

const getWeekday = (weekday: number) => {
const today = new Date();
const dayOfWeekToday = today.getDay(); // 0 (Sunday) to 6 (Saturday)
const offSet = dayOfWeekToday - weekday;
if (offSet === 0 || offSet === 7) {
return today.toDateString();
} else {
const targetDay = new Date(today);
targetDay.setDate(today.getDate() - offSet);
return targetDay.toDateString();
}
}

const getNumCategories = () => {
if (page==="academics") {
return categoryListAcademics.length;
Expand Down Expand Up @@ -146,14 +213,13 @@ const Search: React.FC<SearchComponentProps> = ({ page }) => {
</Select>
</FormControl>
);


const startDateFn = (date: Dayjs | null) => {
const startDateFn = (date: Dayjs) => {
setStartDate(date);
console.log(`start: ${date}`);
};

const endDateFn = (date: Dayjs | null) => {
const endDateFn = (date: Dayjs) => {
setEndDate(date);
console.log(`end: ${date}`);
};
Expand Down Expand Up @@ -242,20 +308,42 @@ const Search: React.FC<SearchComponentProps> = ({ page }) => {
</div>

<div className="overflow-scroll" style={{height: '70vh'}}>
{searchInput && SIData.map( (event) => {
return (
<SearchCard
eventName={`${event.resource_type} for ${event.course_name}`}
orgName={`${event.course_id} Staff`}
startDate={"xx-xx-xxxx"}
startTime={"xx:xxPM"}
endDate={"xx-xx-xxxx"}
endTime={"xx:xxPM"}
location={"placeholder"}
// eventCategory={eventCategory1}
// eventSubcategory={eventSubcategory1}
/>
)})}
{searchInput && page==="academics" && getCategoryData(page)?.map( (result) => {
for (let i = 0; i<result.item.events.length; i++) {
if (inDateRange(getWeekday(result.item.events[i].weekday))) {
return (
<SearchCard
key={result.refIndex}
eventName={`${result.item.resource_type} for ${result.item.course_name}`}
orgName={`${result.item.course_id} Staff`}
startDate={getWeekday(result.item.events[i].weekday) || `null`}
startTime={result.item.events[i].start_time}
endDate={getWeekday(result.item.events[i].weekday) || `null`}
endTime={result.item.events[i].end_time}
location={result.item.events[i].location}
/>
)
}
}
})}
{searchInput && (page==="clubs" || page==="career") && getCategoryData(page)?.map( (result) => {
for (let i = 0; i<result.item.events.length; i++) {
if (inDateRange(getWeekday(result.item.events[i].weekday))) {
return (
<SearchCard
key={result.refIndex}
eventName={`${result.item.event_name}`}
orgName={`${result.item.event_host}`}
startDate={getWeekday(result.item.events[i].weekday) || `null`}
startTime={result.item.events[i].start_time}
endDate={getWeekday(result.item.events[i].weekday) || `null`}
endTime={result.item.events[i].end_time}
location={result.item.events[i].location}
/>
)
}
}
})}
</div>


Expand Down
19 changes: 12 additions & 7 deletions src/components/SearchCard.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,18 +26,23 @@ const SearchCard: React.FC<SearchCardProps> = ({
// eventSubcategory,
}) => {
const [buttonClicked, setButtonClicked] = useState(false);
const [cardClicked, setCardClicked] = useState(false);

const handleAddToCalendar = () => {
setButtonClicked((prevClicked) => !prevClicked);
// Logic for calling GCal
};

const handleCardClicked = () => {
setCardClicked(!cardClicked);
}
// {eventName}
return (
<div className="bg-white w-full my-3.5 px-6 py-4 rounded-lg flex items-center align-stretch">
<div className="flex-1">
<p className="text-xl">{eventName}</p>
<p className="text-base">By {orgName}</p>
<div className="flex items-center gap-2">
<div className="bg-white w-full my-3.5 px-6 py-4 rounded-lg flex items-center align-stretch relative">
<div className="flex-1" onClick={handleCardClicked}>
<p className={`text-xl w-3/5 my-0.5 ${cardClicked? "": "ease-in-out truncate"}`}>{eventName}</p>
<p className="text-base my-0.5">By {orgName}</p>
<div className="flex items-center gap-2 my-0.5">
<FaRegClock className="h-4 w-4 text-gray-600 mr-2" />
{endDate !== startDate ? (
<p>
Expand All @@ -49,12 +54,12 @@ const SearchCard: React.FC<SearchCardProps> = ({
</p>
)}
</div>
<div className="flex items-center gap-2">
<div className="flex items-center gap-2 my-0.5">
<IoLocationSharp className="h-4 w-4 text-gray-600 mr-2" />
<p>{location}</p>
</div>
</div>
<div className="flex-shrink-0">
<div className="flex-shrink-0 absolute right-3">
<button
className={`rounded-full border border-teal px-4 py-2 flex items-center gap-1 ${
buttonClicked ? "bg-teal text-white" : ""
Expand Down

0 comments on commit 8fa8ffc

Please sign in to comment.