Merge pull request #635 from python-discord/jb3/deps/dep-bumps

Dependency bumps

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";