Adapt components to new mui & nextjs versions

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 Accordion from '@mui/material/Accordion'
-import {useRouter} from 'next/router'
+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'

components/awtis/awtis-kat.js

@@ -1,19 +1,15 @@
-import {useState} from 'react'
+'use client'
-import {useRouter} from 'next/router'
-import PropTypes from 'prop-types'
-import clsx from 'clsx'
 
-import {
+import {useState} from 'react'
-  CardActionArea,
+import {useRouter} from 'next/navigation'
-  Grid,
+import PropTypes from 'prop-types'
-  Card,
+
-  CardContent,
+import CardActionArea from '@mui/material/CardActionArea'
-  CardMedia,
+import Grid from '@mui/material/Unstable_Grid2'
-  CardActions,
+import Card from '@mui/material/Card'
-  Collapse,
+import CardMedia from '@mui/material/CardMedia'
-  IconButton,
+import CardContent from '@mui/material/CardContent'
-  Typography
+import Typography from '@mui/material/Typography'
-} from '@mui/material'
 
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore'
 import {styled} from '@mui/material/styles'

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'

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 {

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'

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'

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'

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'

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'
 

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

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'
 

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'

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 {
+import Box from '@mui/material/Box'
-  Box,
+import Button from '@mui/material/Button'
-  Button,
+import Container from '@mui/material/Container'
-  Container,
+import FormControl from '@mui/material/FormControl'
-  FormControl,
+import FormHelperText from '@mui/material/FormHelperText'
-  FormHelperText,
+import Grid from '@mui/material/Unstable_Grid2'
-  Grid,
+import IconButton from '@mui/material/IconButton'
-  IconButton,
+import InputAdornment from '@mui/material/InputAdornment'
-  InputAdornment,
+import InputLabel from '@mui/material/InputLabel'
-  InputLabel,
+import LinearProgress from '@mui/material/LinearProgress'
-  LinearProgress,
+import OutlinedInput from '@mui/material/OutlinedInput'
-  OutlinedInput,
+import Snackbar from '@mui/material/Snackbar'
-  Snackbar,
+import TextField from '@mui/material/TextField'
-  TextField,
+import Tooltip from '@mui/material/Tooltip'
-  Tooltip,
+import Typography from '@mui/material/Typography'
-  Typography
+
-} from '@mui/material'
 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'

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'>

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>

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'
 

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,

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'

components/teks/pataje.js

@@ -1,3 +1,5 @@
+'use client'
+
 import {useState} from 'react'
 import PropTypes from 'prop-types'
 

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'

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 {
+import Card from '@mui/material/Card'
-  Card,
+
-  CardActionArea,
+import CardActionArea from '@mui/material/CardActionArea'
-  CardContent,
+import CardContent from '@mui/material/CardContent'
-  CardMedia,
+import CardMedia from '@mui/material/CardMedia'
-  Typography,
+import Typography from '@mui/material/Typography'
-  Grid,
+import Box from '@mui/material/Box'
-  Box
+import Grid from '@mui/material/Unstable_Grid2'
-} from '@mui/material'
 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

components/teks/teks.js

@@ -1,16 +1,14 @@
-import {forwardRef} from 'react'
+'use client'
+
+import {useEffect} from 'react'
 import PropTypes from 'prop-types'
-import {
+import Box from '@mui/material/Box'
-  Box,
+import Grid from '@mui/material/Unstable_Grid2'
-  Grid,
+import Typography from '@mui/material/Typography'
-  Snackbar,
+import Tooltip from '@mui/material/Tooltip'
-  Typography,
+import {useMediaQuery} from '@mui/material'
-  Tooltip,
+
-  Zoom,
-  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'