Upgrade React typings, frontend dependencies (#393)

.github/workflows/alpha.yml

@@ -2,7 +2,7 @@ name: 'Alpha Build'
 
 on:
   push:
-    branches: [v4150/integ]
+    branches: [v4150/esm]
 
 jobs:
   build:

README.md

@@ -89,6 +89,8 @@ This will run a demo version, which you can turn into a fully licenced version b
 
 - Improve Admin dashboard for Self-Hosted, allowing the admin to add and delete users
 - Fix GDPR account deletion, which did not work when the user had written messages (chat)
+- Upgrade React typings to v18
+- Upgrade all frontend dependencies
 
 ### Version 4.14.1 (hotfix)
 

dependencies.md

@@ -10,6 +10,3 @@
 - redis 3.1.2 (new version incompatible with express-redis)
 - passport 0.5.0 (new version, including 0.5.2 breaks set user when using Docker, but not locally)
 
-### Frontend
-
- - react-markdown (6.0.3): Jest won't work with ESM. I hate ESM.

frontend/package.json

@@ -4,66 +4,66 @@
   "license": "GNU GPLv3",
   "private": true,
   "dependencies": {
-    "@emotion/react": "11.8.2",
+    "@emotion/react": "11.9.0",
     "@emotion/styled": "11.8.1",
-    "@mui/base": "5.0.0-alpha.74",
-    "@mui/icons-material": "5.5.1",
-    "@mui/material": "5.5.3",
-    "@mui/styles": "5.5.3",
-    "@mui/x-data-grid": "5.7.0",
-    "@sentry/browser": "6.19.3",
-    "@stripe/react-stripe-js": "1.7.0",
-    "@stripe/stripe-js": "1.26.0",
-    "@testing-library/jest-dom": "5.16.3",
-    "@testing-library/react": "13.0.0",
-    "@testing-library/react-hooks": "7.0.2",
+    "@mui/base": "5.0.0-alpha.77",
+    "@mui/icons-material": "5.6.2",
+    "@mui/material": "5.6.2",
+    "@mui/styles": "5.6.2",
+    "@mui/x-data-grid": "5.9.0",
+    "@sentry/browser": "6.19.6",
+    "@stripe/react-stripe-js": "1.7.2",
+    "@stripe/stripe-js": "1.29.0",
+    "@testing-library/jest-dom": "5.16.4",
+    "@testing-library/react": "13.1.1",
+    "@testing-library/react-hooks": "8.0.0",
     "@types/crypto-js": "4.1.1",
     "@types/emoji-mart": "3.0.9",
     "@types/jest": "27.4.1",
-    "@types/lodash": "4.14.181",
+    "@types/lodash": "4.14.182",
     "@types/md5": "2.3.2",
-    "@types/node": "17.0.23",
-    "@types/react": "17.0.43",
+    "@types/node": "17.0.25",
+    "@types/react": "18.0.6",
     "@types/react-beautiful-dnd": "13.1.2",
     "@types/react-color": "3.0.6",
     "@types/react-copy-to-clipboard": "5.0.2",
-    "@types/react-dom": "17.0.14",
+    "@types/react-dom": "18.0.2",
     "@types/react-helmet": "6.1.5",
     "@types/react-router-dom": "5.3.3",
     "@types/shortid": "0.0.29",
     "@types/uuid": "8.3.4",
     "bowser": "2.11.0",
     "buffer": "6.0.3",
-    "core-js": "3.21.1",
+    "core-js": "3.22.2",
     "crypto-js": "4.1.1",
     "date-fns": "2.28.0",
     "emoji-mart": "3.0.1",
-    "flag-icons": "6.1.1",
-    "http-proxy-middleware": "2.0.4",
+    "flag-icons": "6.2.0",
+    "http-proxy-middleware": "2.0.6",
     "isemail": "3.2.0",
     "lexorank": "1.0.4",
     "lodash": "4.17.21",
-    "material-ui-confirm": "3.0.3",
+    "material-ui-confirm": "3.0.4",
     "md5": "2.3.0",
-    "notistack": "2.0.3",
+    "notistack": "2.0.4",
     "prop-types": "15.8.1",
     "query-string": "7.1.1",
     "react": "18.0.0",
     "react-autosize-textarea": "7.1.0",
     "react-beautiful-dnd": "13.1.0",
     "react-color": "2.19.3",
-    "react-copy-to-clipboard": "5.0.4",
+    "react-copy-to-clipboard": "5.1.0",
     "react-dom": "18.0.0",
     "react-ga": "3.3.0",
     "react-giphy-searchbox": "1.5.4",
     "react-helmet": "6.1.0",
-    "react-markdown": "6.0.3",
+    "react-markdown": "8.0.3",
     "react-password-strength-bar": "0.4.0",
     "react-router-dom": "6.3.0",
-    "react-scripts": "5.0.0",
+    "react-scripts": "5.0.1",
     "react-scroll-to-bottom": "4.2.0",
     "react-social-login-buttons": "3.6.0",
-    "recoil": "0.7.0",
+    "recoil": "0.7.2",
     "rehype-raw": "6.1.1",
     "shortid": "2.2.16",
     "socket.io-client": "4.4.1",
@@ -89,5 +89,15 @@
     "not dead",
     "not ie <= 9",
     "not op_mini all"
-  ]
+  ],
+  "resolutions": {
+    "@types/react": "18.0.6",
+    "@types/react-dom": "18.0.2"
+  },
+  "jest": {
+    "transformIgnorePatterns": [
+      "(?!(/node_modules/(react-markdown|vfile|vfile-message|unist-.*|unified|bail|is-plain-obj|trough|remark-.*|mdast-util-.*|micromark.*|decode-named-character-reference|character-entities|property-information|hast-util-whitespace|space-separated-tokens|comma-separated-tokens|pretty-bytes)/))(/node_modules/.+.(js|jsx|mjs|cjs|ts|tsx)$)",
+      "^.+.module.(css|sass|scss)$"
+    ]
+  }
 }

frontend/src/ErrorBoundary.tsx

@@ -6,10 +6,14 @@ interface ErrorBoundaryState {
   errored: boolean;
 }
 
-class ErrorBoundary extends Component<{}, ErrorBoundaryState> {
+interface ErrorBoundaryProps {
+  children: React.ReactNode;
+}
+
+class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {
   unregisterHistoryListener?: () => void = undefined;
 
-  constructor(props: {}) {
+  constructor(props: ErrorBoundaryProps) {
     super(props);
     this.state = { errored: false };
     this.handleRouteChange = this.handleRouteChange.bind(this);

frontend/src/auth/AuthProvider.tsx

@@ -1,11 +1,11 @@
-import { useState, useEffect, useCallback } from 'react';
+import { useState, useEffect, useCallback, PropsWithChildren } from 'react';
 import Context from './Context';
 import { FullUser } from 'common';
 import { me } from '../api';
 import { useLocation } from 'react-router-dom';
 import { setScope } from '../track';
 
-const AuthProvider: React.FC = ({ children }) => {
+export default function AuthProvider({ children }: PropsWithChildren<{}>) {
   const [user, setUser] = useState<FullUser | null>(null);
   const [initialised, setInitialised] = useState(false);
   const location = useLocation();
@@ -44,7 +44,7 @@ const AuthProvider: React.FC = ({ children }) => {
       {children}
     </Context.Provider>
   );
-};
+}
 
 function showMarketing() {
   Array.prototype.forEach.call(
@@ -83,5 +83,3 @@ function hideMarketing() {
     }
   );
 }
-
-export default AuthProvider;

frontend/src/auth/modal/Wrapper.tsx

@@ -1,19 +1,24 @@
 import styled from '@emotion/styled';
+import { PropsWithChildren } from 'react';
 
 interface WrapperProps {
   header?: string;
   actions?: JSX.Element;
 }
 
-const Wrapper: React.FC<WrapperProps> = ({ header, actions, children }) => {
+export default function Wrapper({
+  header,
+  actions,
+  children,
+}: PropsWithChildren<WrapperProps>) {
   return (
     <Container>
       <Title>{header}</Title>
       <Content>{children}</Content>
       <Actions>{actions}</Actions>
     </Container>
   );
-};
+}
 
 const Container = styled.div``;
 const Title = styled.div`
@@ -27,5 +32,3 @@ const Actions = styled.div`
   justify-content: flex-end;
   margin: 20px 0 5px 0;
 `;
-
-export default Wrapper;

frontend/src/global/GlobalProvider.tsx

@@ -1,9 +1,9 @@
-import { useEffect } from 'react';
+import { PropsWithChildren, useEffect } from 'react';
 import { fetchBackendCapabilities } from '../api';
 import { useSetRecoilState } from 'recoil';
 import { backendCapabilitiesState } from './state';
 
-const GlobalProvider: React.FC = ({ children }) => {
+export default function GlobalProvider({ children }: PropsWithChildren<{}>) {
   const setBackendCapabilities = useSetRecoilState(backendCapabilitiesState);
 
   useEffect(() => {
@@ -17,6 +17,4 @@ const GlobalProvider: React.FC = ({ children }) => {
   }, [setBackendCapabilities]);
 
   return <>{children}</>;
-};
-
-export default GlobalProvider;
+}

frontend/src/testing/index.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import { PropsWithChildren, useEffect, useState } from 'react';
 import { render, RenderOptions, RenderResult } from '@testing-library/react';
 import { FullUser, Session, defaultOptions } from 'common';
 import {
@@ -31,15 +31,15 @@ export const initialSession: Session = {
   ready: [],
 };
 
-export const AllTheProviders: React.FC = ({ children }) => {
+export function AllTheProviders({ children }: PropsWithChildren<{}>) {
   return (
     <RecoilRoot>
       <Inner>{children}</Inner>
     </RecoilRoot>
   );
-};
+}
 
-const Inner: React.FC = ({ children }) => {
+export default function Inner({ children }: PropsWithChildren<{}>) {
   const { receiveBoard } = useSession();
   const [user, setUser] = useState<FullUser | null>({
     id: 'John Doe',
@@ -97,7 +97,7 @@ const Inner: React.FC = ({ children }) => {
       </Droppable>
     </DragDropContext>
   );
-};
+}
 
 type Omit<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>;
 const customRender = (

frontend/src/translations/LanguageProvider.tsx

@@ -1,4 +1,10 @@
-import { useState, useEffect, useCallback, useContext } from 'react';
+import {
+  useState,
+  useEffect,
+  useCallback,
+  useContext,
+  PropsWithChildren,
+} from 'react';
 import Context from './Context';
 import UserContext from '../auth/Context';
 import { TrackingEvent } from 'common';
@@ -8,7 +14,7 @@ import { trackEvent } from '../track';
 import useUser from '../auth/useUser';
 import config from '../utils/getConfig';
 
-const LanguageProvider: React.FC = ({ children }) => {
+export default function LanguageProvider({ children }: PropsWithChildren<{}>) {
   const [language, setLanguage] = useState(config.defaultLanguage);
   const user = useUser();
   const { setUser } = useContext(UserContext);
@@ -44,6 +50,4 @@ const LanguageProvider: React.FC = ({ children }) => {
       {children}
     </Context.Provider>
   );
-};
-
-export default LanguageProvider;
+}

frontend/src/views/Game.tsx

@@ -40,7 +40,10 @@ function GamePage() {
   const translations = useTranslations();
   const { gameId } = useParams<keyof RouteParams>();
   const { session } = useSession();
-  const handleChange = useCallback((_, v) => navigate(v), [navigate]);
+  const handleChange = useCallback(
+    (_: unknown, v: string) => navigate(v),
+    [navigate]
+  );
   const columns = useColumns();
   const { decrypt } = useCrypto();
   const [search, setSearch] = useState('');

frontend/src/views/account/Section.tsx

@@ -1,19 +1,24 @@
 import { colors } from '@mui/material';
 import styled from '@emotion/styled';
+import { PropsWithChildren } from 'react';
 
 interface SectionProps {
   title?: string;
   danger?: boolean;
 }
 
-const Section: React.FC<SectionProps> = ({ title, danger, children }) => {
+export default function Section({
+  title,
+  danger,
+  children,
+}: PropsWithChildren<SectionProps>) {
   return (
     <Container danger={!!danger}>
       <Title>{title}</Title>
       <Content>{children}</Content>
     </Container>
   );
-};
+}
 
 const Container = styled.section<{ danger: boolean }>`
   border: 1px solid
@@ -45,5 +50,3 @@ const Title = styled.header`
 `;
 
 const Content = styled.div``;
-
-export default Section;

frontend/src/views/game/board/Group.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useState } from 'react';
+import { PropsWithChildren, useCallback, useState } from 'react';
 import { PostGroup } from 'common';
 import styled from '@emotion/styled';
 import {
@@ -27,13 +27,13 @@ interface GroupProps {
   onDelete: (group: PostGroup) => void;
 }
 
-const Group: React.FC<GroupProps> = ({
+export default function Group({
   group,
   onEditLabel,
   onDelete,
   readonly,
   children,
-}) => {
+}: PropsWithChildren<GroupProps>) {
   const { Group: groupTranslations } = useTranslations();
   const [collapsed, setCollapsed] = useState(false);
   const { decrypt, encrypt } = useCrypto();
@@ -105,7 +105,7 @@ const Group: React.FC<GroupProps> = ({
       )}
     </Droppable>
   );
-};
+}
 
 const GroupContainer = styled.div<{ draggingOver: boolean }>`
   position: relative;
@@ -145,5 +145,3 @@ const NoPosts = styled.div`
   color: grey;
   margin: 30px;
 `;
-
-export default Group;