Upgrade deps 23-11-2024

next-env.d.ts

@@ -2,4 +2,4 @@
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/basic-features/typescript for more information.
+// see https://nextjs.org/docs/pages/building-your-application/configuring/typescript for more information.

next.config.js

@@ -63,4 +63,14 @@ module.exports = {
 
     return config
   },
+  experimental: {
+    turbo: {
+      rules: {
+        '*.svg': {
+          loaders: ['@svgr/webpack'],
+          as: '*.js',
+        },
+      },
+    },
+  },
 }

package.json

@@ -6,7 +6,7 @@
     "node": ">=16.0.0"
   },
   "scripts": {
-    "dev": "next dev",
+    "dev": "next dev --turbopack",
     "start": "next start",
     "build": "next build",
     "lint": "eslint .",
@@ -21,61 +21,65 @@
     "@mui/icons-material": "^5.11.16",
     "@mui/material": "^5.12.3",
     "@tanstack/react-query": "5.0.0-alpha.26",
-    "@tanstack/react-query-devtools": "5.0.0-alpha.30",
+    "@tanstack/react-query-devtools": "5.61.0",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^14.0.0",
     "@testing-library/user-event": "^14.4.3",
     "axios": "^1.4.0",
     "clsx": "^1.2.1",
-    "katex": "^0.16.7",
+    "katex": "^0.16.11",
     "luxon": "^3.3.0",
     "mathjax-full": "^3.2.2",
     "mathjax-react": "^2.0.1",
-    "next": "^13.4.12",
-    "react": "^18.2.0",
+    "next": "15.0.3",
+    "react": "19.0.0-rc-66855b96-20241106",
     "react-admin": "^4.16.15",
     "react-cookie": "^4.1.1",
-    "react-dom": "^18.2.0",
+    "react-dom": "19.0.0-rc-66855b96-20241106",
     "react-dropzone": "^14.2.3",
     "react-hook-form": "^7.43.9",
-    "react-markdown": "^8.0.7",
-    "rehype-katex": "^6.0.3",
-    "remark-gfm": "^3.0.1",
-    "remark-math": "^5.1.1",
-    "typescript": "^5.0.4",
+    "react-markdown": "^9.0.1",
+    "rehype-katex": "^7.0.1",
+    "remark-gfm": "^4.0.0",
+    "remark-math": "^6.0.0",
+    "typescript": "^5.7.2",
     "unstated-next": "^1.1.0",
-    "usehooks-ts": "^2.9.1"
+    "usehooks-ts": "^3.1.0"
   },
   "devDependencies": {
-    "@svgr/webpack": "^8.0.1",
+    "@svgr/webpack": "^8.1.0",
     "@testing-library/dom": "^9.2.0",
     "@types/jest": "^29.5.1",
-    "@types/katex": "^0",
+    "@types/katex": "^0.16.7",
     "@types/luxon": "^3.3.0",
     "@types/node": "^20.1.0",
-    "@types/react": "^18.2.6",
-    "@types/react-dom": "^18.2.4",
+    "@types/react": "^19.0.0-rc.1",
+    "@types/react-dom": "^19.0.0-rc.1",
     "@types/react-router-dom": "^5.3.3",
-    "@typescript-eslint/eslint-plugin": "^5.59.5",
-    "@typescript-eslint/parser": "^5.59.5",
+    "@typescript-eslint/eslint-plugin": "^8.15.0",
+    "@typescript-eslint/parser": "^8.15.0",
     "confusing-browser-globals": "^1.0.11",
-    "eslint": "^8.40.0",
-    "eslint-config-next": "^13.4.12",
-    "eslint-config-prettier": "^8.8.0",
+    "eslint": "^9.15.0",
+    "eslint-config-next": "15.0.3",
+    "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-eslint-comments": "^3.2.0",
     "eslint-plugin-filenames": "^1.3.2",
-    "eslint-plugin-import": "^2.27.5",
-    "eslint-plugin-jest": "^27.2.1",
-    "eslint-plugin-no-secrets": "^0.8.9",
+    "eslint-plugin-import": "^2.31.0",
+    "eslint-plugin-jest": "^28.9.0",
+    "eslint-plugin-no-secrets": "^1.1.2",
     "eslint-plugin-node": "^11.1.0",
-    "eslint-plugin-prettier": "^4.2.1",
-    "eslint-plugin-promise": "^6.1.1",
-    "eslint-plugin-security": "^1.7.1",
-    "eslint-plugin-simple-import-sort": "^10.0.0",
-    "eslint-plugin-unicorn": "^47.0.0",
-    "prettier": "^2.8.8",
+    "eslint-plugin-prettier": "^5.2.1",
+    "eslint-plugin-promise": "^7.1.0",
+    "eslint-plugin-security": "^3.0.1",
+    "eslint-plugin-simple-import-sort": "^12.1.1",
+    "eslint-plugin-unicorn": "^56.0.1",
+    "prettier": "^3.3.3",
     "sass": "^1.62.1",
     "typed-scss-modules": "^7.1.0"
   },
-  "packageManager": "[email protected]"
+  "packageManager": "[email protected]",
+  "resolutions": {
+    "@types/react": "npm:[email protected]",
+    "@types/react-dom": "npm:[email protected]"
+  }
 }

src/components/CompetitionPage/CompetitionPage.tsx

@@ -89,7 +89,7 @@ export const CompetitionPage: FC<CompetitionPageProps> = ({
               </Typography>
               <Stack direction="row" sx={{gap: {xs: 1, sm: 2}}}>
                 {event.publication_set.map((publication) => (
-                  <Link variant="button2" key={publication.id} href={`/api/${publication.file}`}>
+                  <Link variant="button2" key={publication.id} href={`/api${publication.file}`}>
                     {publication.name}
                   </Link>
                 ))}

src/components/Posts/PostMarkdownTexts.tsx

@@ -1,39 +1,33 @@
 import {Typography} from '@mui/material'
-import {FC, ReactNode} from 'react'
-import {HeadingProps, OrderedListProps, ReactMarkdownProps, UnorderedListProps} from 'react-markdown/lib/ast-to-react'
+import {FC, JSX} from 'react'
 
 import {Link} from '../Clickable/Link'
 
-type MarkdownLinkProps = {
-  children: ReactNode[]
-  href?: string
-}
-
-export const MarkdownLink: FC<MarkdownLinkProps> = ({children, href}) => (
+export const MarkdownLink: FC<JSX.IntrinsicElements['a']> = ({children, href}) => (
   <Link href={href}>
     <Typography variant="postBody">{children}</Typography>
   </Link>
 )
 
-export const Ol: FC<OrderedListProps> = ({children}) => (
+export const Ol: FC<JSX.IntrinsicElements['ol']> = ({children}) => (
   <Typography variant="postBody" component="ol">
     {children}
   </Typography>
 )
 
-export const Ul: FC<UnorderedListProps> = ({children}) => (
+export const Ul: FC<JSX.IntrinsicElements['ul']> = ({children}) => (
   <Typography variant="postBody" component="ul">
     {children}
   </Typography>
 )
 
-export const Paragraph: FC<ReactMarkdownProps> = ({children}) => (
+export const Paragraph: FC<JSX.IntrinsicElements['p']> = ({children}) => (
   <Typography variant="postBody" mt={0.5} component="div">
     {children}
   </Typography>
 )
 
-export const Header: FC<HeadingProps> = ({children}) => (
+export const Header: FC<JSX.IntrinsicElements['h1']> = ({children}) => (
   <Typography variant="postBody" mt={1} component="div" fontWeight={800}>
     {children}
   </Typography>

src/components/SchoolSubForm/SchoolSubForm.tsx

@@ -1,9 +1,8 @@
 import {Stack} from '@mui/material'
 import {useQuery} from '@tanstack/react-query'
 import axios from 'axios'
-import {useRef} from 'react'
+import {useEffect, useRef} from 'react'
 import {Control, UseFormSetValue, UseFormWatch} from 'react-hook-form'
-import {useUpdateEffect} from 'usehooks-ts'
 
 import {IGrade} from '@/types/api/competition'
 import {ISchool} from '@/types/api/personal'
@@ -31,9 +30,11 @@ type SchoolSubFormProps<T extends SchoolSubFormValues> = {
 export const SchoolSubForm = ({control, watch, setValue, gap}: SchoolSubFormProps<SchoolSubFormValues>) => {
   const [school_not_found, without_school] = watch(['school_not_found', 'without_school'])
 
-  const otherSchoolItem = useRef<SelectOption>()
-  const withoutSchoolItem = useRef<SelectOption>()
-  const noGradeItem = useRef<SelectOption>()
+  const otherSchoolItem = useRef<SelectOption>(undefined)
+  const withoutSchoolItem = useRef<SelectOption>(undefined)
+  const noGradeItem = useRef<SelectOption>(undefined)
+
+  const firstRender = useRef(true)
 
   // načítanie ročníkov z BE, ktorými vyplníme FormSelect s ročníkmi
   const {data: gradesData} = useQuery({
@@ -60,10 +61,11 @@ export const SchoolSubForm = ({control, watch, setValue, gap}: SchoolSubFormProp
   noGradeItem.current = gradeItems.find(({id}) => id === 13)
 
   // predvyplnenie/zmazania hodnôt pri zakliknutí checkboxu pre užívateľa po škole
-  useUpdateEffect(() => {
+  useEffect(() => {
+    if (!firstRender) return
+
     if (without_school) {
       setValue('school', withoutSchoolItem.current)
-      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
       setValue('grade', noGradeItem.current!)
       setValue('school_not_found', false)
     } else {
@@ -73,14 +75,22 @@ export const SchoolSubForm = ({control, watch, setValue, gap}: SchoolSubFormProp
   }, [without_school])
 
   // predvyplnenie/zmazania hodnôt pri zakliknutí checkboxu pre neznámu školu
-  useUpdateEffect(() => {
+  useEffect(() => {
+    if (!firstRender) return
+
     if (school_not_found) {
       setValue('school', otherSchoolItem.current)
     } else if (!without_school) {
       setValue('school', null)
     }
   }, [school_not_found])
 
+  useEffect(() => {
+    if (firstRender.current) {
+      firstRender.current = false
+    }
+  }, [])
+
   const requiredRule = {required: '* Toto pole nemôže byť prázdne.'}
   return (
     <Stack gap={gap}>

src/components/StaticSites/Texts.tsx

@@ -1,13 +1,5 @@
 import {Typography} from '@mui/material'
-import {FC, ReactNode} from 'react'
-import {
-  HeadingProps,
-  OrderedListProps,
-  ReactMarkdownProps,
-  TableDataCellProps,
-  TableHeaderCellProps,
-  UnorderedListProps,
-} from 'react-markdown/lib/ast-to-react'
+import {FC, JSX, ReactNode} from 'react'
 
 import {Link} from '../Clickable/Link'
 import styles from './Texts.module.scss'
@@ -23,53 +15,55 @@ export const MarkdownLink: FC<MarkdownLinkProps> = ({children, href}) => (
   </Link>
 )
 
-export const Table: FC<ReactMarkdownProps> = ({children}) => <table className={styles.table}>{children}</table>
+export const Table: FC<JSX.IntrinsicElements['table']> = ({children}) => (
+  <table className={styles.table}>{children}</table>
+)
 
-export const Th: FC<TableHeaderCellProps> = ({children}) => (
+export const Th: FC<JSX.IntrinsicElements['th']> = ({children}) => (
   <th className={styles.th}>
     <Typography variant="h3" component="span">
       {children}
     </Typography>
   </th>
 )
 
-export const Td: FC<TableDataCellProps> = ({children}) => (
+export const Td: FC<JSX.IntrinsicElements['td']> = ({children}) => (
   <Typography variant="body1" component="td" p={0.3}>
     {children}
   </Typography>
 )
 
-export const Ol: FC<OrderedListProps> = ({children}) => (
+export const Ol: FC<JSX.IntrinsicElements['ol']> = ({children}) => (
   <Typography variant="body1" component="ol">
     {children}
   </Typography>
 )
 
-export const Ul: FC<UnorderedListProps> = ({children}) => (
+export const Ul: FC<JSX.IntrinsicElements['ul']> = ({children}) => (
   <Typography variant="body1" component="ul">
     {children}
   </Typography>
 )
 
-export const P: FC<ReactMarkdownProps> = ({children}) => (
+export const P: FC<JSX.IntrinsicElements['p']> = ({children}) => (
   <Typography variant="body1" mt={1} component="div">
     {children}
   </Typography>
 )
 
-export const H1: FC<HeadingProps> = ({children}) => (
+export const H1: FC<JSX.IntrinsicElements['h1']> = ({children}) => (
   <Typography variant="h1" mt={10} component="div">
     {children}
   </Typography>
 )
 
-export const H2: FC<HeadingProps> = ({children}) => (
+export const H2: FC<JSX.IntrinsicElements['h2']> = ({children}) => (
   <Typography variant="h2" mt={5} component="div">
     {children}
   </Typography>
 )
 
-export const H3: FC<HeadingProps> = ({children}) => (
+export const H3: FC<JSX.IntrinsicElements['h3']> = ({children}) => (
   <Typography variant="h3" mt={3} component="div">
     {children}
   </Typography>

src/utils/PageTitleContainer.tsx

@@ -1,11 +1,19 @@
-import {useState} from 'react'
+import {useEffect, useRef, useState} from 'react'
 import {createContainer} from 'unstated-next'
-import {useUpdateEffect} from 'usehooks-ts'
 
 const usePageTitle = (initial = '') => {
   const [pageTitle, setPageTitle] = useState(initial)
 
-  useUpdateEffect(() => {
+  const firstRender = useRef(true)
+
+  // ked navigujeme napr. z Kos na Matboj, ostavame na /akcie/[[]..params]], preto treba tento effect
+  useEffect(() => {
+    // na konci prveho renderu ale zbytocne budeme nastavovat title na `initial` znovu,
+    // a tym dovolime inym komponentom (napr. SemesterPicker-u) nastavit title zdola
+    if (firstRender.current) {
+      firstRender.current = false
+      return
+    }
     setPageTitle(initial)
   }, [initial])
 

tsconfig.json

@@ -1,11 +1,7 @@
 {
   "compilerOptions": {
-    "target": "es5",
-    "lib": [
-      "dom",
-      "dom.iterable",
-      "esnext"
-    ],
+    "target": "ESNext",
+    "lib": ["dom", "dom.iterable", "esnext"],
     "allowJs": true,
     "skipLibCheck": true,
     "esModuleInterop": true,
@@ -23,12 +19,6 @@
     "paths": {"@/*": ["src/*"]},
     "incremental": true
   },
-  "include": [
-    "next-env.d.ts",
-    "**/*.ts",
-    "**/*.tsx"
-  ],
-  "exclude": [
-    "node_modules"
-  ]
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
+  "exclude": ["node_modules"]
 }