From 6021497d364f2cae70d538a54760db3cf0d720b4 Mon Sep 17 00:00:00 2001 From: Gathin Date: Sun, 18 Feb 2024 20:30:54 +0530 Subject: [PATCH 01/20] Filter popup UI --- src/components/ServiceList.tsx | 66 +++++++++++++++++++++++++++++++--- 1 file changed, 62 insertions(+), 4 deletions(-) diff --git a/src/components/ServiceList.tsx b/src/components/ServiceList.tsx index 40b23152..59b55260 100644 --- a/src/components/ServiceList.tsx +++ b/src/components/ServiceList.tsx @@ -2,18 +2,21 @@ import React, { useContext, useState } from 'react'; import BuilderPlaceContext from '../modules/BuilderPlace/context/BuilderPlaceContext'; import { useRouter } from 'next/router'; import useFilteredServices from '../hooks/useFilteredServices'; -import { IService, ServiceStatusEnum } from '../types'; +import { IService, IToken, ServiceStatusEnum } from '../types'; import Loading from './Loading'; import ServiceItem from './ServiceItem'; import SearchServiceButton from './Form/SearchServiceButton'; +import useAllowedTokens from '../hooks/useAllowedTokens'; function ServiceList() { const { builderPlace } = useContext(BuilderPlaceContext); const PAGE_SIZE = 30; const router = useRouter(); + const allowedTokens = useAllowedTokens(); const query = router.query; const searchQuery = query.search as string; const [view, setView] = useState(1); + const [isPopupVisible, setPopupVisible] = useState(false); const { hasMoreData, services, loading, loadMore } = useFilteredServices( ServiceStatusEnum.Opened, @@ -58,9 +61,64 @@ function ServiceList() { - +
+ + {isPopupVisible && ( +
+
+ +
+ + +
+ +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ +
+ {allowedTokens.map((token: IToken) => ( +
+ + +
+ ))} +
+
+
+ )} +
From 565c5ba500488c04a26a2bc205f8ac46b37b1bc6 Mon Sep 17 00:00:00 2001 From: Gathin Date: Mon, 19 Feb 2024 23:03:01 +0530 Subject: [PATCH 02/20] Rate hook update --- src/components/ServiceList.tsx | 37 +++++++++++++++--- src/hooks/useRateFromTokenAmount.tsx | 56 ++++++++++++++++++++++++++++ 2 files changed, 88 insertions(+), 5 deletions(-) create mode 100644 src/hooks/useRateFromTokenAmount.tsx diff --git a/src/components/ServiceList.tsx b/src/components/ServiceList.tsx index 59b55260..791fbe1d 100644 --- a/src/components/ServiceList.tsx +++ b/src/components/ServiceList.tsx @@ -1,4 +1,4 @@ -import React, { useContext, useState } from 'react'; +import React, { useContext, useEffect, useState } from 'react'; import BuilderPlaceContext from '../modules/BuilderPlace/context/BuilderPlaceContext'; import { useRouter } from 'next/router'; import useFilteredServices from '../hooks/useFilteredServices'; @@ -7,6 +7,8 @@ import Loading from './Loading'; import ServiceItem from './ServiceItem'; import SearchServiceButton from './Form/SearchServiceButton'; import useAllowedTokens from '../hooks/useAllowedTokens'; +import useRateFromTokenAmount from '../hooks/useRateFromTokenAmount'; + function ServiceList() { const { builderPlace } = useContext(BuilderPlaceContext); @@ -17,6 +19,9 @@ function ServiceList() { const searchQuery = query.search as string; const [view, setView] = useState(1); const [isPopupVisible, setPopupVisible] = useState(false); + const [minRate, setMinRate] = useState(''); + const [maxRate, setMaxRate] = useState(''); + const [filteredServices, setFilteredServices] = useState([]); const { hasMoreData, services, loading, loadMore } = useFilteredServices( ServiceStatusEnum.Opened, @@ -26,6 +31,22 @@ function ServiceList() { PAGE_SIZE, ); + +const filterFn = () => setFilteredServices(()=>{ + return services.filter((service) => { + const amount = useRateFromTokenAmount(service.description?.rateAmount || '', service.description?.rateToken || ''); + const rate = service.description?.rateAmount || 0; + const minRateNum = minRate; + const maxRateNum = maxRate; + return (!minRateNum || rate >= minRateNum) && (!maxRateNum || rate <= maxRateNum); + }); +}) + + useEffect(() => { + // Filter services based on minRate and maxRate + filterFn(); + }, [services, minRate, maxRate]); + return ( <> {searchQuery && services.length > 0 && ( @@ -60,7 +81,8 @@ function ServiceList() { Filter
- + + {/* Filter */}
@@ -120,13 +146,14 @@ function ServiceList() { )} +
{view === 1 && - services.map((service: IService, i: number) => ( + filteredServices.map((service: IService, i: number) => ( - {services.map((service: IService, i: number) => ( + {filteredServices.map((service: IService, i: number) => ( )} - {services.length > 0 && hasMoreData && !loading && ( + {filteredServices.length > 0 && hasMoreData && !loading && (
- + {/* Filter */}
@@ -135,9 +148,23 @@ const filterFn = () => setFilteredServices(()=>{
{allowedTokens.map((token: IToken) => ( -
- - +
+ { + const tokenName = e.target.value; + if (e.target.checked) { + setSelectedTokens(prevState => [...prevState, tokenName]); + } else { + setSelectedTokens(prevState => + prevState.filter(name => name !== tokenName), + ); + } + }} + /> +
))}
@@ -146,7 +173,6 @@ const filterFn = () => setFilteredServices(()=>{ )}
-
@@ -154,6 +180,7 @@ const filterFn = () => setFilteredServices(()=>{ {view === 1 && filteredServices.map((service: IService, i: number) => ( + Date: Wed, 21 Feb 2024 09:08:18 +0530 Subject: [PATCH 04/20] Basic rate filter & token filter function --- src/components/ServiceList.tsx | 58 +++++++++++++++------------------- 1 file changed, 26 insertions(+), 32 deletions(-) diff --git a/src/components/ServiceList.tsx b/src/components/ServiceList.tsx index af4f92c5..4995b921 100644 --- a/src/components/ServiceList.tsx +++ b/src/components/ServiceList.tsx @@ -18,11 +18,10 @@ function ServiceList() { const searchQuery = query.search as string; const [view, setView] = useState(1); const [isPopupVisible, setPopupVisible] = useState(false); - const [minRate, setMinRate] = useState(''); - const [maxRate, setMaxRate] = useState(''); + const [minRate, setMinRate] = useState(''); + const [maxRate, setMaxRate] = useState(''); const [selectedTokens, setSelectedTokens] = useState([]); const [filteredServices, setFilteredServices] = useState([]); - const { hasMoreData, services, loading, loadMore } = useFilteredServices( ServiceStatusEnum.Opened, builderPlace?.owner?.talentLayerId?.toString(), @@ -32,33 +31,29 @@ function ServiceList() { ); const filterFn = () => { - // If no tokens are selected, return all services - if (selectedTokens.length === 0) { - setFilteredServices(services); - } else { - // Filter services based on selected tokens - setFilteredServices(() => { - return services.filter(service => { - //have to change the amount rate filter - const rate = service.description?.rateAmount || 0; - const minRateNum = minRate; - const maxRateNum = maxRate; - // Check if the token of the service is selected - const tokenSelected = selectedTokens.includes(service.description?.rateToken || ''); - return ( - (!minRateNum || rate >= minRateNum) && - (!maxRateNum || rate <= maxRateNum) && - tokenSelected - ); - }); + setFilteredServices(() => { + return services.filter(service => { + const tokenSelected = selectedTokens.length === 0 || selectedTokens.includes(service.description?.rateToken || ''); + const rateAmount = parseFloat(service.description?.rateAmount || ''); + console.log(rateAmount) + const minRateParsed = parseFloat(minRate); + const maxRateParsed = parseFloat(maxRate); + + const minRateCondition = !minRateParsed || rateAmount >= minRateParsed; + const maxRateCondition = !maxRateParsed || rateAmount <= maxRateParsed; + + return ( + tokenSelected && minRateCondition && maxRateCondition + ); }); - } + }); }; + useEffect(() => { - // Filter services based on minRate and maxRate filterFn(); - }, [services, minRate, maxRate, selectedTokens]); + }, [services, selectedTokens, minRate, maxRate]); + return ( <> @@ -105,21 +100,21 @@ function ServiceList() { {isPopupVisible && (
- +
setMinRate(e.target.value)} className='border border-3 border-gray-300 p-2 rounded w-24' placeholder='Min' - value={minRate} - onChange={e => setMinRate(e.target.value)} /> setMaxRate(e.target.value)} className='border border-3 border-gray-300 p-2 rounded w-24' placeholder='Max' - value={maxRate} - onChange={e => setMaxRate(e.target.value)} />
@@ -180,7 +175,6 @@ function ServiceList() { {view === 1 && filteredServices.map((service: IService, i: number) => ( - loadMore()}> Load More Posts From 34a68527e7003cff9c407928fc1038ceca122ebc Mon Sep 17 00:00:00 2001 From: Gathin Date: Wed, 21 Feb 2024 11:26:17 +0530 Subject: [PATCH 05/20] Working token filter & modified rate amount --- src/components/ServiceList.tsx | 37 +++++++++++------- src/hooks/useRateFromTokenAmount.tsx | 58 ++++++++++++---------------- 2 files changed, 47 insertions(+), 48 deletions(-) diff --git a/src/components/ServiceList.tsx b/src/components/ServiceList.tsx index 4995b921..788d5ea7 100644 --- a/src/components/ServiceList.tsx +++ b/src/components/ServiceList.tsx @@ -19,7 +19,8 @@ function ServiceList() { const [view, setView] = useState(1); const [isPopupVisible, setPopupVisible] = useState(false); const [minRate, setMinRate] = useState(''); - const [maxRate, setMaxRate] = useState(''); + const [maxRate, setMaxRate] = useState(''); + const [amt, setAmt] = useState(''); const [selectedTokens, setSelectedTokens] = useState([]); const [filteredServices, setFilteredServices] = useState([]); const { hasMoreData, services, loading, loadMore } = useFilteredServices( @@ -30,31 +31,39 @@ function ServiceList() { PAGE_SIZE, ); + // console.log(amount) const filterFn = () => { setFilteredServices(() => { return services.filter(service => { - const tokenSelected = selectedTokens.length === 0 || selectedTokens.includes(service.description?.rateToken || ''); - const rateAmount = parseFloat(service.description?.rateAmount || ''); - console.log(rateAmount) + let amount + const tokenSelected = + selectedTokens.length === 0 || + selectedTokens.includes(service.description?.rateToken || ''); + // if((service.description?.rateAmount === null) || (service.description?.rateAmount === undefined) || (service.description?.rateToken === null) || (service.description?.rateToken === undefined)) return false; + useRateFromTokenAmount(service.description?.rateAmount!, service.description?.rateToken!) + .then(rate => { + amount = rate; + console.log(amount); + }) + .catch(error => { + console.log(error); + }); + const rateAmount = parseFloat(amount || ''); const minRateParsed = parseFloat(minRate); const maxRateParsed = parseFloat(maxRate); - + const minRateCondition = !minRateParsed || rateAmount >= minRateParsed; const maxRateCondition = !maxRateParsed || rateAmount <= maxRateParsed; - - return ( - tokenSelected && minRateCondition && maxRateCondition - ); + + return tokenSelected && minRateCondition && maxRateCondition; }); }); }; - useEffect(() => { filterFn(); }, [services, selectedTokens, minRate, maxRate]); - return ( <> {searchQuery && services.length > 0 && ( @@ -100,19 +109,19 @@ function ServiceList() { {isPopupVisible && (
- +
setMinRate(e.target.value)} + onChange={e => setMinRate(e.target.value)} className='border border-3 border-gray-300 p-2 rounded w-24' placeholder='Min' /> setMaxRate(e.target.value)} + onChange={e => setMaxRate(e.target.value)} className='border border-3 border-gray-300 p-2 rounded w-24' placeholder='Max' /> diff --git a/src/hooks/useRateFromTokenAmount.tsx b/src/hooks/useRateFromTokenAmount.tsx index 22a08ad4..e1735bda 100644 --- a/src/hooks/useRateFromTokenAmount.tsx +++ b/src/hooks/useRateFromTokenAmount.tsx @@ -3,29 +3,16 @@ import useTalentLayerClient from '../hooks/useTalentLayerClient'; import { IToken } from '../types'; import { formatUnits } from 'viem'; - -const useRateFromTokenAmount = ( amount: string, address: string ) => { - const [token, setToken] = useState(); - const [loading, setLoading] = useState(true); +const useRateFromTokenAmount = async (amount: string, address: string) => { + // const [token, setToken] = useState(); const talentLayerClient = useTalentLayerClient(); - const tokenRate = (token: IToken, value: string): string => { - const parsedValue = Number(value); - if (isNaN(parsedValue)) { - return 'invalid format'; - } - - - const formattedValue = formatUnits(BigInt(parsedValue), token.decimals); - return formattedValue; - }; - - useEffect(() => { - // Fetch the number of token by token address - const fetchDecimals = async () => { - try { - // Make an API call to get the number of token - const data = await talentLayerClient?.graphQlClient.get(` + // useEffect(() => { + // Fetch the number of token by token address + // const fetchDecimals = async () => { + try { + // Make an API call to get the number of token + const data = await talentLayerClient?.graphQlClient.get(` { tokens(where: {address: "${address}"}) { address @@ -36,21 +23,24 @@ const useRateFromTokenAmount = ( amount: string, address: string ) => { } } `); - setToken(data?.data?.tokens[0]); - setLoading(false); - } catch (error) { - console.error('Failed to fetch token:', error); + const parsedValue = parseFloat(amount); + if (isNaN(parsedValue)) { + return 'invalid format'; } - }; - - fetchDecimals(); - }, [address]); + const formattedValue = formatUnits(BigInt(parsedValue), data?.data?.tokens[0].decimals); + return formattedValue; + // setToken(data?.data?.tokens[0]); + } catch (error) { + console.error('Failed to fetch token:', error); + } + }; - if (!token || loading) { - return null; // Return null while loading - } + // fetchDecimals(); + // }, [address]); - return tokenRate(token, amount); -}; + // if (!token) { + // return null; + // } +// }; export default useRateFromTokenAmount; From 3b2d7080911be75d1f4971f191eca10af5cd262f Mon Sep 17 00:00:00 2001 From: Gathin Date: Thu, 22 Feb 2024 18:33:45 +0530 Subject: [PATCH 06/20] Working Rate Filter --- src/components/ServiceList.tsx | 59 ++++++++++++++-------------- src/hooks/useRateFromTokenAmount.tsx | 46 ---------------------- src/utils/conversion.ts | 10 +++++ 3 files changed, 39 insertions(+), 76 deletions(-) delete mode 100644 src/hooks/useRateFromTokenAmount.tsx diff --git a/src/components/ServiceList.tsx b/src/components/ServiceList.tsx index 788d5ea7..de1b5b91 100644 --- a/src/components/ServiceList.tsx +++ b/src/components/ServiceList.tsx @@ -7,7 +7,8 @@ import Loading from './Loading'; import ServiceItem from './ServiceItem'; import SearchServiceButton from './Form/SearchServiceButton'; import useAllowedTokens from '../hooks/useAllowedTokens'; -import useRateFromTokenAmount from '../hooks/useRateFromTokenAmount'; +import TokenAmount from './TokenAmount'; +import { calculateTokenAmount, renderTokenAmount } from '../utils/conversion'; function ServiceList() { const { builderPlace } = useContext(BuilderPlaceContext); @@ -20,7 +21,6 @@ function ServiceList() { const [isPopupVisible, setPopupVisible] = useState(false); const [minRate, setMinRate] = useState(''); const [maxRate, setMaxRate] = useState(''); - const [amt, setAmt] = useState(''); const [selectedTokens, setSelectedTokens] = useState([]); const [filteredServices, setFilteredServices] = useState([]); const { hasMoreData, services, loading, loadMore } = useFilteredServices( @@ -31,38 +31,37 @@ function ServiceList() { PAGE_SIZE, ); - // console.log(amount) - const filterFn = () => { + useEffect(() => { setFilteredServices(() => { return services.filter(service => { - let amount - const tokenSelected = - selectedTokens.length === 0 || - selectedTokens.includes(service.description?.rateToken || ''); - // if((service.description?.rateAmount === null) || (service.description?.rateAmount === undefined) || (service.description?.rateToken === null) || (service.description?.rateToken === undefined)) return false; - useRateFromTokenAmount(service.description?.rateAmount!, service.description?.rateToken!) - .then(rate => { - amount = rate; - console.log(amount); - }) - .catch(error => { - console.log(error); - }); - const rateAmount = parseFloat(amount || ''); - const minRateParsed = parseFloat(minRate); - const maxRateParsed = parseFloat(maxRate); - - const minRateCondition = !minRateParsed || rateAmount >= minRateParsed; - const maxRateCondition = !maxRateParsed || rateAmount <= maxRateParsed; - - return tokenSelected && minRateCondition && maxRateCondition; + // RATE FILTER + if (minRate || maxRate) { + if (service.description?.rateAmount) { + const rate = parseFloat(service.description.rateAmount); + console.log('rate', rate); + // Fetch token details + const token = allowedTokens.find( + token => token.address === service.description?.rateToken, + ); + // If token is found, convert the rate + if (token) { + const convertedRate = parseFloat( + calculateTokenAmount(token, service.description?.rateAmount), + ); + // Filter the service based on minRate and maxRate + const minRateParsed = parseFloat(minRate || '0'); + const maxRateParsed = parseFloat(maxRate || 'Infinity'); + return convertedRate >= minRateParsed && convertedRate <= maxRateParsed; + } else { + return false; + } + } + } else { + return true; + } }); }); - }; - - useEffect(() => { - filterFn(); - }, [services, selectedTokens, minRate, maxRate]); + }, [services, minRate, maxRate, allowedTokens]); return ( <> diff --git a/src/hooks/useRateFromTokenAmount.tsx b/src/hooks/useRateFromTokenAmount.tsx deleted file mode 100644 index e1735bda..00000000 --- a/src/hooks/useRateFromTokenAmount.tsx +++ /dev/null @@ -1,46 +0,0 @@ -import React, { useState, useEffect } from 'react'; -import useTalentLayerClient from '../hooks/useTalentLayerClient'; -import { IToken } from '../types'; -import { formatUnits } from 'viem'; - -const useRateFromTokenAmount = async (amount: string, address: string) => { - // const [token, setToken] = useState(); - const talentLayerClient = useTalentLayerClient(); - - // useEffect(() => { - // Fetch the number of token by token address - // const fetchDecimals = async () => { - try { - // Make an API call to get the number of token - const data = await talentLayerClient?.graphQlClient.get(` - { - tokens(where: {address: "${address}"}) { - address - symbol - name - decimals - minimumTransactionAmount - } - } - `); - const parsedValue = parseFloat(amount); - if (isNaN(parsedValue)) { - return 'invalid format'; - } - const formattedValue = formatUnits(BigInt(parsedValue), data?.data?.tokens[0].decimals); - return formattedValue; - // setToken(data?.data?.tokens[0]); - } catch (error) { - console.error('Failed to fetch token:', error); - } - }; - - // fetchDecimals(); - // }, [address]); - - // if (!token) { - // return null; - // } -// }; - -export default useRateFromTokenAmount; diff --git a/src/utils/conversion.ts b/src/utils/conversion.ts index 42184924..aaf72338 100644 --- a/src/utils/conversion.ts +++ b/src/utils/conversion.ts @@ -10,3 +10,13 @@ export const renderTokenAmount = (token: IToken, value: string): string => { const formattedValue = formatUnits(BigInt(parsedValue), token.decimals); return `${formattedValue} ${token.symbol}`; }; + +export const calculateTokenAmount = (token: IToken, value: string): string => { + const parsedValue = Number(value); + if (isNaN(parsedValue)) { + return 'invalid format'; + } + + const formattedValue = formatUnits(BigInt(parsedValue), token.decimals); + return formattedValue; +}; From aa143e255c757fe773c48e5e46df03183f6b9c2e Mon Sep 17 00:00:00 2001 From: Gathin Date: Thu, 22 Feb 2024 18:56:01 +0530 Subject: [PATCH 07/20] Working Token & Rate Filter --- src/components/ServiceList.tsx | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/src/components/ServiceList.tsx b/src/components/ServiceList.tsx index de1b5b91..b5c78870 100644 --- a/src/components/ServiceList.tsx +++ b/src/components/ServiceList.tsx @@ -7,8 +7,7 @@ import Loading from './Loading'; import ServiceItem from './ServiceItem'; import SearchServiceButton from './Form/SearchServiceButton'; import useAllowedTokens from '../hooks/useAllowedTokens'; -import TokenAmount from './TokenAmount'; -import { calculateTokenAmount, renderTokenAmount } from '../utils/conversion'; +import { calculateTokenAmount } from '../utils/conversion'; function ServiceList() { const { builderPlace } = useContext(BuilderPlaceContext); @@ -34,24 +33,25 @@ function ServiceList() { useEffect(() => { setFilteredServices(() => { return services.filter(service => { - // RATE FILTER - if (minRate || maxRate) { + + if (minRate || maxRate || selectedTokens.length > 0) { + const tokenSelected = + selectedTokens.length === 0 || + selectedTokens.includes(service.description?.rateToken || ''); + if (service.description?.rateAmount) { const rate = parseFloat(service.description.rateAmount); console.log('rate', rate); - // Fetch token details const token = allowedTokens.find( token => token.address === service.description?.rateToken, ); - // If token is found, convert the rate if (token) { const convertedRate = parseFloat( calculateTokenAmount(token, service.description?.rateAmount), ); - // Filter the service based on minRate and maxRate const minRateParsed = parseFloat(minRate || '0'); const maxRateParsed = parseFloat(maxRate || 'Infinity'); - return convertedRate >= minRateParsed && convertedRate <= maxRateParsed; + return convertedRate >= minRateParsed && convertedRate <= maxRateParsed && tokenSelected; } else { return false; } @@ -61,7 +61,7 @@ function ServiceList() { } }); }); - }, [services, minRate, maxRate, allowedTokens]); + }, [services, minRate, maxRate, allowedTokens, selectedTokens]); return ( <> From bba25986d41734db261d96b9d74d6fe7af68c92e Mon Sep 17 00:00:00 2001 From: Gathin Date: Thu, 22 Feb 2024 20:19:16 +0530 Subject: [PATCH 08/20] Added rating filter --- src/components/ServiceList.tsx | 58 +++++++++++++++++++--------------- 1 file changed, 32 insertions(+), 26 deletions(-) diff --git a/src/components/ServiceList.tsx b/src/components/ServiceList.tsx index b5c78870..ac7ba734 100644 --- a/src/components/ServiceList.tsx +++ b/src/components/ServiceList.tsx @@ -21,6 +21,7 @@ function ServiceList() { const [minRate, setMinRate] = useState(''); const [maxRate, setMaxRate] = useState(''); const [selectedTokens, setSelectedTokens] = useState([]); + const [selectedRatings, setSelectedRatings] = useState([]); const [filteredServices, setFilteredServices] = useState([]); const { hasMoreData, services, loading, loadMore } = useFilteredServices( ServiceStatusEnum.Opened, @@ -33,15 +34,12 @@ function ServiceList() { useEffect(() => { setFilteredServices(() => { return services.filter(service => { - - if (minRate || maxRate || selectedTokens.length > 0) { + if (minRate || maxRate || selectedTokens.length > 0 || selectedRatings.length > 0) { const tokenSelected = selectedTokens.length === 0 || selectedTokens.includes(service.description?.rateToken || ''); - if (service.description?.rateAmount) { const rate = parseFloat(service.description.rateAmount); - console.log('rate', rate); const token = allowedTokens.find( token => token.address === service.description?.rateToken, ); @@ -51,7 +49,15 @@ function ServiceList() { ); const minRateParsed = parseFloat(minRate || '0'); const maxRateParsed = parseFloat(maxRate || 'Infinity'); - return convertedRate >= minRateParsed && convertedRate <= maxRateParsed && tokenSelected; + const ratingSelected = + selectedRatings.length === 0 || + selectedRatings.includes(service.buyer?.rating || ''); + return ( + convertedRate >= minRateParsed && + convertedRate <= maxRateParsed && + tokenSelected && + ratingSelected + ); } else { return false; } @@ -61,7 +67,7 @@ function ServiceList() { } }); }); - }, [services, minRate, maxRate, allowedTokens, selectedTokens]); + }, [services, minRate, maxRate, allowedTokens, selectedTokens, selectedRatings]); return ( <> @@ -127,26 +133,26 @@ function ServiceList() {
-
- - -
-
- - -
-
- - -
-
- - -
-
- - -
+ {Array.from({ length: 5 }, (_, i) => i + 1).map((rating, i) => ( +
+ { + const rating = e.target.value; + setSelectedRatings(prevState => + prevState.includes(rating) + ? prevState.filter(r => r !== rating) + : [...prevState, rating], + ); + }} + /> + +
+ ))}
From 63ca3631cb645bc7317ff3d4d5e0b5ea1b4ee832 Mon Sep 17 00:00:00 2001 From: Gathin Date: Thu, 22 Feb 2024 20:35:56 +0530 Subject: [PATCH 09/20] No services found exception --- src/components/ServiceList.tsx | 37 ++++++++++++++++++++++++---------- 1 file changed, 26 insertions(+), 11 deletions(-) diff --git a/src/components/ServiceList.tsx b/src/components/ServiceList.tsx index ac7ba734..61836621 100644 --- a/src/components/ServiceList.tsx +++ b/src/components/ServiceList.tsx @@ -187,15 +187,24 @@ function ServiceList() {
- {view === 1 && - filteredServices.map((service: IService, i: number) => ( - - ))} + {view === 1 && ( + <> + {filteredServices.length > 0 ? ( + filteredServices.map((service: IService, i: number) => ( + + )) + ) : ( +

+ No services found +

+ )} + + )} {view === 2 && ( @@ -209,14 +218,20 @@ function ServiceList() { - {filteredServices.map((service: IService, i: number) => ( + {filteredServices.length > 0 ? ( + filteredServices.map((service: IService, i: number) => ( - ))} + )) + ) : ( +

+ No services found +

+ )}
)} From 566a571a85218557e47db83cb54105be3e8e43bd Mon Sep 17 00:00:00 2001 From: Gathin Date: Thu, 22 Feb 2024 20:37:41 +0530 Subject: [PATCH 10/20] Bug-fix --- src/components/ServiceList.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/ServiceList.tsx b/src/components/ServiceList.tsx index 61836621..c87ca4b7 100644 --- a/src/components/ServiceList.tsx +++ b/src/components/ServiceList.tsx @@ -228,9 +228,9 @@ function ServiceList() { /> )) ) : ( -

+ No services found -

+ )} From b3472f33a02787c2423e3cc850e06e66b929ede5 Mon Sep 17 00:00:00 2001 From: Gathin Date: Tue, 27 Feb 2024 08:36:23 +0530 Subject: [PATCH 11/20] Popup Component --- src/components/ServiceFilterPopup.tsx | 95 +++++++++++++++++++ src/components/ServiceList.tsx | 127 +++++++++----------------- src/types.ts | 15 +++ 3 files changed, 153 insertions(+), 84 deletions(-) create mode 100644 src/components/ServiceFilterPopup.tsx diff --git a/src/components/ServiceFilterPopup.tsx b/src/components/ServiceFilterPopup.tsx new file mode 100644 index 00000000..88079580 --- /dev/null +++ b/src/components/ServiceFilterPopup.tsx @@ -0,0 +1,95 @@ +import React from 'react'; +import useAllowedTokens from '../hooks/useAllowedTokens'; +import { IToken, ServiceFilterPopupProps } from '../types'; + +function ServiceFilterPopup({ + minRate, + maxRate, + selectedTokens, + selectedRatings, + setMinRate, + setMaxRate, + setSelectedTokens, + setSelectedRatings, + handleResetFilter, +}: ServiceFilterPopupProps) { + const allowedTokens = useAllowedTokens(); + + const handleReset = () => { + handleResetFilter(); + }; + return ( +
+
+ +
+ setMinRate(e.target.value)} + className='border border-3 border-gray-300 p-2 rounded w-24' + placeholder='Min' + /> + setMaxRate(e.target.value)} + className='border border-3 border-gray-300 p-2 rounded w-24' + placeholder='Max' + /> +
+ +
+ {Array.from({ length: 5 }, (_, i) => i + 1).map((rating, i) => ( +
+ { + const rating = e.target.value; + setSelectedRatings(prevState => + prevState.includes(rating) + ? prevState.filter(r => r !== rating) + : [...prevState, rating], + ); + }} + /> + +
+ ))} +
+ +
+ {allowedTokens.map((token: IToken) => ( +
+ { + const tokenName = e.target.value; + if (e.target.checked) { + setSelectedTokens(prevState => [...prevState, tokenName]); + } else { + setSelectedTokens(prevState => prevState.filter(name => name !== tokenName)); + } + }} + /> + +
+ ))} +
+
+
+ +
+
+ ); +} + +export default ServiceFilterPopup; diff --git a/src/components/ServiceList.tsx b/src/components/ServiceList.tsx index c87ca4b7..be098166 100644 --- a/src/components/ServiceList.tsx +++ b/src/components/ServiceList.tsx @@ -8,6 +8,7 @@ import ServiceItem from './ServiceItem'; import SearchServiceButton from './Form/SearchServiceButton'; import useAllowedTokens from '../hooks/useAllowedTokens'; import { calculateTokenAmount } from '../utils/conversion'; +import ServiceFilterPopup from './ServiceFilterPopup'; // Import the new component function ServiceList() { const { builderPlace } = useContext(BuilderPlaceContext); @@ -68,6 +69,14 @@ function ServiceList() { }); }); }, [services, minRate, maxRate, allowedTokens, selectedTokens, selectedRatings]); + + const handleResetFilter = () => { + setMinRate(''); + setMaxRate(''); + setSelectedTokens([]); + setSelectedRatings([]); + setPopupVisible(false); + }; return ( <> @@ -99,7 +108,10 @@ function ServiceList() { Table View -
@@ -108,77 +120,22 @@ function ServiceList() {
{isPopupVisible && ( -
-
- -
- setMinRate(e.target.value)} - className='border border-3 border-gray-300 p-2 rounded w-24' - placeholder='Min' - /> - setMaxRate(e.target.value)} - className='border border-3 border-gray-300 p-2 rounded w-24' - placeholder='Max' - /> -
- -
- {Array.from({ length: 5 }, (_, i) => i + 1).map((rating, i) => ( -
- { - const rating = e.target.value; - setSelectedRatings(prevState => - prevState.includes(rating) - ? prevState.filter(r => r !== rating) - : [...prevState, rating], - ); - }} - /> - -
- ))} -
- -
- {allowedTokens.map((token: IToken) => ( -
- { - const tokenName = e.target.value; - if (e.target.checked) { - setSelectedTokens(prevState => [...prevState, tokenName]); - } else { - setSelectedTokens(prevState => - prevState.filter(name => name !== tokenName), - ); - } - }} - /> - -
- ))} -
-
-
+ )}
@@ -218,20 +175,20 @@ function ServiceList() { - {filteredServices.length > 0 ? ( - filteredServices.map((service: IService, i: number) => ( - - )) - ) : ( - - No services found - - )} + {filteredServices.length > 0 ? ( + filteredServices.map((service: IService, i: number) => ( + + )) + ) : ( + + No services found + + )} )} @@ -243,7 +200,8 @@ function ServiceList() { className={`px-5 py-2 mt-5 content-center border-2 text-base-content border-black rounded-xl font-medium text-content `} disabled={!hasMoreData} - onClick={() => loadMore()}> + onClick={() => loadMore()} + > Load More Posts
@@ -258,3 +216,4 @@ function ServiceList() { } export default ServiceList; + diff --git a/src/types.ts b/src/types.ts index 69a53ea3..63b632c5 100644 --- a/src/types.ts +++ b/src/types.ts @@ -336,3 +336,18 @@ export interface IMutation { address: `0x${string}`; domain: string; } + +export interface ServiceFilterPopupProps { + minRate: string; + maxRate: string; + selectedTokens: string[]; + selectedRatings: string[]; + setMinRate: (value: string) => void; + setMaxRate: (value: string) => void; + setSelectedTokens: (value: string[]) => void; + setSelectedRatings: React.Dispatch>; + handleResetFilter: () => void; +} + + + From b43606ddc4ea56e33994478f15015d73cae5663f Mon Sep 17 00:00:00 2001 From: Gathin Date: Tue, 27 Feb 2024 20:24:57 +0530 Subject: [PATCH 12/20] Initial-test migration of token filter --- src/components/ServiceList.tsx | 10 ++++++---- src/hooks/useFilteredServices.ts | 4 +++- src/pages/api/services/filtered.ts | 2 ++ src/pages/api/services/request.ts | 2 ++ src/queries/services.ts | 9 ++++----- 5 files changed, 17 insertions(+), 10 deletions(-) diff --git a/src/components/ServiceList.tsx b/src/components/ServiceList.tsx index be098166..590f0ee7 100644 --- a/src/components/ServiceList.tsx +++ b/src/components/ServiceList.tsx @@ -30,15 +30,17 @@ function ServiceList() { undefined, searchQuery?.toLocaleLowerCase(), PAGE_SIZE, + '0x2d7882bedcbfddce29ba99965dd3cdf7fcb10a1e', ); useEffect(() => { setFilteredServices(() => { return services.filter(service => { + console.log('service', service); if (minRate || maxRate || selectedTokens.length > 0 || selectedRatings.length > 0) { - const tokenSelected = - selectedTokens.length === 0 || - selectedTokens.includes(service.description?.rateToken || ''); + // const tokenSelected = + // selectedTokens.length === 0 || + // selectedTokens.includes(service.description?.rateToken || ''); if (service.description?.rateAmount) { const rate = parseFloat(service.description.rateAmount); const token = allowedTokens.find( @@ -56,7 +58,7 @@ function ServiceList() { return ( convertedRate >= minRateParsed && convertedRate <= maxRateParsed && - tokenSelected && + // tokenSelected && ratingSelected ); } else { diff --git a/src/hooks/useFilteredServices.ts b/src/hooks/useFilteredServices.ts index 40a729d7..8b87a95e 100644 --- a/src/hooks/useFilteredServices.ts +++ b/src/hooks/useFilteredServices.ts @@ -9,6 +9,7 @@ const useFilteredServices = ( sellerId?: string, searchQuery?: string, numberPerPage?: number, + selectedTokens?: string, platformId?: string, ): { hasMoreData: boolean; @@ -43,6 +44,7 @@ const useFilteredServices = ( searchQuery, platformId, chainId, + selectedTokens ); newServices = response?.data?.services; @@ -52,7 +54,7 @@ const useFilteredServices = ( } else { setServices([...services, ...newServices]); } - if (numberPerPage && newServices.length < numberPerPage) { + if (newServices && numberPerPage && newServices.length < numberPerPage) { setHasMoreData(false); } else { setHasMoreData(true); diff --git a/src/pages/api/services/filtered.ts b/src/pages/api/services/filtered.ts index 8cd27b6a..f85aa623 100644 --- a/src/pages/api/services/filtered.ts +++ b/src/pages/api/services/filtered.ts @@ -16,6 +16,7 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse) const searchQuery = query.searchQuery as string; const platformId = query.platformId as string; const chainId = Number(query.chainId); + const selectedTokens = query.selectedTokens as string; try { let response = await getServices(chainId, { @@ -27,6 +28,7 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse) keywordList, searchQuery, platformId, + selectedTokens, }); const filteredServices = response?.data?.data?.services; diff --git a/src/pages/api/services/request.ts b/src/pages/api/services/request.ts index 20eef164..7748ef61 100644 --- a/src/pages/api/services/request.ts +++ b/src/pages/api/services/request.ts @@ -10,6 +10,7 @@ export const getFilteredServicesByKeywords = async ( searchQuery?: string, platformId?: string, chainId?: number, + selectedTokens?: string, ): Promise => { try { return await axios.get('/api/services/filtered', { @@ -22,6 +23,7 @@ export const getFilteredServicesByKeywords = async ( searchQuery, platformId, chainId, + selectedTokens, }, }); } catch (err) { diff --git a/src/queries/services.ts b/src/queries/services.ts index c9bf01f7..1e26dffc 100644 --- a/src/queries/services.ts +++ b/src/queries/services.ts @@ -10,6 +10,7 @@ interface IProps { searchQuery?: string; platformId?: string; keywordList?: string[]; + selectedTokens?: string; } const serviceQueryFields = ` @@ -70,18 +71,16 @@ const getFilteredServiceCondition = (params: IProps) => { if (params.buyerId) condition += `buyer: "${params.buyerId}",`; if (params.sellerId) condition += `seller: "${params.sellerId}",`; if (params.platformId) condition += `platform: "${params.platformId}",`; - + if (params.selectedTokens) condition += `description_: {rateToken_contains: "${params.selectedTokens}"},`; + let keywordFilter = ''; - // Filter by keyword - // This code filters the list of keywords to exclude those that are included in the keyword list. - if (params.keywordList && params.keywordList.length > 0) { keywordFilter = params.keywordList .map(keyword => `{keywords_raw_not_contains: "${keyword}"}`) .join(', '); } - // Prepare description_ filter + let descriptionCondition = ''; if (params.searchQuery) { descriptionCondition += `{keywords_raw_not_contains: "${params.searchQuery}"}`; From 616ce58b1aca4a6880fb56683c765ddfe7fcf9be Mon Sep 17 00:00:00 2001 From: Gathin Date: Wed, 28 Feb 2024 13:22:09 +0530 Subject: [PATCH 13/20] Token filtering from hardcoded array --- src/components/ServiceList.tsx | 5 +++-- src/hooks/useFilteredServices.ts | 2 +- src/pages/api/services/filtered.ts | 3 +-- src/pages/api/services/request.ts | 4 ++-- src/queries/services.ts | 10 +++++++--- 5 files changed, 14 insertions(+), 10 deletions(-) diff --git a/src/components/ServiceList.tsx b/src/components/ServiceList.tsx index 590f0ee7..58b17937 100644 --- a/src/components/ServiceList.tsx +++ b/src/components/ServiceList.tsx @@ -21,16 +21,17 @@ function ServiceList() { const [isPopupVisible, setPopupVisible] = useState(false); const [minRate, setMinRate] = useState(''); const [maxRate, setMaxRate] = useState(''); - const [selectedTokens, setSelectedTokens] = useState([]); + const [selectedTokens, setSelectedTokens] = useState(['0x2d7882bedcbfddce29ba99965dd3cdf7fcb10a1e']); const [selectedRatings, setSelectedRatings] = useState([]); const [filteredServices, setFilteredServices] = useState([]); + const array: string[] = ["0x2d7882bedcbfddce29ba99965dd3cdf7fcb10a1e","0xe9dce89b076ba6107bb64ef30678efec11939234"]; const { hasMoreData, services, loading, loadMore } = useFilteredServices( ServiceStatusEnum.Opened, builderPlace?.owner?.talentLayerId?.toString(), undefined, searchQuery?.toLocaleLowerCase(), PAGE_SIZE, - '0x2d7882bedcbfddce29ba99965dd3cdf7fcb10a1e', + selectedTokens, ); useEffect(() => { diff --git a/src/hooks/useFilteredServices.ts b/src/hooks/useFilteredServices.ts index 8b87a95e..0942a3ad 100644 --- a/src/hooks/useFilteredServices.ts +++ b/src/hooks/useFilteredServices.ts @@ -9,7 +9,7 @@ const useFilteredServices = ( sellerId?: string, searchQuery?: string, numberPerPage?: number, - selectedTokens?: string, + selectedTokens?: string[], platformId?: string, ): { hasMoreData: boolean; diff --git a/src/pages/api/services/filtered.ts b/src/pages/api/services/filtered.ts index f85aa623..b5914407 100644 --- a/src/pages/api/services/filtered.ts +++ b/src/pages/api/services/filtered.ts @@ -5,7 +5,6 @@ import { ServiceStatusEnum } from '../../../types'; export default async function handler(req: NextApiRequest, res: NextApiResponse) { const query = req.query; - // @dev : here you can add the filter logic let keywordList = keywordFilter.keywords; const serviceStatus = query.serviceStatus as ServiceStatusEnum; @@ -16,7 +15,7 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse) const searchQuery = query.searchQuery as string; const platformId = query.platformId as string; const chainId = Number(query.chainId); - const selectedTokens = query.selectedTokens as string; + const selectedTokens = JSON.parse(query.selectedTokens as string); try { let response = await getServices(chainId, { diff --git a/src/pages/api/services/request.ts b/src/pages/api/services/request.ts index 7748ef61..99323b62 100644 --- a/src/pages/api/services/request.ts +++ b/src/pages/api/services/request.ts @@ -10,7 +10,7 @@ export const getFilteredServicesByKeywords = async ( searchQuery?: string, platformId?: string, chainId?: number, - selectedTokens?: string, + selectedTokens?: string[], ): Promise => { try { return await axios.get('/api/services/filtered', { @@ -23,7 +23,7 @@ export const getFilteredServicesByKeywords = async ( searchQuery, platformId, chainId, - selectedTokens, + selectedTokens: JSON.stringify(selectedTokens), }, }); } catch (err) { diff --git a/src/queries/services.ts b/src/queries/services.ts index 1e26dffc..c19f4184 100644 --- a/src/queries/services.ts +++ b/src/queries/services.ts @@ -10,7 +10,7 @@ interface IProps { searchQuery?: string; platformId?: string; keywordList?: string[]; - selectedTokens?: string; + selectedTokens: string[]; } const serviceQueryFields = ` @@ -71,8 +71,12 @@ const getFilteredServiceCondition = (params: IProps) => { if (params.buyerId) condition += `buyer: "${params.buyerId}",`; if (params.sellerId) condition += `seller: "${params.sellerId}",`; if (params.platformId) condition += `platform: "${params.platformId}",`; - if (params.selectedTokens) condition += `description_: {rateToken_contains: "${params.selectedTokens}"},`; - + + if (params.selectedTokens) { + const tokensList = params.selectedTokens.map(token => `"${token}"`).join(', '); + condition += `description_: {rateToken_in: [${tokensList}]},`; + } + let keywordFilter = ''; if (params.keywordList && params.keywordList.length > 0) { From 6b5898719a2f099c526964c19361d5e505703c4b Mon Sep 17 00:00:00 2001 From: Gathin Date: Wed, 28 Feb 2024 22:47:24 +0530 Subject: [PATCH 14/20] Working - Token Filter --- src/components/ServiceList.tsx | 71 ++++++-------------------------- src/hooks/useFilteredServices.ts | 4 +- src/queries/services.ts | 4 +- 3 files changed, 16 insertions(+), 63 deletions(-) diff --git a/src/components/ServiceList.tsx b/src/components/ServiceList.tsx index 58b17937..bdbaf1db 100644 --- a/src/components/ServiceList.tsx +++ b/src/components/ServiceList.tsx @@ -6,73 +6,30 @@ import { IService, IToken, ServiceStatusEnum } from '../types'; import Loading from './Loading'; import ServiceItem from './ServiceItem'; import SearchServiceButton from './Form/SearchServiceButton'; -import useAllowedTokens from '../hooks/useAllowedTokens'; -import { calculateTokenAmount } from '../utils/conversion'; -import ServiceFilterPopup from './ServiceFilterPopup'; // Import the new component +import ServiceFilterPopup from './ServiceFilterPopup'; function ServiceList() { const { builderPlace } = useContext(BuilderPlaceContext); const PAGE_SIZE = 30; const router = useRouter(); - const allowedTokens = useAllowedTokens(); const query = router.query; const searchQuery = query.search as string; const [view, setView] = useState(1); const [isPopupVisible, setPopupVisible] = useState(false); const [minRate, setMinRate] = useState(''); const [maxRate, setMaxRate] = useState(''); - const [selectedTokens, setSelectedTokens] = useState(['0x2d7882bedcbfddce29ba99965dd3cdf7fcb10a1e']); + const [selectedTokens, setSelectedTokens] = useState([]); const [selectedRatings, setSelectedRatings] = useState([]); - const [filteredServices, setFilteredServices] = useState([]); - const array: string[] = ["0x2d7882bedcbfddce29ba99965dd3cdf7fcb10a1e","0xe9dce89b076ba6107bb64ef30678efec11939234"]; + const { hasMoreData, services, loading, loadMore } = useFilteredServices( ServiceStatusEnum.Opened, builderPlace?.owner?.talentLayerId?.toString(), undefined, searchQuery?.toLocaleLowerCase(), PAGE_SIZE, - selectedTokens, + selectedTokens.length > 0 ? selectedTokens : [], ); - useEffect(() => { - setFilteredServices(() => { - return services.filter(service => { - console.log('service', service); - if (minRate || maxRate || selectedTokens.length > 0 || selectedRatings.length > 0) { - // const tokenSelected = - // selectedTokens.length === 0 || - // selectedTokens.includes(service.description?.rateToken || ''); - if (service.description?.rateAmount) { - const rate = parseFloat(service.description.rateAmount); - const token = allowedTokens.find( - token => token.address === service.description?.rateToken, - ); - if (token) { - const convertedRate = parseFloat( - calculateTokenAmount(token, service.description?.rateAmount), - ); - const minRateParsed = parseFloat(minRate || '0'); - const maxRateParsed = parseFloat(maxRate || 'Infinity'); - const ratingSelected = - selectedRatings.length === 0 || - selectedRatings.includes(service.buyer?.rating || ''); - return ( - convertedRate >= minRateParsed && - convertedRate <= maxRateParsed && - // tokenSelected && - ratingSelected - ); - } else { - return false; - } - } - } else { - return true; - } - }); - }); - }, [services, minRate, maxRate, allowedTokens, selectedTokens, selectedRatings]); - const handleResetFilter = () => { setMinRate(''); setMaxRate(''); @@ -113,8 +70,7 @@ function ServiceList() {
@@ -123,8 +79,7 @@ function ServiceList() {
{isPopupVisible && ( @@ -149,8 +104,8 @@ function ServiceList() { {view === 1 && ( <> - {filteredServices.length > 0 ? ( - filteredServices.map((service: IService, i: number) => ( + {services.length > 0 ? ( + services.map((service: IService, i: number) => ( - {filteredServices.length > 0 ? ( - filteredServices.map((service: IService, i: number) => ( + {services.length > 0 ? ( + services.map((service: IService, i: number) => ( )} - {filteredServices.length > 0 && hasMoreData && !loading && ( + {services.length > 0 && hasMoreData && !loading && (
@@ -219,4 +173,3 @@ function ServiceList() { } export default ServiceList; - diff --git a/src/hooks/useFilteredServices.ts b/src/hooks/useFilteredServices.ts index 0942a3ad..b2f4118c 100644 --- a/src/hooks/useFilteredServices.ts +++ b/src/hooks/useFilteredServices.ts @@ -44,7 +44,7 @@ const useFilteredServices = ( searchQuery, platformId, chainId, - selectedTokens + selectedTokens, ); newServices = response?.data?.services; @@ -67,7 +67,7 @@ const useFilteredServices = ( } }; fetchData(); - }, [numberPerPage, offset, searchQuery]); + }, [numberPerPage, offset, searchQuery, selectedTokens?.length]); const loadMore = () => { numberPerPage ? setOffset(offset + numberPerPage) : ''; diff --git a/src/queries/services.ts b/src/queries/services.ts index c19f4184..60271ba7 100644 --- a/src/queries/services.ts +++ b/src/queries/services.ts @@ -10,7 +10,7 @@ interface IProps { searchQuery?: string; platformId?: string; keywordList?: string[]; - selectedTokens: string[]; + selectedTokens?: string[]; } const serviceQueryFields = ` @@ -72,7 +72,7 @@ const getFilteredServiceCondition = (params: IProps) => { if (params.sellerId) condition += `seller: "${params.sellerId}",`; if (params.platformId) condition += `platform: "${params.platformId}",`; - if (params.selectedTokens) { + if (params.selectedTokens && params.selectedTokens.length > 0) { const tokensList = params.selectedTokens.map(token => `"${token}"`).join(', '); condition += `description_: {rateToken_in: [${tokensList}]},`; } From db9589aeba2632ec66c07cc26e9621e4b3a55350 Mon Sep 17 00:00:00 2001 From: Gathin Date: Fri, 1 Mar 2024 19:25:53 +0530 Subject: [PATCH 15/20] Upd: UI popup --- src/components/ServiceFilterPopup.tsx | 2 +- src/types.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/ServiceFilterPopup.tsx b/src/components/ServiceFilterPopup.tsx index 88079580..4f4d40e8 100644 --- a/src/components/ServiceFilterPopup.tsx +++ b/src/components/ServiceFilterPopup.tsx @@ -19,7 +19,7 @@ function ServiceFilterPopup({ handleResetFilter(); }; return ( -
+
diff --git a/src/types.ts b/src/types.ts index 63b632c5..2154d4b3 100644 --- a/src/types.ts +++ b/src/types.ts @@ -344,7 +344,7 @@ export interface ServiceFilterPopupProps { selectedRatings: string[]; setMinRate: (value: string) => void; setMaxRate: (value: string) => void; - setSelectedTokens: (value: string[]) => void; + setSelectedTokens: React.Dispatch>; setSelectedRatings: React.Dispatch>; handleResetFilter: () => void; } From a8855ea0d4d1dbf0b9a70de4a1155ff2d611c5f7 Mon Sep 17 00:00:00 2001 From: Gathin Date: Sat, 2 Mar 2024 21:09:43 +0530 Subject: [PATCH 16/20] Upd: Tokens filter -> Token Filter --- src/components/ServiceFilterPopup.tsx | 44 +++++++++++++-------------- src/components/ServiceList.tsx | 11 +++---- src/hooks/useFilteredServices.ts | 6 ++-- src/pages/api/services/filtered.ts | 4 +-- src/pages/api/services/request.ts | 4 +-- src/queries/services.ts | 10 ++---- src/types.ts | 4 +-- 7 files changed, 38 insertions(+), 45 deletions(-) diff --git a/src/components/ServiceFilterPopup.tsx b/src/components/ServiceFilterPopup.tsx index 4f4d40e8..d1d656b2 100644 --- a/src/components/ServiceFilterPopup.tsx +++ b/src/components/ServiceFilterPopup.tsx @@ -5,11 +5,11 @@ import { IToken, ServiceFilterPopupProps } from '../types'; function ServiceFilterPopup({ minRate, maxRate, - selectedTokens, + selectedToken, selectedRatings, setMinRate, setMaxRate, - setSelectedTokens, + setSelectedToken, setSelectedRatings, handleResetFilter, }: ServiceFilterPopupProps) { @@ -38,6 +38,25 @@ function ServiceFilterPopup({ placeholder='Max' />
+ +
+ {allowedTokens.map((token: IToken) => ( +
+ { + const tokenName = e.target.value; + if (e.target.checked) { + setSelectedToken(tokenName); + } + }} + /> + +
+ ))} +
{Array.from({ length: 5 }, (_, i) => i + 1).map((rating, i) => ( @@ -61,27 +80,6 @@ function ServiceFilterPopup({
))}
- -
- {allowedTokens.map((token: IToken) => ( -
- { - const tokenName = e.target.value; - if (e.target.checked) { - setSelectedTokens(prevState => [...prevState, tokenName]); - } else { - setSelectedTokens(prevState => prevState.filter(name => name !== tokenName)); - } - }} - /> - -
- ))} -
*/}
{isPopupVisible && ( )} diff --git a/src/hooks/useFilteredServices.ts b/src/hooks/useFilteredServices.ts index bce58239..8a5ff8a7 100644 --- a/src/hooks/useFilteredServices.ts +++ b/src/hooks/useFilteredServices.ts @@ -1,5 +1,5 @@ import { useEffect, useState } from 'react'; -import { IService, ServiceStatusEnum } from '../types'; +import { Filters, IService, ServiceStatusEnum } from '../types'; import { getFilteredServicesByKeywords } from '../pages/api/services/request'; import { useChainId } from 'wagmi'; import useAllowedTokens from './useAllowedTokens'; @@ -10,10 +10,7 @@ const useFilteredServices = ( sellerId?: string, searchQuery?: string, numberPerPage?: number, - selectedToken?: string, - minRate?: string, - maxRate?: string, - selectedRatings?: string[], + filters?: Filters, platformId?: string, ): { hasMoreData: boolean; @@ -50,10 +47,7 @@ const useFilteredServices = ( searchQuery, platformId, chainId, - selectedToken, - minRate, - maxRate, - selectedRatings, + filters ); newServices = response?.data?.services; @@ -69,20 +63,19 @@ const useFilteredServices = ( setHasMoreData(true); } } catch (err: any) { - // eslint-disable-next-line no-console console.error(err); } finally { setLoading(false); } }; fetchData(); - }, [numberPerPage, offset, searchQuery, selectedToken, selectedRatings?.length,minRate,maxRate]); + }, [numberPerPage, offset, searchQuery, filters]); const loadMore = () => { numberPerPage ? setOffset(offset + numberPerPage) : ''; }; - return { hasMoreData: hasMoreData, services, loading, loadMore }; + return { hasMoreData, services, loading, loadMore }; }; export default useFilteredServices; diff --git a/src/pages/api/services/request.ts b/src/pages/api/services/request.ts index 82703326..aa355894 100644 --- a/src/pages/api/services/request.ts +++ b/src/pages/api/services/request.ts @@ -11,10 +11,13 @@ export const getFilteredServicesByKeywords = async ( searchQuery?: string, platformId?: string, chainId?: number, - selectedToken?: string, - minRate?: string, - maxRate?: string, - selectedRatings?: string[], + filters?: { + selectedToken?: string; + minRate?: string; + maxRate?: string; + selectedRatings?: string[]; + platformId?: string; + } ): Promise => { try { console.log(allowedTokens, 'allowedTokens'); @@ -29,10 +32,8 @@ export const getFilteredServicesByKeywords = async ( searchQuery, platformId, chainId, - selectedToken, - minRate, - maxRate, - selectedRatings: JSON.stringify(selectedRatings), + ...filters, + selectedRatings: JSON.stringify(filters?.selectedRatings), }, }); } catch (err) { diff --git a/src/types.ts b/src/types.ts index 7c08879d..269b865e 100644 --- a/src/types.ts +++ b/src/types.ts @@ -338,15 +338,26 @@ export interface IMutation { } export interface ServiceFilterPopupProps { + filters: { + minRate: string; + maxRate: string; + selectedToken: string; + selectedRatings: string[]; + }; + setFilters: React.Dispatch>; + handleResetFilter: () => void; +} + +export interface Filters { minRate: string; maxRate: string; selectedToken: string; selectedRatings: string[]; - setMinRate: (value: string) => void; - setMaxRate: (value: string) => void; - setSelectedToken: React.Dispatch>; - setSelectedRatings: React.Dispatch>; - handleResetFilter: () => void; } From 5f415a2bd4e4a37ed5ef78cf0641dd7021d8ef5d Mon Sep 17 00:00:00 2001 From: Gathin Date: Sat, 30 Mar 2024 18:02:13 +0530 Subject: [PATCH 19/20] Post merge fixes --- src/app/api/services/route.ts | 5 +++++ src/components/ServiceList.tsx | 2 +- 2 files changed, 6 insertions(+), 1 deletion(-) diff --git a/src/app/api/services/route.ts b/src/app/api/services/route.ts index e27e15f6..b171988a 100644 --- a/src/app/api/services/route.ts +++ b/src/app/api/services/route.ts @@ -3,6 +3,7 @@ import { getServices } from '../../../queries/services'; export interface ServicesFilters { serviceStatus?: ServiceStatusEnum; + allowedTokens?: any; buyerId?: string | null; sellerId?: string | null; numberPerPage?: number | null; @@ -10,6 +11,10 @@ export interface ServicesFilters { searchQuery?: string | null; platformId?: string | null; keywordList?: string[]; + selectedToken?: string | null; + minRate?: string | null; + maxRate?: string | null; + selectedRatings?: string[] | null; } /** diff --git a/src/components/ServiceList.tsx b/src/components/ServiceList.tsx index d0c69e9c..f7ca3902 100644 --- a/src/components/ServiceList.tsx +++ b/src/components/ServiceList.tsx @@ -31,7 +31,7 @@ function ServiceList() { undefined, searchQuery?.toLocaleLowerCase(), PAGE_SIZE, - filters + filters, builderPlace?.talentLayerPlatformId, ); From 0416b16745b198a6d6667721c9f8b756d345831a Mon Sep 17 00:00:00 2001 From: Gathin Date: Sat, 30 Mar 2024 18:05:22 +0530 Subject: [PATCH 20/20] Post merge fix2 --- src/components/ServiceFilterPopup.tsx | 18 +++++++++++++++++- src/types.ts | 16 ---------------- 2 files changed, 17 insertions(+), 17 deletions(-) diff --git a/src/components/ServiceFilterPopup.tsx b/src/components/ServiceFilterPopup.tsx index febade95..f7c8d298 100644 --- a/src/components/ServiceFilterPopup.tsx +++ b/src/components/ServiceFilterPopup.tsx @@ -1,6 +1,22 @@ import React from 'react'; import useAllowedTokens from '../hooks/useAllowedTokens'; -import { IToken, ServiceFilterPopupProps } from '../types'; +import { IToken } from '../types'; + +interface ServiceFilterPopupProps { + filters: { + minRate: string; + maxRate: string; + selectedToken: string; + selectedRatings: string[]; + }; + setFilters: React.Dispatch>; + handleResetFilter: () => void; +} function ServiceFilterPopup({ filters, setFilters, handleResetFilter }: ServiceFilterPopupProps) { const allowedTokens = useAllowedTokens(); diff --git a/src/types.ts b/src/types.ts index ac9e53a7..8d1fe6bb 100644 --- a/src/types.ts +++ b/src/types.ts @@ -333,22 +333,6 @@ export interface IMutation { domain: string; } -export interface ServiceFilterPopupProps { - filters: { - minRate: string; - maxRate: string; - selectedToken: string; - selectedRatings: string[]; - }; - setFilters: React.Dispatch>; - handleResetFilter: () => void; -} - export interface Filters { minRate: string; maxRate: string;