Replace index pages by app folder
This commit is contained in:
-164
@@ -1,164 +0,0 @@
|
||||
import {useEffect, useMemo, useState} from 'react'
|
||||
import {useRouter} from 'next/router'
|
||||
import PropTypes from 'prop-types'
|
||||
import {createTheme, ThemeProvider} from '@mui/material/styles'
|
||||
import CssBaseline from '@mui/material/CssBaseline'
|
||||
import {SessionProvider, useSession} from 'next-auth/react'
|
||||
import {CacheProvider} from '@emotion/react'
|
||||
import PlausibleProvider from 'next-plausible'
|
||||
import {grey, green, red} from '@mui/material/colors'
|
||||
import NProgress from 'nprogress'
|
||||
import createEmotionCache from '../lib/create-emotion-cache'
|
||||
import {ParolesListContextProvider} from '../contexts/paroles-list'
|
||||
|
||||
import '@fontsource/roboto/300.css'
|
||||
import '@fontsource/roboto/400.css'
|
||||
import '@fontsource/roboto/500.css'
|
||||
import '@fontsource/roboto/700.css'
|
||||
import '../styles/nprogress.css'
|
||||
|
||||
import SwitchTheme from '../components/switch-theme'
|
||||
|
||||
const getDesignTokens = mode => ({
|
||||
palette: {
|
||||
mode,
|
||||
...(mode === 'light'
|
||||
? {
|
||||
// Palette values for light mode
|
||||
primary: green,
|
||||
secondary: red,
|
||||
divider: green[200],
|
||||
info: {
|
||||
main: grey[900]
|
||||
},
|
||||
text: {
|
||||
primary: grey[900],
|
||||
secondary: grey[800],
|
||||
},
|
||||
}
|
||||
: {
|
||||
// Palette values for dark mode
|
||||
primary: green,
|
||||
secondary: red,
|
||||
info: {
|
||||
main: '#fff'
|
||||
},
|
||||
divider: green[700],
|
||||
background: {
|
||||
default: '#082211',
|
||||
paper: '#082211',
|
||||
},
|
||||
text: {
|
||||
primary: '#fff',
|
||||
secondary: grey[100],
|
||||
},
|
||||
}),
|
||||
},
|
||||
})
|
||||
|
||||
const clientSideEmotionCache = createEmotionCache()
|
||||
|
||||
export default function MyApp(props) {
|
||||
const {Component, emotionCache = clientSideEmotionCache, pageProps} = props
|
||||
const [mode, setMode] = useState('light')
|
||||
const [switchFixed, setSwitchFixed] = useState(false)
|
||||
const theme = useMemo(() => createTheme(getDesignTokens(mode)), [mode])
|
||||
const router = useRouter()
|
||||
|
||||
useEffect(() => {
|
||||
const handleStart = () => {
|
||||
NProgress.start()
|
||||
}
|
||||
|
||||
const handleStop = () => {
|
||||
NProgress.done()
|
||||
}
|
||||
|
||||
router.events.on('routeChangeStart', handleStart)
|
||||
router.events.on('routeChangeComplete', handleStop)
|
||||
router.events.on('routeChangeError', handleStop)
|
||||
|
||||
return () => {
|
||||
router.events.off('routeChangeStart', handleStart)
|
||||
router.events.off('routeChangeComplete', handleStop)
|
||||
router.events.off('routeChangeError', handleStop)
|
||||
}
|
||||
}, [router])
|
||||
|
||||
useEffect(() => {
|
||||
if (props.router.pathname.slice(0, 8) === '/paroles') {
|
||||
setSwitchFixed(true)
|
||||
} else {
|
||||
setSwitchFixed(false)
|
||||
}
|
||||
}, [props])
|
||||
|
||||
useEffect(() => {
|
||||
const oldLocalMode = localStorage.getItem('oki-dark')
|
||||
const localMode = localStorage.getItem('oki-theme')
|
||||
if (localMode === 'dark' || (oldLocalMode && oldLocalMode === 'true')) {
|
||||
setMode('dark')
|
||||
} else {
|
||||
setMode('light')
|
||||
}
|
||||
|
||||
if (localMode && oldLocalMode) {
|
||||
localStorage.removeItem('oki-dark')
|
||||
}
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<PlausibleProvider domain='oki.re'>
|
||||
<CacheProvider value={emotionCache}>
|
||||
<ThemeProvider theme={theme}>
|
||||
<CssBaseline />
|
||||
<ParolesListContextProvider>
|
||||
<SessionProvider session={pageProps.session} refetchInterval={5 * 60}>
|
||||
<SwitchTheme switchFixed={switchFixed} mode={mode} setMode={setMode} />
|
||||
{Component.auth ? (
|
||||
<Auth><Component {...pageProps} /></Auth>
|
||||
) : (
|
||||
<Component {...pageProps} />
|
||||
)}
|
||||
</SessionProvider>
|
||||
</ParolesListContextProvider>
|
||||
</ThemeProvider>
|
||||
</CacheProvider>
|
||||
</PlausibleProvider>
|
||||
)
|
||||
}
|
||||
|
||||
function Auth({children}) {
|
||||
const {data: session, status} = useSession()
|
||||
const loading = status === 'loading'
|
||||
const isUser = Boolean(session?.user)
|
||||
const router = useRouter()
|
||||
useEffect(() => {
|
||||
if (loading) {
|
||||
return
|
||||
}
|
||||
|
||||
if (!isUser) {
|
||||
router.push('/soumet')
|
||||
}
|
||||
}, [isUser, loading, router])
|
||||
|
||||
if (isUser) {
|
||||
return children
|
||||
}
|
||||
|
||||
return (
|
||||
<div>Loading...</div>
|
||||
)
|
||||
}
|
||||
|
||||
MyApp.propTypes = {
|
||||
Component: PropTypes.elementType.isRequired,
|
||||
pageProps: PropTypes.object.isRequired,
|
||||
emotionCache: PropTypes.object,
|
||||
router: PropTypes.object.isRequired
|
||||
}
|
||||
|
||||
Auth.propTypes = {
|
||||
children: PropTypes.node.isRequired
|
||||
}
|
||||
@@ -1,58 +0,0 @@
|
||||
import Document, {
|
||||
Html, Head, Main, NextScript
|
||||
} from 'next/document'
|
||||
|
||||
import createEmotionServer from '@emotion/server/create-instance'
|
||||
import createEmotionCache from '../lib/create-emotion-cache'
|
||||
|
||||
export default class MyDocument extends Document {
|
||||
render() {
|
||||
return (
|
||||
<Html lang='fr' prefix='og: https://ogp.me/ns#'>
|
||||
<Head>
|
||||
<link rel='manifest' href='/manifest.json' />
|
||||
<link rel='icon' type='image/x-icon' sizes='128x128' href='/favicon.ico' />
|
||||
<link rel='apple-touch-icon' href='/favicon.ico' />
|
||||
{this.props.emotionStyleTags}
|
||||
<meta name='application-name' content='OKI | Organisation KA Internationale' />
|
||||
<meta name='theme-color' content='#303030' />
|
||||
<meta name='apple-mobile-web-app-status-bar' content='#303030' />
|
||||
<meta charSet='utf-8' />
|
||||
</Head>
|
||||
<body>
|
||||
<Main />
|
||||
<NextScript />
|
||||
</body>
|
||||
</Html>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
MyDocument.getInitialProps = async ctx => {
|
||||
const originalRenderPage = ctx.renderPage
|
||||
const cache = createEmotionCache()
|
||||
const {extractCriticalToChunks} = createEmotionServer(cache)
|
||||
|
||||
ctx.renderPage = () =>
|
||||
originalRenderPage({
|
||||
enhanceApp: App =>
|
||||
function EnhanceApp(props) { // eslint-disable-line react/function-component-definition
|
||||
return <App emotionCache={cache} {...props} />
|
||||
},
|
||||
})
|
||||
|
||||
const initialProps = await Document.getInitialProps(ctx)
|
||||
const emotionStyles = extractCriticalToChunks(initialProps.html)
|
||||
const emotionStyleTags = emotionStyles.styles.map(style => (
|
||||
<style
|
||||
key={style.key}
|
||||
data-emotion={`${style.key} ${style.ids.join(' ')}`}
|
||||
dangerouslySetInnerHTML={{__html: style.css}}
|
||||
/>
|
||||
))
|
||||
|
||||
return {
|
||||
...initialProps,
|
||||
emotionStyleTags
|
||||
}
|
||||
}
|
||||
-106
@@ -1,106 +0,0 @@
|
||||
import {useRouter} from 'next/router'
|
||||
import PropTypes from 'prop-types'
|
||||
import Container from '@mui/material/Container'
|
||||
import Typography from '@mui/material/Typography'
|
||||
import Box from '@mui/material/Box'
|
||||
import Grid from '@mui/material/Grid'
|
||||
import Button from '@mui/material/Button'
|
||||
|
||||
import Image from 'next/image'
|
||||
import HeadLayout from '../components/head-layout'
|
||||
import Footer from '../components/footer'
|
||||
import {jwennStats} from '../lib/oki-api'
|
||||
import okiLogo from '../public/logo-72x72.png'
|
||||
|
||||
import KatKayLa from '../components/kat-kay-la'
|
||||
|
||||
import Custom500 from './500'
|
||||
|
||||
export default function Home({errorCode, errorMessage, stats}) {
|
||||
const router = useRouter()
|
||||
|
||||
if (errorCode) {
|
||||
console.log('⚠️ error', errorMessage)
|
||||
return <Custom500 statusCode={errorCode} />
|
||||
}
|
||||
|
||||
return (
|
||||
<HeadLayout tab={0}>
|
||||
<Box sx={{display: 'flex', flexDirection: 'column', minHeight: '100vh'}}>
|
||||
<Box sx={{flexGrow: 1, marginBottom: 3, marginTop: 3}}>
|
||||
<Container align='center'>
|
||||
<Box sx={{display: 'flex', alignItems: 'cetner', justifyContent: 'center'}}>
|
||||
|
||||
<Typography sx={{fontWeight: 'bold', mr: 1}} variant='h6' component='h1'>
|
||||
OKI
|
||||
</Typography>
|
||||
|
||||
<Image
|
||||
width={32}
|
||||
height={32}
|
||||
atl='OKI logo'
|
||||
src={okiLogo}
|
||||
placeholder='blur'
|
||||
/>
|
||||
</Box>
|
||||
<Typography sx={{fontWeight: 'bold'}} variant='h6' component='h2'>
|
||||
Organisation KA Internationale
|
||||
</Typography>
|
||||
<Typography sx={{fontStyle: 'italic'}} variant='caption' component='h3'>
|
||||
Paroles et traductions
|
||||
</Typography>
|
||||
</Container>
|
||||
<Container sx={{marginTop: 2}}>
|
||||
<Grid container justifyContent='center' spacing={2}>
|
||||
<Grid item>
|
||||
<Button variant='outlined' onClick={() => router.push('/soumet')}>
|
||||
<strong>Soumettre des paroles</strong>
|
||||
</Button>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Container>
|
||||
</Box>
|
||||
<Container sx={{flexGrow: 100}}>
|
||||
<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>
|
||||
</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
|
||||
}
|
||||
Reference in New Issue
Block a user