From f5506d087e6356ccf1c57779d30ef473b953938c Mon Sep 17 00:00:00 2001 From: Sergej Date: Wed, 15 May 2024 08:34:03 +0200 Subject: [PATCH 1/2] Remove old code --- .../Elements/MarketFilters/DurationFilter.tsx | 68 ----------- .../MarketFilters/RegionEndFilter.tsx | 61 ---------- .../MarketFilters/RegionStartFilter.tsx | 61 ---------- .../MarketFilters/coreOccupancyFilter.tsx | 71 ----------- .../Elements/MarketFilters/sort.tsx | 114 ------------------ 5 files changed, 375 deletions(-) delete mode 100644 src/components/Elements/MarketFilters/DurationFilter.tsx delete mode 100644 src/components/Elements/MarketFilters/RegionEndFilter.tsx delete mode 100644 src/components/Elements/MarketFilters/RegionStartFilter.tsx delete mode 100644 src/components/Elements/MarketFilters/coreOccupancyFilter.tsx delete mode 100644 src/components/Elements/MarketFilters/sort.tsx diff --git a/src/components/Elements/MarketFilters/DurationFilter.tsx b/src/components/Elements/MarketFilters/DurationFilter.tsx deleted file mode 100644 index faca4300..00000000 --- a/src/components/Elements/MarketFilters/DurationFilter.tsx +++ /dev/null @@ -1,68 +0,0 @@ -import { - Box, - FormControl, - InputLabel, - MenuItem, - Select, - SelectChangeEvent, - Typography, -} from '@mui/material'; -import { Timeslice } from 'coretime-utils'; -import { useState } from 'react'; - -import { WEEK_IN_TIMESLICES } from '@/models'; - -import { FilterProps } from '.'; - -const DurationFilter = ({ filters, updateFilters }: FilterProps) => { - type Option = { - duration: Timeslice; - label: string; - }; - - const options: Option[] = [ - { duration: 0, label: 'Show All' }, - { duration: WEEK_IN_TIMESLICES, label: '1 week' }, - { duration: 2 * WEEK_IN_TIMESLICES, label: '2 weeks' }, - { duration: 3 * WEEK_IN_TIMESLICES, label: '3 weeks' }, - { duration: 4 * WEEK_IN_TIMESLICES, label: '4 weeks' }, - ]; - - const [selectedDuration, setSelectedDuration] = useState( - Number.MAX_VALUE - ); - - const handleChange = (event: SelectChangeEvent) => { - const duration = Number(event.target.value); - setSelectedDuration(duration); - updateFilters({ - ...filters, - durationFilter: (listing) => - listing.region.getEnd() - listing.region.getBegin() >= duration, - }); - }; - - return ( - - Region duration at least - - Range - - - - ); -}; - -export default DurationFilter; diff --git a/src/components/Elements/MarketFilters/RegionEndFilter.tsx b/src/components/Elements/MarketFilters/RegionEndFilter.tsx deleted file mode 100644 index 42b9e63d..00000000 --- a/src/components/Elements/MarketFilters/RegionEndFilter.tsx +++ /dev/null @@ -1,61 +0,0 @@ -import { Typography } from '@mui/material'; -import { LocalizationProvider } from '@mui/x-date-pickers'; -import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFnsV3'; -import { DatePicker } from '@mui/x-date-pickers/DatePicker'; -import { useState } from 'react'; - -import { timestampToTimeslice } from '@/utils/functions'; - -import { useRelayApi } from '@/contexts/apis'; -import { ApiState } from '@/contexts/apis/types'; -import { useCommon } from '@/contexts/common'; - -import { FilterProps } from '.'; - -const RegionEndFilter = ({ filters, updateFilters }: FilterProps) => { - const [selectedEnd, setSelectedEnd] = useState(null); - - const { - state: { api: relayApi, apiState }, - } = useRelayApi(); - const { timeslicePeriod } = useCommon(); - - const handleChange = async (newValue: Date | null) => { - if (!relayApi || apiState !== ApiState.READY) return; - setSelectedEnd(newValue); - - if (!newValue) { - updateFilters({ - ...filters, - regionEndFilter: () => true, - }); - return; - } - const timestamp = newValue.getTime(); - const end = await timestampToTimeslice( - relayApi, - timestamp, - timeslicePeriod - ); - - updateFilters({ - ...filters, - regionEndFilter: (listing) => listing.region.getEnd() <= end, - }); - }; - - return ( - <> - - Region ends by - - - - ); -}; - -export default RegionEndFilter; diff --git a/src/components/Elements/MarketFilters/RegionStartFilter.tsx b/src/components/Elements/MarketFilters/RegionStartFilter.tsx deleted file mode 100644 index 7410f48f..00000000 --- a/src/components/Elements/MarketFilters/RegionStartFilter.tsx +++ /dev/null @@ -1,61 +0,0 @@ -import { Typography } from '@mui/material'; -import { LocalizationProvider } from '@mui/x-date-pickers'; -import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFnsV3'; -import { DatePicker } from '@mui/x-date-pickers/DatePicker'; -import { useState } from 'react'; - -import { timestampToTimeslice } from '@/utils/functions'; - -import { useRelayApi } from '@/contexts/apis'; -import { ApiState } from '@/contexts/apis/types'; -import { useCommon } from '@/contexts/common'; - -import { FilterProps } from '.'; - -const RegionStartFilter = ({ filters, updateFilters }: FilterProps) => { - const [selectedStart, setSelectedStart] = useState(null); - - const { - state: { api: relayApi, apiState }, - } = useRelayApi(); - const { timeslicePeriod } = useCommon(); - - const handleChange = async (newValue: Date | null) => { - if (!relayApi || apiState !== ApiState.READY) return; - setSelectedStart(newValue); - - if (!newValue) { - updateFilters({ - ...filters, - regionStartFilter: () => true, - }); - return; - } - const timestamp = newValue.getTime(); - const start = await timestampToTimeslice( - relayApi, - timestamp, - timeslicePeriod - ); - - updateFilters({ - ...filters, - regionStartFilter: (listing) => listing.region.getBegin() >= start, - }); - }; - - return ( - <> - - Region starts by - - - - ); -}; - -export default RegionStartFilter; diff --git a/src/components/Elements/MarketFilters/coreOccupancyFilter.tsx b/src/components/Elements/MarketFilters/coreOccupancyFilter.tsx deleted file mode 100644 index 06646eb1..00000000 --- a/src/components/Elements/MarketFilters/coreOccupancyFilter.tsx +++ /dev/null @@ -1,71 +0,0 @@ -import { - Box, - FormControl, - InputLabel, - MenuItem, - Select, - SelectChangeEvent, - Typography, -} from '@mui/material'; -import { useState } from 'react'; - -import { FilterProps } from '.'; - -const CoreOccupancyFilter = ({ filters, updateFilters }: FilterProps) => { - type Range = { - lowerLimit: number; - upperLimit: number; - }; - - type RangeOption = { - limit: Range; - label: string; - }; - - const rangeOptions: RangeOption[] = [ - { limit: { lowerLimit: 0, upperLimit: 1 }, label: 'Show All' }, - { limit: { lowerLimit: 0, upperLimit: 0.25 }, label: '0%-25%' }, - { limit: { lowerLimit: 0.25, upperLimit: 0.5 }, label: '25%-50%' }, - { limit: { lowerLimit: 0.5, upperLimit: 0.75 }, label: '50%-75%' }, - { limit: { lowerLimit: 0.75, upperLimit: 1 }, label: '75%-100%' }, - ]; - - const [selectedRange, setSelectedRange] = useState( - JSON.stringify(rangeOptions[0].limit) - ); - - const handleChange = (event: SelectChangeEvent) => { - const range = JSON.parse(event.target.value) as Range; - setSelectedRange(JSON.stringify(range)); - updateFilters({ - ...filters, - coreOccupancyFilter: (listing) => - listing.region.coreOccupancy() >= range.lowerLimit && - listing.region.coreOccupancy() <= range.upperLimit, - }); - }; - - return ( - - Core Occupancy - - Range - - - - ); -}; - -export default CoreOccupancyFilter; diff --git a/src/components/Elements/MarketFilters/sort.tsx b/src/components/Elements/MarketFilters/sort.tsx deleted file mode 100644 index 763b4b1c..00000000 --- a/src/components/Elements/MarketFilters/sort.tsx +++ /dev/null @@ -1,114 +0,0 @@ -import { - Box, - FormControl, - InputLabel, - MenuItem, - Select, - SelectChangeEvent, -} from '@mui/material'; -import { useState } from 'react'; - -import { Listing } from '@/models'; - -// eslint-disable-next-line no-unused-vars -enum SortOption { - // eslint-disable-next-line no-unused-vars - CheapestFirst = 'CheapestFirst', - // eslint-disable-next-line no-unused-vars - ExpensiveFirst = 'ExpensiveFirst', - // 'ppt' stands for price per timeslice - // eslint-disable-next-line no-unused-vars - LowestPptFirst = 'LowestPptFirst', - // eslint-disable-next-line no-unused-vars - HighestPptFirst = 'HighestPptFirst', -} - -interface SortProps { - listings: Array; - filter: (_listing: Listing) => boolean; - setFilteredListings: (_listings: Array) => void; -} - -const Sort = ({ listings, setFilteredListings, filter }: SortProps) => { - type Option = { - sortOption: SortOption; - label: string; - }; - - const options: Option[] = [ - { sortOption: SortOption.CheapestFirst, label: 'Cheapest first' }, - { sortOption: SortOption.ExpensiveFirst, label: 'Expensive first' }, - { - sortOption: SortOption.LowestPptFirst, - label: 'Lowest price per timeslice first', - }, - { - sortOption: SortOption.HighestPptFirst, - label: 'Highest price per timeslice first', - }, - ]; - - const [selectedOption, setSelectedOption] = useState( - SortOption.CheapestFirst - ); - - const handleChange = (event: SelectChangeEvent) => { - const filteredListings = new Array(...listings); - const sortOption = event.target.value as SortOption; - setSelectedOption(sortOption); - - switch (sortOption) { - case SortOption.CheapestFirst: { - filteredListings.sort((a: Listing, b: Listing) => - a.currentPrice.cmp(b.currentPrice) - ); - break; - } - case SortOption.ExpensiveFirst: { - filteredListings.sort((a: Listing, b: Listing) => - b.currentPrice.cmp(a.currentPrice) - ); - break; - } - case SortOption.LowestPptFirst: { - filteredListings.sort((a: Listing, b: Listing) => - a.timeslicePrice.cmp(b.timeslicePrice) - ); - break; - } - case SortOption.HighestPptFirst: { - filteredListings.sort((a: Listing, b: Listing) => - b.timeslicePrice.cmp(a.timeslicePrice) - ); - break; - } - } - - setFilteredListings(filteredListings.filter(filter)); - }; - - return ( - - - - Sort - - - - - ); -}; - -export default Sort; From 05a317b7d5a2c23eada234f91a6b863b6cb0a10d Mon Sep 17 00:00:00 2001 From: Sergej Date: Wed, 15 May 2024 08:37:26 +0200 Subject: [PATCH 2/2] fix --- .../Elements/MarketFilters/PriceFilter.tsx | 49 -------- .../Elements/MarketFilters/index.tsx | 114 ------------------ src/components/Elements/index.ts | 1 - src/pages/marketplace.tsx | 6 +- 4 files changed, 1 insertion(+), 169 deletions(-) delete mode 100644 src/components/Elements/MarketFilters/PriceFilter.tsx delete mode 100644 src/components/Elements/MarketFilters/index.tsx diff --git a/src/components/Elements/MarketFilters/PriceFilter.tsx b/src/components/Elements/MarketFilters/PriceFilter.tsx deleted file mode 100644 index f0a89e5a..00000000 --- a/src/components/Elements/MarketFilters/PriceFilter.tsx +++ /dev/null @@ -1,49 +0,0 @@ -import { Box, Slider, Typography } from '@mui/material'; -import { useState } from 'react'; - -import { formatBalance } from '@/utils/functions'; - -import { FilterProps } from '.'; - -const PriceFilter = ({ listings, filters, updateFilters }: FilterProps) => { - const maxValue = (): number => { - if (listings.length < 1) return 0; - const sortedListings = new Array(...listings); - sortedListings.sort((a, b) => b.currentPrice.cmp(a.currentPrice)); - return Number( - formatBalance(sortedListings[0].currentPrice.toString(), true) - ); - }; - - const [priceLimit, setPriceLimit] = useState(maxValue()); - - const handleChange = (_e: Event, newValue: number | number[]) => { - setPriceLimit(newValue as number); - updateFilters({ - ...filters, - priceFilter: (listing) => - Number(formatBalance(listing.currentPrice.toString(), true)) <= - (newValue as number), - }); - }; - - return ( - - `${value} ROC`} - /> - - Price Limit: {`${priceLimit} ROC`} - - - ); -}; - -export default PriceFilter; diff --git a/src/components/Elements/MarketFilters/index.tsx b/src/components/Elements/MarketFilters/index.tsx deleted file mode 100644 index 68ff5ecb..00000000 --- a/src/components/Elements/MarketFilters/index.tsx +++ /dev/null @@ -1,114 +0,0 @@ -import { Box, Typography } from '@mui/material'; -import { useState } from 'react'; - -import { Listing } from '@/models'; - -import CoreOccupancyFilter from './coreOccupancyFilter'; -import DurationFilter from './DurationFilter'; -import PriceFilter from './PriceFilter'; -import RegionEndFilter from './RegionEndFilter'; -import RegionStartFilter from './RegionStartFilter'; -import Sort from './sort'; - -export interface Props { - listings: Array; - setFilteredListings: (_filtered: Array) => void; -} - -export interface FilterProps { - filters: Filters; - listings: Array; - updateFilters: (_filters: Filters) => void; -} - -type Filters = { - coreOccupancyFilter: (_listing: Listing) => boolean; - durationFilter: (_listing: Listing) => boolean; - priceFilter: (_listing: Listing) => boolean; - regionStartFilter: (_listing: Listing) => boolean; - regionEndFilter: (_listing: Listing) => boolean; -}; - -export const MarketFilters = ({ listings, setFilteredListings }: Props) => { - const [filters, setFilters] = useState({ - coreOccupancyFilter: () => true, - durationFilter: () => true, - priceFilter: () => true, - regionStartFilter: () => true, - regionEndFilter: () => true, - }); - - const updateFilters = (newFilters: Filters) => { - setFilters(newFilters); - setFilteredListings( - listings.filter((listing) => filter(newFilters, listing)) - ); - }; - - const filter = (f: Filters, listing: Listing): boolean => { - return ( - f.coreOccupancyFilter(listing) && - f.durationFilter(listing) && - f.priceFilter(listing) && - f.regionStartFilter(listing) && - f.regionEndFilter(listing) - ); - }; - - return ( - - - - Search filters: - - - - - - - - - - - - - - - - - Sort By: - - filter(filters, listing)} - setFilteredListings={setFilteredListings} - /> - - - - - - - - ); -}; diff --git a/src/components/Elements/index.ts b/src/components/Elements/index.ts index 9526edbb..bf016da3 100644 --- a/src/components/Elements/index.ts +++ b/src/components/Elements/index.ts @@ -6,7 +6,6 @@ export * from './CoreDetailsPanel'; export * from './FeatureCard'; export * from './Label'; export * from './ListingCard'; -export * from './MarketFilters'; export * from './RecipientInput'; export * from './RegionCard'; export * from './SaleInfoPanel'; diff --git a/src/pages/marketplace.tsx b/src/pages/marketplace.tsx index 36fd46cd..35a83820 100644 --- a/src/pages/marketplace.tsx +++ b/src/pages/marketplace.tsx @@ -3,7 +3,7 @@ import { useEffect, useState } from 'react'; import theme from '@/utils/muiTheme'; -import { ListingCard, MarketFilters, PurchaseModal } from '@/components'; +import { ListingCard, PurchaseModal } from '@/components'; import { useMarket } from '@/contexts/market'; import { Listing } from '@/models'; @@ -48,10 +48,6 @@ const Marketplace = () => { - {filteredListings.length > 0 && (