WIP - Mission milestone 2

src/components/ServiceFilterPopup.tsx

@@ -0,0 +1,94 @@
+import React from 'react';
+import useAllowedTokens from '../hooks/useAllowedTokens';
+import { IToken, ServiceFilterPopupProps } from '../types';
+
+function ServiceFilterPopup({
+  minRate,
+  maxRate,
+  selectedToken,
+  selectedRatings,
+  setMinRate,
+  setMaxRate,
+  setSelectedToken,
+  setSelectedRatings,
+  handleResetFilter,
+}: ServiceFilterPopupProps) {
+  const allowedTokens = useAllowedTokens();
+
+  const handleReset = () => {
+    handleResetFilter();
+  };
+  return (
+    <div className='absolute bg-base-200 border border-3 border-gray-300 text-base-content p-4 shadow-lg rounded-lg mt-2 ml-2 right-0  z-50'>
+      <div className='flex flex-col'>
+        {/* <label className='text-sm mt-1 font-bold'>Rate</label>
+        <div className='flex flex-row gap-2'>
+          <input
+            type='number'
+            value={minRate}
+            onChange={e => setMinRate(e.target.value)}
+            className='border border-3 border-gray-300 p-2 rounded w-24'
+            placeholder='Min'
+          />
+          <input
+            type='number'
+            value={maxRate}
+            onChange={e => setMaxRate(e.target.value)}
+            className='border border-3 border-gray-300 p-2 rounded w-24'
+            placeholder='Max'
+          />
+        </div> */}
+        <label className='text-sm mt-3 font-bold'>Token</label>
+        <div className='flex flex-col'>
+          {allowedTokens.map((token: IToken) => (
+            <div className='flex items-center gap-2' key={token.address}>
+              <input
+                type='radio'
+                name='token'
+                value={token.address}
+                checked={selectedToken === token.address}
+                onChange={e => {
+                  const tokenName = e.target.value;
+                  if (e.target.checked) {
+                    setSelectedToken(tokenName);
+                  }
+                }}
+              />
+              <label>{token.symbol}</label>
+            </div>
+          ))}
+        </div>
+        {/* <label className='text-sm mt-3 font-bold'>Rating</label>
+        <div className='flex flex-col'>
+          {Array.from({ length: 5 }, (_, i) => i + 1).map((rating, i) => (
+            <div className='flex items-center gap-2' key={i}>
+              <input
+                type='checkbox'
+                value={rating.toString()}
+                checked={selectedRatings.includes(rating.toString())}
+                onChange={e => {
+                  const rating = e.target.value;
+                  setSelectedRatings(prevState =>
+                    prevState.includes(rating)
+                      ? prevState.filter(r => r !== rating)
+                      : [...prevState, rating],
+                  );
+                }}
+              />
+              <label>
+                {rating} star{rating == 1 ? '' : 's'}
+              </label>
+            </div>
+          ))}
+        </div> */}
+      </div>
+      <div className='mt-4'>
+        <button className='px-5 py-2 border border-black rounded-lg' onClick={handleReset}>
+          Reset
+        </button>
+      </div>
+    </div>
+  );
+}
+
+export default ServiceFilterPopup;

src/components/ServiceList.tsx

@@ -6,6 +6,7 @@ import { IService, ServiceStatusEnum } from '../types';
 import Loading from './Loading';
 import ServiceItem from './ServiceItem';
 import SearchServiceButton from './Form/SearchServiceButton';
+import ServiceFilterPopup from './ServiceFilterPopup';
 
 function ServiceList() {
   const { builderPlace } = useContext(BuilderPlaceContext);
@@ -14,14 +15,29 @@ function ServiceList() {
   const query = router.query;
   const searchQuery = query.search as string;
   const [view, setView] = useState(1);
-
+  const [isPopupVisible, setPopupVisible] = useState(false);
+  const [minRate, setMinRate] = useState<string>('');
+  const [maxRate, setMaxRate] = useState<string>('');
+  const [selectedToken, setSelectedToken] = useState<string>('');
+  const [selectedRatings, setSelectedRatings] = useState<string[]>([]);
   const { hasMoreData, services, loading, loadMore } = useFilteredServices(
     ServiceStatusEnum.Opened,
     builderPlace?.owner?.talentLayerId?.toString(),
     undefined,
     searchQuery?.toLocaleLowerCase(),
     PAGE_SIZE,
+    selectedToken,
+    minRate,
+    maxRate,
+    selectedRatings
   );
+  const handleResetFilter = () => {
+    setMinRate('');
+    setMaxRate('');
+    setSelectedToken('');
+    setSelectedRatings([]);
+    setPopupVisible(false);
+  };
 
   return (
     <>
@@ -53,29 +69,58 @@ function ServiceList() {
             Table View
           </button>
 
-          <button className='px-4 py-2 rounded-full ml-auto md:hidden text-base-content border mr-2'>
+          <button
+            className='px-4 py-2 rounded-full ml-auto md:hidden text-base-content border mr-2'
+            onClick={() => setPopupVisible(!isPopupVisible)}>
             Filter
           </button>
         </div>
 
-        <button className='hidden md:block px-4 py-2 rounded-full ml-auto text-base-content border mr-2'>
-          Filter
-        </button>
+        {/* Filter */}
+        <div className='relative ml-auto'>
+          <button
+            className='hidden md:block px-4 py-2 rounded-full ml-auto text-base-content border mr-2'
+            onClick={() => setPopupVisible(!isPopupVisible)}>
+            Filter
+          </button>
+          {isPopupVisible && (
+            <ServiceFilterPopup
+              minRate={minRate}
+              maxRate={maxRate}
+              selectedToken={selectedToken}
+              selectedRatings={selectedRatings}
+              setMinRate={setMinRate}
+              setMaxRate={setMaxRate}
+              setSelectedToken={setSelectedToken}
+              setSelectedRatings={setSelectedRatings}
+              handleResetFilter={handleResetFilter}
+            />
+          )}
+        </div>
 
         <div className='mt-2 md:mt-0 md:mr-2'>
           <SearchServiceButton value={searchQuery} />
         </div>
       </div>
 
-      {view === 1 &&
-        services.map((service: IService, i: number) => (
-          <ServiceItem
-            service={service}
-            embedded={router.asPath.includes('embed/')}
-            key={i}
-            view={view}
-          />
-        ))}
+      {view === 1 && (
+        <>
+          {services.length > 0 ? (
+            services.map((service: IService, i: number) => (
+              <ServiceItem
+                service={service}
+                embedded={router.asPath.includes('embed/')}
+                key={i}
+                view={view}
+              />
+            ))
+          ) : (
+            <p className='text-xl text-base-content font-medium tracking-wider flex justify-center items-center'>
+              No services found
+            </p>
+          )}
+        </>
+      )}
 
       {view === 2 && (
         <table className='min-w-full text-center'>
@@ -89,14 +134,20 @@ function ServiceList() {
             </tr>
           </thead>
           <tbody>
-            {services.map((service: IService, i: number) => (
-              <ServiceItem
-                service={service}
-                embedded={router.asPath.includes('embed/')}
-                key={i}
-                view={view}
-              />
-            ))}
+            {services.length > 0 ? (
+              services.map((service: IService, i: number) => (
+                <ServiceItem
+                  service={service}
+                  embedded={router.asPath.includes('embed/')}
+                  key={i}
+                  view={view}
+                />
+              ))
+            ) : (
+              <span className='text-xl text-base-content font-medium tracking-wider flex justify-center items-center'>
+                No services found
+              </span>
+            )}
           </tbody>
         </table>
       )}
@@ -106,7 +157,7 @@ function ServiceList() {
           <button
             type='submit'
             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()}>
             Load More Posts

src/hooks/useFilteredServices.ts

@@ -2,13 +2,18 @@ import { useEffect, useState } from 'react';
 import { IService, ServiceStatusEnum } from '../types';
 import { getFilteredServicesByKeywords } from '../pages/api/services/request';
 import { useChainId } from 'wagmi';
+import useAllowedTokens from './useAllowedTokens';
 
 const useFilteredServices = (
   serviceStatus?: ServiceStatusEnum,
   buyerId?: string,
   sellerId?: string,
   searchQuery?: string,
   numberPerPage?: number,
+  selectedToken?: string,
+  minRate?: string,
+  maxRate?: string,
+  selectedRatings?: string[],
   platformId?: string,
 ): {
   hasMoreData: boolean;
@@ -21,6 +26,7 @@ const useFilteredServices = (
   const [loading, setLoading] = useState(false);
   const [offset, setOffset] = useState(0);
   const chainId = useChainId();
+  const allowedTokens = useAllowedTokens();
 
   useEffect(() => {
     setServices([]);
@@ -36,13 +42,18 @@ const useFilteredServices = (
 
         response = await getFilteredServicesByKeywords(
           serviceStatus,
+          allowedTokens,
           buyerId,
           sellerId,
           numberPerPage,
           offset,
           searchQuery,
           platformId,
           chainId,
+          selectedToken,
+          minRate,
+          maxRate,
+          selectedRatings,
         );
 
         newServices = response?.data?.services;
@@ -52,7 +63,7 @@ const useFilteredServices = (
         } else {
           setServices([...services, ...newServices]);
         }
-        if (numberPerPage && newServices.length < numberPerPage) {
+        if (newServices && numberPerPage && newServices.length < numberPerPage) {
           setHasMoreData(false);
         } else {
           setHasMoreData(true);
@@ -65,7 +76,7 @@ const useFilteredServices = (
       }
     };
     fetchData();
-  }, [numberPerPage, offset, searchQuery]);
+  }, [numberPerPage, offset, searchQuery, selectedToken, selectedRatings?.length,minRate,maxRate]);
 
   const loadMore = () => {
     numberPerPage ? setOffset(offset + numberPerPage) : '';

src/pages/api/services/filtered.ts

@@ -1,11 +1,10 @@
 import type { NextApiRequest, NextApiResponse } from 'next';
 import { getServices } from '../../../queries/services';
 import keywordFilter from './filter.json';
-import { ServiceStatusEnum } from '../../../types';
+import { IToken, 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,17 +15,26 @@ 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 allowedTokens = JSON.parse(query.allowedTokens as string);
+  const selectedToken = query.selectedToken as string;
+  const minRate = query.minRate as string;
+  const maxRate = query.maxRate as string;
+  const selectedRatings = JSON.parse(query.selectedRatings as string);
   try {
     let response = await getServices(chainId, {
       serviceStatus,
+      allowedTokens,
       buyerId,
       sellerId,
       numberPerPage,
       offset,
       keywordList,
       searchQuery,
       platformId,
+      selectedToken,
+      minRate,
+      maxRate,
+      selectedRatings,
     });
 
     const filteredServices = response?.data?.data?.services;

src/pages/api/services/request.ts

@@ -1,27 +1,38 @@
 import axios from 'axios';
-import { ServiceStatusEnum } from '../../../types';
+import { IToken, ServiceStatusEnum } from '../../../types';
 
 export const getFilteredServicesByKeywords = async (
   serviceStatus?: ServiceStatusEnum,
+  allowedTokens?: IToken[],
   buyerId?: string,
   sellerId?: string,
   numberPerPage?: number,
   offset?: number,
   searchQuery?: string,
   platformId?: string,
   chainId?: number,
+  selectedToken?: string,
+  minRate?: string,
+  maxRate?: string,
+  selectedRatings?: string[],
 ): Promise<any> => {
   try {
+    console.log(allowedTokens, 'allowedTokens');
     return await axios.get('/api/services/filtered', {
       params: {
         serviceStatus,
+        allowedTokens: JSON.stringify(allowedTokens),
         buyerId,
         sellerId,
         numberPerPage,
         offset,
         searchQuery,
         platformId,
         chainId,
+        selectedToken,
+        minRate,
+        maxRate,
+        selectedRatings: JSON.stringify(selectedRatings),
       },
     });
   } catch (err) {