calendar page

2026-09-09 20:56:02 -05:00 · 2020-01-30 00:26:36 +02:00
parent 27c736cd5b
commit 122df1bd9c
5 changed files with 267 additions and 20 deletions
--- a/frontend-react/package-lock.json
+++ b/frontend-react/package-lock.json
@@ -1749,11 +1749,12 @@
      }
    },
    "@testing-library/jest-dom": {
-      "version": "4.2.4",
-      "resolved": "https://registry.npmjs.org/@testing-library/jest-dom/-/jest-dom-4.2.4.tgz",
-      "integrity": "sha512-j31Bn0rQo12fhCWOUWy9fl7wtqkp7In/YP2p5ZFyRuiiB9Qs3g+hS4gAmDWONbAHcRmVooNJ5eOHQDCOmUFXHg==",
+      "version": "5.0.2",
+      "resolved": "https://registry.npmjs.org/@testing-library/jest-dom/-/jest-dom-5.0.2.tgz",
+      "integrity": "sha512-Pl3si4eH88+5wlVz6NjecLfeO7PjTbbgWKwVZXUtBfrGuJLjGdUUo+O92XRu/59wft8HAmwvXHeMWpqWTg2Uwg==",
      "requires": {
        "@babel/runtime": "^7.5.1",
+        "@types/testing-library__jest-dom": "^5.0.0",
        "chalk": "^2.4.1",
        "css": "^2.2.3",
        "css.escape": "^1.5.1",
@@ -1785,9 +1786,9 @@
      }
    },
    "@testing-library/user-event": {
-      "version": "7.2.1",
-      "resolved": "https://registry.npmjs.org/@testing-library/user-event/-/user-event-7.2.1.tgz",
-      "integrity": "sha512-oZ0Ib5I4Z2pUEcoo95cT1cr6slco9WY7yiPpG+RGNkj8YcYgJnM7pXmYmorNOReh8MIGcKSqXyeGjxnr8YiZbA=="
+      "version": "8.0.7",
+      "resolved": "https://registry.npmjs.org/@testing-library/user-event/-/user-event-8.0.7.tgz",
+      "integrity": "sha512-w0+4C9F9z7+ODjEgs+QS0bZ3hKcUICKYMdKWVNa1yNM2XwD+RByY77dMc2WcjYl8bxBfXv3gUZal+TdOg8s8Yg=="
    },
    "@types/babel__core": {
      "version": "7.1.3",
@@ -1826,6 +1827,11 @@
        "@babel/types": "^7.3.0"
      }
    },
+    "@types/color-name": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@types/color-name/-/color-name-1.1.1.tgz",
+      "integrity": "sha512-rr+OQyAjxze7GgWrSaJwydHStIhHq2lvY3BOC2Mj7KnzI7XK0Uw1TOOdI9lDoajEbSWLiYgoo4f1R51erQfhPQ=="
+    },
    "@types/eslint-visitor-keys": {
      "version": "1.0.0",
      "resolved": "https://registry.npmjs.org/@types/eslint-visitor-keys/-/eslint-visitor-keys-1.0.0.tgz",
@@ -1874,11 +1880,108 @@
      }
    },
    "@types/jest": {
-      "version": "24.9.1",
-      "resolved": "https://registry.npmjs.org/@types/jest/-/jest-24.9.1.tgz",
-      "integrity": "sha512-Fb38HkXSVA4L8fGKEZ6le5bB8r6MRWlOCZbVuWZcmOMSCd2wCYOwN1ibj8daIoV9naq7aaOZjrLCoCMptKU/4Q==",
+      "version": "25.1.0",
+      "resolved": "https://registry.npmjs.org/@types/jest/-/jest-25.1.0.tgz",
+      "integrity": "sha512-MYX8LpNQboef1NDZQTchM5poL8WITRVG/4/1XLK/Xsamjptsvgb8ELTRoXixBARi+a81mMT4n2hooqaydEOE9A==",
      "requires": {
-        "jest-diff": "^24.3.0"
+        "jest-diff": "^25.1.0"
+      },
+      "dependencies": {
+        "@jest/types": {
+          "version": "25.1.0",
+          "resolved": "https://registry.npmjs.org/@jest/types/-/types-25.1.0.tgz",
+          "integrity": "sha512-VpOtt7tCrgvamWZh1reVsGADujKigBUFTi19mlRjqEGsE8qH4r3s+skY33dNdXOwyZIvuftZ5tqdF1IgsMejMA==",
+          "requires": {
+            "@types/istanbul-lib-coverage": "^2.0.0",
+            "@types/istanbul-reports": "^1.1.1",
+            "@types/yargs": "^15.0.0",
+            "chalk": "^3.0.0"
+          }
+        },
+        "@types/yargs": {
+          "version": "15.0.2",
+          "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-15.0.2.tgz",
+          "integrity": "sha512-hFkuAp58M2xOc1QgJhkFrLMnqa8KWTFRTnzrI1zlEcOfg3DZ0eH3aPAo/N6QlVVu8E4KS4xD1jtEG3rdQYFmIg==",
+          "requires": {
+            "@types/yargs-parser": "*"
+          }
+        },
+        "ansi-styles": {
+          "version": "4.2.1",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.2.1.tgz",
+          "integrity": "sha512-9VGjrMsG1vePxcSweQsN20KY/c4zN0h9fLjqAbwbPfahM3t+NL+M9HC8xeXG2I8pX5NoamTGNuomEUFI7fcUjA==",
+          "requires": {
+            "@types/color-name": "^1.1.1",
+            "color-convert": "^2.0.1"
+          }
+        },
+        "chalk": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-3.0.0.tgz",
+          "integrity": "sha512-4D3B6Wf41KOYRFdszmDqMCGq5VV/uMAB273JILmO+3jAlh8X4qDtdtgCR3fxtbLEMzSx22QdhnDcJvu2u1fVwg==",
+          "requires": {
+            "ansi-styles": "^4.1.0",
+            "supports-color": "^7.1.0"
+          }
+        },
+        "color-convert": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+          "requires": {
+            "color-name": "~1.1.4"
+          }
+        },
+        "color-name": {
+          "version": "1.1.4",
+          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
+        },
+        "diff-sequences": {
+          "version": "25.1.0",
+          "resolved": "https://registry.npmjs.org/diff-sequences/-/diff-sequences-25.1.0.tgz",
+          "integrity": "sha512-nFIfVk5B/NStCsJ+zaPO4vYuLjlzQ6uFvPxzYyHlejNZ/UGa7G/n7peOXVrVNvRuyfstt+mZQYGpjxg9Z6N8Kw=="
+        },
+        "has-flag": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ=="
+        },
+        "jest-diff": {
+          "version": "25.1.0",
+          "resolved": "https://registry.npmjs.org/jest-diff/-/jest-diff-25.1.0.tgz",
+          "integrity": "sha512-nepXgajT+h017APJTreSieh4zCqnSHEJ1iT8HDlewu630lSJ4Kjjr9KNzm+kzGwwcpsDE6Snx1GJGzzsefaEHw==",
+          "requires": {
+            "chalk": "^3.0.0",
+            "diff-sequences": "^25.1.0",
+            "jest-get-type": "^25.1.0",
+            "pretty-format": "^25.1.0"
+          }
+        },
+        "jest-get-type": {
+          "version": "25.1.0",
+          "resolved": "https://registry.npmjs.org/jest-get-type/-/jest-get-type-25.1.0.tgz",
+          "integrity": "sha512-yWkBnT+5tMr8ANB6V+OjmrIJufHtCAqI5ic2H40v+tRqxDmE0PGnIiTyvRWFOMtmVHYpwRqyazDbTnhpjsGvLw=="
+        },
+        "pretty-format": {
+          "version": "25.1.0",
+          "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-25.1.0.tgz",
+          "integrity": "sha512-46zLRSGLd02Rp+Lhad9zzuNZ+swunitn8zIpfD2B4OPCRLXbM87RJT2aBLBWYOznNUML/2l/ReMyWNC80PJBUQ==",
+          "requires": {
+            "@jest/types": "^25.1.0",
+            "ansi-regex": "^5.0.0",
+            "ansi-styles": "^4.0.0",
+            "react-is": "^16.12.0"
+          }
+        },
+        "supports-color": {
+          "version": "7.1.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.1.0.tgz",
+          "integrity": "sha512-oRSIpR8pxT1Wr2FquTNnGet79b3BWljqOuoW/h4oBhxJ/HUbX5nX6JSruTkvXDCFMwDPvsaTTbvMLKZWSy0R5g==",
+          "requires": {
+            "has-flag": "^4.0.0"
+          }
+        }
      }
    },
    "@types/json-schema": {
@@ -1892,9 +1995,9 @@
      "integrity": "sha512-tHq6qdbT9U1IRSGf14CL0pUlULksvY9OZ+5eEgl1N7t+OA3tGvNpxJCzuKQlsNgCVwbAs670L1vcVQi8j9HjnA=="
    },
    "@types/node": {
-      "version": "12.12.26",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-12.12.26.tgz",
-      "integrity": "sha512-UmUm94/QZvU5xLcUlNR8hA7Ac+fGpO1EG/a8bcWVz0P0LqtxFmun9Y2bbtuckwGboWJIT70DoWq1r3hb56n3DA=="
+      "version": "13.5.1",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-13.5.1.tgz",
+      "integrity": "sha512-Jj2W7VWQ2uM83f8Ls5ON9adxN98MvyJsMSASYFuSvrov8RMRY64Ayay7KV35ph1TSGIJ2gG9ZVDdEq3c3zaydA=="
    },
    "@types/parse-json": {
      "version": "4.0.0",
@@ -1966,6 +2069,14 @@
        "pretty-format": "^24.3.0"
      }
    },
+    "@types/testing-library__jest-dom": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/@types/testing-library__jest-dom/-/testing-library__jest-dom-5.0.0.tgz",
+      "integrity": "sha512-Pm+2mvqs9sND247oMVJbu3QmPUqMzBuJbY5uHHYQdl9MXq5hwWkTbesw1sPIky52Y0sHksWAZnVvGLbdyFSyrA==",
+      "requires": {
+        "@types/jest": "*"
+      }
+    },
    "@types/testing-library__react": {
      "version": "9.1.2",
      "resolved": "https://registry.npmjs.org/@types/testing-library__react/-/testing-library__react-9.1.2.tgz",
@@ -8894,6 +9005,11 @@
        "verror": "1.10.0"
      }
    },
+    "jstz": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/jstz/-/jstz-2.1.1.tgz",
+      "integrity": "sha512-8hfl5RD6P7rEeIbzStBz3h4f+BQHfq/ABtoU6gXKQv5OcZhnmrIpG7e1pYaZ8hS9e0mp+bxUj08fnDUbKctYyA=="
+    },
    "jsx-ast-utils": {
      "version": "2.2.3",
      "resolved": "https://registry.npmjs.org/jsx-ast-utils/-/jsx-ast-utils-2.2.3.tgz",
--- a/frontend-react/package.json
+++ b/frontend-react/package.json
@@ -9,11 +9,11 @@
    "@emotion/styled": "^10.0.27",
    "@reach/router": "^1.2.1",
    "@sendou/react-sketch": "^0.5.2",
-    "@testing-library/jest-dom": "^4.2.4",
+    "@testing-library/jest-dom": "^5.0.2",
    "@testing-library/react": "^9.4.0",
-    "@testing-library/user-event": "^7.2.1",
-    "@types/jest": "^24.9.1",
-    "@types/node": "^12.12.26",
+    "@testing-library/user-event": "^8.0.7",
+    "@types/jest": "^25.1.0",
+    "@types/node": "^13.5.1",
    "@types/reach__router": "^1.2.6",
    "@types/react": "^16.9.19",
    "@types/react-dom": "^16.9.5",
@@ -21,6 +21,7 @@
    "apollo-boost": "^0.4.7",
    "emotion-theming": "^10.0.27",
    "graphql": "^14.6.0",
+    "jstz": "^2.1.1",
    "react": "^16.12.0",
    "react-dom": "^16.12.0",
    "react-draggable": "^4.2.0",
--- a/frontend-react/src/calendar/CalendarPage.tsx
+++ b/frontend-react/src/calendar/CalendarPage.tsx
@@ -0,0 +1,127 @@
+import React, { useState, useEffect, useRef } from "react"
+import jstz from "jstz"
+import {
+  Button,
+  Popover,
+  PopoverTrigger,
+  PopoverContent,
+  PopoverHeader,
+  PopoverArrow,
+  PopoverCloseButton,
+  PopoverBody,
+  Box,
+  Link,
+  Icon,
+} from "@chakra-ui/core"
+import { RouteComponentProps } from "@reach/router"
+import { useContext } from "react"
+import MyThemeContext from "../themeContext"
+import PageHeader from "../components/common/PageHeader"
+import { Helmet } from "react-helmet-async"
+
+interface CalendarPageProps {}
+
+const CalendarPage: React.FC<RouteComponentProps> = ({}) => {
+  const {
+    themeColor,
+    darkerBgColor,
+    themeColorWithShade,
+    grayWithShade,
+  } = useContext(MyThemeContext)
+  const [showCode, setShowCode] = useState(false)
+  const calenderDiv = useRef<HTMLDivElement | null>(null)
+
+  const iFrameHTML = `<iframe title="calendar" src="https://calendar.google.com/calendar/embed?height=600&amp;wkst=2&amp;bgcolor=%23ffffff&amp;src=NDNnYnJlamkxbnQyZTY1dWJuZzdvYWkxZGtAZ3JvdXAuY2FsZW5kYXIuZ29vZ2xlLmNvbQ&amp;color=%23E67C73&amp;showTitle=0&amp;showNav=1&amp;showDate=1&amp;showPrint=0&amp;showCalendars=0&amp;ctz=${jstz
+    .determine()
+    .name()}" style=border-width: 0 width=${"90%"} height="1000" frameBorder="0" scrolling="no"></iframe>`
+
+  //This is a weird solution but I couldn't get it working just setting the iframe src from a variable
+  useEffect(() => {
+    if (!calenderDiv?.current) return
+    calenderDiv.current.innerHTML = iFrameHTML
+  }, [iFrameHTML])
+
+  return (
+    <>
+      <Helmet>
+        <title>Competitive Calendar | sendou.ink</title>
+      </Helmet>
+      <PageHeader title="Competitive Calendar" />
+      <Popover placement="top-start">
+        <PopoverTrigger>
+          <Button
+            variantColor={themeColor}
+            variant="outline"
+            onClick={() => setShowCode(!showCode)}
+            mt="1em"
+          >
+            Show emoji code
+          </Button>
+        </PopoverTrigger>
+        <PopoverContent zIndex={4} background={darkerBgColor} width="280px">
+          <PopoverArrow />
+          <PopoverCloseButton />
+          <PopoverBody>
+            <h4>
+              <span role="img" aria-label="money bag emoji">
+                💰
+              </span>{" "}
+              - Has prizes
+              <br />
+              <span role="img" aria-label="masks emoji">
+                🎭
+              </span>{" "}
+              - Unconventional ruleset
+              <br />
+              <span role="img" aria-label="lock emoji">
+                🔒
+              </span>{" "}
+              - Limited registration
+              <br />
+              <span role="img" aria-label="handshake emoji">
+                🤝
+              </span>{" "}
+              - Local event
+              <br />
+              <span role="img" aria-label="dice emoji">
+                🎲
+              </span>{" "}
+              - Solo registration available
+              <br />
+              <span role="img" aria-label="eyes emoji">
+                👀
+              </span>{" "}
+              - No open registration
+            </h4>
+          </PopoverBody>
+        </PopoverContent>
+      </Popover>
+      <Box mt="2em" ref={calenderDiv} />
+      <Box mt="2em" color={grayWithShade}>
+        If an event is missing you can contact{" "}
+        <Link
+          href="https://twitter.com/Kbot_273"
+          color={themeColorWithShade}
+          isExternal
+        >
+          Kbot <Icon name="external-link" mx="2px" />
+        </Link>{" "}
+        about it.
+        <br />
+        You can add the calendar to your personal Google Calendar by pressing
+        the plus button above. If you are using other kind of calendar program
+        you can try{" "}
+        <Link
+          href="https://calendar.google.com/calendar/ical/43gbreji1nt2e65ubng7oai1dk%40group.calendar.google.com/public/basic.ics"
+          color={themeColorWithShade}
+          isExternal
+        >
+          this link <Icon name="external-link" mx="2px" />
+        </Link>{" "}
+        instead.
+      </Box>
+    </>
+  )
+}
+
+export default CalendarPage
--- a/frontend-react/src/components/builds/BuildCard.tsx
+++ b/frontend-react/src/components/builds/BuildCard.tsx
@@ -1,5 +1,4 @@
 import React, { useState, useContext, useEffect } from "react"
-import { Build } from "../../types"
 import {
  Box,
  Flex,
@@ -12,13 +11,15 @@ import {
  Button,
  BoxProps,
 } from "@chakra-ui/core"
+import { Link } from "@reach/router"
+import { FaInfo } from "react-icons/fa"
+
 import WeaponImage from "../common/WeaponImage"
 import { top500 } from "../../assets/imageImports"
-import { FaInfo, FaPlus, FaMinus } from "react-icons/fa"
 import ViewGear from "./ViewGear"
 import ViewAP from "./ViewAP"
 import MyThemeContext from "../../themeContext"
-import { Link } from "@reach/router"
+import { Build } from "../../types"

 interface BuildCardProps {
  build: Build
--- a/frontend-react/src/components/root/Routes.tsx
+++ b/frontend-react/src/components/root/Routes.tsx
@@ -2,6 +2,7 @@ import React, { Suspense, lazy } from "react"
 import { Router } from "@reach/router"
 import Loading from "../common/Loading"
 import MapPlannerPage from "../plans/MapPlannerPage"
+import CalendarPage from "../../calendar/CalendarPage"

 const HomePage = lazy(() => import("../home/HomePage"))
 const UserPage = lazy(() => import("../user/UserPage"))
@@ -15,6 +16,7 @@ const Routes: React.FC = () => {
        <UserPage path="/u/:id" />
        <BuildsPage path="/builds" />
        <MapPlannerPage path="/plans" />
+        <CalendarPage path="/calendar" />
      </Router>
    </Suspense>
  )