diff options
Diffstat (limited to '')
| -rw-r--r-- | src/components/InputTypes/Code.tsx | 28 | ||||
| -rw-r--r-- | src/index.tsx | 31 | ||||
| -rw-r--r-- | src/pages/FormPage/FormPage.tsx | 1 | ||||
| -rw-r--r-- | src/setupTests.ts | 2 | ||||
| -rw-r--r-- | src/tests/components/FormListing.test.tsx | 1 | ||||
| -rw-r--r-- | src/tests/components/HeaderBar.test.tsx | 1 |
6 files changed, 32 insertions, 32 deletions
diff --git a/src/components/InputTypes/Code.tsx b/src/components/InputTypes/Code.tsx index b0eddcb..1473158 100644 --- a/src/components/InputTypes/Code.tsx +++ b/src/components/InputTypes/Code.tsx @@ -1,12 +1,10 @@ /** @jsx jsx */ import { jsx, css } from "@emotion/react"; -import React, { useEffect } from "react"; +import React from "react"; -import { basicSetup } from "codemirror"; +import CodeMirror from "@uiw/react-codemirror"; import { python } from "@codemirror/lang-python"; -import { EditorState } from "@codemirror/state"; -import { oneDark } from "@codemirror/theme-one-dark"; -import { EditorView, ViewUpdate } from "@codemirror/view"; +import { atomone } from "@uiw/codemirror-theme-atomone"; import { selectable } from "../../commonStyles"; @@ -27,23 +25,9 @@ const styles = css` `; export default function Code(props: CodeProps): JSX.Element { - const onUpdate = () => EditorView.updateListener.of((v: ViewUpdate) => { - props.handler(v.state.doc.toString()); - - }); - - useEffect(() => { - const el = document.getElementById(`${props.questionId}-code`); - const state = EditorState.create({ - extensions: [basicSetup, python(), onUpdate(), oneDark], - }); - const view = new EditorView({ - state, - parent: el as Element - }); - - return () => view.destroy(); + const onChange = React.useCallback((val: string) => { + props.handler(val); }, []); - return <div id={`${props.questionId}-code`} css={[styles, selectable]} />; + return <CodeMirror value="" css={[styles, selectable]} height="20rem" theme={atomone} extensions={[python()]} onChange={onChange} />; } diff --git a/src/index.tsx b/src/index.tsx index 2565964..10e8c91 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -1,20 +1,40 @@ /** @jsx jsx */ import { jsx } from "@emotion/react"; -import React from "react"; +import React, { useEffect } from "react"; import { createRoot } from "react-dom/client"; import App from "./App"; import * as serviceWorker from "./serviceWorker"; import * as Sentry from "@sentry/react"; +import { + createRoutesFromChildren, + matchRoutes, + useLocation, + useNavigationType, +} from "react-router-dom"; + + import colors from "./colors"; if (process.env.NODE_ENV === "production") { Sentry.init({ dsn: process.env.REACT_APP_SENTRY_DSN, - tracesSampleRate: 0.25, + tracesSampleRate: 0.5, release: `forms-frontend@${process.env.COMMIT_REF}`, - environment: process.env.CONTEXT + replaysSessionSampleRate: 0.1, + replaysOnErrorSampleRate: 1.0, + environment: process.env.CONTEXT, + integrations: [ + Sentry.reactRouterV6BrowserTracingIntegration({ + useEffect, + useLocation, + useNavigationType, + createRoutesFromChildren, + matchRoutes, + }), + Sentry.replayIntegration(), + ] }); // Set tag as PR number, "main", or if unavailable, "unknown" @@ -23,7 +43,7 @@ if (process.env.NODE_ENV === "production") { Sentry.setTag(branch_name === "main" ? "branch" : "pull_request", branch_name); } -console.log("%c Python Discord Forms ", `font-size: 6em; font-family: "Hind", "Arial"; font-weight: 900; background-color: ${colors.blurple}; border-radius: 10px;`); +console.log("%c Python Discord Forms ", `font-size: 4em; font-family: "Hind", "Arial"; font-weight: 900; background-color: ${colors.blurple}; border-radius: 10px;`); console.log("%cWelcome to Python Discord Forms", "font-size: 3em; font-family: \"Hind\", \"Arial\";"); console.log(` Environment: %c ${process.env.NODE_ENV} `, `padding: 2px; border-radius: 5px; background-color: ${process.env.NODE_ENV === "production" ? colors.success : colors.error}`); @@ -36,7 +56,7 @@ console.log(` SHA: %c ${process.env.COMMIT_REF} `, `padding: 2px; border-radiu console.log("%cCome join us on Discord! https://discord.gg/python", `font-size: 1.5em; font-family: "Hind", "Arial"; color: ${colors.blurple}`); const rootDocument = document.getElementById("root"); -// eslint-disable-next-line @typescript-eslint/no-non-null-assertion + const root = createRoot(rootDocument!); root.render( <React.StrictMode> @@ -55,6 +75,5 @@ root.render( </Sentry.ErrorBoundary> </React.StrictMode> ); -/* eslint-enable react/react-in-jsx-scope */ serviceWorker.unregister(); diff --git a/src/pages/FormPage/FormPage.tsx b/src/pages/FormPage/FormPage.tsx index 05b51c0..9ffa4fc 100644 --- a/src/pages/FormPage/FormPage.tsx +++ b/src/pages/FormPage/FormPage.tsx @@ -69,7 +69,6 @@ function FormPage(): JSX.Element { useEffect(() => { // ID can't be null due to the routing to get here - // eslint-disable-next-line @typescript-eslint/no-non-null-assertion getForm(id!).then(form => { setForm(form); setFormLoading(LoadingState.Found); diff --git a/src/setupTests.ts b/src/setupTests.ts index 6a69409..d0de870 100644 --- a/src/setupTests.ts +++ b/src/setupTests.ts @@ -1 +1 @@ -import "@testing-library/jest-dom/extend-expect"; +import "@testing-library/jest-dom"; diff --git a/src/tests/components/FormListing.test.tsx b/src/tests/components/FormListing.test.tsx index 259fe23..2730ec1 100644 --- a/src/tests/components/FormListing.test.tsx +++ b/src/tests/components/FormListing.test.tsx @@ -1,6 +1,5 @@ import React from "react"; import { render } from "@testing-library/react"; -import "@testing-library/jest-dom/extend-expect"; import FormListing from "../../components/FormListing"; import { BrowserRouter as Router } from "react-router-dom"; diff --git a/src/tests/components/HeaderBar.test.tsx b/src/tests/components/HeaderBar.test.tsx index dd77c8b..2cf96ac 100644 --- a/src/tests/components/HeaderBar.test.tsx +++ b/src/tests/components/HeaderBar.test.tsx @@ -1,6 +1,5 @@ import React from "react"; import { render } from "@testing-library/react"; -import "@testing-library/jest-dom/extend-expect"; import HeaderBar from "../../components/HeaderBar"; import { MemoryRouter } from "react-router-dom"; |