chore: adding a dropdown menu on to filter data by monthly or daily

layer5io · Sep 25, 2023 · c4dcc43 · c4dcc43
1 parent 717d2ca
commit c4dcc43
Show file tree

Hide file tree

Showing 4 changed files with 68 additions and 23 deletions.
diff --git a/leaderboard/src/components/elements/Select/index.tsx b/leaderboard/src/components/elements/Select/index.tsx
@@ -12,9 +12,10 @@ export interface SelectDropdownTypes {
   textTransform?: string;
   loading?: boolean;
   name?: string;
-  label: string;
+  label?: string;
   error?: boolean;
   errorMessage?: string;
+  placeholder?: string;
 }
 
 const SelectDropdown = React.forwardRef(function SelectDropdown(
@@ -31,6 +32,7 @@ const SelectDropdown = React.forwardRef(function SelectDropdown(
     label,
     error,
     errorMessage,
+    placeholder,
     ...rest
   }: SelectDropdownTypes,
   ref
@@ -82,9 +84,12 @@ const SelectDropdown = React.forwardRef(function SelectDropdown(
 
   return (
     <div>
-      <div className="mb-4">
-        <FormLabel htmlFor={name} title={label} />
-      </div>
+      {label && (
+        <div className="mb-4">
+          <FormLabel htmlFor={name} title={label} />
+        </div>
+      )}
+
       {multiSelect ? (
         <Select
           isMulti
@@ -150,7 +155,7 @@ const SelectDropdown = React.forwardRef(function SelectDropdown(
           options={options}
           name={name}
           isLoading={loading}
-          placeholder="Select an Item"
+          placeholder={placeholder || 'Select an Item'}
           {...rest}
         />
       )}

diff --git a/leaderboard/src/components/elements/Table/index.tsx b/leaderboard/src/components/elements/Table/index.tsx
@@ -1,4 +1,4 @@
-import React, { ReactNode, useState } from 'react';
+import React, { ReactNode, SetStateAction, useState } from 'react';
 
 import {
   useReactTable,
@@ -17,12 +17,15 @@ import Paragraph from '../Text/Paragraph';
 import TextField from '../TextField';
 import { search } from '@assets/icons';
 import Image from '../Image';
+import SelectDropdown from '../Select';
 
 interface TableProps {
   data: any;
   columns: any;
   loading: boolean;
   noData?: string;
+  option?: string;
+  setOption?: React.Dispatch<SetStateAction<string>>;
 }
 
 interface PaginationButtonProps {
@@ -38,23 +41,42 @@ const TableComponent: React.FC<TableProps> = ({
   columns,
   loading,
   noData,
+  setOption,
+  option,
 }) => {
-  return <Table {...{ data, columns }} loading={loading} noData={noData} />;
+  return (
+    <Table
+      {...{ data, columns }}
+      loading={loading}
+      noData={noData}
+      setOption={setOption}
+      option={option}
+    />
+  );
 };
 
 function Table({
   data,
   columns,
   loading,
   noData,
+  setOption,
+  option,
 }: {
   data: LeaderBoardData[];
   columns: ColumnDef<LeaderBoardData>[];
   loading: boolean;
   noData?: string;
+  option?: string;
+  setOption?: React.Dispatch<SetStateAction<string>>;
 }) {
   const [globalFilter, setGlobalFilter] = useState<string>('');
   const [sorting, setSorting] = useState<SortingState>([]);
+  const options: { label: string; value: string }[] = [
+    { label: 'Monthly', value: 'monthly' },
+    { label: 'Daily', value: 'daily' },
+  ];
+
   const table = useReactTable({
     data,
     columns,
@@ -81,7 +103,7 @@ function Table({
       <button
         className={`${className} border rounded p-1 text-xs ${
           disabled ? 'bg-primary-100 opacity-60' : 'bg-primary text-white'
-        } `}
+        }`}
         disabled={disabled || loading}
         onClick={onClick}
       >
@@ -91,14 +113,26 @@ function Table({
   };
   return (
     <section>
-      <div className="flex items-center mt-4 mx-4">
-        <TextField
-          value={globalFilter ?? ''}
-          onChange={(event) => setGlobalFilter(event.target.value)}
-          className="p-2 font-lg border border-block"
-          placeholder="Search Member"
-          leftIcon={<Image src={search} alt={'Search'} />}
-        />
+      <div className="grid grid-cols-2 justify-between mt-4 mx-4">
+        <div>
+          <TextField
+            value={globalFilter ?? ''}
+            onChange={(event) => setGlobalFilter(event.target.value)}
+            className="p-2 font-lg border border-block"
+            placeholder="Search Member"
+            leftIcon={<Image src={search} alt={'Search'} />}
+          />
+        </div>
+        <div className="ml-4">
+          <SelectDropdown
+            options={options}
+            defaultValue={option}
+            placeholder='Toggle By'
+            onChange={({ value }: { value: string }) => {
+              setOption!(value);
+            }}
+          />
+        </div>
       </div>
       <article className="flex flex-col border border-light-grey">
         <div className="overflow-x-auto sm:-mx-6 lg:-mx-8">

diff --git a/leaderboard/src/features/Leaderboard/Leaderboard.Module.tsx b/leaderboard/src/features/Leaderboard/Leaderboard.Module.tsx
@@ -5,7 +5,7 @@ import Header from './components/Header';
 import React from 'react';
 
 const HomeModule = () => {
-  const { leaderBoard, leadColumns, loadingLeaderBoard } =
+  const { leaderBoard, leadColumns, loadingLeaderBoard, period, setPeriod } =
     useFetchLeaderBoard();
 
   const _leaderboard = React.useMemo(
@@ -15,13 +15,16 @@ const HomeModule = () => {
         : [],
     [leaderBoard]
   );
+
   return (
     <Section>
       <Header />
       <TableComponent
         data={_leaderboard}
         columns={leadColumns}
         loading={loadingLeaderBoard}
+        option={period}
+        setOption={setPeriod}
       />
     </Section>
   );

diff --git a/leaderboard/src/features/Leaderboard/api.tsx b/leaderboard/src/features/Leaderboard/api.tsx
@@ -5,21 +5,24 @@ import { useQuery } from '@tanstack/react-query';
 import { ColumnDef } from '@tanstack/react-table';
 import { totalPoints } from '@utils/helpers';
 import { axios } from 'lib';
-import React from 'react';
+import React, { useState } from 'react';
 import { toast } from 'react-toastify';
 
 export const useFetchLeaderBoard = () => {
-  const fetchLeaderBoard = async () => {
+  const fetchLeaderBoard = async (period: string) => {
     try {
       const response = await axios.get(
-        `directory_items.json/?order=likes_received&period=monthly`
+        `directory_items.json/?order=likes_received&period=${
+          period || 'monthly'
+        }`
       );
       return response?.data;
     } catch (error) {
       throw error;
     }
   };
 
+  const [period, setPeriod] = useState<string>('monthly');
   const leadColumns = React.useMemo<ColumnDef<LeaderBoardData>[]>(
     () => [
       {
@@ -99,14 +102,14 @@ export const useFetchLeaderBoard = () => {
   );
 
   const { data: leaderBoard, isFetching: loadingLeaderBoard } = useQuery({
-    queryKey: ['leader-board'],
-    queryFn: fetchLeaderBoard,
+    queryKey: ['leader-board', period],
+    queryFn: () => fetchLeaderBoard(period),
     onError: (err) =>
       toast.error(
         typeof err === 'string'
           ? err
           : 'Something went wrong fetching status list'
       ),
   });
-  return { leaderBoard, loadingLeaderBoard, leadColumns };
+  return { leaderBoard, loadingLeaderBoard, leadColumns, period, setPeriod };
 };