[Snyk] Fix for 1 vulnerabilities

client/package.json

@@ -33,10 +33,10 @@
     ]
   },
   "dependencies": {
-    "@reduxjs/toolkit": "^1.9.1",
+    "@reduxjs/toolkit": "^2.0.0",
     "@testing-library/jest-dom": "^5.16.5",
-    "@testing-library/react": "^13.4.0",
-    "@testing-library/user-event": "^13.5.0",
+    "@testing-library/react": "^16.0.0",
+    "@testing-library/user-event": "^14.0.0",
     "@tippyjs/react": "^4.2.6",
     "@types/jest": "^27.5.2",
     "@types/node": "^16.18.11",
@@ -54,15 +54,15 @@
     "react-chartjs-2": "^5.2.0",
     "react-dom": "^18.2.0",
     "react-google-button": "^0.7.2",
-    "react-helmet-async": "^1.3.0",
+    "react-helmet-async": "^2.0.0",
     "react-icons": "^4.7.1",
     "react-loading-skeleton": "^3.1.0",
-    "react-redux": "^8.0.5",
+    "react-redux": "^9.0.0",
     "react-router-dom": "^6.6.2",
     "react-scripts": "5.0.1",
     "react-slick": "^0.29.0",
     "react-toastify": "^9.1.1",
-    "redux": "^4.2.0",
+    "redux": "^5.0.0",
     "sass": "^1.57.1",
     "slick-carousel": "^1.8.1",
     "typescript": "^4.9.4",
@@ -90,5 +90,6 @@
     "prettier": "^2.8.3",
     "react-app-rewired": "^2.2.1",
     "typescript-plugin-css-modules": "^4.1.1"
-  }
+  },
+  "packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
 }

client/src/App.test.tsx

@@ -1,9 +1,9 @@
 import React from "react"
-import { render, screen } from "@testing-library/react"
+import { render } from "@testing-library/react"
 import App from "./App"
 
 test("renders learn react link", () => {
-  render(<App />)
-  const linkElement = screen.getByText(/learn react/i)
+  const { getByText } = render(<App />)
+  const linkElement = getByText(/learn react/i)
   expect(linkElement).toBeInTheDocument()
 })

client/src/components/Alpha/AlphaDetailPlayList.tsx

@@ -5,8 +5,8 @@ import { BsPlayCircle } from "react-icons/bs"
 import images from "../../assets/images"
 import { useAppDispatch, useAppSelector } from "../../hooks/useRedux"
 import { setPlaying } from "../../redux/reducers/controlSlice"
-import { IconLoading } from "../icons"
-import Image from "../image"
+import { IconLoading } from "../Icons"
+import Image from "../Image"
 import style from "./AlphaDetailPlayList.module.scss"
 
 interface IProps {

client/src/components/Alpha/AlphaMedia.tsx

@@ -4,8 +4,8 @@ import React from "react"
 import images from "../../assets/images"
 import { useAppDispatch, useAppSelector } from "../../hooks/useRedux"
 import { setPlaying } from "../../redux/reducers/controlSlice"
-import { IconLoading } from "../icons"
-import Image from "../image"
+import { IconLoading } from "../Icons"
+import Image from "../Image"
 import style from "./AlphaMedia.module.scss"
 
 interface IProps {

client/src/components/Alpha/AlphaModalTheme.tsx

@@ -4,7 +4,7 @@ import { useAppDispatch } from "../../hooks/useRedux"
 import { changeTheme, setShowThemeModal } from "../../redux/reducers/themeSlice"
 import { getToastWarn } from "../../utils/toast"
 
-import { ButtonTitle } from "../button"
+import { ButtonTitle } from "../Button"
 import style from "./AlphaModalTheme.module.scss"
 
 interface IProps {

client/src/components/Alpha/AlphaPage.tsx

@@ -1,6 +1,6 @@
 import React from "react"
 
-import Image from "../image"
+import Image from "../Image"
 import style from "./AlphaPage.module.scss"
 
 interface IProps {

client/src/components/Button/ButtonDropDown.tsx

@@ -3,7 +3,7 @@ import React, { useState } from "react"
 import { HiOutlineChevronDown, HiOutlineChevronUp } from "react-icons/hi2"
 
 import { ButtonTitle } from "."
-import { PopperWrapper } from "../wrapper"
+import { PopperWrapper } from "../Wrapper"
 import style from "./ButtonDropDown.module.scss"
 
 interface IProps {

client/src/components/Button/ButtonMenu.tsx

@@ -2,8 +2,8 @@ import HeadlessTippy from "@tippyjs/react/headless"
 import clsx from "clsx"
 import React, { useState } from "react"
 
-import Menu from "../menu"
-import { PopperWrapper } from "../wrapper"
+import Menu from "../Menu"
+import { PopperWrapper } from "../Wrapper"
 import style from "./ButtonMenu.module.scss"
 
 interface IProps {

client/src/components/Card/CardAlbum.tsx

@@ -3,9 +3,9 @@ import React from "react"
 import { Link } from "react-router-dom"
 
 import { DETAIL_PLAY_LIST } from "../../constants"
-import { AlphaCard } from "../alpha"
-import Image from "../image"
-import { SubTitle, Title } from "../info"
+import { AlphaCard } from "../Alpha"
+import Image from "../Image"
+import { SubTitle, Title } from "../Info"
 import style from "./CardAlbum.module.scss"
 
 interface IProps {

client/src/components/Card/CardArtist.tsx

@@ -5,10 +5,10 @@ import { Link } from "react-router-dom"
 import images from "../../assets/images"
 import { ARTIST } from "../../constants"
 import { formatLinkArtist } from "../../utils/common"
-import { AlphaCard } from "../alpha"
+import { AlphaCard } from "../Alpha"
 import { BtnFollow } from "../btn-action"
-import Image from "../image"
-import { SubTitle, Title } from "../info"
+import Image from "../Image"
+import { SubTitle, Title } from "../Info"
 import style from "./CardArtist.module.scss"
 
 interface IProps {

client/src/components/Card/CardDetail.tsx

@@ -3,9 +3,9 @@ import React from "react"
 import { Link } from "react-router-dom"
 
 import { DETAIL_PLAY_LIST } from "../../constants"
-import { AlphaCard } from "../alpha"
-import Image from "../image"
-import { SubTitle, Title } from "../info"
+import { AlphaCard } from "../Alpha"
+import Image from "../Image"
+import { SubTitle, Title } from "../Info"
 import style from "./CardDetail.module.scss"
 
 interface IProps {

client/src/components/Card/CardRadio.tsx

@@ -3,9 +3,9 @@ import React from "react"
 import { Link } from "react-router-dom"
 
 import { DETAIL_PLAY_LIST, RADIO } from "../../constants"
-import { AlphaCard } from "../alpha"
-import Image from "../image"
-import { SubTitle, Title } from "../info"
+import { AlphaCard } from "../Alpha"
+import Image from "../Image"
+import { SubTitle, Title } from "../Info"
 import style from "./CardRadio.module.scss"
 
 interface IProps {

client/src/components/Card/CardSong.tsx

@@ -3,9 +3,9 @@ import React from "react"
 import { Link } from "react-router-dom"
 
 import { DETAIL_PLAY_LIST } from "../../constants"
-import { AlphaCard } from "../alpha"
-import Image from "../image"
-import { SubTitle, Title } from "../info"
+import { AlphaCard } from "../Alpha"
+import Image from "../Image"
+import { SubTitle, Title } from "../Info"
 import style from "./CardSong.module.scss"
 
 interface IProps {

client/src/components/Card/CardVideo.tsx

@@ -3,9 +3,9 @@ import React from "react"
 import { Link } from "react-router-dom"
 
 import { MV, VIDEO } from "../../constants"
-import { AlphaCard } from "../alpha"
-import Image from "../image"
-import { SubTitle, Title } from "../info"
+import { AlphaCard } from "../Alpha"
+import Image from "../Image"
+import { SubTitle, Title } from "../Info"
 import Time from "../time"
 import style from "./CardVideo.module.scss"
 

client/src/components/Info/SubTitle.tsx

@@ -7,8 +7,8 @@ import { Link } from "react-router-dom"
 import { ARTIST } from "../../constants"
 import { useAppSelector } from "../../hooks/useRedux"
 import { formatLinkArtist } from "../../utils/common"
-import MediaReview from "../media/media-review"
-import { PopperWrapper } from "../wrapper"
+import MediaReview from "../Media/media-review"
+import { PopperWrapper } from "../Wrapper"
 import style from "./SubTitle.module.scss"
 
 interface IProps {

client/src/components/Media/Media.tsx

@@ -5,13 +5,13 @@ import { useAppDispatch, useAppSelector } from "../../hooks/useRedux"
 import { MediaIProps } from "../../interface"
 import { setInfoSong } from "../../redux/reducers/songSlice"
 import { getToastWarn } from "../../utils/toast"
-import { AlphaMedia } from "../alpha"
+import { AlphaMedia } from "../Alpha"
 import { BtnHeartSong, BtnKaraoke, BtnThreeDotMedia } from "../btn-action"
-import Image from "../image"
-import { SubTitle, Title } from "../info"
+import Image from "../Image"
+import { SubTitle, Title } from "../Info"
 import Time from "../time"
 import style from "./Media.module.scss"
-import { PrefixIcon, PrefixNum, PrefixTitle } from "./prefix"
+import { PrefixIcon, PrefixNum, PrefixTitle } from "./Prefix"
 
 interface IProps extends MediaIProps {
   prefixIndex?: number

client/src/components/Media/media-review/MediaPreview.tsx

@@ -6,10 +6,10 @@ import { Link } from "react-router-dom"
 import { useAppSelector } from "../../../hooks/useRedux"
 import * as services from "../../../services"
 import { formatFollower } from "../../../utils/common"
-import { AlphaMedia } from "../../alpha"
+import { AlphaMedia } from "../../Alpha"
 import { BtnFollow } from "../../btn-action"
-import { CardSong } from "../../card"
-import Image from "../../image"
+import { CardSong } from "../../Card"
+import Image from "../../Image"
 import style from "./MediaPreview.module.scss"
 
 interface SectionItem {

client/src/components/Menu/Menu.tsx

@@ -2,8 +2,8 @@ import HeadlessTippy from "@tippyjs/react/headless"
 import clsx from "clsx"
 import React from "react"
 
-import { ButtonTitle } from "../button"
-import { PopperWrapper } from "../wrapper"
+import { ButtonTitle } from "../Button"
+import { PopperWrapper } from "../Wrapper"
 import style from "./Menu.module.scss"
 
 interface MenuIProps {

client/src/components/Slide/SlideArtist.tsx

@@ -1,8 +1,8 @@
 import React from "react"
 import { Link } from "react-router-dom"
 
-import Image from "../image"
-import { SlideWrapper } from "../wrapper"
+import Image from "../Image"
+import { SlideWrapper } from "../Wrapper"
 import ARTISTS from "./data"
 import style from "./SlideArtist.module.scss"
 

client/src/components/Slide/SlideBanner.tsx

@@ -5,7 +5,7 @@ import { Link } from "react-router-dom"
 
 import { BannerIProps } from "../../interface"
 import { formatLinkBanner } from "../../utils/common"
-import Image from "../image"
+import Image from "../Image"
 import style from "./SlideBanner.module.scss"
 
 interface SlideBannerProps {

client/src/components/Slide/SlideRadio.tsx

@@ -1,9 +1,9 @@
 import React from "react"
 
 import { RadioIProps } from "../../interface"
-import { CardRadio } from "../card"
-import { Title } from "../info"
-import { SlideWrapper } from "../wrapper"
+import { CardRadio } from "../Card"
+import { Title } from "../Info"
+import { SlideWrapper } from "../Wrapper"
 import style from "./SlideRadio.module.scss"
 
 interface IProps {

client/src/components/btn-action/BtnFollow.tsx

@@ -2,7 +2,7 @@ import React, { useState } from "react"
 import { AiOutlineCheck } from "react-icons/ai"
 import { SlUserFollow } from "react-icons/sl"
 
-import { ButtonTitle } from "../button"
+import { ButtonTitle } from "../Button"
 
 interface IProps {
   primary?: boolean

client/src/components/btn-action/BtnHeartAlbum.tsx

@@ -7,7 +7,7 @@ import { LOGIN } from "../../constants"
 import { useAppSelector } from "../../hooks/useRedux"
 import * as services from "../../services"
 import { getToastSuccess, getToastWarn } from "../../utils/toast"
-import { ButtonIcon } from "../button"
+import { ButtonIcon } from "../Button"
 
 interface IProps {
   album: any

client/src/components/btn-action/BtnHeartSong.tsx

@@ -7,7 +7,7 @@ import { LOGIN } from "../../constants"
 import { useAppSelector } from "../../hooks/useRedux"
 import * as services from "../../services"
 import { getToastSuccess, getToastWarn } from "../../utils/toast"
-import { ButtonIcon } from "../button"
+import { ButtonIcon } from "../Button"
 
 interface Song {
   encodeId: string

client/src/components/btn-action/BtnKaraoke.tsx

@@ -3,7 +3,7 @@ import { GiMicrophone } from "react-icons/gi"
 
 import { useAppDispatch } from "../../hooks/useRedux"
 import { setShowLyricSongModal } from "../../redux/reducers/lyricSlice"
-import { ButtonIcon } from "../button"
+import { ButtonIcon } from "../Button"
 
 interface IProps {
   title?: string

client/src/components/btn-action/BtnMV.tsx

@@ -1,7 +1,7 @@
 import React, { useState } from "react"
 import { MdOutlineVideoLibrary } from "react-icons/md"
 
-import { ButtonIcon } from "../button"
+import { ButtonIcon } from "../Button"
 
 interface IProps {
   title?: string

client/src/components/btn-action/BtnThreeDotCard.tsx

@@ -10,9 +10,9 @@ import { IoIosAddCircleOutline } from "react-icons/io"
 import { MdOutlineModeComment } from "react-icons/md"
 import { SiZalo } from "react-icons/si"
 
-import { ButtonIcon } from "../button"
-import Menu from "../menu/Menu"
-import { PopperWrapper } from "../wrapper"
+import { ButtonIcon } from "../Button"
+import Menu from "../Menu/Menu"
+import { PopperWrapper } from "../Wrapper"
 import style from "./BtnThreeDotCard.module.scss"
 
 const MENU_CARD = [

client/src/components/btn-action/BtnThreeDotMedia.tsx

@@ -13,11 +13,11 @@ import { SiZalo } from "react-icons/si"
 
 import { useAppDispatch } from "../../hooks/useRedux"
 import { setShowLyricSongModal } from "../../redux/reducers/lyricSlice"
-import { ButtonIcon, ButtonTitle } from "../button"
-import Image from "../image"
-import { SubTitle, Title } from "../info"
-import Menu from "../menu/Menu"
-import { PopperWrapper } from "../wrapper"
+import { ButtonIcon, ButtonTitle } from "../Button"
+import Image from "../Image"
+import { SubTitle, Title } from "../Info"
+import Menu from "../Menu/Menu"
+import { PopperWrapper } from "../Wrapper"
 import style from "./BtnThreeDotMedia.module.scss"
 
 const MENU_MEDIA = [

client/src/components/btn-action/BtnToggleList.tsx

@@ -4,7 +4,7 @@ import { BsMusicNoteList } from "react-icons/bs"
 import { useAppDispatch, useAppSelector } from "../../hooks/useRedux"
 import { setShowPlayListModal } from "../../redux/reducers/playListSlice"
 
-import { ButtonIcon } from "../button"
+import { ButtonIcon } from "../Button"
 import style from "./BtnToggleList.module.scss"
 
 interface IProps {

client/src/components/btn-action/BtnView.tsx

@@ -1,7 +1,7 @@
 import React, { useState } from "react"
 import { VscMultipleWindows } from "react-icons/vsc"
 
-import { ButtonIcon } from "../button"
+import { ButtonIcon } from "../Button"
 
 interface IProps {
   title?: string

client/src/components/modal/modal-lyric/ModalLyric.tsx

@@ -8,10 +8,10 @@ import { useDispatch } from "react-redux"
 import images from "../../../assets/images"
 import { useAppSelector } from "../../../hooks/useRedux"
 import { setShowLyricSongModal } from "../../../redux/reducers/lyricSlice"
-import { ButtonIcon } from "../../button"
-import Image from "../../image"
-import { TabButton } from "../../tab"
-import { TabWrapper } from "../../wrapper"
+import { ButtonIcon } from "../../Button"
+import Image from "../../Image"
+import { TabButton } from "../../Tab"
+import { TabWrapper } from "../../Wrapper"
 import style from "./ModalLyric.module.scss"
 import PlayListPanel from "./play-list-panel/PlayListPanel"
 import KaraokePanel from "./karaoke-panel/KaraokePanel"

client/src/components/modal/modal-lyric/karaoke-panel/KaraokePanel.tsx

@@ -1,7 +1,7 @@
 import clsx from "clsx"
 import React from "react"
 
-import Lyric from "../../../lyric"
+import Lyric from "../../../Lyric"
 import style from "./KaraokePanel.module.scss"
 
 const KaraokePanel: React.FC = () => {