From 122df1bd9c228e932261cdedcf39db41dad293a5 Mon Sep 17 00:00:00 2001 From: Sendou Date: Thu, 30 Jan 2020 00:26:36 +0200 Subject: [PATCH] calendar page --- frontend-react/package-lock.json | 142 ++++++++++++++++-- frontend-react/package.json | 9 +- frontend-react/src/calendar/CalendarPage.tsx | 127 ++++++++++++++++ .../src/components/builds/BuildCard.tsx | 7 +- frontend-react/src/components/root/Routes.tsx | 2 + 5 files changed, 267 insertions(+), 20 deletions(-) create mode 100644 frontend-react/src/calendar/CalendarPage.tsx diff --git a/frontend-react/package-lock.json b/frontend-react/package-lock.json index 6f7eb8329..8fbc14b3c 100644 --- 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", diff --git a/frontend-react/package.json b/frontend-react/package.json index bbdc4b6d9..b1fd5c0ec 100644 --- 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", diff --git a/frontend-react/src/calendar/CalendarPage.tsx b/frontend-react/src/calendar/CalendarPage.tsx new file mode 100644 index 000000000..4c4e38219 --- /dev/null +++ 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 = ({}) => { + const { + themeColor, + darkerBgColor, + themeColorWithShade, + grayWithShade, + } = useContext(MyThemeContext) + const [showCode, setShowCode] = useState(false) + const calenderDiv = useRef(null) + + const iFrameHTML = `` + + //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 ( + <> + + Competitive Calendar | sendou.ink + + + + + + + + + + +

+ + 💰 + {" "} + - Has prizes +
+ + 🎭 + {" "} + - Unconventional ruleset +
+ + 🔒 + {" "} + - Limited registration +
+ + 🤝 + {" "} + - Local event +
+ + 🎲 + {" "} + - Solo registration available +
+ + 👀 + {" "} + - No open registration +

+ + + + + + If an event is missing you can contact{" "} + + Kbot + {" "} + about it. +
+ 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{" "} + + this link + {" "} + instead. + + + ) +} + +export default CalendarPage diff --git a/frontend-react/src/components/builds/BuildCard.tsx b/frontend-react/src/components/builds/BuildCard.tsx index 70e50fd71..af959ea91 100644 --- 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 diff --git a/frontend-react/src/components/root/Routes.tsx b/frontend-react/src/components/root/Routes.tsx index 47c851788..b582d0bea 100644 --- 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 = () => { + )