diff --git a/config/chakra.config.ts b/config/chakra.config.ts
index d196750..5b2ab67 100644
--- a/config/chakra.config.ts
+++ b/config/chakra.config.ts
@@ -21,6 +21,8 @@ const theme = extendTheme({
superteamGreyLT: {
25: '#FCFCFC',
50: '#F7F7F9', // light mode navbar bg
+ 75: '#000099',
+ 125: '#FBFCFD',
100: '#F2F2F2',
200: '#F0F0F0',
300: '#EBEBEB',
@@ -30,9 +32,10 @@ const theme = extendTheme({
700: '#BDBDBD',
800: '#A3A3A3',
900: '#8A8A8A',
+ 950: 'rgba(0, 34, 214, 0.04)',
},
superteamGreyDT: {
- 25: '',
+ 25: '#CCCCCC',
50: '#252931',
100: '#707070',
200: '#575757',
@@ -43,7 +46,9 @@ const theme = extendTheme({
700: '#383838',
750: '#252931',
800: '#1F1F1F',
+ 850: '#0E1218',
900: '#161A22',
+ 950: '#0E1218',
1000: '#0E1218',
1100: '#040404',
},
diff --git a/src/components/Dashboard/DashboardHeader.tsx b/src/components/Dashboard/DashboardHeader.tsx
index 83fcf82..0a50e96 100644
--- a/src/components/Dashboard/DashboardHeader.tsx
+++ b/src/components/Dashboard/DashboardHeader.tsx
@@ -1,103 +1,92 @@
import {
- Box,
- Center,
- Container,
- Heading,
- HStack,
- Input,
- InputGroup,
- InputLeftElement,
- Stack,
+ Box, Button, Container,
+ Heading, Stack,
useColorModeValue,
- VStack,
+ VStack
} from '@chakra-ui/react';
-import { useRouter } from 'next/router';
-import { useState } from 'react';
-import { BiSearchAlt2 } from 'react-icons/bi';
-import { skillKind } from '../../enums/skill';
import { receivedXPFromAirtableType } from './Row/interfaces/airtableRecievedXP';
type propsType = {
lastSevenDaysData: receivedXPFromAirtableType[];
- handleSearch: (event: { target: { value: any } }) => void;
- wordEntered: string;
};
const DashboardHeader = ({
lastSevenDaysData,
- handleSearch,
- wordEntered,
}: propsType) => {
- const grouped: receivedXPFromAirtableType[] = [];
+ // --- WEEKLY TOP DATA ---- COMMENTED FOR NOW
+ // const grouped: receivedXPFromAirtableType[] = [];
- for (let i = 0; i < lastSevenDaysData.length; i++) {
- const element = lastSevenDaysData[i];
- if (grouped.some((el) => el.name === element.name)) {
- // now check if the skill is same if it is same then add the xp if not then create a new element
- if (
- grouped.some(
- (el) => el.xp.skill.toLowerCase() === element.xp.skill.toLowerCase()
- )
- ) {
- const index = grouped.findIndex((el) => el.name === element.name);
- grouped[index].xp.total_amount += element.xp.total_amount;
- } else {
- // @ts-ignore
- grouped.push({
- name: element.name,
- xp: {
- // @ts-ignore
- skill: element.xp.skill.toLowerCase(),
- date: element.xp.date,
- total_amount: element.xp.total_amount,
- },
- });
- }
- } else {
- // @ts-ignore
- grouped.push({
- name: element.name,
- xp: {
- // @ts-ignore
- skill: element.xp.skill.toLowerCase(),
- date: element.xp.date,
- total_amount: element.xp.total_amount,
- },
- });
- }
- }
+ // for (let i = 0; i < lastSevenDaysData.length; i++) {
+ // const element = lastSevenDaysData[i];
+ // if (grouped.some((el) => el.name === element.name)) {
+ // // now check if the skill is same if it is same then add the xp if not then create a new element
+ // if (
+ // grouped.some(
+ // (el) => el.xp.skill.toLowerCase() === element.xp.skill.toLowerCase()
+ // )
+ // ) {
+ // const index = grouped.findIndex((el) => el.name === element.name);
+ // grouped[index].xp.total_amount += element.xp.total_amount;
+ // } else {
+ // // @ts-ignore
+ // grouped.push({
+ // name: element.name,
+ // xp: {
+ // // @ts-ignore
+ // skill: element.xp.skill.toLowerCase(),
+ // date: element.xp.date,
+ // total_amount: element.xp.total_amount,
+ // },
+ // });
+ // }
+ // } else {
+ // // @ts-ignore
+ // grouped.push({
+ // name: element.name,
+ // xp: {
+ // // @ts-ignore
+ // skill: element.xp.skill.toLowerCase(),
+ // date: element.xp.date,
+ // total_amount: element.xp.total_amount,
+ // },
+ // });
+ // }
+ // }
- console.log('grouped - ', grouped);
- // separate all the skills
- const development = grouped.filter((el) => el.xp.skill === skillKind.DEV);
- const design = grouped.filter((el) => el.xp.skill === skillKind.DESIGN);
- const ops = grouped.filter((el) => el.xp.skill === skillKind.OPS);
- const strategy = grouped.filter((el) => el.xp.skill === skillKind.STRATEGY);
- const video = grouped.filter((el) => el.xp.skill === skillKind.VIDEO);
- const writing = grouped.filter((el) => el.xp.skill === skillKind.WRITING);
- console.log('writing - ', writing);
+ // console.log('grouped - ', grouped);
+ // // separate all the skills
+ // const development = grouped.filter((el) => el.xp.skill === skillKind.DEV);
+ // const design = grouped.filter((el) => el.xp.skill === skillKind.DESIGN);
+ // const ops = grouped.filter((el) => el.xp.skill === skillKind.OPS);
+ // const strategy = grouped.filter((el) => el.xp.skill === skillKind.STRATEGY);
+ // const video = grouped.filter((el) => el.xp.skill === skillKind.VIDEO);
+ // const writing = grouped.filter((el) => el.xp.skill === skillKind.WRITING);
+ // console.log('writing - ', writing);
- const [selectedSkill, setSelectedSkill] = useState(development);
+ // const [selectedSkill, setSelectedSkill] = useState(development);
- const router = useRouter();
+ // const router = useRouter();
+
+ // const lightTextColor = useColorModeValue(
+ // 'superteamGreyLT.800',
+ // 'superteamGreyDT.100'
+ // );
+ // const darkTextColor = useColorModeValue(
+ // 'superteamBlack.100',
+ // 'superteamWhite.100'
+ // );
- const lightTextColor = useColorModeValue(
- 'superteamGreyLT.800',
- 'superteamGreyDT.100'
- );
- const darkTextColor = useColorModeValue(
- 'superteamBlack.100',
- 'superteamWhite.100'
- );
return (
-
-
-
- Superteam{' '}
+ Welcome to the Superteam Reputation System
+ {/* Superteam{' '}
/
{' '}
- XP System
+ XP System */}
-
-
-
-
-
-
-
+
+ In our community, being able to know who to trust and who has proven shipping abilities
+ is essential. Our (work-in-progress) Reputation System captures Member contributions and
+ gives them XP so that Project Leads know which Members are reliable.
+
-
- {/*
+
+
Weekly top :
@@ -265,46 +237,51 @@ const DashboardHeader = ({
justifyContent="space-between"
key={index}
flexDir={'row'}
+ border="1px solid rgba(255, 255, 255, 0.08)"
+ boxShadow="0px 4px 12px rgba(0, 0, 0, 0.48)"
+ padding="6px 14px"
>
-
-
-
+
- {el.name.split('#')[0]}
-
-
- {el.name}
+ {index + 1}. {el.name.split('#')[0]}
+
{el.xp.total_amount}
{' '}
-
+
+ XP
+
);
})}
- */}
+
+
+ {// ------ OLD MENU COMMENTED OUT ----------
+ }
{/*
- */}
-
+ }
+ */}
-
+
);
};
diff --git a/src/components/Dashboard/LeaderBoardWrapper.tsx b/src/components/Dashboard/LeaderBoardWrapper.tsx
index 9ef37c2..0151534 100644
--- a/src/components/Dashboard/LeaderBoardWrapper.tsx
+++ b/src/components/Dashboard/LeaderBoardWrapper.tsx
@@ -1,25 +1,31 @@
import {
Box,
- Container,
- css,
- Flex,
- Heading,
+ Center,
+ Container, Flex, Input,
+ InputGroup,
+ InputLeftElement,
+ Menu,
+ MenuButton,
+ MenuGroup,
+ MenuItem,
+ MenuList,
+ Popover,
+ PopoverContent,
+ PopoverTrigger,
Select,
- TabList,
- TabPanel,
- TabPanels,
- Tabs,
+ Stack, Text,
useColorModeValue,
- VStack,
+ VStack
} from '@chakra-ui/react';
-import React, { useEffect, useState } from 'react';
-import { useSwipeable } from 'react-swipeable';
+import React, { useState } from 'react';
+import { BiFilterAlt, BiSearchAlt2 } from 'react-icons/bi';
import { dashboardDataType } from '../../interfaces/dashboardStore';
import { filteredData } from '../../util/filterData';
import sortingXpDataUtil, { SortByXp } from '../../util/sortingData';
-import CustomTab from './CustomTab';
+import { filterList, sortingFinalXPDataUtil } from '../../util/sortingXPData';
import EnhancedTable from './Leaderboard';
-const scrollIntoView = require('scroll-into-view');
+import { xpType } from './Row/interfaces/xp';
+// const scrollIntoView = require('scroll-into-view');
type propsType = {
dashboardData: dashboardDataType[];
@@ -28,16 +34,17 @@ type propsType = {
setSortOrder: React.Dispatch>;
};
-const tabsList = [
- 'Everyone',
- 'Members',
- 'Contributors',
- 'Project Work',
- 'Indie Work',
- 'Internal Ops',
- 'Working Groups',
- 'Stack Exchange',
-];
+// ---- BROWSE BY NAVIGATION ITEM (OLD) ----
+// const tabsList = [
+// 'Everyone',
+// 'Members',
+// 'Contributors',
+// 'Project Work',
+// 'Indie Work',
+// 'Internal Ops',
+// 'Working Groups',
+// 'Stack Exchange',
+// ];
const LeaderBoardWrapper = ({
dashboardData,
@@ -45,31 +52,69 @@ const LeaderBoardWrapper = ({
sortOrder,
setSortOrder,
}: propsType) => {
- const [searching, _setSearching] = React.useState(false);
- const [activeTab, setActiveTab] = useState(0);
const {
allXPData,
- filteredMembersData,
- filteredBountiesXPData,
- filteredIndieWorkXPData,
- filteredContributorsData,
- filteredProjectWorkXPData,
- filteredWorkingGroupXPData,
- filteredStackExchangeXPData,
- filteredInternalOperationsXPData,
+ // filteredMembersData,
+ // filteredBountiesXPData,
+ // filteredIndieWorkXPData,
+ // filteredContributorsData,
+ // filteredProjectWorkXPData,
+ // filteredWorkingGroupXPData,
+ // filteredStackExchangeXPData,
+ // filteredInternalOperationsXPData,
} = filteredData(sortingXpDataUtil(dashboardData, sortOrder));
- useEffect(() => {
- const tabElement = document.getElementsByClassName(
- `tab-${tabsList[activeTab]}`
- );
- scrollIntoView(tabElement[0]);
- }, [activeTab]);
+ // const [searching, _setSearching] = React.useState(false);
+ // const [activeTab, setActiveTab] = useState(0);
+
+ const [skillXPData, setSkillXPData] = useState<(xpType | undefined)[]>(allXPData);
+ const [selectedSkill, setSelectedSkill] = useState("");
+ const [searchQuery, setSearchQuery] = useState("");
+
+ // HANDLERS FOR OLD TABLE DISPLAY
+ // useEffect(() => {
+ // const tabElement = document.getElementsByClassName(
+ // `tab-${tabsList[activeTab]}`
+ // );
+ // scrollIntoView(tabElement[0]);
+ // }, [activeTab]);
+
+ // const handlers = useSwipeable({
+ // onSwipedRight: () => setActiveTab((prev) => (prev > 0 ? prev - 1 : prev)),
+ // onSwipedLeft: () => setActiveTab((prev) => (prev < 7 ? prev + 1 : prev)),
+ // });
+
+ const filterXPBySkills = (skillIndex: number) => {
+ let selected = filterList[skillIndex];
+ let filteredXP = sortingFinalXPDataUtil(allXPData as xpType[], sortOrder, selected);
+
+ setSelectedSkill(selected);
+ setSkillXPData(filteredXP)
+ }
+
+ const handleSkillRemove = () => {
+ setSelectedSkill("");
+ setSkillXPData(allXPData);
+ }
+
+ const handleSort = (e: any) => {
+ setSortOrder(e.target.value as SortByXp);
+ const x = skillXPData.slice(0) as xpType[];
+ setSkillXPData(sortingFinalXPDataUtil(x, e.target.value as SortByXp, selectedSkill));
+ }
+
+ const handleUserSearch = (e: any) => {
+ const searchName = e.target.value;
+ let skillXPDataFiltered = allXPData.filter(value => value?.name.toLowerCase().includes(searchName.toLowerCase()));
+ skillXPDataFiltered = sortingFinalXPDataUtil(skillXPDataFiltered as xpType[], sortOrder, selectedSkill);
+
+ setSkillXPData(skillXPDataFiltered);
+ setSearchQuery(e.target.value);
+ }
+
+ const skillBackgroundColor = useColorModeValue("rgba(0, 0, 0, 0.08)", "rgba(255, 255, 255, 0.15)");
+ const skillBorderColor = useColorModeValue("1px solid rgba(0, 0, 0, 0.24)", "1px solid rgba(255, 255, 255, 0.4)")
- const handlers = useSwipeable({
- onSwipedRight: () => setActiveTab((prev) => (prev > 0 ? prev - 1 : prev)),
- onSwipedLeft: () => setActiveTab((prev) => (prev < 7 ? prev + 1 : prev)),
- });
return (
-
-
- Browse By
-
-
+ setActiveTab(index)}
- borderBottom={'1px solid'}
- borderColor={useColorModeValue(
- 'superteamGreyLT.500',
- 'superteamGreyDT.50'
- )}
- onDrag={() => {
- //todo: add draggable tabs for mobile ( on right drag tab should change to the next right tab ) console.log('tab dragged');
- // to implement it find a function or hook that can be changed to change the index of current tab
+ padding={{ base: 0, md: "1rem" }}
+ borderRadius="6px"
+ boxShadow={{
+ base: "none",
+ md: "0px 4px 8px rgba(0, 0, 0, 0.08)"
}}
+
>
-
+ Superteam XP System
+
+
- {tabsList.map((tabName, index) => (
-
- ))}
-
- {/*
- Bounties
- */}
+
+
+
+
+
+ {
+ handleUserSearch(e);
+ }}
+ w={{ base: "92vw", md: "auto" }}
+ />
+
+
+
+ {selectedSkill ?
+ Skill: {selectedSkill}
+ x
+ : ""}
+
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- {' '}
-
-
-
-
-
-
-
-
- {' '}
-
-
-
-
-
-
- {/*
-
- */}
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+ // OLD DATA FOR SORTING
+ //
+ //
+ // Browse By
+ //
+ // setActiveTab(index)}
+ // borderBottom={'1px solid'}
+ // borderColor={useColorModeValue(
+ // 'superteamGreyLT.500',
+ // 'superteamGreyDT.50'
+ // )}
+ // onDrag={() => {
+ // //todo: add draggable tabs for mobile ( on right drag tab should change to the next right tab ) console.log('tab dragged');
+ // // to implement it find a function or hook that can be changed to change the index of current tab
+ // }}
+ // >
+ //
+ // {tabsList.map((tabName, index) => (
+ //
+ // ))}
+
+ // {/*
+ // Bounties
+ // */}
+
+ //
+ //
+ //
+ //
+ //
+ //
+ //
+ //
+ //
+ //
+ //
+ //
+ //
+ //
+ //
+ // {' '}
+ //
+ //
+ //
+ //
+ //
+ //
+ //
+ //
+ // {' '}
+ //
+ //
+ //
+ //
+ //
+ //
+ // {/*
+ //
+ // */}
+ //
+ //
+ //
);
};
diff --git a/src/components/Navigation/Header.tsx b/src/components/Navigation/Header.tsx
index 5eeeac6..2666f61 100644
--- a/src/components/Navigation/Header.tsx
+++ b/src/components/Navigation/Header.tsx
@@ -1,14 +1,19 @@
import {
+ Box,
Button,
Container,
Flex,
Icon,
Menu,
+ MenuButton,
+ MenuItem,
+ MenuList,
Stack,
useColorMode,
useColorModeValue
} from '@chakra-ui/react';
import Link from 'next/link';
+import { BiMenu } from 'react-icons/bi';
import { BsFillMoonFill, BsSunFill } from 'react-icons/bs';
import LogoImg from '../Logo/LogoImg';
@@ -19,14 +24,18 @@ export default function Header() {
- Projects
- Bounties
-
-
+
+
+ {/* Mobile Menu */}
+
+
+
-
+
);
}
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index ad5b999..8215a00 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -51,9 +51,7 @@ export default function Home(props: {
{
- if (item.personType === 'Contributor') {
- return item.overallXP.details;
- }
- });
-
- const filteredContributorsData = 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;
- }
- });
-
- const filteredIndieWorkXPData = IndieWorkXPData.filter(
- (item) => item !== undefined
- );
-
- const workingGroupXPData = data.map((item) => {
- if (item.workingGroupsXP) {
- return item.workingGroupsXP;
- }
- });
-
- const filteredWorkingGroupXPData = workingGroupXPData.filter(
- (item) => item !== undefined
- );
-
- const internalOperationsXPData = data.map((item) => {
- if (item.internalOpsXP) {
- return item.internalOpsXP;
- }
- });
- const filteredInternalOperationsXPData = internalOperationsXPData.filter(
- (item) => item !== undefined
- );
-
- const stackExchangeXPData = data.map((item) => {
- if (item.stackExchangeXP) {
- return item.stackExchangeXP;
- }
- });
- const filteredStackExchangeXPData = stackExchangeXPData.filter(
- (item) => item !== undefined
- );
-
- const bountiesXPData = data.map((item) => {
- if (item.stackExchangeXP) {
- return item.stackExchangeXP;
- }
- });
- const filteredBountiesXPData = bountiesXPData.filter(
- (item) => item !== undefined
- );
+ // const ContributorsData = data.map((item) => {
+ // if (item.personType === 'Contributor') {
+ // return item.overallXP.details;
+ // }
+ // });
+
+ // const filteredContributorsData = 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;
+ // }
+ // });
+
+ // const filteredIndieWorkXPData = IndieWorkXPData.filter(
+ // (item) => item !== undefined
+ // );
+
+ // const workingGroupXPData = data.map((item) => {
+ // if (item.workingGroupsXP) {
+ // return item.workingGroupsXP;
+ // }
+ // });
+
+ // const filteredWorkingGroupXPData = workingGroupXPData.filter(
+ // (item) => item !== undefined
+ // );
+
+ // const internalOperationsXPData = data.map((item) => {
+ // if (item.internalOpsXP) {
+ // return item.internalOpsXP;
+ // }
+ // });
+ // const filteredInternalOperationsXPData = internalOperationsXPData.filter(
+ // (item) => item !== undefined
+ // );
+
+ // const stackExchangeXPData = data.map((item) => {
+ // if (item.stackExchangeXP) {
+ // return item.stackExchangeXP;
+ // }
+ // });
+ // const filteredStackExchangeXPData = stackExchangeXPData.filter(
+ // (item) => item !== undefined
+ // );
+
+ // const bountiesXPData = data.map((item) => {
+ // if (item.stackExchangeXP) {
+ // return item.stackExchangeXP;
+ // }
+ // });
+ // const filteredBountiesXPData = bountiesXPData.filter(
+ // (item) => item !== undefined
+ // );
const allXPData_data = data.map((item) => {
if (item.overallXP.details) {
@@ -90,13 +90,13 @@ export function filteredData(data: dashboardDataType[]) {
return {
allXPData,
- filteredMembersData,
- filteredBountiesXPData,
- filteredIndieWorkXPData,
- filteredContributorsData,
- filteredProjectWorkXPData,
- filteredWorkingGroupXPData,
- filteredStackExchangeXPData,
- filteredInternalOperationsXPData,
+ // filteredMembersData,
+ // filteredBountiesXPData,
+ // filteredIndieWorkXPData,
+ // filteredContributorsData,
+ // filteredProjectWorkXPData,
+ // filteredWorkingGroupXPData,
+ // filteredStackExchangeXPData,
+ // filteredInternalOperationsXPData,
};
}
diff --git a/src/util/sortingData.ts b/src/util/sortingData.ts
index 450eb6c..14b1c9d 100644
--- a/src/util/sortingData.ts
+++ b/src/util/sortingData.ts
@@ -1,7 +1,7 @@
import { dashboardDataType } from '../interfaces/dashboardStore';
export enum SortByXp {
- lowToHighXp = 'Xp Low to High',
- highToLowXp = 'Xp High to Low',
+ lowToHighXp = 'XP Low to High',
+ highToLowXp = 'XP High to Low',
}
const sortingXpDataUtil = (data: dashboardDataType[], order: SortByXp) => {
switch (order) {
diff --git a/src/util/sortingXPData.ts b/src/util/sortingXPData.ts
new file mode 100644
index 0000000..881d2b5
--- /dev/null
+++ b/src/util/sortingXPData.ts
@@ -0,0 +1,46 @@
+import { xpType } from '../components/Dashboard/Row/interfaces/xp';
+import { SortByXp } from './sortingData';
+
+export const filterList = [
+ 'Operations',
+ 'Strategy',
+ 'Development',
+ 'Videography',
+ 'Design',
+ 'Writing',
+];
+
+export const sortingFinalXPDataUtil = (
+ data: xpType[],
+ order: SortByXp,
+ selectedSkill: string
+) => {
+ if (selectedSkill) {
+ let filteredXP = data.filter((value) =>
+ value?.skills.some((item) => item.skill === selectedSkill.toLowerCase())
+ ) as xpType[];
+
+ return filteredXP.sort((a, b) => {
+ let aIndex = a.skills.findIndex(
+ (item) => item.skill === selectedSkill.toLowerCase()
+ ) as number;
+ let bIndex = b.skills.findIndex(
+ (item) => item.skill === selectedSkill.toLowerCase()
+ ) as number;
+
+ if (order === SortByXp.highToLowXp) {
+ return b.skills[bIndex].amount - a.skills[aIndex].amount;
+ } else {
+ return a.skills[aIndex].amount - b.skills[bIndex].amount;
+ }
+ });
+ } else {
+ return data.sort((a, b) => {
+ if (order === SortByXp.highToLowXp) {
+ return b.total_amount - a.total_amount;
+ } else {
+ return a.total_amount - b.total_amount;
+ }
+ });
+ }
+};