fix: search results

SuperteamDAO · Dec 12, 2022 · 26b4a0c · 26b4a0c
1 parent 22f73be
commit 26b4a0c
Show file tree

Hide file tree

Showing 4 changed files with 67 additions and 21 deletions.
diff --git a/src/components/Dashboard/LeaderBoardWrapper.tsx b/src/components/Dashboard/LeaderBoardWrapper.tsx
@@ -28,6 +28,7 @@ const LeaderBoardWrapper = ({ dashboardData }: propsType) => {
   const [wordEntered, setWordEntered] = React.useState('');
   const [data, setData] = React.useState(dashboardData);
   const [searching, _setSearching] = React.useState(false);
+  const [searchResult, setSearchResult] = React.useState(false);
   const {
     allXPData,
     filteredMembersData,
@@ -45,13 +46,17 @@ const LeaderBoardWrapper = ({ dashboardData }: propsType) => {
     setWordEntered(searchWord);
 
     if (searchWord === '') {
+      setSearchResult(false);
       return setData(dashboardData);
     }
 
+    if (searchWord !== '') {
+      setSearchResult(true);
+    }
+
     const newFilter = dashboardData.filter((value) => {
       return value.name.toLowerCase().includes(searchWord.toLowerCase());
     });
-
     setData(newFilter);
   };
   return (
@@ -276,6 +281,10 @@ const LeaderBoardWrapper = ({ dashboardData }: propsType) => {
                     color: 'superteamGray.400',
                     fontSize: '12px',
                   }}
+                  _focus={{
+                    border: '1px solid',
+                    borderColor: 'superteamBlue.900',
+                  }}
                   h="2rem"
                   pb={'3px'}
                   value={wordEntered}
@@ -313,50 +322,68 @@ const LeaderBoardWrapper = ({ dashboardData }: propsType) => {
                 pb={'3px'}
                 value={wordEntered}
                 onChange={handleSearch}
+                _focus={{
+                  border: '1px solid',
+                  borderColor: 'superteamBlue.900',
+                }}
               />
             </InputGroup>
           </Flex>
           <TabPanels p="0">
             <TabPanel p="0">
-              <EnhancedTable row={allXPData} searching={searching} />
+              <EnhancedTable
+                row={allXPData}
+                searching={searching}
+                searchResult={searchResult}
+              />
             </TabPanel>
             <TabPanel p="0">
-              <EnhancedTable row={filteredMembersData} searching={searching} />
+              <EnhancedTable
+                row={filteredMembersData}
+                searching={searching}
+                searchResult={searchResult}
+              />
             </TabPanel>
             <TabPanel p="0">
               <EnhancedTable
                 row={filteredContributorsData}
                 searching={searching}
+                searchResult={searchResult}
               />
             </TabPanel>{' '}
             <TabPanel p="0">
               <EnhancedTable
                 row={filteredProjectWorkXPData}
                 searching={searching}
+                searchResult={searchResult}
               />
             </TabPanel>
             <TabPanel p="0">
               <EnhancedTable
                 row={filteredIndieWorkXPData}
                 searching={searching}
+                searchResult={searchResult}
               />
             </TabPanel>
             <TabPanel p="0">
               <EnhancedTable
                 row={filteredInternalOperationsXPData}
                 searching={searching}
+                searchResult={searchResult}
               />
             </TabPanel>{' '}
             <TabPanel p="0">
               <EnhancedTable
                 row={filteredWorkingGroupXPData}
                 searching={searching}
+                searchResult={searchResult}
               />
             </TabPanel>
             <TabPanel p="0">
               <EnhancedTable
                 row={filteredStackExchangeXPData}
                 searching={searching}
+                searchResult={searchResult}
               />
             </TabPanel>
             {/* <TabPanel p="0">

diff --git a/src/components/Dashboard/Leaderboard.tsx b/src/components/Dashboard/Leaderboard.tsx
@@ -1,6 +1,7 @@
 import {
   Center,
   Container,
+  HStack,
   Table,
   TableContainer,
   Tbody,
@@ -11,15 +12,16 @@ import {
   useMediaQuery,
 } from '@chakra-ui/react';
 import * as React from 'react';
-import Pagination from '../Pagination';
 import { xpType } from '../../interfaces/xp';
+import Pagination from '../Pagination';
 import TableRow from './Row/TableRow';
 import TableRowMobile from './Row/TableRowMobile';
 //import XPGraph from './graph';
 
 type propsType = {
   row: (xpType | undefined)[];
   searching: boolean;
+  searchResult: boolean;
 };
 
 //todo: for now the data which is received is sorted for the highest overall xp, we need to sort this as per filter_by value for each tab
@@ -30,7 +32,12 @@ type propsType = {
 //   return array.sort(({ development: a }, { development: b }) => a - b);
 // }
 
-export default function EnhancedTable({ row, searching }: propsType) {
+export default function EnhancedTable({
+  row,
+  searching,
+  searchResult,
+}: propsType) {
+  console.log('rowww', row);
   const [currentPage, setCurrentPage] = React.useState<number>(1);
   const [isSmallerThan990] = useMediaQuery('(max-width: 990px)');
 
@@ -55,7 +62,19 @@ export default function EnhancedTable({ row, searching }: propsType) {
 
   return (
     <>
-      <Container fontFamily={'Inter'} maxW="7xl" p="0" mt={'1.6rem'} rounded="6px">
+      <Container
+        fontFamily={'Inter'}
+        maxW="7xl"
+        p="0"
+        mt={'1.6rem'}
+        rounded="6px"
+      >
+        {searchResult && (
+          <HStack mb={'1.6rem'}>
+            <Text>Found</Text>
+            <Text color="superteamGray.300">{row.length} results</Text>
+          </HStack>
+        )}
         <TableContainer>
           <Table variant="unstyled">
             {!isSmallerThan990 && (
@@ -118,13 +137,15 @@ export default function EnhancedTable({ row, searching }: propsType) {
                     key={key}
                     index={(currentPage - 1) * 15 + key}
                     searching={searching}
+                    searchResult={searchResult}
                   />
                 ) : (
                   <TableRow
                     row={row}
                     key={key}
                     index={(currentPage - 1) * 15 + key}
                     searching={searching}
+                    searchResult={searchResult}
                   />
                 )
               )}

diff --git a/src/components/Dashboard/Row/TableRow.tsx b/src/components/Dashboard/Row/TableRow.tsx
@@ -1,20 +1,21 @@
 import { Box, Center, Flex, Icon, Td, Text, Tr } from '@chakra-ui/react';
 import * as React from 'react';
 import { FiChevronDown } from 'react-icons/fi';
+import { xpType } from '../../../interfaces/xp';
 import CustomTag from '../../HOC/Tag.HOC';
 import MedalSVG from '../../Logo/MedalSVG';
 import { ExpandedRow } from './ExpandedRow';
 import GraphColumn from './GraphColumn';
-import { xpType } from '../../../interfaces/xp';
 import RowCategories from './RowCategories';
 
 type propTypes = {
   row: xpType;
   index: number;
   searching: boolean;
+  searchResult: boolean;
 };
 
-const TableRow = ({ row, index, searching }: propTypes) => {
+const TableRow = ({ row, index, searching, searchResult }: propTypes) => {
   const [expandRow, setExpandRow] = React.useState(false);
 
   return (
@@ -33,12 +34,10 @@ const TableRow = ({ row, index, searching }: propTypes) => {
       >
         <Td cursor="" width="2rem" padding="24px">
           <div>
-            {index + 1 <= 3 ? (
-              searching ? (
-                ` ${index + 1}.`
-              ) : (
-                <MedalSVG index={index + 1} />
-              )
+            {searchResult ? (
+              ` ${index + 1}.`
+            ) : index + 1 <= 3 ? (
+              <MedalSVG index={index + 1} />
             ) : (
               ` ${index + 1}.`
             )}

diff --git a/src/components/Dashboard/Row/TableRowMobile.tsx b/src/components/Dashboard/Row/TableRowMobile.tsx
@@ -12,9 +12,10 @@ type propTypes = {
   row: xpType;
   index: number;
   searching: boolean;
+  searchResult: boolean;
 };
 
-const TableRowMobile = ({ row, index, searching }: propTypes) => {
+const TableRowMobile = ({ row, index, searching, searchResult }: propTypes) => {
   const [expandRow, setExpandRow] = React.useState(false);
   return (
     <Tr
@@ -30,12 +31,10 @@ const TableRowMobile = ({ row, index, searching }: propTypes) => {
       }}
     >
       <Flex p="1.2rem" w="100%" gap="2rem" direction="row">
-        {index + 1 <= 3 ? (
-          searching ? (
-            ` ${index + 1}.`
-          ) : (
-            <MedalSVG index={index + 1} />
-          )
+        {searchResult ? (
+          ` ${index + 1}.`
+        ) : index + 1 <= 3 ? (
+          <MedalSVG index={index + 1} />
         ) : (
           ` ${index + 1}.`
         )}