diff --git a/package-lock.json b/package-lock.json new file mode 100644 index 0000000..032db9d --- /dev/null +++ b/package-lock.json @@ -0,0 +1,246 @@ +{ + "requires": true, + "lockfileVersion": 1, + "dependencies": { + "ansi-regex": { + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-4.1.0.tgz", + "integrity": "sha512-1apePfXM1UOSqw0o9IiFAovVz9M5S1Dg+4TrDwfMewQ6p/rmMueb7tWZjQ1rx4Loy1ArBggoqGpfqqdI4rondg==" + }, + "ansi-styles": { + "version": "3.2.1", + "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz", + "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==", + "requires": { + "color-convert": "^1.9.0" + } + }, + "camelcase": { + "version": "5.3.1", + "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-5.3.1.tgz", + "integrity": "sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==" + }, + "cliui": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/cliui/-/cliui-5.0.0.tgz", + "integrity": "sha512-PYeGSEmmHM6zvoef2w8TPzlrnNpXIjTipYK780YswmIP9vjxmd6Y2a3CB2Ks6/AU8NHjZugXvo8w3oWM2qnwXA==", + "requires": { + "string-width": "^3.1.0", + "strip-ansi": "^5.2.0", + "wrap-ansi": "^5.1.0" + } + }, + "color-convert": { + "version": "1.9.3", + "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz", + "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==", + "requires": { + "color-name": "1.1.3" + } + }, + "color-name": { + "version": "1.1.3", + "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz", + "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=" + }, + "decamelize": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/decamelize/-/decamelize-1.2.0.tgz", + "integrity": "sha1-9lNNFRSCabIDUue+4m9QH5oZEpA=" + }, + "emoji-regex": { + "version": "7.0.3", + "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-7.0.3.tgz", + "integrity": "sha512-CwBLREIQ7LvYFB0WyRvwhq5N5qPhc6PMjD6bYggFlI5YyDgl+0vxq5VHbMOFqLg7hfWzmu8T5Z1QofhmTIhItA==" + }, + "find-up": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/find-up/-/find-up-3.0.0.tgz", + "integrity": "sha512-1yD6RmLI1XBfxugvORwlck6f75tYL+iR0jqwsOrOxMZyGYqUuDhJ0l4AXdO1iX/FTs9cBAMEk1gWSEx1kSbylg==", + "requires": { + "locate-path": "^3.0.0" + } + }, + "get-caller-file": { + "version": "2.0.5", + "resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz", + "integrity": "sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==" + }, + "is-fullwidth-code-point": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-2.0.0.tgz", + "integrity": "sha1-o7MKXE8ZkYMWeqq5O+764937ZU8=" + }, + "js-tokens": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz", + "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==" + }, + "locate-path": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-3.0.0.tgz", + "integrity": "sha512-7AO748wWnIhNqAuaty2ZWHkQHRSNfPVIsPIfwEOWO22AmaoVrWavlOcMR5nzTLNYvp36X220/maaRsrec1G65A==", + "requires": { + "p-locate": "^3.0.0", + "path-exists": "^3.0.0" + } + }, + "lodash": { + "version": "4.17.15", + "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.15.tgz", + "integrity": "sha512-8xOcRHvCjnocdS5cpwXQXVzmmh5e5+saE2QGoeQmbKmRS6J3VQppPOIt0MnmE+4xlZoumy0GPG0D0MVIQbNA1A==" + }, + "loose-envify": { + "version": "1.4.0", + "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz", + "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==", + "requires": { + "js-tokens": "^3.0.0 || ^4.0.0" + } + }, + "object-assign": { + "version": "4.1.1", + "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz", + "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=" + }, + "p-limit": { + "version": "2.3.0", + "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.3.0.tgz", + "integrity": "sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==", + "requires": { + "p-try": "^2.0.0" + } + }, + "p-locate": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-3.0.0.tgz", + "integrity": "sha512-x+12w/To+4GFfgJhBEpiDcLozRJGegY+Ei7/z0tSLkMmxGZNybVMSfWj9aJn8Z5Fc7dBUNJOOVgPv2H7IwulSQ==", + "requires": { + "p-limit": "^2.0.0" + } + }, + "p-try": { + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/p-try/-/p-try-2.2.0.tgz", + "integrity": "sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==" + }, + "path-exists": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-3.0.0.tgz", + "integrity": "sha1-zg6+ql94yxiSXqfYENe1mwEP1RU=" + }, + "prop-types": { + "version": "15.7.2", + "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.7.2.tgz", + "integrity": "sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==", + "requires": { + "loose-envify": "^1.4.0", + "object-assign": "^4.1.1", + "react-is": "^16.8.1" + } + }, + "react-is": { + "version": "16.13.1", + "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", + "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==" + }, + "react-native-dropdown-picker": { + "version": "2.1.8", + "resolved": "https://registry.npmjs.org/react-native-dropdown-picker/-/react-native-dropdown-picker-2.1.8.tgz", + "integrity": "sha512-L60zulJsZHv3XaT8AiQL4VEMc+caXnuvYCqMbzJqkUBcstfN+bD5ulgMft6uvQqcWxBTqK1mrhQDf+zkEPzQEw==", + "requires": { + "prop-types": "^15.7.2", + "react-native-vector-icons": "^6.6.0" + } + }, + "react-native-vector-icons": { + "version": "6.6.0", + "resolved": "https://registry.npmjs.org/react-native-vector-icons/-/react-native-vector-icons-6.6.0.tgz", + "integrity": "sha512-MImKVx8JEvVVBnaShMr7/yTX4Y062JZMupht1T+IEgbqBj4aQeQ1z2SH4VHWKNtWtppk4kz9gYyUiMWqx6tNSw==", + "requires": { + "lodash": "^4.0.0", + "prop-types": "^15.6.2", + "yargs": "^13.2.2" + } + }, + "require-directory": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz", + "integrity": "sha1-jGStX9MNqxyXbiNE/+f3kqam30I=" + }, + "require-main-filename": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/require-main-filename/-/require-main-filename-2.0.0.tgz", + "integrity": "sha512-NKN5kMDylKuldxYLSUfrbo5Tuzh4hd+2E8NPPX02mZtn1VuREQToYe/ZdlJy+J3uCpfaiGF05e7B8W0iXbQHmg==" + }, + "set-blocking": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/set-blocking/-/set-blocking-2.0.0.tgz", + "integrity": "sha1-BF+XgtARrppoA93TgrJDkrPYkPc=" + }, + "string-width": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/string-width/-/string-width-3.1.0.tgz", + "integrity": "sha512-vafcv6KjVZKSgz06oM/H6GDBrAtz8vdhQakGjFIvNrHA6y3HCF1CInLy+QLq8dTJPQ1b+KDUqDFctkdRW44e1w==", + "requires": { + "emoji-regex": "^7.0.1", + "is-fullwidth-code-point": "^2.0.0", + "strip-ansi": "^5.1.0" + } + }, + "strip-ansi": { + "version": "5.2.0", + "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-5.2.0.tgz", + "integrity": "sha512-DuRs1gKbBqsMKIZlrffwlug8MHkcnpjs5VPmL1PAh+mA30U0DTotfDZ0d2UUsXpPmPmMMJ6W773MaA3J+lbiWA==", + "requires": { + "ansi-regex": "^4.1.0" + } + }, + "which-module": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/which-module/-/which-module-2.0.0.tgz", + "integrity": "sha1-2e8H3Od7mQK4o6j6SzHD4/fm6Ho=" + }, + "wrap-ansi": { + "version": "5.1.0", + "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-5.1.0.tgz", + "integrity": "sha512-QC1/iN/2/RPVJ5jYK8BGttj5z83LmSKmvbvrXPNCLZSEb32KKVDJDl/MOt2N01qU2H/FkzEa9PKto1BqDjtd7Q==", + "requires": { + "ansi-styles": "^3.2.0", + "string-width": "^3.0.0", + "strip-ansi": "^5.0.0" + } + }, + "y18n": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/y18n/-/y18n-4.0.0.tgz", + "integrity": "sha512-r9S/ZyXu/Xu9q1tYlpsLIsa3EeLXXk0VwlxqTcFRfg9EhMW+17kbt9G0NrgCmhGb5vT2hyhJZLfDGx+7+5Uj/w==" + }, + "yargs": { + "version": "13.3.2", + "resolved": "https://registry.npmjs.org/yargs/-/yargs-13.3.2.tgz", + "integrity": "sha512-AX3Zw5iPruN5ie6xGRIDgqkT+ZhnRlZMLMHAs8tg7nRruy2Nb+i5o9bwghAogtM08q1dpr2LVoS8KSTMYpWXUw==", + "requires": { + "cliui": "^5.0.0", + "find-up": "^3.0.0", + "get-caller-file": "^2.0.1", + "require-directory": "^2.1.1", + "require-main-filename": "^2.0.0", + "set-blocking": "^2.0.0", + "string-width": "^3.0.0", + "which-module": "^2.0.0", + "y18n": "^4.0.0", + "yargs-parser": "^13.1.2" + } + }, + "yargs-parser": { + "version": "13.1.2", + "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-13.1.2.tgz", + "integrity": "sha512-3lbsNRf/j+A4QuSZfDRA7HRSfWrzO0YjqTJd5kjAq37Zep1CEgaYmrH9Q3GwPiB9cHyd1Y1UwggGhJGoxipbzg==", + "requires": { + "camelcase": "^5.0.0", + "decamelize": "^1.2.0" + } + } + } +} diff --git a/src/android/app/src/main/AndroidManifest.xml b/src/android/app/src/main/AndroidManifest.xml index 58da7c1..e904a85 100644 --- a/src/android/app/src/main/AndroidManifest.xml +++ b/src/android/app/src/main/AndroidManifest.xml @@ -14,7 +14,7 @@ android:name=".MainActivity" android:label="@string/app_name" android:configChanges="keyboard|keyboardHidden|orientation|screenSize" - android:windowSoftInputMode="adjustResize"> + android:windowSoftInputMode="adjustPan"> diff --git a/src/components/matches/CardList.tsx b/src/components/matches/CardList.tsx index 2a02704..d0640e6 100644 --- a/src/components/matches/CardList.tsx +++ b/src/components/matches/CardList.tsx @@ -14,7 +14,7 @@ export interface CardListProps { navigation : NavigationStackProp>, } const CardList : (props : CardListProps) => React.ReactElement = (props: CardListProps) => { - console.log(props) + console.log("asdasdasdadsad" + props) const {matches, type} = props; const cardRenders : Array = matches; return ( diff --git a/src/components/teams/Card.tsx b/src/components/teams/Card.tsx new file mode 100644 index 0000000..c01dafc --- /dev/null +++ b/src/components/teams/Card.tsx @@ -0,0 +1,106 @@ +import React, { ReactNode, ReactComponentElement, ReactElement, useState, useEffect} from 'react'; +import {StyleSheet, TouchableOpacity} from 'react-native'; +import { TouchableHighlight } from 'react-native-gesture-handler'; +import {Text, Block} from '../index'; +import * as theme from '../../constants/theme'; +import { Tooltip} from 'react-native-elements'; +import FontAwesome from 'react-native-vector-icons/FontAwesome'; + + +type ComponentFn = () => JSX.Element; + +export interface CardProps { + key: string, + leftHeader: string | ComponentFn; + rightHeader: string | ComponentFn; + leftBody: string | ComponentFn; + rightBody: string | ComponentFn; + rightContent: Array; + favourite: boolean; +} + +const Card = (props: CardProps) => { + const toggleFavourite = () => { + if (isFavourite) { + setFavouriteButtonStatus(favouriteButtonDisabled); + isFavourite = false; + } + else { + setFavouriteButtonStatus(favouriteButtonEnabled); + isFavourite = true; + } +} + const leftBody = (typeof props.leftBody === "string") ? () => {props.leftBody}: props.leftBody; + const rightHeader = (typeof props.rightHeader === "string") ? () => {props.rightHeader} : props.rightHeader; + const rightBody = (typeof props.rightBody === "string") ? () => {props.rightBody} : props.rightBody; + const favouriteButtonDisabled = + const favouriteButtonEnabled = + const [favouriteButtonStatus, setFavouriteButtonStatus] = useState(favouriteButtonDisabled); + let isFavourite = false; + + useEffect(() => { + if (props.favourite) { + isFavourite = true; + setFavouriteButtonStatus(favouriteButtonEnabled); + } + else { + setFavouriteButtonStatus(favouriteButtonDisabled); + } + }, []); + + + + return ( + + + + Rank + {leftBody()} + + + + {favouriteButtonStatus} + + {rightHeader()} + {rightBody()} + + + + Average placement}> + {props.rightContent[0]} + + Average PPG}> + {props.rightContent[1]} + + Total Awards}> + {props.rightContent[2]} + + Best Skills Score}> + {props.rightContent[3]} + + + + + + ) +}; + +export default Card; + +const styles = StyleSheet.create({ + requests: { + marginTop: -55, + paddingTop: 55 + 20, + paddingHorizontal: 15, + zIndex: -1, + }, + requestsHeader: {paddingHorizontal: 15, paddingBottom: 15}, + request: {padding: 15, marginBottom: 15}, + requestStatus: {marginRight: 20, overflow: 'hidden',}, +}); diff --git a/src/components/teams/CardList.tsx b/src/components/teams/CardList.tsx new file mode 100644 index 0000000..8d26bdb --- /dev/null +++ b/src/components/teams/CardList.tsx @@ -0,0 +1,154 @@ +import React, {useState, useEffect} from 'react'; +import {StyleSheet, TouchableOpacity, ScrollView} from 'react-native'; +import {Picker} from '@react-native-community/picker'; +import {Text, Block} from '../index'; +import {EventData} from '../../store/events/types'; +import Utils from '../../utils'; +import Card from './Card'; +import { parseSync } from '@babel/core'; +import { ThemeColors } from 'react-navigation'; +import * as theme from '../../constants/theme'; +import {NavigationRoute, NavigationParams} from 'react-navigation' + + +const CardList = (props: any) => { + const {events, type, teams, navigation} = props[0]; + const search = props[1].toLowerCase(); + const [sortBy, setSortBy] = useState("recent"); +const handleChange = () => { + if (sortBy === "recent") { + setCards(cardRenders ? ( + cardRenders.filter((team)=> team.teamName.toLowerCase().includes(search)) + .map((cardProps: React.ComponentProps) => ( + navigation.navigate('TeamDetails', {key:cardProps.key})} + > + + + )) + ) : ( + undefined + )); + } + else if (sortBy == "rank-hl"){ + setCards(cardRenders ? ( + cardRenders.sort((a, b) => {return a.leftBody - b.leftBody}).filter((team)=> team.teamName.toLowerCase().includes(search)) + .map((cardProps: React.ComponentProps) => ( + navigation.navigate('TeamDetails', {key:cardProps.key})} + > + + + )) + ) : ( + undefined + )); + } + else if (sortBy == "rank-lh"){ + setCards(cardRenders ? ( + cardRenders.sort((a, b) => {return b.leftBody - a.leftBody}).filter((team)=> team.teamName.toLowerCase().includes(search)) + .map((cardProps: React.ComponentProps) => ( + navigation.navigate('TeamDetails', {key:cardProps.key})} + > + + + )) + ) : ( + undefined + )); + } + else if (sortBy === "fav"){ + setCards(cardRenders ? ( + cardRenders.filter((team)=> team.favourite).filter((team)=> team.teamName.toLowerCase().includes(search)) + .map((cardProps: React.ComponentProps) => ( + navigation.navigate('TeamDetails', {key:cardProps.key})} + > + + + )) + ) : ( + undefined + )); + } +} + useEffect(() => { + handleChange() + }, [search, sortBy]); + + const cardRenders = teams.map((team) => ({ + key:team.key, + teamName:team.teamOrg + team.teamLetter, + leftBody: team.skillsRanking.toString(), + rightHeader: team.teamOrg + team.teamLetter, + rightBody: team.location, + rightContent:[team.averagePlacement, team.averagePPG, team.totalAwards, team.bestSkillsScore], + favourite: team.favourite, + })); + + + const temp = cardRenders ? ( + cardRenders.filter((team) => team.teamName.toLowerCase().includes(search)) + .map((cardProps: React.ComponentProps) => ( + navigation.navigate('TeamDetails', 2)} + > + + + )) + ) : ( + undefined + ) + const [cards, setCards] = useState(temp); + + return ( + + + Recently Scouted Teams + + setSortBy(itemValue)} + > + + + + + + + + + + + {cards} + + + ); +}; + +export default CardList; + +const styles = StyleSheet.create({ + requests: { + marginTop: -55, + paddingTop: 55 + 20, + paddingHorizontal: 15, + zIndex: -1, + }, + requestsHeader: {paddingHorizontal: 20, paddingBottom: 15}, + request: {padding: 20, marginBottom: 15}, + requestStatus: {marginRight: 20, overflow: 'hidden', height: 90}, +}); diff --git a/src/components/teams/index.ts b/src/components/teams/index.ts new file mode 100644 index 0000000..e5bea00 --- /dev/null +++ b/src/components/teams/index.ts @@ -0,0 +1,2 @@ +import CardList from './CardList'; +export{CardList}; \ No newline at end of file diff --git a/src/mocks.ts b/src/mocks.ts index c06c69f..4ebefa9 100644 --- a/src/mocks.ts +++ b/src/mocks.ts @@ -76,4 +76,109 @@ const user = { avatar: require('./assets/avatar.png'), }; -export {matches, events, chart, user}; +const userTeam = { + key:1, + teamOrg: "2381", + teamLetter : "Y", + teamName: "Kernel Bye", + location : "Ottawa, Ontario, Canada", + tournamentsAttended : 5, + averagePlacement : 10, + totalAwards : 1, + averagePPG : 60, + averagePPGAgainst: 45, + bestDriverScore : 90, + bestProgrammingScore: 5, + bestSkillsScore:90, + skillsRanking: 218, +} + +const teams = [ + { + key:1, + teamOrg: "2381", + teamLetter : "W", + teamName: "Kernel Bye ω", + location : "Ottawa, Ontario, Canada", + tournamentsAttended : 4, + averagePlacement : 9, + totalAwards : 1, + averagePPG : 65, + averagePPGAgainst: 35, + bestDriverScore : 130, + bestProgrammingScore: 5, + skillsRanking: 38, + bestSkillsScore:135, + favourite:true, + }, + { + key:2, + teamOrg: "905", + teamLetter : "A", + teamName: "#RIPWORLDS2020", + location : "Toronto, Ontario, Canada", + tournamentsAttended : 6, + averagePlacement : 6, + totalAwards : 5, + averagePPG : 70, + averagePPGAgainst: 40, + bestDriverScore : 120, + bestProgrammingScore:20, + skillsRanking: 28, + bestSkillsScore:125, + favourite:false, + }, + { + key:3, + teamOrg: "5225", + teamLetter : "A", + teamName: "E-Bots PiLons", + location : "Oakville, Ontario, Canada", + tournamentsAttended : 7, + averagePlacement : 1, + totalAwards : 9, + averagePPG : 65, + averagePPGAgainst: 30, + bestDriverScore : 168, + bestProgrammingScore: 90, + skillsRanking: 2, + bestSkillsScore:252, + favourite:false, + }, + { + key:4, + teamOrg: "1104", + teamLetter : "Z", + teamName: "Discobots ζ", + location : "Brampton, Ontario, Canada", + tournamentsAttended : 6, + averagePlacement : 6, + totalAwards : 5, + averagePPG : 60, + averagePPGAgainst: 30, + bestDriverScore : 90, + bestProgrammingScore: 5, + skillsRanking: 100, + bestSkillsScore:95, + favourite:false, + }, + { + key:5, + teamOrg: "4862", + teamLetter : "B", + teamName: "Coltenoids Banana", + location : "Ottawa, Ontario, Canada", + tournamentsAttended : 6, + averagePlacement : 6, + totalAwards : 6, + averagePPG : 80, + averagePPGAgainst: 26, + bestDriverScore : 100, + bestProgrammingScore: 20, + skillsRanking: 87, + bestSkillsScore:120, + favourite:true, + }, +] + +export {matches, events, chart, user, teams, userTeam}; diff --git a/src/navigation/AppNavigator.tsx b/src/navigation/AppNavigator.tsx index a4f066d..81da71f 100644 --- a/src/navigation/AppNavigator.tsx +++ b/src/navigation/AppNavigator.tsx @@ -6,9 +6,10 @@ import * as theme from '../constants/theme'; import Settings from '../screens/Settings'; import Login from '../screens/Login'; import Summary from '../screens/Summary'; - +import Teams from '../screens/Teams'; import FontAwesome5Icon from 'react-native-vector-icons/FontAwesome5'; import IoniconsIcon from 'react-native-vector-icons/Ionicons'; +import teamStack from './teamStack'; const routeConfigs = createMaterialTopTabNavigator({ Summary: {screen: Summary, @@ -18,6 +19,12 @@ import IoniconsIcon from 'react-native-vector-icons/Ionicons'; ) } }, + Teams: {screen: teamStack, + navigationOptions: { + tabBarIcon: () => ( + + ) + }}, Scouting: {screen: EventStack, navigationOptions: { tabBarIcon: () => ( diff --git a/src/navigation/teamStack.tsx b/src/navigation/teamStack.tsx new file mode 100644 index 0000000..f32e3fd --- /dev/null +++ b/src/navigation/teamStack.tsx @@ -0,0 +1,26 @@ +import {createStackNavigator, TransitionPresets} from 'react-navigation-stack'; +import {createAppContainer} from 'react-navigation'; +import Teams from '../screens/Teams'; +import TeamDetails from '../screens/TeamDetails'; + +const TeamStack = createStackNavigator({ + Teams: { + screen: Teams, + navigationOptions: { + headerShown: false, + } + }, + TeamDetails: { + screen: TeamDetails, + navigationOptions: { + headerShown: false, + } + }, +}, +{ + defaultNavigationOptions: { + ...TransitionPresets.SlideFromRightIOS, + }, +}); + +export default createAppContainer(TeamStack); diff --git a/src/package-lock.json b/src/package-lock.json index b0d6b63..ad5417b 100644 --- a/src/package-lock.json +++ b/src/package-lock.json @@ -1781,6 +1781,11 @@ "resolved": "https://registry.npmjs.org/@react-native-community/masked-view/-/masked-view-0.1.5.tgz", "integrity": "sha512-Lj1DzfCmW0f4HnmHtEuX8Yy2f7cnUA8r5KGGUuDDGtQt1so6QJkKeUmsnLo2zYDtsF8due6hvIL06Vdo5xxuLQ==" }, + "@react-native-community/picker": { + "version": "1.6.1", + "resolved": "https://registry.npmjs.org/@react-native-community/picker/-/picker-1.6.1.tgz", + "integrity": "sha512-JuCOtim1tZhB3KoJhbuPj3pFweUnj4XgukktJk0MyUOB8wA3uCEHW+xsGYu8ZDYiyR0M6qXctz7Fz2qYFuTUSQ==" + }, "@react-navigation/bottom-tabs": { "version": "5.2.5", "resolved": "https://registry.npmjs.org/@react-navigation/bottom-tabs/-/bottom-tabs-5.2.5.tgz", @@ -10387,6 +10392,40 @@ "resolved": "https://registry.npmjs.org/react-native-base64/-/react-native-base64-0.0.2.tgz", "integrity": "sha512-Fu/J1a2y0X22EJDWqJR2oEa1fpP4gTFjYxk8ElJdt1Yak3HOXmFJ7EohLVHU2DaQkgmKfw8qb7u/48gpzveRbg==" }, + "react-native-dropdown-picker": { + "version": "2.1.8", + "resolved": "https://registry.npmjs.org/react-native-dropdown-picker/-/react-native-dropdown-picker-2.1.8.tgz", + "integrity": "sha512-L60zulJsZHv3XaT8AiQL4VEMc+caXnuvYCqMbzJqkUBcstfN+bD5ulgMft6uvQqcWxBTqK1mrhQDf+zkEPzQEw==", + "requires": { + "prop-types": "^15.7.2", + "react-native-vector-icons": "^6.6.0" + } + }, + "react-native-elements": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/react-native-elements/-/react-native-elements-2.0.0.tgz", + "integrity": "sha512-xViTU/JlabYX94fDL2iu17gvMtgEOq2lFAToYlU3RBkwb/J13cdwSr8Ti9z6v6Iui4f8S3FjkpRJnFaOsZrK7w==", + "requires": { + "@types/react-native-vector-icons": "^6.4.4", + "color": "^3.1.0", + "deepmerge": "^3.1.0", + "hoist-non-react-statics": "^3.1.0", + "opencollective-postinstall": "^2.0.0", + "prop-types": "^15.7.2", + "react-native-ratings": "^6.5.0", + "react-native-status-bar-height": "^2.2.0" + }, + "dependencies": { + "hoist-non-react-statics": { + "version": "3.3.2", + "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz", + "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==", + "requires": { + "react-is": "^16.7.0" + } + } + } + }, "react-native-dialog": { "version": "5.6.0", "resolved": "https://registry.npmjs.org/react-native-dialog/-/react-native-dialog-5.6.0.tgz", @@ -10530,6 +10569,15 @@ "react-timer-mixin": "^0.13.3" } }, + "react-native-ratings": { + "version": "6.5.0", + "resolved": "https://registry.npmjs.org/react-native-ratings/-/react-native-ratings-6.5.0.tgz", + "integrity": "sha512-YMcfQ7UQCmXGEc/WPlukHSHs5yvckTwjq5fTRk1FG8gaO7fZCNygEUGPuw4Dbvvp3IlsCUn0bOQd63RYsb7NDQ==", + "requires": { + "lodash": "^4.17.4", + "prop-types": "^15.5.10" + } + }, "react-native-reanimated": { "version": "1.4.0", "resolved": "https://registry.npmjs.org/react-native-reanimated/-/react-native-reanimated-1.4.0.tgz", @@ -10576,6 +10624,11 @@ "websql": "^1.0.0" } }, + "react-native-status-bar-height": { + "version": "2.5.0", + "resolved": "https://registry.npmjs.org/react-native-status-bar-height/-/react-native-status-bar-height-2.5.0.tgz", + "integrity": "sha512-sYBCPYA/NapBSHkdm/IVL4ID3LLlIuLqINi2FBDyMkc2BU9pfSGOtkz9yfxoK39mYJuTrlTOQ7mManARUsYDSA==" + }, "react-native-svg": { "version": "10.0.0", "resolved": "https://registry.npmjs.org/react-native-svg/-/react-native-svg-10.0.0.tgz", diff --git a/src/package.json b/src/package.json index 9adf319..4aaa668 100644 --- a/src/package.json +++ b/src/package.json @@ -16,6 +16,7 @@ "@craftzdog/pouchdb-replication-react-native": "^7.0.0", "@react-native-community/cli-platform-android": "^4.5.1", "@react-native-community/masked-view": "^0.1.5", + "@react-native-community/picker": "^1.6.1", "@react-navigation/bottom-tabs": "^5.2.5", "@react-navigation/material-top-tabs": "^5.1.7", "@react-navigation/native": "^5.1.4", @@ -47,6 +48,8 @@ "react": "16.9.0", "react-native": "^0.62.1", "react-native-app-auth": "^5.1.2", + "react-native-dropdown-picker": "^2.1.8", + "react-native-elements": "^2.0.0", "react-native-dialog": "^5.6.0", "react-native-dropdown-menu": "^2.0.0", "react-native-gesture-handler": "^1.5.3", diff --git a/src/screens/Events.tsx b/src/screens/Events.tsx index 6f5c81d..994c94c 100644 --- a/src/screens/Events.tsx +++ b/src/screens/Events.tsx @@ -34,6 +34,7 @@ class Events extends React.Component { public static defaultProps = { type: 'Event', chart: mocks.chart, + user: mocks.user, }; componentDidMount() { this.props.getEvents(); diff --git a/src/screens/TeamDetails.tsx b/src/screens/TeamDetails.tsx new file mode 100644 index 0000000..61e8a76 --- /dev/null +++ b/src/screens/TeamDetails.tsx @@ -0,0 +1,154 @@ +import React from 'react'; +import * as shape from 'd3-shape'; +import {Image, SafeAreaView, StyleSheet, View} from 'react-native'; +import {Block, Text} from '../components'; +import * as theme from '../constants/theme'; +import * as mocks from '../mocks'; +import {Line} from 'react-native-svg'; +import {LineChart, Path} from 'react-native-svg-charts'; +import IoniconsIcon from 'react-native-vector-icons/Ionicons'; +import { TouchableOpacity } from 'react-native-gesture-handler'; +import {NavigationStackProp} from 'react-navigation-stack'; +import {connect} from 'react-redux'; +import {MatchDoc} from '../store/matches/types' +import { NavigationActions, NavigationRoute } from 'react-navigation'; +import {types, actions} from '../store'; +import { TouchableHighlight } from 'react-native-gesture-handler'; +import FontAwesome from 'react-native-vector-icons/FontAwesome'; + + +interface OwnProps { + type: string; + user: any; + navigation:any; + } + +type Props = OwnProps; +export default class TeamDetails extends React.Component { + public static defaultProps = { + user: mocks.user, + }; + + + + toggleFavourite = () => { + if (this.state.isFavourite) { + this.setState({isFavourite:false, favouriteButtonStatus :}); + } + else { + this.setState({isFavourite:true, favouriteButtonStatus :}); + } + } + + state = { + favouriteButtonStatus:, + isFavourite:false, + } + componentDidMount() { + if (mocks.teams.filter((team) => team.key === this.props.navigation.state.params.key)[0].favourite) { + this.state.isFavourite = true; + this.setState(state => ({...state, favouriteButtonStatus :})); + } + } + + renderHeader() { + const {user} = this.props; + return ( + + + this.props.navigation.goBack()} style={styles.back}> + + + + + Team Details + + + + Eshwar C. + 2381Y + + + + + ); + } + + renderCard() { + const teamKey = this.props.navigation.state.params.key; + const team = mocks.teams.filter((team) => team.key === teamKey)[0]; + return ( + + + + {team.teamOrg + team.teamLetter} + {this.state.favouriteButtonStatus} + + {team.teamName} + {team.location} + + + ) + } + + renderStats() { + const teamKey = this.props.navigation.state.params.key; + const team = mocks.teams.filter((team) => team.key === teamKey)[0]; + return( + + Statistics + + + {team.tournamentsAttended} + {team.averagePlacement} + {team.totalAwards} + {team.averagePPG} + {team.averagePPGAgainst} + {team.bestDriverScore} + {team.bestProgrammingScore} + {team.bestSkillsScore} + {team.skillsRanking} + + + Tournaments Attended + Avg. Placement + Awards + Avg. PPG + Avg. PPG Against + Best Driver Skills Score + Best Programming Skills Score + Best Skills Score + Skills World Ranking + + + + ) + } + + render() { + return ( + + {this.renderHeader()} + {this.renderCard()} + {this.renderStats()} + + ); + } +} + +const styles = StyleSheet.create({ + safe: {flex: 1, backgroundColor: theme.colors.primary}, + headerChart: {padding: 30, marginRight:30, marginLeft:30, zIndex: 1, flexDirection: 'row',}, + avatar: { + width: 30, + height: 30, + borderRadius: 30 / 2, + marginRight: 5, + }, + back:{ + width:50, + marginTop:-5, + marginLeft:10, + }, + }); + \ No newline at end of file diff --git a/src/screens/Teams.tsx b/src/screens/Teams.tsx new file mode 100644 index 0000000..2bfc856 --- /dev/null +++ b/src/screens/Teams.tsx @@ -0,0 +1,123 @@ +import React from 'react'; +import {Image, SafeAreaView, StyleSheet, View,} from 'react-native'; +import {Block, Text} from '../components'; +import {CardList} from '../components/teams'; +import * as theme from '../constants/theme'; +import * as mocks from '../mocks'; +import {NavigationTabProp} from 'react-navigation-tabs'; +import {connect} from 'react-redux'; +import {types, actions} from '../store'; +import { TouchableHighlight } from 'react-native-gesture-handler'; +import { SearchBar } from 'react-native-elements'; + +interface OwnProps { + type: string; + user: any; + userTeam:any; + teams:any; + navigation:NavigationTabProp; + } + + type Props = OwnProps; + +export class Teams extends React.Component { + public static defaultProps = { + user: mocks.user, + events: mocks.events, + userTeam: mocks.userTeam, + teams: mocks.teams, + }; + state = { + search: '', + }; + + updateSearch = (search:string) => { + this.setState({ search }); + }; + + + renderHeader() { + const {user} = this.props; + const {userTeam} = this.props; + const {teams} = this.props; + const {search} = this.state; + return ( + + + + + Teams + + + + {user.userName} + {user.team} + + + + + + + + + {userTeam.teamOrg + userTeam.teamLetter} + {userTeam.location} + + + + {userTeam.averagePlacement} + {userTeam.averagePPG} + {userTeam.totalAwards} + {userTeam.bestSkillsScore} + + + Avg. Placement + Avg. PPG + Awards + Best Skills Score + + + + + ); + } + render() { + const {search} = this.state; + let passDown = [{...this.props}, search] + return ( + + {this.renderHeader()} + + + ); + } +} + +const styles = StyleSheet.create({ + safe: {flex: 1, backgroundColor: theme.colors.primary}, + headerChart: {paddingTop: 15, paddingBottom: 15, zIndex: 1}, + avatar: { + width: 30, + height: 30, + borderRadius: 30 / 2, + marginRight: 5, + }, + }); + + const mapStateToProps = (state: types.RootState, ownProps: Props) => { + return { + events: state.events.events, + } + }; + + export default connect(mapStateToProps)(Teams); \ No newline at end of file