From 99ead9dec69a4db82624876472eace896d1383d7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?C=C3=A9dric=20Famibelle-Pronzola?= <c.pronzola@tuta.io>
Date: Sat, 22 Jul 2023 13:36:33 +0400
Subject: [PATCH] Adapt components to new mui & nextjs versions

---
 components/awtis/awtis-detay.js       | 15 +++++++++--
 components/awtis/awtis-kat.js         | 26 ++++++++-----------
 components/awtis/cheche-awtis.js      |  4 ++-
 components/awtis/mizik-badj-meni.js   |  2 +-
 components/cgu/cgu-dialog.js          |  2 +-
 components/komante/vwe-komante.js     |  2 +-
 components/navigasyon.js              |  4 ++-
 components/password/new-password.js   |  2 +-
 components/rezo-menu.js               |  2 +-
 components/rezo/kat-rezo-nou.js       |  4 +--
 components/rezo/rezo-dialog.js        |  4 ++-
 components/sesyon/koneksyon.js        |  4 +--
 components/soumet/ekri-teks.js        | 37 +++++++++++++--------------
 components/stats/kat-stats.js         |  4 +--
 components/stats/traductions-stats.js |  4 +--
 components/teks/denye-teks.js         |  6 ++++-
 components/teks/entegre-mizik.js      |  4 ++-
 components/teks/lekte.js              |  2 ++
 components/teks/pataje.js             |  2 ++
 components/teks/teks-drawer.js        |  1 +
 components/teks/teks-kat.js           | 23 +++++++++--------
 components/teks/teks.js               | 20 +++++++--------
 22 files changed, 98 insertions(+), 76 deletions(-)

diff --git a/components/awtis/awtis-detay.js b/components/awtis/awtis-detay.js
index 627ff54..e26e733 100644
--- a/components/awtis/awtis-detay.js
+++ b/components/awtis/awtis-detay.js
@@ -1,7 +1,18 @@
+'use client'
+
 import {useState} from 'react'
+import Link from 'next/link'
 import PropTypes from 'prop-types'
-import {Accordion, AccordionDetails, AccordionSummary, Box, Button, CardActionArea, Chip, Container, Grid, Paper} from '@mui/material'
-import {useRouter} from 'next/router'
+import Accordion from '@mui/material/Accordion'
+import AccordionDetails from '@mui/material/AccordionDetails'
+import AccordionSummary from '@mui/material/AccordionSummary'
+import Box from '@mui/material/Box'
+import Button from '@mui/material/Button'
+import CardActionArea from '@mui/material/CardActionArea'
+import Chip from '@mui/material/Chip'
+import Container from '@mui/material/Container'
+import Grid from '@mui/material/Unstable_Grid2'
+import Paper from '@mui/material/Paper'
 import Card from '@mui/material/Card'
 import CardContent from '@mui/material/CardContent'
 import Avatar from '@mui/material/Avatar'
diff --git a/components/awtis/awtis-kat.js b/components/awtis/awtis-kat.js
index a93d388..a3d9103 100644
--- a/components/awtis/awtis-kat.js
+++ b/components/awtis/awtis-kat.js
@@ -1,19 +1,15 @@
-import {useState} from 'react'
-import {useRouter} from 'next/router'
-import PropTypes from 'prop-types'
-import clsx from 'clsx'
+'use client'
 
-import {
-  CardActionArea,
-  Grid,
-  Card,
-  CardContent,
-  CardMedia,
-  CardActions,
-  Collapse,
-  IconButton,
-  Typography
-} from '@mui/material'
+import {useState} from 'react'
+import {useRouter} from 'next/navigation'
+import PropTypes from 'prop-types'
+
+import CardActionArea from '@mui/material/CardActionArea'
+import Grid from '@mui/material/Unstable_Grid2'
+import Card from '@mui/material/Card'
+import CardMedia from '@mui/material/CardMedia'
+import CardContent from '@mui/material/CardContent'
+import Typography from '@mui/material/Typography'
 
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore'
 import {styled} from '@mui/material/styles'
diff --git a/components/awtis/cheche-awtis.js b/components/awtis/cheche-awtis.js
index df25f7d..cda30c0 100644
--- a/components/awtis/cheche-awtis.js
+++ b/components/awtis/cheche-awtis.js
@@ -1,5 +1,7 @@
+'use client'
+
 import {useEffect, useState} from 'react'
-import {useRouter} from 'next/router'
+import {useRouter} from 'next/navigation'
 import TextField from '@mui/material/TextField'
 import Autocomplete from '@mui/material/Autocomplete'
 import Avatar from '@mui/material/Avatar'
diff --git a/components/awtis/mizik-badj-meni.js b/components/awtis/mizik-badj-meni.js
index 777bb07..1ce548f 100644
--- a/components/awtis/mizik-badj-meni.js
+++ b/components/awtis/mizik-badj-meni.js
@@ -1,5 +1,5 @@
 import {useRef, useEffect, useState} from 'react'
-import {useRouter} from 'next/router'
+import {useRouter} from 'next/navigation'
 import PropTypes from 'prop-types'
 
 import {
diff --git a/components/cgu/cgu-dialog.js b/components/cgu/cgu-dialog.js
index 8b2317e..c370670 100644
--- a/components/cgu/cgu-dialog.js
+++ b/components/cgu/cgu-dialog.js
@@ -2,7 +2,7 @@ import {useRef, useEffect} from 'react'
 import {styled} from '@mui/material/styles'
 import PropTypes from 'prop-types'
 import {Button, Dialog, DialogActions, DialogContent, DialogTitle, Typography} from '@mui/material'
-import {useRouter} from 'next/router'
+import {useRouter} from 'next/navigation'
 import Cgu from '.'
 
 const PREFIX = 'cgu-dialog'
diff --git a/components/komante/vwe-komante.js b/components/komante/vwe-komante.js
index 20cecca..89fd593 100644
--- a/components/komante/vwe-komante.js
+++ b/components/komante/vwe-komante.js
@@ -12,7 +12,7 @@ import {
   Typography,
   Badge
 } from '@mui/material'
-import {useRouter} from 'next/router'
+import {useRouter} from 'next/navigation'
 import Koneksyon from '../sesyon/koneksyon'
 import KomanteList from './komante-list'
 import EkriKomante from './ekri-komante'
diff --git a/components/navigasyon.js b/components/navigasyon.js
index 84c349b..a2fb380 100644
--- a/components/navigasyon.js
+++ b/components/navigasyon.js
@@ -1,6 +1,8 @@
+'use client'
+
 import {useState} from 'react'
 import PropTypes from 'prop-types'
-import {useRouter} from 'next/router'
+import {useRouter, usePathname} from 'next/navigation'
 
 import {styled} from '@mui/material/styles'
 import AppBar from '@mui/material/AppBar'
diff --git a/components/password/new-password.js b/components/password/new-password.js
index 8588d2c..c8f0346 100644
--- a/components/password/new-password.js
+++ b/components/password/new-password.js
@@ -1,7 +1,7 @@
 import {useState, forwardRef} from 'react'
 import PropTypes from 'prop-types'
 import axios from 'axios'
-import {useRouter} from 'next/router'
+import {useRouter} from 'next/navigation'
 
 import {FormControl, Snackbar, IconButton, Button, Input, InputAdornment, InputLabel, Box, Container, Typography, LinearProgress} from '@mui/material'
 import MuiAlert from '@mui/material/Alert'
diff --git a/components/rezo-menu.js b/components/rezo-menu.js
index 48bfad8..6c5d9ed 100644
--- a/components/rezo-menu.js
+++ b/components/rezo-menu.js
@@ -1,7 +1,7 @@
 import {useRef, useState} from 'react'
 import {styled} from '@mui/material/styles'
 import PropTypes from 'prop-types'
-import {useRouter} from 'next/router'
+import {useRouter} from 'next/navigation'
 import {Button, ListItemIcon, ListItemText, Menu, MenuItem} from '@mui/material'
 import PublicIcon from '@mui/icons-material/Public'
 
diff --git a/components/rezo/kat-rezo-nou.js b/components/rezo/kat-rezo-nou.js
index a4f6178..cc137d8 100644
--- a/components/rezo/kat-rezo-nou.js
+++ b/components/rezo/kat-rezo-nou.js
@@ -4,7 +4,7 @@ import Card from '@mui/material/Card'
 import CardContent from '@mui/material/CardContent'
 import CardActionArea from '@mui/material/CardActionArea'
 import Divider from '@mui/material/Divider'
-import Grid from '@mui/material/Grid'
+import Grid from '@mui/material/Unstable_Grid2'
 
 import Typography from '@mui/material/Typography'
 import {CardMedia} from '@mui/material'
@@ -20,7 +20,7 @@ export default function KatRezoNou({tit, img, soutit, ko, lyen}) {
 
   return (
     <>
-      <Grid item xs={12} md={6} sx={{marginBottom: 2}}>
+      <Grid xs={12} md={6} sx={{marginBottom: 2}}>
         <Card raised>
           <CardActionArea onClick={handleClickOpen}>
             <CardMedia
diff --git a/components/rezo/rezo-dialog.js b/components/rezo/rezo-dialog.js
index 132c533..7de46b8 100644
--- a/components/rezo/rezo-dialog.js
+++ b/components/rezo/rezo-dialog.js
@@ -6,7 +6,9 @@ import DialogContent from '@mui/material/DialogContent'
 import DialogTitle from '@mui/material/DialogTitle'
 import useMediaQuery from '@mui/material/useMediaQuery'
 import {useTheme} from '@mui/material/styles'
-import {Box, Grid, IconButton} from '@mui/material'
+import Box from '@mui/material/Box'
+import Grid from '@mui/material/Unstable_Grid2'
+import IconButton from '@mui/material/IconButton'
 import CloseIcon from '@mui/icons-material/Close'
 import PublicIcon from '@mui/icons-material/Public'
 
diff --git a/components/sesyon/koneksyon.js b/components/sesyon/koneksyon.js
index 9d315b7..f36a3c8 100644
--- a/components/sesyon/koneksyon.js
+++ b/components/sesyon/koneksyon.js
@@ -1,6 +1,6 @@
 import {useEffect, useState, forwardRef} from 'react'
 import {signIn} from 'next-auth/react'
-import {useRouter} from 'next/router'
+import {useRouter} from 'next/navigation'
 import PropTypes from 'prop-types'
 import Box from '@mui/material/Box'
 import Button from '@mui/material/Button'
@@ -15,7 +15,7 @@ import Snackbar from '@mui/material/Snackbar'
 import Tab from '@mui/material/Tab'
 import Tabs from '@mui/material/Tabs'
 import Typography from '@mui/material/Typography'
-import Grid from '@mui/material/Grid'
+import Grid from '@mui/material/Unstable_Grid2'
 import Visibility from '@mui/icons-material/Visibility'
 import VisibilityOff from '@mui/icons-material/VisibilityOff'
 import MuiAlert from '@mui/material/Alert'
diff --git a/components/soumet/ekri-teks.js b/components/soumet/ekri-teks.js
index 195b8a4..b01cf99 100644
--- a/components/soumet/ekri-teks.js
+++ b/components/soumet/ekri-teks.js
@@ -3,23 +3,22 @@ import {styled} from '@mui/material/styles'
 import PropTypes from 'prop-types'
 import axios from 'axios'
 import {useSession} from 'next-auth/react'
-import {
-  Box,
-  Button,
-  Container,
-  FormControl,
-  FormHelperText,
-  Grid,
-  IconButton,
-  InputAdornment,
-  InputLabel,
-  LinearProgress,
-  OutlinedInput,
-  Snackbar,
-  TextField,
-  Tooltip,
-  Typography
-} from '@mui/material'
+import Box from '@mui/material/Box'
+import Button from '@mui/material/Button'
+import Container from '@mui/material/Container'
+import FormControl from '@mui/material/FormControl'
+import FormHelperText from '@mui/material/FormHelperText'
+import Grid from '@mui/material/Unstable_Grid2'
+import IconButton from '@mui/material/IconButton'
+import InputAdornment from '@mui/material/InputAdornment'
+import InputLabel from '@mui/material/InputLabel'
+import LinearProgress from '@mui/material/LinearProgress'
+import OutlinedInput from '@mui/material/OutlinedInput'
+import Snackbar from '@mui/material/Snackbar'
+import TextField from '@mui/material/TextField'
+import Tooltip from '@mui/material/Tooltip'
+import Typography from '@mui/material/Typography'
+
 import MuiAlert from '@mui/material/Alert'
 import VisibilityOffIcon from '@mui/icons-material/VisibilityOff'
 
@@ -293,7 +292,7 @@ function EkriTeks({canAutoTranslate, selectedTeks, setSelectedTeks}) {
       </Box>
       <form noValidate autoComplete='off'>
         <Grid container style={{textAlign: 'center'}} spacing={1}>
-          <Grid item xs>
+          <Grid xs>
             <TextField
               required
               id='awtis'
@@ -306,7 +305,7 @@ function EkriTeks({canAutoTranslate, selectedTeks, setSelectedTeks}) {
               onChange={event => handleUpdate({awtis: event.target.value})}
             />
           </Grid>
-          <Grid item xs>
+          <Grid xs>
             <TextField
               required
               id='tit'
diff --git a/components/stats/kat-stats.js b/components/stats/kat-stats.js
index 410421d..5fd09c6 100644
--- a/components/stats/kat-stats.js
+++ b/components/stats/kat-stats.js
@@ -2,13 +2,13 @@ import PropTypes from 'prop-types'
 import Card from '@mui/material/Card'
 import CardContent from '@mui/material/CardContent'
 import Typography from '@mui/material/Typography'
-import Grid from '@mui/material/Grid'
+import Grid from '@mui/material/Unstable_Grid2'
 
 import TraductionsStats from './traductions-stats'
 
 export default function KatStats({emoji, value, total}) {
   return (
-    <Grid item xs={12} md={2}>
+    <Grid xs={12} md={2}>
       <Card variant='outlined'>
         <CardContent>
           <Typography align='center' variant='h6'>
diff --git a/components/stats/traductions-stats.js b/components/stats/traductions-stats.js
index b200c25..007ff2d 100644
--- a/components/stats/traductions-stats.js
+++ b/components/stats/traductions-stats.js
@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types'
 import Typography from '@mui/material/Typography'
 import Box from '@mui/material/Box'
-import Grid from '@mui/material/Grid'
+import Grid from '@mui/material/Unstable_Grid2'
 
 import BarStats from './bar-stats'
 
@@ -12,7 +12,7 @@ export default function TraductionsStats({value, total}) {
   return (
     <Box sx={{width: '100%'}}>
       <Grid container rowSpacing={3} columnSpacing={6} justifyContent='space-around'>
-        <Grid item xs={12} md={6}>
+        <Grid xs={12} md={6}>
           <Typography style={{fontWeight: 'bold'}} align='center' variant='h6'>
             {translated}
           </Typography>
diff --git a/components/teks/denye-teks.js b/components/teks/denye-teks.js
index 78cef36..920ae3f 100644
--- a/components/teks/denye-teks.js
+++ b/components/teks/denye-teks.js
@@ -1,5 +1,9 @@
+'use client'
+
 import PropTypes from 'prop-types'
-import {Container, Grid, Typography} from '@mui/material'
+import Container from '@mui/material/Container'
+import Grid from '@mui/material/Unstable_Grid2'
+import Typography from '@mui/material/Typography'
 
 import {styled} from '@mui/material/styles'
 
diff --git a/components/teks/entegre-mizik.js b/components/teks/entegre-mizik.js
index 78e13e7..ef09eec 100644
--- a/components/teks/entegre-mizik.js
+++ b/components/teks/entegre-mizik.js
@@ -1,6 +1,8 @@
+'use client'
+
 import {Box, IconButton} from '@mui/material'
 import PropTypes from 'prop-types'
-import {useRouter} from 'next/router'
+import {useRouter} from 'next/navigation'
 
 import {
   Tidal,
diff --git a/components/teks/lekte.js b/components/teks/lekte.js
index 46bb621..28260b6 100644
--- a/components/teks/lekte.js
+++ b/components/teks/lekte.js
@@ -1,3 +1,5 @@
+'use client'
+
 import {useState, useEffect, useRef} from 'react'
 import PropTypes from 'prop-types'
 import {styled, useTheme} from '@mui/material/styles'
diff --git a/components/teks/pataje.js b/components/teks/pataje.js
index 65e2abd..301571a 100644
--- a/components/teks/pataje.js
+++ b/components/teks/pataje.js
@@ -1,3 +1,5 @@
+'use client'
+
 import {useState} from 'react'
 import PropTypes from 'prop-types'
 
diff --git a/components/teks/teks-drawer.js b/components/teks/teks-drawer.js
index 61b723c..87ac0a1 100644
--- a/components/teks/teks-drawer.js
+++ b/components/teks/teks-drawer.js
@@ -1,5 +1,6 @@
 import {useEffect, useState, useContext} from 'react'
 import Link from 'next/link'
+import {useParams} from 'next/navigation'
 import PropTypes from 'prop-types'
 import {styled} from '@mui/material/styles'
 import AppBar from '@mui/material/AppBar'
diff --git a/components/teks/teks-kat.js b/components/teks/teks-kat.js
index f740ffd..e820d2c 100644
--- a/components/teks/teks-kat.js
+++ b/components/teks/teks-kat.js
@@ -1,16 +1,17 @@
+'use client'
+
 import PropTypes from 'prop-types'
-import {useRouter} from 'next/router'
+import {useRouter} from 'next/navigation'
 import {format} from 'date-fns'
 import {fr} from 'date-fns/locale'
-import {
-  Card,
-  CardActionArea,
-  CardContent,
-  CardMedia,
-  Typography,
-  Grid,
-  Box
-} from '@mui/material'
+import Card from '@mui/material/Card'
+
+import CardActionArea from '@mui/material/CardActionArea'
+import CardContent from '@mui/material/CardContent'
+import CardMedia from '@mui/material/CardMedia'
+import Typography from '@mui/material/Typography'
+import Box from '@mui/material/Box'
+import Grid from '@mui/material/Unstable_Grid2'
 import ExplicitIcon from '@mui/icons-material/Explicit'
 import {styled} from '@mui/material/styles'
 import {Peertube} from '@icons-pack/react-simple-icons'
@@ -50,7 +51,7 @@ export default function TeksKat({parole}) {
   }
 
   return (
-    <StyledGrid item xs={12} sm={6} md={4}>
+    <StyledGrid xs={12} sm={6} md={4}>
       <Card className={classes.root}>
         <CardActionArea onClick={() => handleClick(slug)}>
           <CardMedia
diff --git a/components/teks/teks.js b/components/teks/teks.js
index 65f827c..b1f1250 100644
--- a/components/teks/teks.js
+++ b/components/teks/teks.js
@@ -1,16 +1,14 @@
-import {forwardRef} from 'react'
+'use client'
+
+import {useEffect} from 'react'
 import PropTypes from 'prop-types'
-import {
-  Box,
-  Grid,
-  Snackbar,
-  Typography,
-  Tooltip,
-  Zoom,
-  useMediaQuery
-} from '@mui/material'
+import Box from '@mui/material/Box'
+import Grid from '@mui/material/Unstable_Grid2'
+import Typography from '@mui/material/Typography'
+import Tooltip from '@mui/material/Tooltip'
+import {useMediaQuery} from '@mui/material'
+
 import {styled} from '@mui/material/styles'
-import MuiAlert from '@mui/material/Alert'
 import ExplicitIcon from '@mui/icons-material/Explicit'
 
 import {formatJsonString, getAlias} from '../../lib/utils/format'