team page headers

2026-08-11 03:46:52 -05:00 · 2020-02-24 01:26:36 +02:00
parent 0bd8cb9bf0
commit 2bc7940814
12 changed files with 195 additions and 63 deletions
--- 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",
--- 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",
--- a/frontend-react/src/components/team/AddResultModal.tsx
+++ b/frontend-react/src/components/team/AddResultModal.tsx
@@ -66,7 +66,6 @@ const AddResultModal: React.FC<AddResultModalProps> = ({ closeModal }) => {
  }, [result])

  const handleChange = (newValueObject: Partial<TournamentResult>) => {
-    console.log("newValue", newValueObject)
    setResult({ ...result, ...newValueObject })
  }

--- 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<LogoHeaderProps> = ({ name, twitter_name }) => {
-  const { themeColorWithShade } = useContext(MyThemeContext)
+const LogoHeader: React.FC<LogoHeaderProps> = ({
+  name,
+  twitter_name,
+  challonge_name,
+  discord_url,
+  founded,
+}) => {
+  const { themeColorWithShade, grayWithShade } = useContext(MyThemeContext)
  return (
    <Box display="flex" flexDirection="column" alignItems="center">
      <UserAvatar name={name} twitterName={twitter_name} size="2xl" />
@@ -18,13 +34,46 @@ const LogoHeader: React.FC<LogoHeaderProps> = ({ name, twitter_name }) => {
        fontFamily="'Pacifico', cursive"
        fontWeight="light"
        fontSize="48px"
-        borderBottomColor={themeColorWithShade}
-        borderBottomWidth="5px"
        w="100%"
        textAlign="center"
      >
        {name}
      </Box>
+      {founded && (
+        <Box textAlign="center" mb="1em" color={grayWithShade}>
+          Est. {months[founded.month]} {founded.year}
+        </Box>
+      )}
+      <Box
+        display="flex"
+        flexWrap="wrap"
+        borderBottomColor={themeColorWithShade}
+        borderBottomWidth="5px"
+        w="100%"
+        justifyContent="space-evenly"
+      >
+        {twitter_name && (
+          <a href={`https://twitter.com/${twitter_name}`}>
+            <Box display="flex" alignItems="center">
+              <Box as={FaTwitter} mr="0.3em" /> {twitter_name}
+            </Box>
+          </a>
+        )}
+        {challonge_name && (
+          <a href={`https://challonge.com/teams/${challonge_name}`}>
+            <Box display="flex" alignItems="center">
+              <Box as={FaTrophy} mr="0.3em" /> Challonge
+            </Box>
+          </a>
+        )}
+        {discord_url && (
+          <a href={discord_url}>
+            <Box display="flex" alignItems="center">
+              <Box as={FaDiscord} mr="0.3em" /> Discord
+            </Box>
+          </a>
+        )}
+      </Box>
    </Box>
  )
 }
--- 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<ResultsProps> = ({ 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<ResultsProps> = ({ results, canAddResults }) => {
      <Box mt="1em">
        {results.map(result => {
          return (
-            <Box
-              display="flex"
-              alignItems="center"
-              key={result.tournament_name}
-              my="0.5em"
-            >
-              {result.placement < 4 ? (
-                <Box maxW="50px" h="auto">
-                  <img src={medalEmoji[result.placement]} />
+            <React.Fragment key={result.tournament_name}>
+              <Box display="flex" alignItems="center" my="0.5em">
+                {result.placement < 4 ? (
+                  <Box maxW="50px" h="auto">
+                    <img
+                      src={medalEmoji[result.placement]}
+                      alt={`Placement emoji for ${result.placement}`}
+                    />
+                  </Box>
+                ) : (
+                  <Box fontSize="35px" w="50px">
+                    {result.placement}
+                    <Box as="span" fontSize="25px">
+                      {ordinal_suffix_of(result.placement)}
+                    </Box>
+                  </Box>
+                )}{" "}
+                <Box
+                  fontWeight="semibold"
+                  letterSpacing="wide"
+                  fontSize="24px"
+                  minWidth="150px"
+                  px="0.5em"
+                  textAlign="center"
+                  justifyContent="center"
+                >
+                  {result.tournament_name}
                </Box>
-              ) : (
-                <Box fontSize="42px" w="50px">
-                  {result.placement}
+                <Box color={grayWithShade}>
+                  {new Date(parseInt(result.date)).toLocaleDateString()}
+                </Box>{" "}
+                <Box>
+                  {result.tweet_id && (
+                    <IconButton
+                      variant="ghost"
+                      aria-label="Show tweet"
+                      fontSize="20px"
+                      icon={FaTwitter}
+                      onClick={() =>
+                        setExpandedTweets({
+                          ...expandedTweets,
+                          [result.tweet_id as string]: !expandedTweets[
+                            result.tweet_id as string
+                          ],
+                        })
+                      }
+                    />
+                  )}
                </Box>
-              )}{" "}
-              <Box
-                fontWeight="semibold"
-                letterSpacing="wide"
-                fontSize="24px"
-                minWidth="150px"
-                px="0.5em"
-                textAlign="center"
-                justifyContent="center"
-              >
-                {result.tournament_name}
              </Box>
-              <Box color={grayWithShade}>
-                {new Date(parseInt(result.date)).toLocaleDateString()}
-              </Box>{" "}
-            </Box>
+              {result.tweet_id && expandedTweets[result.tweet_id] && (
+                <TweetEmbed
+                  id={result.tweet_id}
+                  options={{
+                    theme: "dark",
+                    dnt: "true",
+                    conversation: "none",
+                  }}
+                />
+              )}
+            </React.Fragment>
          )
        })}
      </Box>
--- a/frontend-react/src/components/team/TeamPage.tsx
+++ b/frontend-react/src/components/team/TeamPage.tsx
@@ -50,8 +50,14 @@ const TeamPage: React.FC<RouteComponentProps & TeamPageProps> = ({ name }) => {
      <Helmet>
        <title>{team.name} | sendou.ink</title>
      </Helmet>
-      <LogoHeader name={team.name} twitter_name={team.twitter_name} />
-      <Box display="flex" flexWrap="wrap" justifyContent="center">
+      <LogoHeader
+        name={team.name}
+        twitter_name={team.twitter_name}
+        challonge_name={team.challonge_name}
+        discord_url={team.discord_url}
+        founded={team.founded}
+      />
+      <Box display="flex" flexWrap="wrap" justifyContent="center" mt="1em">
        {team.member_users.map(member => (
          <Box key={member.discord_id} p="0.5em">
            <MemberCard member={member} />
--- 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 {
--- 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: {
--- 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!]!
--- 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],
--- 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",
--- 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",