@@ -121,6 +322,8 @@ const ListingPageBody = ({ setModalState, blockedArray }) => {
query={query}
setModalState={setModalState}
blockedArray={blockedArray}
+ filters={filters}
+ sortBy={sortBy}
/>
);
@@ -152,81 +355,61 @@ const TutorTuteeToggle = ({ tutorTutee, setTutorTutee }) => {
);
};
-const Listings = ({ tutorTutee, query, setModalState, blockedArray }) => {
+const Listings = ({
+ tutorTutee,
+ query,
+ setModalState,
+ blockedArray,
+ filters,
+ sortBy,
+}) => {
const [listingData, setListingData] = useState([]);
+ const [filteredListings, setFilteredListings] = useState([]);
// Set to true when data is being fetched from Supabase
const [loading, setLoading] = useState(false);
// Array of objects containing the data of each listing
- const parseListing = async ({
- creator_id,
- level,
- rates,
- fields,
- image_urls,
- listing_id,
- }) => {
- let {
- data: { avatar_url: avatarTitle, username },
- error: avatarError,
- status: avatarStatus,
- } = await supabase
- .from("profiles")
- .select("username, avatar_url")
- .eq("id", creator_id)
- .single();
- if (avatarError && avatarStatus !== 406) throw avatarError;
-
- const { publicURL: avatarUrl, error: urlError } =
- avatarTitle === ""
- ? {}
- : supabase.storage.from("avatars").getPublicUrl(avatarTitle);
- if (urlError) throw urlError;
-
- return {
- avatarUrl,
- username,
- level,
- rates,
- fields,
- image_urls,
- listing_id,
- creator_id,
- };
- };
+ // const filterListing = ({ level, rates, fields }) =>
+ // `${level} ${rates} ${Object.keys(fields).reduce(
+ // (acc, key) => `${acc} ${fields[key].value}`,
+ // ""
+ // )}`
+ // .toLowerCase()
+ // .includes(query.toLowerCase());
const filterListing = ({ level, rates, fields }) =>
- `${level} ${rates} ${Object.keys(fields).reduce(
- (acc, key) => `${acc} ${fields[key].value}`,
- ""
- )}`
- .toLowerCase()
- .includes(query.toLowerCase());
+ fuzzy(
+ query,
+ `${level} ${rates} ${Object.keys(fields).reduce(
+ (acc, key) => `${acc} ${fields[key].value}`,
+ ""
+ )}`
+ ) > 0.8;
+
+ const createComparator = (sortBy) => {
+ if (!sortBy) return () => 0;
+ const [field, order] = sortBy.split(" ");
+ if (order === "asc") return (a, b) => a[field] - b[field];
+ else return (a, b) => b[field] - a[field];
+ };
// Fetch listings from Supabase and display using ListingCards
useEffect(() => {
const getListings = async () => {
+ const [sortField, sortOrder] = sortBy.split(" ");
try {
setLoading(true);
- // Fetch data from the 'listings' table
- let {
- data: listingDb,
- listingError,
- listingStatus,
- } = await supabase
- .from("listings")
- .select("creator_id, level, rates, fields, image_urls, listing_id")
- .eq("seeking_for", tutorTutee);
- if (listingError && listingStatus !== 406) throw listingError;
-
- // Filter using the entered query (set to "" by default/on clearing the textbox)
- listingDb = listingDb.filter(filterListing);
-
- // Map each of the fetched rows into an async call to obtain each listing creators'
- // avatar URL. After all asynchronous calls have been resolved, set the result to
- // the listingData state/hook.
- const newListingData = await Promise.all(listingDb.map(parseListing));
+ // Fetch data using `get_listings()` RPC call
+ let { data: listingDb, error: listingError } = await supabase
+ .rpc("get_listings")
+ .eq("seeking_for", tutorTutee)
+ .order(sortField, { ascending: sortOrder === "asc" });
+ if (listingError) throw listingError;
+
+ // Filter using the selected criteria
+ const newListingData = listingDb.filter(filterListing);
+ // listingDb = listingDb.filter(filterListing);
//if no blocked user, it will return all the listings
if (blockedArray === null) {
@@ -252,44 +435,83 @@ const Listings = ({ tutorTutee, query, setModalState, blockedArray }) => {
// (because we are actively mutating `listingData` on each call!)
// eslint-disable-next-line react-hooks/exhaustive-deps
- }, [tutorTutee, query]);
+ }, [tutorTutee, query, sortBy]);
- // Listen for live changes to listings
- useState(() => {
+ useEffect(() => {
+ // Setup listener
const listingSub = supabase
.from("listings")
.on("INSERT", async (payload) => {
- const newListingData = await parseListing(payload.new);
- if (filterListing(newListingData)) {
- setListingData((oldListingData) => [
- ...oldListingData,
- newListingData,
- ]);
+ try {
+ const { data: newListingData, error } = await supabase.rpc(
+ "get_listings"
+ );
+ if (error) throw error;
+
+ setListingData(newListingData.sort(createComparator(sortBy)));
+ } catch (error) {
+ alert(error.message);
}
})
.on("DELETE", (payload) => {
- setListingData((oldListingData) =>
- oldListingData.filter(
+ setListingData((oldListingData) => {
+ return oldListingData.filter(
(data) => data.listing_id !== payload.old.listing_id
- )
- );
+ );
+ });
})
.subscribe();
return () => supabase.removeSubscription(listingSub);
+
+ // We are disabling the dependency warning as we only wish to
+ // run this block once, at the start.
+ //
+ // eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
+ // Filter listings, if necessary
+ useEffect(() => {
+ const createFilter = ({ name, value }) => {
+ if (!name && !value) return true;
+ return (listing) => {
+ const valueArray = value.map(({ value }) => value);
+ if (name === "level") {
+ if (valueArray.includes(listing.level)) return true;
+ } else {
+ const relevantFields = listing.fields.filter(
+ ({ category }) => category === name
+ );
+ for (let filterVal of value)
+ for (let field of relevantFields)
+ if (fuzzy(filterVal.value, field.value) > 0.8) return true;
+ }
+ return false;
+ };
+ };
+ if (filters.length === 0) setFilteredListings(listingData);
+ else
+ setFilteredListings(
+ listingData.filter((listing) =>
+ filters.reduce(
+ (acc, filterData) => acc && createFilter(filterData)(listing),
+ true
+ )
+ )
+ );
+ }, [filters, listingData]);
+
return (
{loading ? (
- ) : listingData.length === 0 ? (
+ ) : filteredListings.length === 0 ? (
Nothing here!
) : (
- {listingData.map(
+ {filteredListings.map(
({
- avatarUrl,
+ avatar_url,
username,
level,
rates,
@@ -297,10 +519,15 @@ const Listings = ({ tutorTutee, query, setModalState, blockedArray }) => {
image_urls,
listing_id,
creator_id,
+ avg_rating,
}) => {
return (
{
fields={fields}
setModalState={setModalState}
creator_id={creator_id}
+ avg_rating={avg_rating}
/>
);
}
@@ -319,3 +547,114 @@ const Listings = ({ tutorTutee, query, setModalState, blockedArray }) => {
);
};
+
+const MultiBadge = ({ children }) => (
+
+ {children}
+
+);
+
+const TagFilter = ({
+ tagType,
+ tagLabel,
+ defaultOptions,
+ filterState: [filters, setFilters],
+ createFilterHandler,
+}) => {
+ const [options, setOptions] = useState(defaultOptions);
+
+ const removeOption = (props, event) => {
+ const toRemove = props.value;
+ if (!props.hasValue) event.stopPropagation();
+ setOptions((old) => old.filter(({ value }) => value !== toRemove));
+ };
+
+ return (
+ ({
+ ...props,
+ borderRadius: "20px",
+ backgroundColor:
+ filters.filter(({ name }) => name === tagType).length === 0
+ ? "white"
+ : "#d4e9e4",
+ }),
+ menu: (props) => ({ ...props, width: "12em" }),
+ clearIndicator: (props) => ({
+ ...props,
+ paddingLeft: 0,
+ }),
+ valueContainer: (props) => ({ ...props, paddingRight: "0px" }),
+ dropdownIndicator: (props, state) => ({
+ ...props,
+ paddingLeft: "0px",
+ display: state.getValue().length > 0 ? "none" : "flex",
+ }),
+ option: (props, state) => ({
+ ...props,
+ backgroundColor: state.isSelected ? "#F0F0F0" : "white",
+ color: "black",
+ }),
+ }}
+ components={{
+ IndicatorSeparator: () => null,
+ MultiValueRemove: () => null,
+ MultiValue: (state) => {
+ const numSelected = state.getValue().length;
+ if (numSelected > 1 && state.index > 0) return <>;
+ return (
+
+ {numSelected > 1 ? tagLabel : state.data.label}
+ {numSelected > 1 && {numSelected}}
+
+ );
+ },
+ Option: (props) =>
+ CheckboxOption(
+ props,
+ defaultOptions.filter(({ value }) => value === props.value).length >
+ 0,
+ removeOption
+ ),
+ }}
+ onChange={createFilterHandler(tagType, true, setOptions)}
+ closeMenuOnSelect={false}
+ hideSelectedOptions={false}
+ isClearable
+ isMulti
+ />
+ );
+};
+
+const CheckboxOption = (props, isDefault, removeOption) => (
+
+
+
+
+ {isDefault || props.data.label.includes('Create "') || (
+ removeOption(props, event)}
+ />
+ )}
+
+
+);
diff --git a/src/pages/ListingsPage/listingsPage.module.css b/src/pages/ListingsPage/listingsPage.module.css
index 3118fcc..fe25eb3 100644
--- a/src/pages/ListingsPage/listingsPage.module.css
+++ b/src/pages/ListingsPage/listingsPage.module.css
@@ -6,7 +6,7 @@
box-shadow: 0px 4px 4px #00000040;
display: flex;
flex-direction: column;
- overflow: hidden;
+ overflow: visible;
padding: 20px;
margin: 40px 0px;
max-width: 90%;
@@ -136,8 +136,12 @@
flex-wrap: wrap;
border-radius: 12px;
display: flex;
- overflow: hidden;
+ overflow: visible;
padding: 9px 0;
margin: 0px 30px;
width: 90%;
}
+
+:global(.carousel-control-next), :global(.carousel-control-prev) {
+ z-index: 0 !important
+}
\ No newline at end of file