Skip to content

Commit

Permalink
feat: new tabs + improvements + claim xp
Browse files Browse the repository at this point in the history
  • Loading branch information
@irffanasiff
irffanasiff committed Nov 23, 2022
1 parent a8cfe1b commit 1e4d7dd
Show file tree
Hide file tree
Showing 13 changed files with 379 additions and 124 deletions.
2 changes: 1 addition & 1 deletion config/general.config.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import { ConfigInterface } from '../src/interfaces/config';
const config: ConfigInterface = {
general: {
name: 'Superteam Reputation',
domain: 'https://reputation.superteam.fun/',
domain: 'reputation.superteam.fun',
twitterHandle: '@SuperteamDAO',
},
};
Expand Down
87 changes: 74 additions & 13 deletions src/components/Dashboard/DashboardHeader.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,14 +1,17 @@
import {
Button,
Container,
Heading,
HStack,
Menu,
MenuButton,
MenuDivider,
MenuItem,
MenuList,
Stack,
Text,
VStack
} from '@chakra-ui/react';
import { useRouter } from 'next/router';

const DashboardHeader = () => {
const router = useRouter();
return (
Expand Down Expand Up @@ -52,18 +55,76 @@ const DashboardHeader = () => {
borderBottom={'2px dashed'}
fontSize={['16px', '17px', '18px']}
>
How this works?
How to earn XP?
</Text>
<Button
padding={['0.9rem 2rem 0.8rem 2rem', '1rem 2.2rem 0.9rem 2.2rem']}
fontSize={['14px', '15px', '16px']}
variant={'primary'}
onClick={() => {
router.push('/claimxp');
}}
>
Submit XP
</Button>
<Menu>
<MenuButton
transition="all 0.2s"
borderRadius="md"
borderWidth="0px"
color="superteamWhite"
display="flex"
flexDir="row"
backgroundColor="superteamBlue.900"
padding={[
'0.9rem 2rem 0.8rem 2rem',
'1rem 2.2rem 0.9rem 2.2rem',
]}
fontSize={['14px', '15px', '16px']}
_hover={{ bg: 'superteamBlue.900' }}
_expanded={{ bg: 'superteamBlue.900' }}
_focus={{ boxShadow: 'outline' }}
>
Claim XP
</MenuButton>
<MenuList
background="superteamGray.900"
border={'1px solid'}
borderColor="superteamBlack.200"
>
<MenuItem
as="a"
href="https://airtable.com/shrOqa7YLUB29Gq3n"
target="_blank"
background="superteamGray.900"
_hover={{ bg: 'superteamBlack.200', color: 'superteamWhite' }}
_focus={{ bg: 'superteamBlack.200', color: 'superteamWhite' }}
>
Project Work
</MenuItem>
<MenuItem
as="a"
href=" https://airtable.com/shrxXBIaztqhDCG79"
target="_blank"
background="superteamGray.900"
_hover={{ bg: 'superteamBlack.200', color: 'superteamWhite' }}
_focus={{ bg: 'superteamBlack.200', color: 'superteamWhite' }}
>
Indie Work
</MenuItem>
{/* <MenuItem
as="a"
href=" https://airtable.com/shrxXBIaztqhDCG79"
target="_blank"
background="superteamGray.900"
_hover={{ bg: 'superteamBlack.200', color: 'superteamWhite' }}
_focus={{ bg: 'superteamBlack.200', color: 'superteamWhite' }}
>
Stack Exchange
</MenuItem> */}
<MenuDivider color="superteamBlack.200" />
<MenuItem
as="a"
href="https://superteam.fun/bounties"
target="_blank"
background="superteamGray.900"
_hover={{ bg: 'superteamBlack.200', color: 'superteamWhite' }}
_focus={{ bg: 'superteamBlack.200', color: 'superteamWhite' }}
>
Open Bounties
</MenuItem>
</MenuList>
</Menu>
</HStack>
</Stack>
</VStack>
Expand Down
147 changes: 87 additions & 60 deletions src/components/Dashboard/LeaderBoardWrapper.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ import {
} from '@chakra-ui/react';
import React from 'react';
import { HiSearch } from 'react-icons/hi';
import { filteredData } from '../../util/filterData';
import EnhancedTable from './Leaderboard';
import { dashboardDataType } from './Row/interfaces/dashboardStore';

Expand All @@ -27,63 +28,17 @@ const LeaderBoardWrapper = ({ dashboardData }: propsType) => {
const [wordEntered, setWordEntered] = React.useState('');
const [data, setData] = React.useState(dashboardData);
const [searching, _setSearching] = React.useState(false);

const ContributorsData = data.map((item) => {
if (item.personType === 'Contributor') {
return item.overallXP.details;
}
});

const ContributorsDataFiltered = ContributorsData.filter(
(item) => item !== undefined
);

const MembersData = data.map((item) => {
if (item.personType === 'Member') {
return item.overallXP.details;
}
});

const filteredMembersData = MembersData.filter((item) => item !== undefined);

const ProjectWorkXPData = data.map((item) => {
if (item.projectWorkXP) {
return item.projectWorkXP;
}
});

// filter the undefined values from the projectworkxp array
const filteredProjectWorkXPData = ProjectWorkXPData.filter(
(item) => item !== undefined
);

const IndieWorkXPData = data.map((item) => {
if (item.indieWorkXP) {
return item.indieWorkXP;
}
});

// filter the undefined values from the indieWorkXP array
const filteredIndieWorkXPData = IndieWorkXPData.filter(
(item) => item !== undefined
);

const workingGroupXPData = data.map((item) => {
if (item.internalOps) {
return item.internalOps;
}
});

// filter the undefined values from the workingGroupXP array
const filteredWorkingGroupXPData = workingGroupXPData.filter(
(item) => item !== undefined
);

const allXPData = data.map((item) => {
if (item.overallXP.details) {
return item.overallXP.details;
}
});
const {
allXPData,
filteredMembersData,
filteredBountiesXPData,
filteredIndieWorkXPData,
filteredContributorsData,
filteredProjectWorkXPData,
filteredWorkingGroupXPData,
filteredStackExchangeXPData,
filteredInternalOperationsXPData,
} = filteredData(data);

const handleSearch = (event: { target: { value: any } }) => {
const searchWord = event.target.value;
Expand Down Expand Up @@ -233,8 +188,62 @@ const LeaderBoardWrapper = ({ dashboardData }: propsType) => {
borderColor: 'superteamBlue.900',
}}
>
Internal Operations
Internal Ops
</Tab>
<Tab
h="3.35rem"
px="0"
py="0.9rem"
fontSize={'14px'}
fontWeight="400"
whiteSpace="nowrap"
_active={{
color: 'superteamWhite',
}}
_selected={{
color: 'superteamWhite',
borderBottom: '2px solid',
borderColor: 'superteamBlue.900',
}}
>
Working Groups
</Tab>
<Tab
h="3.35rem"
px="0"
py="0.9rem"
fontSize={'14px'}
fontWeight="400"
whiteSpace="nowrap"
_active={{
color: 'superteamWhite',
}}
_selected={{
color: 'superteamWhite',
borderBottom: '2px solid',
borderColor: 'superteamBlue.900',
}}
>
Stack Exchange
</Tab>{' '}
{/* <Tab
h="3.35rem"
px="0"
py="0.9rem"
fontSize={'14px'}
fontWeight="400"
whiteSpace="nowrap"
_active={{
color: 'superteamWhite',
}}
_selected={{
color: 'superteamWhite',
borderBottom: '2px solid',
borderColor: 'superteamBlue.900',
}}
>
Bounties
</Tab> */}
<Flex
display={{ base: 'none', md: 'none', lg: 'flex' }}
w="full"
Expand Down Expand Up @@ -315,7 +324,7 @@ const LeaderBoardWrapper = ({ dashboardData }: propsType) => {
</TabPanel>
<TabPanel p="0">
<EnhancedTable
row={ContributorsDataFiltered}
row={filteredContributorsData}
searching={searching}
/>
</TabPanel>{' '}
Expand All @@ -333,10 +342,28 @@ const LeaderBoardWrapper = ({ dashboardData }: propsType) => {
</TabPanel>
<TabPanel p="0">
<EnhancedTable
row={filteredWorkingGroupXPData}
row={filteredInternalOperationsXPData}
searching={searching}
/>
</TabPanel>{' '}
<TabPanel p="0">
<EnhancedTable
row={filteredWorkingGroupXPData}
searching={searching}
/>
</TabPanel>
<TabPanel p="0">
<EnhancedTable
row={filteredStackExchangeXPData}
searching={searching}
/>
</TabPanel>
{/* <TabPanel p="0">
<EnhancedTable
row={filteredBountiesXPData}
searching={searching}
/>
</TabPanel> */}
</TabPanels>
</Tabs>
</VStack>
Expand Down
9 changes: 3 additions & 6 deletions src/components/Dashboard/Leaderboard.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ import {
Th,
Thead,
Tr,
useMediaQuery,
useMediaQuery
} from '@chakra-ui/react';
import * as React from 'react';
import Pagination from '../Pagination';
Expand Down Expand Up @@ -78,31 +78,28 @@ export default function EnhancedTable({ row, searching }: propsType) {
Rank
</Th>
<Th
w="12rem"
textTransform={'capitalize'}
fontWeight="500"
fontSize={'14px'}
>
{' '}
Name
</Th>
<Th
w="8rem"
textTransform={'capitalize'}
fontWeight="500"
fontSize={'14px'}
>
Total
</Th>
<Th
w="18rem"
textTransform={'capitalize'}
fontWeight="500"
fontSize={'14px'}
>
Last 30d
XP Growth
</Th>
<Th
w='full'
textTransform={'capitalize'}
fontWeight="500"
fontSize={'14px'}
Expand Down
7 changes: 4 additions & 3 deletions src/components/Dashboard/Row/GraphColumn.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,6 +52,7 @@ const GraphColumn = ({ row }: propsType) => {
const calculateXpGrowth = () => {
const lastMonth = lastSixMonths[0].xp;
const secondLastMonth = lastSixMonths[1].xp;
if (secondLastMonth === 0) return 0;
const diff = lastMonth - secondLastMonth;
const growth = (diff / secondLastMonth) * 100;
if (growth > 0) {
Expand Down Expand Up @@ -83,7 +84,7 @@ const GraphColumn = ({ row }: propsType) => {
fontWeight="400"
>
<Text color={'superteamWhite'} fontSize={'14px'}>
{lastSixMonths[0].xp}
{Math.round(lastSixMonths[0].xp)}
</Text>
</Tooltip>
<CustomTag colorScheme={'superteamGray'} text="XP" />
Expand Down Expand Up @@ -120,12 +121,12 @@ const GraphColumn = ({ row }: propsType) => {
fontWeight="400"
>
<Text as="span" fontSize={'12px'} color={graphColor}>
({calculateXpGrowth()}%)
({Math.round(calculateXpGrowth())}%)
</Text>
</Tooltip>
</Flex>
</Flex>{' '}
<Chart lastSixMonths={lastSixMonths} graphColor={graphColor} />
{/* <Chart lastSixMonths={lastSixMonths} graphColor={graphColor} /> */}
</Flex>
);
};
Expand Down
Loading

0 comments on commit 1e4d7dd

Please sign in to comment.