From 2bc79408146b8a19b8df5f548efbe96d8fcaad3d Mon Sep 17 00:00:00 2001 From: Sendou Date: Mon, 24 Feb 2020 01:26:36 +0200 Subject: [PATCH] team page headers --- frontend-react/package-lock.json | 44 ++++---- frontend-react/package.json | 6 +- .../src/components/team/AddResultModal.tsx | 1 - .../src/components/team/LogoHeader.tsx | 57 +++++++++- .../src/components/team/Results.tsx | 106 +++++++++++++----- .../src/components/team/TeamPage.tsx | 10 +- .../src/graphql/queries/searchForTeam.ts | 6 + frontend-react/src/types.ts | 6 + graphql-schemas/team.js | 8 ++ mongoose-models/team.js | 6 + package-lock.json | 6 +- package.json | 2 +- 12 files changed, 195 insertions(+), 63 deletions(-) diff --git a/frontend-react/package-lock.json b/frontend-react/package-lock.json index 44d0c02a1..1f325f44d 100644 --- a/frontend-react/package-lock.json +++ b/frontend-react/package-lock.json @@ -1737,9 +1737,9 @@ } }, "@testing-library/dom": { - "version": "6.11.0", - "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-6.11.0.tgz", - "integrity": "sha512-Pkx9LMIGshyNbfmecjt18rrAp/ayMqGH674jYER0SXj0iG9xZc+zWRjk2Pg9JgPBDvwI//xGrI/oOQkAi4YEew==", + "version": "6.12.2", + "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-6.12.2.tgz", + "integrity": "sha512-KCnvHra5fV+wDxg3wJObGvZFxq7v1DJt829GNFLuRDjKxVNc/B5AdsylNF5PMHFbWMXDsHwM26d2NZcZO9KjbQ==", "requires": { "@babel/runtime": "^7.6.2", "@sheerun/mutationobserver-shim": "^0.3.2", @@ -1883,19 +1883,19 @@ } }, "@testing-library/react": { - "version": "9.4.0", - "resolved": "https://registry.npmjs.org/@testing-library/react/-/react-9.4.0.tgz", - "integrity": "sha512-XdhDWkI4GktUPsz0AYyeQ8M9qS/JFie06kcSnUVcpgOwFjAu9vhwR83qBl+lw9yZWkbECjL8Hd+n5hH6C0oWqg==", + "version": "9.4.1", + "resolved": "https://registry.npmjs.org/@testing-library/react/-/react-9.4.1.tgz", + "integrity": "sha512-sta3ui24HPgW92quHyQj6gpOkNgLNx8BX/QOU4k1bddo43ZdqlGwmzCYwL93bExfhergwiau+IzBGl7TCsSFeA==", "requires": { - "@babel/runtime": "^7.7.6", + "@babel/runtime": "^7.8.3", "@testing-library/dom": "^6.11.0", "@types/testing-library__react": "^9.1.2" }, "dependencies": { "@babel/runtime": { - "version": "7.8.3", - "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.8.3.tgz", - "integrity": "sha512-fVHx1rzEmwB130VTkLnxR+HmxcTjGzH12LYQcFFoBwakMd3aOMD4OsRN7tGG/UOYE2ektgFrS8uACAoRk1CY0w==", + "version": "7.8.4", + "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.8.4.tgz", + "integrity": "sha512-neAp3zt80trRVBI1x0azq6c57aNBqYZH8KhMm3TaB7wEI5Q4A2SHfBHE8w9gOhI/lrqxtEbXZgQIrHP+wvSGwQ==", "requires": { "regenerator-runtime": "^0.13.2" } @@ -2142,9 +2142,9 @@ } }, "@types/react": { - "version": "16.9.21", - "resolved": "https://registry.npmjs.org/@types/react/-/react-16.9.21.tgz", - "integrity": "sha512-xpmenCMeBwJRct8vmIfczlgdOXWIWASoOM857kxKfHlVQvDltRh7IFRVfGws79iO2jkNPXOeWREyKoClzhBaQA==", + "version": "16.9.22", + "resolved": "https://registry.npmjs.org/@types/react/-/react-16.9.22.tgz", + "integrity": "sha512-7OSt4EGiLvy0h5R7X+r0c7S739TCU/LvWbkNOrm10lUwNHe7XPz5OLhLOSZeCkqO9JSCly1NkYJ7ODTUqVnHJQ==", "requires": { "@types/prop-types": "*", "csstype": "^2.2.0" @@ -2216,9 +2216,9 @@ } }, "@types/testing-library__dom": { - "version": "6.11.1", - "resolved": "https://registry.npmjs.org/@types/testing-library__dom/-/testing-library__dom-6.11.1.tgz", - "integrity": "sha512-ImChHtQqmjwraRLqBC2sgSQFtczeFvBmBcfhTYZn/3KwXbyD07LQykEQ0xJo7QHc1GbVvf7pRyGaIe6PkCdxEw==", + "version": "6.12.1", + "resolved": "https://registry.npmjs.org/@types/testing-library__dom/-/testing-library__dom-6.12.1.tgz", + "integrity": "sha512-cgqnEjxKk31tQt29j4baSWaZPNjQf3bHalj2gcHQTpW5SuHRal76gOpF0vypeEo6o+sS5inOvvNdzLY0B3FB2A==", "requires": { "pretty-format": "^24.3.0" } @@ -11817,9 +11817,9 @@ } }, "react-datepicker": { - "version": "2.12.1", - "resolved": "https://registry.npmjs.org/react-datepicker/-/react-datepicker-2.12.1.tgz", - "integrity": "sha512-Y5xIim/tzHZ0M+bo6EAZZX5KZ7ov+N6VceSM981bS9dNDoD+ezUAT1/DpeSRXxmFBrNnd5dW4BhlgE36ZzkfLQ==", + "version": "2.13.0", + "resolved": "https://registry.npmjs.org/react-datepicker/-/react-datepicker-2.13.0.tgz", + "integrity": "sha512-vUp3tGGT8SwJX5c6hKnhSJFOFjjBgwKQUv9nl7dkhe/viraxrihLikDr/KVDRGYyj/Q1MBvTpOog4fsSly9o9A==", "requires": { "classnames": "^2.2.6", "date-fns": "^2.0.1", @@ -14710,9 +14710,9 @@ } }, "wait-for-expect": { - "version": "3.0.1", - "resolved": "https://registry.npmjs.org/wait-for-expect/-/wait-for-expect-3.0.1.tgz", - "integrity": "sha512-3Ha7lu+zshEG/CeHdcpmQsZnnZpPj/UsG3DuKO8FskjuDbkx3jE3845H+CuwZjA2YWYDfKMU2KhnCaXMLd3wVw==" + "version": "3.0.2", + "resolved": "https://registry.npmjs.org/wait-for-expect/-/wait-for-expect-3.0.2.tgz", + "integrity": "sha512-cfS1+DZxuav1aBYbaO/kE06EOS8yRw7qOFoD3XtjTkYvCvh3zUvNST8DXK/nPaeqIzIv3P3kL3lRJn8iwOiSag==" }, "walker": { "version": "1.0.7", diff --git a/frontend-react/package.json b/frontend-react/package.json index 60a8a1d63..9adc4fa06 100644 --- a/frontend-react/package.json +++ b/frontend-react/package.json @@ -11,12 +11,12 @@ "@rehooks/local-storage": "^2.2.2", "@sendou/react-sketch": "^0.5.2", "@testing-library/jest-dom": "^5.1.1", - "@testing-library/react": "^9.4.0", + "@testing-library/react": "^9.4.1", "@testing-library/user-event": "^8.1.3", "@types/jest": "^25.1.3", "@types/node": "^13.7.4", "@types/reach__router": "^1.3.0", - "@types/react": "^16.9.21", + "@types/react": "^16.9.22", "@types/react-color": "^3.0.1", "@types/react-datepicker": "^2.11.0", "@types/react-dom": "^16.9.5", @@ -29,7 +29,7 @@ "node-sass": "^4.13.1", "react": "^16.12.0", "react-color": "^2.18.0", - "react-datepicker": "^2.12.1", + "react-datepicker": "^2.13.0", "react-dom": "^16.12.0", "react-draggable": "^4.2.0", "react-helmet-async": "^1.0.4", diff --git a/frontend-react/src/components/team/AddResultModal.tsx b/frontend-react/src/components/team/AddResultModal.tsx index 421ddfbd6..1d55680bf 100644 --- a/frontend-react/src/components/team/AddResultModal.tsx +++ b/frontend-react/src/components/team/AddResultModal.tsx @@ -66,7 +66,6 @@ const AddResultModal: React.FC = ({ closeModal }) => { }, [result]) const handleChange = (newValueObject: Partial) => { - console.log("newValue", newValueObject) setResult({ ...result, ...newValueObject }) } diff --git a/frontend-react/src/components/team/LogoHeader.tsx b/frontend-react/src/components/team/LogoHeader.tsx index 5263b6b55..0c8951ece 100644 --- a/frontend-react/src/components/team/LogoHeader.tsx +++ b/frontend-react/src/components/team/LogoHeader.tsx @@ -3,14 +3,30 @@ import UserAvatar from "../common/UserAvatar" import Box from "../elements/Box" import { useContext } from "react" import MyThemeContext from "../../themeContext" +import { Icon } from "@chakra-ui/core" +import { FaTwitter, FaTrophy, FaDiscord } from "react-icons/fa" +import { Link } from "@reach/router" +import { months } from "../../utils/lists" interface LogoHeaderProps { name: string twitter_name?: string + challonge_name?: string + discord_url?: string + founded?: { + month: number + year: number + } } -const LogoHeader: React.FC = ({ name, twitter_name }) => { - const { themeColorWithShade } = useContext(MyThemeContext) +const LogoHeader: React.FC = ({ + name, + twitter_name, + challonge_name, + discord_url, + founded, +}) => { + const { themeColorWithShade, grayWithShade } = useContext(MyThemeContext) return ( @@ -18,13 +34,46 @@ const LogoHeader: React.FC = ({ name, twitter_name }) => { fontFamily="'Pacifico', cursive" fontWeight="light" fontSize="48px" - borderBottomColor={themeColorWithShade} - borderBottomWidth="5px" w="100%" textAlign="center" > {name} + {founded && ( + + Est. {months[founded.month]} {founded.year} + + )} + + {twitter_name && ( + + + {twitter_name} + + + )} + {challonge_name && ( + + + Challonge + + + )} + {discord_url && ( + + + Discord + + + )} + ) } diff --git a/frontend-react/src/components/team/Results.tsx b/frontend-react/src/components/team/Results.tsx index 9f076c9d1..54bf02616 100644 --- a/frontend-react/src/components/team/Results.tsx +++ b/frontend-react/src/components/team/Results.tsx @@ -6,14 +6,35 @@ import Box from "../elements/Box" import { TournamentResult } from "../../types" import { medalEmoji } from "../../assets/imageImports" import MyThemeContext from "../../themeContext" +import { IconButton } from "@chakra-ui/core" +import { FaTwitter } from "react-icons/fa" +import TweetEmbed from "react-tweet-embed" interface ResultsProps { results: TournamentResult[] canAddResults: boolean } +function ordinal_suffix_of(i: number) { + var j = i % 10, + k = i % 100 + if (j === 1 && k !== 11) { + return "st" + } + if (j === 2 && k !== 12) { + return "nd" + } + if (j === 3 && k !== 13) { + return "rd" + } + return "th" +} + const Results: React.FC = ({ results, canAddResults }) => { const [showModal, setShowModal] = useState(false) + const [expandedTweets, setExpandedTweets] = useState<{ + [key: string]: boolean + }>({}) const { grayWithShade } = useContext(MyThemeContext) console.log("results", results) @@ -28,36 +49,67 @@ const Results: React.FC = ({ results, canAddResults }) => { {results.map(result => { return ( - - {result.placement < 4 ? ( - - + + + {result.placement < 4 ? ( + + {`Placement + + ) : ( + + {result.placement} + + {ordinal_suffix_of(result.placement)} + + + )}{" "} + + {result.tournament_name} - ) : ( - - {result.placement} + + {new Date(parseInt(result.date)).toLocaleDateString()} + {" "} + + {result.tweet_id && ( + + setExpandedTweets({ + ...expandedTweets, + [result.tweet_id as string]: !expandedTweets[ + result.tweet_id as string + ], + }) + } + /> + )} - )}{" "} - - {result.tournament_name} - - {new Date(parseInt(result.date)).toLocaleDateString()} - {" "} - + {result.tweet_id && expandedTweets[result.tweet_id] && ( + + )} + ) })} diff --git a/frontend-react/src/components/team/TeamPage.tsx b/frontend-react/src/components/team/TeamPage.tsx index c8e62a61d..e8716441e 100644 --- a/frontend-react/src/components/team/TeamPage.tsx +++ b/frontend-react/src/components/team/TeamPage.tsx @@ -50,8 +50,14 @@ const TeamPage: React.FC = ({ name }) => { {team.name} | sendou.ink - - + + {team.member_users.map(member => ( diff --git a/frontend-react/src/graphql/queries/searchForTeam.ts b/frontend-react/src/graphql/queries/searchForTeam.ts index 83f4e70d9..a8769827c 100644 --- a/frontend-react/src/graphql/queries/searchForTeam.ts +++ b/frontend-react/src/graphql/queries/searchForTeam.ts @@ -5,6 +5,12 @@ export const SEARCH_FOR_TEAM: DocumentNode = gql` searchForTeam(name: $name) { name twitter_name + challonge_name + discord_url + founded { + month + year + } captain_discord_id member_discord_ids member_users { diff --git a/frontend-react/src/types.ts b/frontend-react/src/types.ts index 69ae14759..6db331b19 100644 --- a/frontend-react/src/types.ts +++ b/frontend-react/src/types.ts @@ -160,6 +160,12 @@ export interface TournamentResult { export interface Team { name: string twitter_name?: string + challonge_name?: string + discord_url?: string + founded?: { + month: number + year: number + } captain_discord_id: string member_discord_ids: string[] member_users: { diff --git a/graphql-schemas/team.js b/graphql-schemas/team.js index f40803189..cb1a997cd 100644 --- a/graphql-schemas/team.js +++ b/graphql-schemas/team.js @@ -29,9 +29,17 @@ const typeDef = gql` placement: Int! } + type Founded { + month: Int! + year: Int! + } + type Team { name: String! twitter_name: String + challonge_name: String + discord_url: String + founded: Founded captain_discord_id: String! member_discord_ids: [String!]! member_users: [User!]! diff --git a/mongoose-models/team.js b/mongoose-models/team.js index a67ef7030..5bee0f403 100644 --- a/mongoose-models/team.js +++ b/mongoose-models/team.js @@ -3,6 +3,12 @@ const mongoose = require("mongoose") const teamSchema = new mongoose.Schema({ name: String, twitter_name: String, + challonge_name: String, + discord_url: String, + founded: { + month: Number, + year: Number, + }, captain_discord_id: String, member_discord_ids: [String], countries: [String], diff --git a/package-lock.json b/package-lock.json index 52137b5a8..9a9d4a66f 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1636,9 +1636,9 @@ } }, "mongoose": { - "version": "5.9.1", - "resolved": "https://registry.npmjs.org/mongoose/-/mongoose-5.9.1.tgz", - "integrity": "sha512-qgS31/nZ63vpr8yBg6w8vaV8ITxwrF2ioNW5AakXmqvVBaOsI0xpDd5QBowESy2InDTk+iDaN5SNgSxGG6GntQ==", + "version": "5.9.2", + "resolved": "https://registry.npmjs.org/mongoose/-/mongoose-5.9.2.tgz", + "integrity": "sha512-Sa1qfqBvUfAgsrXpZjbBoIx8PEDUJSKF5Ous8gnBFI7TPiueSgJjg6GRA7A0teU8AB/vd0h8rl1rD5RQNfWhIw==", "requires": { "bson": "~1.1.1", "kareem": "2.3.1", diff --git a/package.json b/package.json index 368a0bb5d..ce4020e6c 100644 --- a/package.json +++ b/package.json @@ -24,7 +24,7 @@ "express-session": "^1.17.0", "graphql": "^14.6.0", "lodash": "^4.17.15", - "mongoose": "^5.9.1", + "mongoose": "^5.9.2", "mongoose-unique-validator": "^2.0.3", "node-fetch": "^2.6.0", "passport": "^0.4.1",