132 lines
3.9 KiB
JavaScript
132 lines
3.9 KiB
JavaScript
import PropTypes from 'prop-types'
|
||
import Container from '@mui/material/Container'
|
||
import Typography from '@mui/material/Typography'
|
||
import Box from '@mui/material/Box'
|
||
import Divider from '@mui/material/Divider'
|
||
import Chip from '@mui/material/Chip'
|
||
import Grid from '@mui/material/Grid'
|
||
import Button from '@mui/material/Button'
|
||
import ArrowCircleDownIcon from '@mui/icons-material/ArrowCircleDown'
|
||
|
||
import HeadLayout from '../components/head-layout'
|
||
import Footer from '../components/footer'
|
||
import {jwennStats} from '../lib/oki-api'
|
||
|
||
import KatStats from '../components/stats/kat-stats'
|
||
import KatKayLa from '../components/kat-kay-la'
|
||
|
||
import Custom500 from './500'
|
||
|
||
export default function Home({errorCode, errorMessage, stats}) {
|
||
if (errorCode) {
|
||
console.log('⚠️ error', errorMessage)
|
||
return <Custom500 statusCode={errorCode} />
|
||
}
|
||
|
||
const {parolesWithoutTranslation} = stats
|
||
|
||
const statsByLang = [
|
||
{
|
||
code: 'fr',
|
||
value: parolesWithoutTranslation.francais,
|
||
emoji: '🇫🇷'
|
||
},
|
||
{
|
||
code: 'en',
|
||
value: parolesWithoutTranslation.anglais,
|
||
emoji: '🇬🇧'
|
||
},
|
||
{
|
||
code: 'es',
|
||
value: parolesWithoutTranslation.espagnol,
|
||
emoji: '🇪🇸'
|
||
},
|
||
{
|
||
code: 'de',
|
||
value: parolesWithoutTranslation.allemand,
|
||
emoji: '🇩🇪'
|
||
},
|
||
{
|
||
code: 'it',
|
||
value: parolesWithoutTranslation.italien,
|
||
emoji: '🇮🇹'
|
||
}
|
||
]
|
||
|
||
return (
|
||
<HeadLayout tab={0}>
|
||
<Box sx={{display: 'flex', flexDirection: 'column', minHeight: '100vh'}}>
|
||
<Box sx={{flexGrow: 1, marginBottom: 3, marginTop: 1}}>
|
||
<Container sx={{marginBottom: 2}} align='center'>
|
||
<Typography sx={{fontWeight: 'bold'}} variant='h6' component='h1'>
|
||
#OKi
|
||
</Typography>
|
||
<Typography sx={{fontWeight: 'bold'}} variant='h6' component='h2'>
|
||
Organisation KA Internationale
|
||
</Typography>
|
||
<Typography sx={{fontStyle: 'italic'}} variant='caption' component='h3'>
|
||
Paroles, traductions et Fediverse
|
||
</Typography>
|
||
</Container>
|
||
<Container align='center'>
|
||
<Button variant='outlined' size='large' onClick={() => window.open('https://o-k-i.net', '_blank')}>
|
||
<strong>Fediverse ➡️ o-k-i.net</strong>
|
||
</Button>
|
||
</Container>
|
||
</Box>
|
||
<Container sx={{flexGrow: 100}}>
|
||
<Divider sx={{marginBottom: 3}}>
|
||
<Chip sx={{fontWeight: 'bold'}} color='primary' icon={<ArrowCircleDownIcon />} label='Statistiques' variant='outlined' />
|
||
</Divider>
|
||
<Grid container spacing={2} sx={{marginBottom: 3}}>
|
||
<KatKayLa tit='Paroles' kantite={stats.countParole} href='/paroles' as='/paroles' />
|
||
<KatKayLa tit='Artistes' kantite={stats.countArtiste} href='/awtis?paj&paj=1' as='/awtis/paj/1' />
|
||
</Grid>
|
||
<Typography marginBottom={2} textAlign='center' sx={{fontWeight: 'bold'}} variant='h6' component='h4'>
|
||
Traductions
|
||
</Typography>
|
||
<Grid container justifyContent='space-between' spacing={2} marginBottom={3}>
|
||
{statsByLang.map(({code, value, emoji}) => (
|
||
<KatStats key={code} emoji={emoji} value={value} total={stats.countParole} />
|
||
))}
|
||
</Grid>
|
||
</Container>
|
||
<Footer />
|
||
</Box>
|
||
</HeadLayout>
|
||
)
|
||
}
|
||
|
||
export async function getServerSideProps() {
|
||
let stats
|
||
let errorCode
|
||
let errorMessage
|
||
|
||
try {
|
||
stats = await jwennStats()
|
||
} catch (error) {
|
||
errorMessage = error.message
|
||
errorCode = true
|
||
}
|
||
|
||
return {
|
||
props: {
|
||
errorCode: errorCode || null,
|
||
errorMessage: errorMessage || null,
|
||
stats: stats || null
|
||
}
|
||
}
|
||
}
|
||
|
||
Home.defaultProps = {
|
||
errorCode: null,
|
||
errorMessage: null,
|
||
stats: null
|
||
}
|
||
|
||
Home.propTypes = {
|
||
errorCode: PropTypes.bool,
|
||
errorMessage: PropTypes.string,
|
||
stats: PropTypes.object
|
||
}
|