ORGANISATION-KA-INTERNATIONALE/pawol.nu
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Use codemod jss-to-styled

Browse Source
This commit is contained in:
Cédric FAMIBELLE-PRONZOLA
2022-01-19 06:35:04 +04:00
parent 3b83cf93e9
commit 1afa1e5ba8
22 changed files with 693 additions and 402 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/teks/denye-teks.js
+13 -6
View File
@@ -1,15 +1,22 @@
import {Container, Grid, makeStyles} from '@material-ui/core'
import {Container, Grid} from '@material-ui/core'
import {styled} from '@mui/material/styles'
import TeksKat from './teks-kat'
const useStyles = makeStyles(() => ({
container: {
const PREFIX = 'denye-teks'
const classes = {
container: `${PREFIX}-container`
}
const Root = styled('div')(() => ({
[`&.${classes.container}`]: {
marginTop: '3em'
}
}))
export default function DenyeTeks(teks) {
const classes = useStyles()
const teksKlasePaPibilikasyon = Object.values(teks).sort((a, b) => {
const aDate = new Date(a.published_at)
const bDate = new Date(b.published_at)
@@ -17,12 +24,12 @@ export default function DenyeTeks(teks) {
}).slice(0, 6)
return (
<div className={classes.container}>
<Root className={classes.container}>
<Container>
<Grid container spacing={3}>
{teksKlasePaPibilikasyon.map(t => <TeksKat key={t._id} teks={t} />)}
</Grid>
</Container>
</div>
</Root>
)
}
components/teks/drawer-bar.js
+25 -10
View File
@@ -1,4 +1,5 @@
import {useState} from 'react'
import {styled} from '@mui/material/styles'
import PropTypes from 'prop-types'
import union from 'lodash.union'
import deburr from 'lodash.deburr'
@@ -7,23 +8,38 @@ import {
Divider,
FormControl,
InputAdornment,
InputBase,
makeStyles
InputBase
} from '@material-ui/core'
import SearchIcon from '@material-ui/icons/Search'
import MizikLis from '../awtis/mizik-lis'
const useStyles = makeStyles(theme => ({
toolbar: theme.mixins.toolbar,
list: {
const PREFIX = 'drawer-bar'
const classes = {
toolbar: `${PREFIX}-toolbar`,
list: `${PREFIX}-list`,
form: `${PREFIX}-form`,
text: `${PREFIX}-text`
}
const Root = styled('div')((
{
theme
}
) => ({
[`& .${classes.toolbar}`]: theme.mixins.toolbar,
[`& .${classes.list}`]: {
marginBottom: '6em'
},
form: {
[`& .${classes.form}`]: {
marginLeft: theme.spacing(1)
},
text: {
[`& .${classes.text}`]: {
marginBottom: '0.5em'
}
}))
@@ -46,7 +62,6 @@ const getMizikFiltered = (teks, filter) => {
export default function DrawerBar({meteEsMobilOuve, teks, anTeks}) {
const slug = anTeks ? anTeks.slug : null
const classes = useStyles()
const [search, setSearch] = useState('')
const [slugTeksChwazi, meteSlugTeksChwazi] = useState(slug)
@@ -60,7 +75,7 @@ export default function DrawerBar({meteEsMobilOuve, teks, anTeks}) {
}
return (
<div className='search'>
<Root className='search'>
<FormControl className={classes.form}>
<InputBase
className={classes.toolbar}
@@ -84,7 +99,7 @@ export default function DrawerBar({meteEsMobilOuve, teks, anTeks}) {
meteSlugTeksChwazi={meteSlugTeksChwazi}
/>
</div>
</div>
</Root>
)
}
components/teks/pataje.js
+14 -9
View File
@@ -1,7 +1,7 @@
import {useState} from 'react'
import PropTypes from 'prop-types'
import {makeStyles} from '@material-ui/core/styles'
import {styled} from '@material-ui/core/styles'
import SpeedDial from '@material-ui/lab/SpeedDial'
import SpeedDialIcon from '@material-ui/lab/SpeedDialIcon'
import SpeedDialAction from '@material-ui/lab/SpeedDialAction'
@@ -10,24 +10,29 @@ import ShareIcon from '@material-ui/icons/Share'
import TwitterIcon from '@material-ui/icons/Twitter'
import {Backdrop} from '@material-ui/core'
const SITE_URL = process.env.NEXT_PUBLIC_SITE_URL
const TWITTER_HASHTAGS = process.env.NEXT_PUBLIC_TWITTER_HASHTAGS || 'OKi'
const TWITTER_USERNAME = process.env.NEXT_PUBLIC_TWITTER_USERNAME || 'OrganisationKA'
const PREFIX = 'pataje'
const useStyles = makeStyles(() => ({
root: {
const classes = {
root: `${PREFIX}-root`
}
const Root = styled('div')(() => ({
[`&.${classes.root}`]: {
height: 0,
transform: 'translateZ(0px)'
}
}))
const SITE_URL = process.env.NEXT_PUBLIC_SITE_URL
const TWITTER_HASHTAGS = process.env.NEXT_PUBLIC_TWITTER_HASHTAGS || 'OKi'
const TWITTER_USERNAME = process.env.NEXT_PUBLIC_TWITTER_USERNAME || 'OrganisationKA'
const actions = [
{icon: <TwitterIcon />, name: 'Twitter', code: 'twitter'},
{icon: <FileCopyIcon />, name: 'Copier le lien', code: 'copy'}
]
export default function Pataje({teks, setError, setSuccess}) {
const classes = useStyles()
const {tit, awtis, slug} = teks
const [open, setOpen] = useState(false)
@@ -62,7 +67,7 @@ export default function Pataje({teks, setError, setSuccess}) {
}
return (
<div className={classes.root}>
<Root className={classes.root}>
<Backdrop open={open} />
<SpeedDial
FabProps={{size: 'small', margin: 'auto', color: 'default'}}
@@ -83,7 +88,7 @@ export default function Pataje({teks, setError, setSuccess}) {
/>
))}
</SpeedDial>
</div>
</Root>
)
}
components/teks/teks-drawer.js
+73 -34
View File
@@ -17,8 +17,7 @@ import {
useMediaQuery,
Snackbar,
Tooltip,
Zoom,
withStyles
Zoom
} from '@material-ui/core'
import KeyboardBackspaceIcon from '@material-ui/icons/KeyboardBackspace'
@@ -26,7 +25,7 @@ import ExplicitIcon from '@material-ui/icons/Explicit'
import MenuIcon from '@material-ui/icons/Menu'
import {makeStyles, useTheme} from '@material-ui/core/styles'
import {useTheme, styled} from '@material-ui/core/styles'
import MuiAlert from '@material-ui/lab/Alert'
import {formatJsonString} from '../../lib/utils/format'
@@ -41,24 +40,45 @@ import OkiMizik from './oki-mizik'
import Pataje from './pataje'
import EntegreMizik from './entegre-mizik'
function Alert(props) {
return <MuiAlert elevation={6} variant='filled' {...props} />
const PREFIX = 'teks-drawer'
const classes = {
tooltip: `${PREFIX}-tooltip`,
root: `${PREFIX}-root`,
drawer: `${PREFIX}-drawer`,
appBar: `${PREFIX}-appBar`,
menuButton: `${PREFIX}-menuButton`,
toolbar: `${PREFIX}-toolbar`,
drawerPaper: `${PREFIX}-drawerPaper`,
content: `${PREFIX}-content`,
list: `${PREFIX}-list`,
form: `${PREFIX}-form`,
text: `${PREFIX}-text`,
gridText: `${PREFIX}-gridText`,
grid: `${PREFIX}-grid`,
koute: `${PREFIX}-koute`,
vwe: `${PREFIX}-vwe`,
pataje: `${PREFIX}-pataje`
}
const drawerWidth = 240
const useStyles = makeStyles(theme => ({
root: {
const Root = styled('div')((
{
theme
}
) => ({
[`&.${classes.root}`]: {
display: 'flex'
},
drawer: {
[`& .${classes.drawer}`]: {
marginTop: '10em',
[theme.breakpoints.up('sm')]: {
width: drawerWidth,
flexShrink: 0
}
},
appBar: {
[`& .${classes.appBar}`]: {
borderTop: '2px solid #303030',
marginTop: '4.71rem',
[theme.breakpoints.up('sm')]: {
@@ -67,40 +87,50 @@ const useStyles = makeStyles(theme => ({
},
zIndex: 1
},
menuButton: {
[`& .${classes.menuButton}`]: {
[theme.breakpoints.up('sm')]: {
display: 'none'
}
},
toolbar: theme.mixins.toolbar,
drawerPaper: {
[`& .${classes.toolbar}`]: theme.mixins.toolbar,
[`& .${classes.drawerPaper}`]: {
borderTop: '2px solid #303030',
marginTop: '4.71rem',
width: drawerWidth
},
content: {
[`& .${classes.content}`]: {
flexGrow: 1,
padding: theme.spacing(3)
},
list: {
[`& .${classes.list}`]: {
marginBottom: '6em'
},
form: {
[`& .${classes.form}`]: {
marginLeft: theme.spacing(1)
},
text: {
[`& .${classes.text}`]: {
marginBottom: '0.5em'
},
gridText: {
[`& .${classes.gridText}`]: {
border: '2px solid grey',
borderRadius: '5px',
marginTop: '2em',
padding: '1em'
},
grid: {
[`& .${classes.grid}`]: {
marginTop: '1em'
},
koute: {
[`& .${classes.koute}`]: {
position: 'absolute',
right: '40px',
top: '8px',
@@ -108,7 +138,8 @@ const useStyles = makeStyles(theme => ({
top: '10px'
}
},
vwe: {
[`& .${classes.vwe}`]: {
position: 'absolute',
right: '90px',
top: '8px',
@@ -116,7 +147,8 @@ const useStyles = makeStyles(theme => ({
top: '10px'
}
},
pataje: {
[`& .${classes.pataje}`]: {
position: 'fixed',
top: '85px',
left: '110px',
@@ -128,6 +160,12 @@ const useStyles = makeStyles(theme => ({
}
}))
function Alert(props) {
return <MuiAlert elevation={6} variant='filled' {...props} />
}
const drawerWidth = 240
const langToArray = anTeks => {
const langArray = []
@@ -168,13 +206,7 @@ const alignTeks = (langArray, isMobile) => {
}
}
const ExplicitTooltip = withStyles(() => ({
tooltip: {
fontSize: 18,
fontWeight: 'bold',
backgroundColor: 'rgba(245, 0, 87, 0.8)'
}
}))(Tooltip)
const ExplicitTooltip = Tooltip
export default function TeksDrawer({teks, anTeks, komante}) {
const [session] = useSession()
@@ -182,7 +214,7 @@ export default function TeksDrawer({teks, anTeks, komante}) {
const isMobile = useMediaQuery('(max-width:800px)')
const langArray = langToArray(anTeks)
const classes = useStyles()
const theme = useTheme()
const [esMobilOuve, meteEsMobilOuve] = useState(false)
const [open, setOpen] = useState(false)
@@ -212,7 +244,7 @@ export default function TeksDrawer({teks, anTeks, komante}) {
}, [error, success, setOpen])
return (
<div className={classes.root}>
<Root className={classes.root}>
<CssBaseline />
<AppBar position='fixed' className={classes.appBar}>
<Toolbar>
@@ -294,7 +326,14 @@ export default function TeksDrawer({teks, anTeks, komante}) {
<Typography variant='h5'>
{anTeks.tit}
{anTeks.eksplisit && (
<ExplicitTooltip title='Explicit Lyrics' placement='bottom' TransitionComponent={Zoom}>
<ExplicitTooltip
title='Explicit Lyrics'
placement='bottom'
TransitionComponent={Zoom}
classes={{
tooltip: classes.tooltip
}}
>
<ExplicitIcon style={{marginLeft: 10}} color='secondary' />
</ExplicitTooltip>
)}
@@ -375,7 +414,7 @@ export default function TeksDrawer({teks, anTeks, komante}) {
<DenyeTeks {...teks} />
)}
</main>
</div>
</Root>
)
}
components/teks/teks-kat.js
+13 -7
View File
@@ -11,20 +11,26 @@ import {
Grid
} from '@material-ui/core'
import ExplicitIcon from '@material-ui/icons/Explicit'
import {makeStyles} from '@material-ui/core/styles'
import {styled} from '@material-ui/core/styles'
const useStyles = makeStyles({
root: {
const PREFIX = 'teks-kat'
const classes = {
root: `${PREFIX}-root`,
media: `${PREFIX}-media`
}
const StyledGrid = styled(Grid)({
[`& .${classes.root}`]: {
maxWidth: 345
},
media: {
[`& .${classes.media}`]: {
height: 240,
objectFit: 'contain'
}
})
export default function TeksKat({teks}) {
const classes = useStyles()
const router = useRouter()
const noImageUrl = 'https://place-hold.it/140x140?text=Pa%20ni%20imaj'
const {tit, awtis, lanne, kouveti, published_at, slug} = teks
@@ -35,7 +41,7 @@ export default function TeksKat({teks}) {
}
return (
<Grid item sm={12} md={6} lg={4}>
<StyledGrid item sm={12} md={6} lg={4}>
<Card className={classes.root}>
<CardActionArea onClick={() => handleClick(slug)}>
<CardMedia
@@ -71,7 +77,7 @@ export default function TeksKat({teks}) {
</CardContent>
</CardActionArea>
</Card>
</Grid>
</StyledGrid>
)
}
components/teks/vwe-koute-achte.js
+11 -6
View File
@@ -17,11 +17,17 @@ import VideocamIcon from '@material-ui/icons/Videocam'
import MusicNoteIcon from '@material-ui/icons/MusicNote'
import AlbumIcon from '@material-ui/icons/Album'
import PlayCircleFilledIcon from '@material-ui/icons/PlayCircleFilled'
import {makeStyles} from '@material-ui/core/styles'
import {styled} from '@material-ui/core/styles'
import {SpeedDial, SpeedDialIcon, SpeedDialAction} from '@material-ui/lab'
const useStyles = makeStyles(() => ({
root: {
const PREFIX = 'vwe-koute-achte'
const classes = {
root: `${PREFIX}-root`
}
const Root = styled('div')(() => ({
[`&.${classes.root}`]: {
height: 0,
transform: 'translateZ(0px)'
}
@@ -47,7 +53,6 @@ const vweyIcons = {
}
export default function VweKouteAchte({anTeks, niVideyo, niOdyo}) {
const classes = useStyles()
const [ouve, meteOuve] = useState(false)
const {kouteyAchtey, lyen} = anTeks
@@ -76,7 +81,7 @@ export default function VweKouteAchte({anTeks, niVideyo, niOdyo}) {
}
return (
<div className={classes.root}>
<Root className={classes.root}>
<SpeedDial
color='secondary'
FabProps={{size: 'small', margin: 'auto', color: 'default'}}
@@ -105,7 +110,7 @@ export default function VweKouteAchte({anTeks, niVideyo, niOdyo}) {
/>
))}
</SpeedDial>
</div>
</Root>
)
}