From c42ada66fa8666dd8ff3a95dc006f2806e796053 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?C=C3=A9dric=20FAMIBELLE-PRONZOLA?= Date: Tue, 17 May 2022 08:58:22 +0400 Subject: [PATCH 01/14] Add READ_TOKEN to env --- .env.sample | 1 + 1 file changed, 1 insertion(+) diff --git a/.env.sample b/.env.sample index daa1823..a7ab319 100644 --- a/.env.sample +++ b/.env.sample @@ -2,6 +2,7 @@ PORT=3000 API_URL=http://localhost:1337 NEXT_PUBLIC_API_URL=$API_URL SITE_URL=http://localhost:3001 +NEXT_PUBLIC_READ_TOKEN= # FUNKWHALE VARIABLE NEXT_PUBLIC_OKI_MIZIK_URL=https://funkwhale-server.com From d8b7fd130df8f34573ab9ae77651f9f7dff1754d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?C=C3=A9dric=20FAMIBELLE-PRONZOLA?= Date: Tue, 17 May 2022 08:59:36 +0400 Subject: [PATCH 02/14] Create axios instance readAxiosInstance --- lib/oki-api.js | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/lib/oki-api.js b/lib/oki-api.js index 2469827..7a11729 100644 --- a/lib/oki-api.js +++ b/lib/oki-api.js @@ -2,6 +2,13 @@ import axios from 'axios' const OKI_API = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:1337' const AWTIS_POU_CHAK_PAJ = process.env.NEXT_PUBLIC_AWTIS_POU_CHAK_PAJ || 6 +const readToken = process.env.NEXT_PUBLIC_READ_TOKEN || 'read-token' + +const readAxiosInstance = axios.create({ + headers: { + Authorization: `Bearer ${readToken}` + } +}) export async function jwennTeksEpiSlug(slug) { const response = await axios.get(`${OKI_API}/teks?slug=${slug}&_where[published_at_null]=false`) From 6f7545fdb19f9ab360e94bc137147caad2edb53b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?C=C3=A9dric=20FAMIBELLE-PRONZOLA?= Date: Tue, 17 May 2022 09:00:40 +0400 Subject: [PATCH 03/14] Adapt jwennDenyeTeks query and use qs stringify --- lib/oki-api.js | 13 ++++++++++--- 1 file changed, 10 insertions(+), 3 deletions(-) diff --git a/lib/oki-api.js b/lib/oki-api.js index 7a11729..9e596bb 100644 --- a/lib/oki-api.js +++ b/lib/oki-api.js @@ -1,4 +1,5 @@ import axios from 'axios' +import qs from 'qs' const OKI_API = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:1337' const AWTIS_POU_CHAK_PAJ = process.env.NEXT_PUBLIC_AWTIS_POU_CHAK_PAJ || 6 @@ -54,10 +55,16 @@ export async function jwennAwtisSlug() { } export async function jwennDenyeTeks() { - const query = '_sort=published_at:DESC&_limit=6&_where[published_at_null]=false' + const query = qs.stringify({ + populate: ['artistes', 'couverture'], + sort: ['publishedAt:desc'], + pagination: { + limit: 6 + } + }) - const response = await axios.get(`${OKI_API}/teks?${query}`) - return response.data + const {data} = await readAxiosInstance.get(`${OKI_API}/paroles?${query}`) + return data.data } export async function jwennAnTeks(teksId) { From d2312cfc2ee20c2f2a39b87edbe92d0fdf5bb426 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?C=C3=A9dric=20FAMIBELLE-PRONZOLA?= Date: Tue, 17 May 2022 09:01:31 +0400 Subject: [PATCH 04/14] Adapt TeksKat component with new properties --- components/teks/teks-kat.js | 22 +++++++++++++--------- 1 file changed, 13 insertions(+), 9 deletions(-) diff --git a/components/teks/teks-kat.js b/components/teks/teks-kat.js index 8f30189..bc178d2 100644 --- a/components/teks/teks-kat.js +++ b/components/teks/teks-kat.js @@ -14,6 +14,7 @@ import ExplicitIcon from '@mui/icons-material/Explicit' import {styled} from '@mui/material/styles' const PREFIX = 'teks-kat' +const IMAGE_URL = process.env.NEXT_PUBLIC_API_URL_ROOT || 'http://localhost:1337' const classes = { root: `${PREFIX}-root`, @@ -30,12 +31,15 @@ const StyledGrid = styled(Grid)({ } }) +const noImageUrl = 'https://place-hold.it/140x140?text=Pa%20ni%20imaj' + export default function TeksKat({teks}) { const router = useRouter() - const noImageUrl = 'https://place-hold.it/140x140?text=Pa%20ni%20imaj' - const {tit, awtis, lanne, kouveti, published_at, slug} = teks - const datPiblikasyon = format(new Date(published_at), 'P', {locale: fr}) - const alias = awtis.map(({alias}) => alias) + const {attributes} = teks + const {titre, artistes, annee, couverture, publishedAt, slug} = attributes + + const datPiblikasyon = format(new Date(publishedAt), 'P', {locale: fr}) + const alias = artistes.data.map(({attributes}) => attributes.alias) const handleClick = slug => { router.push(`/paroles/${slug}#${slug}`).then(() => window.scrollTo(0, 0)) @@ -48,13 +52,13 @@ export default function TeksKat({teks}) { - {tit} + {titre} {teks.eksplisit && ( @@ -75,7 +79,7 @@ export default function TeksKat({teks}) { {new Intl.ListFormat('fr').format(alias)} - {lanne} + {annee} Publié le : {datPiblikasyon} From 1ccefe686cbb7bbf9fedd00674361e90b7ed426b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?C=C3=A9dric=20FAMIBELLE-PRONZOLA?= Date: Fri, 20 May 2022 00:10:26 +0400 Subject: [PATCH 05/14] Fix auth handle errors --- pages/api/auth/[...nextauth].js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/pages/api/auth/[...nextauth].js b/pages/api/auth/[...nextauth].js index 89b22b3..8022d61 100644 --- a/pages/api/auth/[...nextauth].js +++ b/pages/api/auth/[...nextauth].js @@ -22,7 +22,7 @@ const options = { return null } catch (error) { - const errorMessage = error.response.data.message[0].messages[0].message + const errorMessage = error.response.data.error.message throw new Error(errorMessage) } } From b8be0ccd9771ab221cd289ba909c78012133a573 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?C=C3=A9dric=20FAMIBELLE-PRONZOLA?= Date: Fri, 20 May 2022 02:10:00 +0400 Subject: [PATCH 06/14] Update oki-api with qs and new routes --- lib/oki-api.js | 158 +++++++++++++++++++++++++++++++++++++------------ 1 file changed, 120 insertions(+), 38 deletions(-) diff --git a/lib/oki-api.js b/lib/oki-api.js index 9e596bb..02b23fa 100644 --- a/lib/oki-api.js +++ b/lib/oki-api.js @@ -12,18 +12,33 @@ const readAxiosInstance = axios.create({ }) export async function jwennTeksEpiSlug(slug) { - const response = await axios.get(`${OKI_API}/teks?slug=${slug}&_where[published_at_null]=false`) - return response.data[0] + const query = qs.stringify({ + populate: ['artistes', 'couverture'], + filters: { + slug: { + $eq: slug + } + } + }, { + encodeValuesOnly: true + }) + const {data} = await readAxiosInstance.get(`${OKI_API}/paroles?${query}`) + return data.data[0] } export async function jwennAwtisEpiSlug(slug) { - const response = await axios.get(`${OKI_API}/awtis?slug=${slug}&_where[published_at_null]=false`) - return response.data[0] -} - -export async function jwennAwtisKantite() { - const response = await axios.get(`${OKI_API}/awtis/count?_where[published_at_null]=false`) - return response.data + const query = qs.stringify({ + populate: ['paroles', 'photo'], + filters: { + slug: { + $eq: slug + } + } + }, { + encodeValuesOnly: true + }) + const {data} = await readAxiosInstance.get(`${OKI_API}/artistes?${query}`) + return data.data[0] } export async function jwennTeksKantite() { @@ -33,25 +48,54 @@ export async function jwennTeksKantite() { export async function jwennAwtisPajinasyon(paj) { const start = AWTIS_POU_CHAK_PAJ * (paj - 1) - const query = `_sort=published_at:DESC&_start=${start}&_limit=${AWTIS_POU_CHAK_PAJ}&_where[published_at_null]=false` + const query = qs.stringify({ + populate: ['paroles', 'photo'], + sort: ['publishedAt:desc'], + pagination: { + start, + limit: AWTIS_POU_CHAK_PAJ + } + }, { + encodeValuesOnly: true + }) - const response = await axios.get(`${OKI_API}/awtis?${query}`) - return response.data + const {data} = await readAxiosInstance.get(`${OKI_API}/artistes?${query}`) + return data } export async function jwennTeks() { - const query = '_sort=tit:ASC&_where[published_at_null]=false' + const query = qs.stringify({ + populate: ['artistes', 'couverture', 'user', 'userAdmin', 'commentaires', 'traductions', 'streamVideo', 'streamAudio'], + sort: ['titre:asc'], + pagination: { + pageSize: 100 + } + }, { + encodeValuesOnly: true + }) - const response = await axios.get(`${OKI_API}/teks?${query}`) - return response.data + const {data} = await readAxiosInstance.get(`${OKI_API}/paroles?${query}`) + return data.data } export async function jwennAwtisSlug() { - const query = '_sort=published_at:DESC&_where[published_at_null]=false' + const query = qs.stringify({ + sort: ['publishedAt:desc'] + }) - const response = await axios.get(`${OKI_API}/awtis?${query}`) + const response = await readAxiosInstance.get(`${OKI_API}/artistes?${query}`) const {data} = response - return data.map(({slug}) => slug) + return data.data.map(({attributes}) => attributes.slug) +} + +export async function jwennTeksSlug() { + const query = qs.stringify({ + sort: ['publishedAt:desc'] + }) + + const response = await readAxiosInstance.get(`${OKI_API}/paroles?${query}`) + const {data} = response + return data.data.map(({attributes}) => attributes.slug) } export async function jwennDenyeTeks() { @@ -61,33 +105,41 @@ export async function jwennDenyeTeks() { pagination: { limit: 6 } + }, { + encodeValuesOnly: true }) const {data} = await readAxiosInstance.get(`${OKI_API}/paroles?${query}`) return data.data } -export async function jwennAnTeks(teksId) { - const response = await axios.get(`${OKI_API}/teks/${teksId}`) - return response.data -} +export async function jwennAnTeks(teksId, token) { + const headers = { + 'content-type': 'application/json', + Authorization: `Bearer ${token}` + } -export async function jwennTeksEpiUserId(userId) { - const query = `_sort=tit:ASC&_where[user.id]=${userId}&_publicationState=preview&published_at_null=true` - - const response = await axios.get(`${OKI_API}/teks?${query}`) - return response.data -} - -export async function jwennSlugs() { - const response = await axios.get(`${OKI_API}/slugs`) + const response = await axios.get(`${OKI_API}/paroles/${teksId}`, {headers}) return response.data } export async function jwennKomanteEpiTeksId(teksId) { - const query = `_sort=published_at:DESC&_where[teks]=${teksId}&_where[published_at_null]=false` - const response = await axios.get(`${OKI_API}/komante?${query}`) - return response.data + const query = qs.stringify({ + sort: ['publishedAt:desc'], + populate: ['paroles', 'user'], + filters: { + parole: { + id: { + $eq: teksId + } + } + } + }, { + encodeValuesOnly: true + }) + + const {data} = await readAxiosInstance.get(`${OKI_API}/commentaires?${query}`) + return data.data } export async function jwennUserEpiToken(userToken) { @@ -100,13 +152,43 @@ export async function jwennUserEpiToken(userToken) { } export async function jwennUserEpiUsername(username) { - const query = `_where[username]=${username}&_where[confirmed]=true` - const response = await axios.get(`${OKI_API}/users?${query}`) + const query = qs.stringify({ + filters: { + username: { + $eq: username + } + } + }, { + encodeValuesOnly: true + }) + + const response = await readAxiosInstance.get(`${OKI_API}/users?${query}`) return response.data[0] } export async function jwennUserEpiEmail(email) { - const query = `_where[email]=${email}&_where[confirmed]=false&_where[blocked]=false` - const response = await axios.get(`${OKI_API}/users?${query}`) + const query = qs.stringify({ + filters: { + email: { + $eq: email + }, + confirmed: { + $eq: false + }, + blocked: { + $eq: false + } + } + }, { + encodeValuesOnly: true + }) + + const response = await readAxiosInstance.get(`${OKI_API}/users?${query}`) return response.data[0] } + +export async function passwordRequest(lyen, email) { + await axios.post(`${OKI_API}/auth/${lyen}`, { + email + }) +} From 2aa9e63e14bd152aa2d7f8f2317b4f6c96a3cdf1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?C=C3=A9dric=20FAMIBELLE-PRONZOLA?= Date: Fri, 20 May 2022 02:15:56 +0400 Subject: [PATCH 07/14] Change teks to parole --- components/awtis/mizik-badj-meni.js | 12 +++--- components/awtis/mizik-lis.js | 22 +++++----- components/teks/denye-teks.js | 2 +- components/teks/drawer-bar.js | 26 ++++++------ components/teks/lekte.js | 20 ++++----- components/teks/oki-mizik.js | 6 +-- components/teks/pataje.js | 10 ++--- components/teks/teks-drawer.js | 35 +++++++++------- components/teks/teks-kat.js | 20 ++++----- components/teks/teks.js | 59 +++++++++++++------------- components/teks/vwe-koute-achte.js | 20 ++++----- pages/paroles/[slug].js | 65 +++++++++++++++-------------- pages/paroles/index.js | 14 +++---- 13 files changed, 158 insertions(+), 153 deletions(-) diff --git a/components/awtis/mizik-badj-meni.js b/components/awtis/mizik-badj-meni.js index e27a437..777bb07 100644 --- a/components/awtis/mizik-badj-meni.js +++ b/components/awtis/mizik-badj-meni.js @@ -37,13 +37,13 @@ const Root = styled('div')(( } })) -const sortTeks = teks => teks.sort((a, b) => b.id - a.id) +const sortTeks = paroles => paroles.sort((a, b) => b.id - a.id) -export default function MizikBadjMeni({teks}) { +export default function MizikBadjMeni({paroles}) { const [open, setOpen] = useState(false) const anchorRef = useRef(null) const router = useRouter() - const sortedTeks = sortTeks(teks) + const sortedTeks = sortTeks(paroles) const handleToggle = () => { setOpen(previousOpen_ => !previousOpen_) @@ -90,7 +90,7 @@ export default function MizikBadjMeni({teks}) { vertical: 'top', horizontal: 'right' }} - badgeContent={teks.length} + badgeContent={paroles.length} color='primary' > @@ -105,7 +105,7 @@ export default function MizikBadjMeni({teks}) { handleListKeyDown()}> - {sortedTeks.map(t => handleClick(t.slug)}>{t.tit})} + {sortedTeks.map(({id, attributes}) => handleClick(attributes.slug)}>{attributes.titre})} @@ -117,5 +117,5 @@ export default function MizikBadjMeni({teks}) { } MizikBadjMeni.propTypes = { - teks: PropTypes.array.isRequired + paroles: PropTypes.array.isRequired } diff --git a/components/awtis/mizik-lis.js b/components/awtis/mizik-lis.js index c54bfa8..5709591 100644 --- a/components/awtis/mizik-lis.js +++ b/components/awtis/mizik-lis.js @@ -27,7 +27,7 @@ const StyledList = styled(List)(( } })) -export default function MizikLis({meteEsMobilOuve, niAwtis, teks, slugTeksChwazi, meteSlugTeksChwazi}) { +export default function MizikLis({meteEsMobilOuve, niAwtis, paroles, slugTeksChwazi, meteSlugTeksChwazi}) { const router = useRouter() const handleClick = slug => { @@ -50,22 +50,22 @@ export default function MizikLis({meteEsMobilOuve, niAwtis, teks, slugTeksChwazi return ( - {teks.map(({slug, tit, awtis, published_at, okiMizikID, eksplisit}) => ( + {paroles.map(({id, attributes}) => ( handleClick(slug)} + id={attributes.slug} + selected={slugTeksChwazi === attributes.slug} + onClick={() => handleClick(attributes.slug)} > - alias)) : null} /> - {eksplisit && ( + attributes.alias)) : null} /> + {attributes.explicite && ( )} - {okiMizikID && ( + {attributes.okiMizikID && ( )} - {esBrandNew(published_at) && ( + {esBrandNew(attributes.publishedAt) && ( )} @@ -77,7 +77,7 @@ export default function MizikLis({meteEsMobilOuve, niAwtis, teks, slugTeksChwazi MizikLis.propTypes = { meteEsMobilOuve: PropTypes.func, niAwtis: PropTypes.bool, - teks: PropTypes.array.isRequired, + paroles: PropTypes.array.isRequired, slugTeksChwazi: PropTypes.string, meteSlugTeksChwazi: PropTypes.func } diff --git a/components/teks/denye-teks.js b/components/teks/denye-teks.js index 15f5290..78cef36 100644 --- a/components/teks/denye-teks.js +++ b/components/teks/denye-teks.js @@ -30,7 +30,7 @@ export default function DenyeTeks({denyeTeks}) { )} - {denyeTeks.map(t => )} + {denyeTeks.map(t => )} diff --git a/components/teks/drawer-bar.js b/components/teks/drawer-bar.js index 167885d..467378b 100644 --- a/components/teks/drawer-bar.js +++ b/components/teks/drawer-bar.js @@ -44,15 +44,15 @@ const Root = styled('div')(( } })) -const getMizikFiltered = (teks, filter) => { - if (teks) { - const filteredTitre = teks.filter(({tit}) => { - const deburredTit = deburr(tit) +const getMizikFiltered = (paroles, filter) => { + if (paroles) { + const filteredTitre = paroles.filter(({attributes}) => { + const deburredTit = deburr(attributes.titre) return deburredTit.toLowerCase().includes(deburr(filter.toLowerCase())) }) - const filteredAlias = teks.filter(({awtis}) => { - const aliasLis = awtis.map(({alias}) => deburr(alias)).join(', ') + const filteredAlias = paroles.filter(({attributes}) => { + const aliasLis = attributes.artistes.data.map(({attributes}) => deburr(attributes.alias)).join(', ') return aliasLis.toLowerCase().includes(deburr(filter.toLowerCase())) }) @@ -60,13 +60,13 @@ const getMizikFiltered = (teks, filter) => { } } -export default function DrawerBar({meteEsMobilOuve, teks, anTeks}) { - const slug = anTeks ? anTeks.slug : null +export default function DrawerBar({meteEsMobilOuve, paroles, parole}) { + const slug = parole ? parole.slug : null const [search, setSearch] = useState('') const [slugTeksChwazi, meteSlugTeksChwazi] = useState(slug) - const mizikFiltered = getMizikFiltered(teks, search) + const mizikFiltered = getMizikFiltered(paroles, search) const handleSearch = event => { event.preventDefault() @@ -94,7 +94,7 @@ export default function DrawerBar({meteEsMobilOuve, teks, anTeks}) { @@ -105,11 +105,11 @@ export default function DrawerBar({meteEsMobilOuve, teks, anTeks}) { DrawerBar.propTypes = { meteEsMobilOuve: PropTypes.func, - teks: PropTypes.array.isRequired, - anTeks: PropTypes.object + paroles: PropTypes.array.isRequired, + parole: PropTypes.object } DrawerBar.defaultProps = { meteEsMobilOuve: null, - anTeks: null + parole: null } diff --git a/components/teks/lekte.js b/components/teks/lekte.js index 17a96af..d376d51 100644 --- a/components/teks/lekte.js +++ b/components/teks/lekte.js @@ -14,7 +14,7 @@ import Image from 'next/image' import {grey} from '@mui/material/colors' import {Link} from '@mui/material' -const apiUrl = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:1337' +const IMAGE_URL = process.env.NEXT_PUBLIC_API_URL_ROOT || 'http://localhost:1337' const Widget = styled('div')(({theme}) => ({ padding: 16, @@ -49,7 +49,7 @@ const TinyText = styled(Typography)({ letterSpacing: 0.2, }) -export default function Lekte({audio, url, teks}) { +export default function Lekte({audio, url, parole}) { const audioRef = useRef(new Audio(audio)) const intervalRef = useRef() const isReady = useRef(false) @@ -58,7 +58,7 @@ export default function Lekte({audio, url, teks}) { const [position, setPosition] = useState(0) const [volume, setVolume] = useState(100) const [isPlaying, setIsPlaying] = useState(false) - const awtis = teks.awtis.map(({alias}) => alias) + const awtis = parole.artistes.data.map(({attributes}) => attributes.alias) function formatDuration(value) { const minute = Math.floor(value / 60) @@ -139,10 +139,10 @@ export default function Lekte({audio, url, teks}) { {teks.tit} @@ -151,11 +151,11 @@ export default function Lekte({audio, url, teks}) { - {teks.tit} + {parole.titre} - {teks.lanne} + {parole.annee} @@ -263,5 +263,5 @@ export default function Lekte({audio, url, teks}) { Lekte.propTypes = { audio: PropTypes.string.isRequired, url: PropTypes.string.isRequired, - teks: PropTypes.object.isRequired + parole: PropTypes.object.isRequired } diff --git a/components/teks/oki-mizik.js b/components/teks/oki-mizik.js index aa21a9e..e3715d9 100644 --- a/components/teks/oki-mizik.js +++ b/components/teks/oki-mizik.js @@ -11,18 +11,18 @@ const DinamikLekte = dynamic( {ssr: false, loading: () => } ) -export default function OkiMizik({id, teks}) { +export default function OkiMizik({id, parole}) { const mizikStreamUrl = `${MIZIK_URL}/rest/stream?u=${MIZIK_API_USER}&p=${MIZIK_API_PASSWORD}&id=${id}` const detailsUrl = `${MIZIK_URL}/library/tracks/${id}` return ( - + ) } OkiMizik.propTypes = { id: PropTypes.number.isRequired, - teks: PropTypes.object.isRequired + parole: PropTypes.object.isRequired } diff --git a/components/teks/pataje.js b/components/teks/pataje.js index 52bfb66..428b414 100644 --- a/components/teks/pataje.js +++ b/components/teks/pataje.js @@ -43,15 +43,15 @@ const actions = [ {icon: , name: 'Copier le lien', code: 'copy'} ] -export default function Pataje({teks, setError, setSuccess}) { - const {tit, awtis, slug} = teks +export default function Pataje({parole, setError, setSuccess}) { + const {titre, artistes, slug} = parole const [open, setOpen] = useState(false) const patajeUrl = `${SITE_URL}/paroles/${slug}` - const alias = awtis.map(({alias}) => alias) + const alias = artistes.data.map(({attributes}) => attributes.alias) const renderAwtis = new Intl.ListFormat('fr').format(alias) - const text = teks.user || teks.userAdmin ? `${renderAwtis} - ${tit} (Paroles et Traductions) - (texte soumis par ${teks?.user?.username || teks.userAdmin})` : `${renderAwtis} - ${tit} (Paroles et Traductions)` + const text = parole.user || parole.userAdmin ? `${renderAwtis} - ${titre} (Paroles et Traductions) - (texte soumis par ${parole?.user?.username || parole.userAdmin})` : `${renderAwtis} - ${parole} (Paroles et Traductions)` const handleClose = () => { setOpen(false) @@ -123,7 +123,7 @@ export default function Pataje({teks, setError, setSuccess}) { } Pataje.propTypes = { - teks: PropTypes.object.isRequired, + parole: PropTypes.object.isRequired, setError: PropTypes.func.isRequired, setSuccess: PropTypes.func.isRequired } diff --git a/components/teks/teks-drawer.js b/components/teks/teks-drawer.js index c2c3d48..95bd24f 100644 --- a/components/teks/teks-drawer.js +++ b/components/teks/teks-drawer.js @@ -117,7 +117,7 @@ const Root = styled('div')(( const drawerWidth = 240 -export default function TeksDrawer({teks, anTeks, komante, denyeTeks}) { +export default function TeksDrawer({paroles, parole, paroleId, commentaires, denyeTeks}) { const theme = useTheme() const [esMobilOuve, meteEsMobilOuve] = useState(false) const [open, setOpen] = useState(false) @@ -161,21 +161,21 @@ export default function TeksDrawer({teks, anTeks, komante, denyeTeks}) { > - {anTeks ? ( + {parole ? ( <> - {anTeks.lyen && anTeks.lyen.length > 0 && ( + {parole.streamVideo && parole.streamVideo.length > 0 && (
- +
)} - {anTeks.kouteyAchtey && anTeks.kouteyAchtey.length > 0 && ( + {parole.streamVideo && parole.streamVideo.length > 0 && (
- +
)} @@ -201,7 +201,7 @@ export default function TeksDrawer({teks, anTeks, komante, denyeTeks}) { }} onClose={handleDrawerToggle} > - + @@ -212,15 +212,16 @@ export default function TeksDrawer({teks, anTeks, komante, denyeTeks}) { }} variant='permanent' > - +
- {anTeks ? ( + {parole ? ( {titre} - {teks.eksplisit && ( + {parole.eksplisit && ( )} - {teks.user && ( + {parole.user && ( <> - (texte soumis par {teks.user.username}) + (texte soumis par {parole.user.username}) )} - {teks.userAdmin && !teks.user && ( + {parole.userAdmin && !parole.user && ( <> - (texte soumis par {teks.userAdmin}) + (texte soumis par {parole.userAdmin}) )} @@ -92,5 +92,5 @@ export default function TeksKat({teks}) { } TeksKat.propTypes = { - teks: PropTypes.object.isRequired + parole: PropTypes.object.isRequired } diff --git a/components/teks/teks.js b/components/teks/teks.js index de5aaa1..cb5a4ef 100644 --- a/components/teks/teks.js +++ b/components/teks/teks.js @@ -66,30 +66,30 @@ const Root = styled('div')(( } })) -const langToArray = anTeks => { +const langToArray = parole => { const langArray = [] - if (anTeks && anTeks.tradiksyon) { - const {francais, english, espagnol, deutsch, italiano} = anTeks.tradiksyon + if (parole && parole.traductions) { + const {francais, anglais, espagnol, allemand, italien} = parole.traductions if (francais) { langArray.push({title: 'Traduction', flag: 'fr', lang: francais}) } - if (english) { - langArray.push({title: 'Translation', flag: 'en', lang: english}) + if (anglais) { + langArray.push({title: 'Translation', flag: 'en', lang: anglais}) } if (espagnol) { langArray.push({title: 'Traducción', flag: 'es', lang: espagnol}) } - if (deutsch) { - langArray.push({title: 'Übersetzung', flag: 'de', lang: deutsch}) + if (allemand) { + langArray.push({title: 'Übersetzung', flag: 'de', lang: allemand}) } - if (italiano) { - langArray.push({title: 'Traduzione', flag: 'it', lang: italiano}) + if (italien) { + langArray.push({title: 'Traduzione', flag: 'it', lang: italien}) } } @@ -120,15 +120,15 @@ const Alert = forwardRef(function Alert(props, ref) { const ExplicitTooltip = Tooltip -export default function Teks({anTeks, komante, open, success, error, setSuccess, setError, handleClose}) { +export default function Teks({parole, paroleId, commentaires, open, success, error, setSuccess, setError, handleClose}) { const isMobile = useMediaQuery('(max-width:800px)') - const langArray = langToArray(anTeks) - const awtis = anTeks.awtis.map(({alias}) => alias) + const langArray = langToArray(parole) + const awtis = parole.artistes.data.map(({attributes}) => attributes.alias) return (
- +
@@ -136,8 +136,8 @@ export default function Teks({anTeks, komante, open, success, error, setSuccess, {new Intl.ListFormat('fr').format(awtis)} - {anTeks.tit} ({anTeks?.lanne}) - {anTeks.eksplisit && ( + {parole.titre} ({parole?.annee}) + {parole.explicite && ( - {komante && ( - + {commentaires && ( + )} - {anTeks.user && ( + {parole?.user?.data && ( - texte soumis par {anTeks.user.username} + texte soumis par {parole.user.data.attributes.username} )} - {anTeks.userAdmin && !anTeks.user && ( + {parole.userAdmin && !parole.user && ( - texte soumis par {anTeks.userAdmin} + texte soumis par {parole.userAdmin} )} - {(anTeks.okiMizikID || anTeks.kouteyAchtey.length > 0) && ( + {(parole.okiMizikID || parole.streamAudio.length > 0) && ( - + )} - {anTeks.okiMizikID && ( - + {parole.okiMizikID && ( + )} 0 ? 6 : null}> @@ -182,7 +182,7 @@ export default function Teks({anTeks, komante, open, success, error, setSuccess, Transcription - {formatJsonString(anTeks.transkripsyon)} + {formatJsonString(parole.transcription)} @@ -242,8 +242,9 @@ export default function Teks({anTeks, komante, open, success, error, setSuccess, } Teks.propTypes = { - anTeks: PropTypes.object.isRequired, - komante: PropTypes.array, + parole: PropTypes.object.isRequired, + paroleId: PropTypes.number.isRequired, + commentaires: PropTypes.array, open: PropTypes.bool.isRequired, success: PropTypes.string, error: PropTypes.string, @@ -253,7 +254,7 @@ Teks.propTypes = { } Teks.defaultProps = { - komante: null, + commentaires: null, success: '', error: '' } diff --git a/components/teks/vwe-koute-achte.js b/components/teks/vwe-koute-achte.js index 690b325..b9a89b7 100644 --- a/components/teks/vwe-koute-achte.js +++ b/components/teks/vwe-koute-achte.js @@ -49,22 +49,22 @@ const vweyIcons = { Dailymotion: , Lbry: , Rumble: , - Peertube: + Gadé: } -export default function VweKouteAchte({anTeks, niVideyo, niOdyo}) { +export default function VweKouteAchte({parole, niVideyo, niOdyo}) { const [ouve, meteOuve] = useState(false) - const {kouteyAchtey, lyen} = anTeks + const {streamAudio, streamVideo} = parole - const kouteyAchteyActions = kouteyAchtey.map(({boutik, url}) => ({ - icon: kouteyAchteyIcons[boutik], - name: boutik, + const kouteyAchteyActions = streamAudio.map(({plateforme, url}) => ({ + icon: kouteyAchteyIcons[plateforme], + name: plateforme, link: url })) - const vweyActions = lyen.map(({url, sit}) => ({ - icon: vweyIcons[sit], - name: sit, + const vweyActions = streamVideo.map(({plateforme, url}) => ({ + icon: vweyIcons[plateforme], + name: plateforme, link: url })) @@ -115,7 +115,7 @@ export default function VweKouteAchte({anTeks, niVideyo, niOdyo}) { } VweKouteAchte.propTypes = { - anTeks: PropTypes.object.isRequired, + parole: PropTypes.object.isRequired, niVideyo: PropTypes.bool, niOdyo: PropTypes.bool } diff --git a/pages/paroles/[slug].js b/pages/paroles/[slug].js index 8486fa9..d3f595f 100644 --- a/pages/paroles/[slug].js +++ b/pages/paroles/[slug].js @@ -1,6 +1,6 @@ import PropTypes from 'prop-types' -import {jwennTeksEpiSlug, jwennTeks, jwennKomanteEpiTeksId} from '../../lib/oki-api' +import {jwennTeks, jwennKomanteEpiTeksId} from '../../lib/oki-api' import TeksDrawer from '../../components/teks/teks-drawer' import HeadLayout from '../../components/head-layout' @@ -8,41 +8,41 @@ import HeadLayout from '../../components/head-layout' import Custom500 from '../500' import Custom404 from '../404' -const jwennAwtis = awtis => { - const alias = awtis.map(({alias}) => alias) +const jwennAwtis = artiste => { + const alias = artiste.data.map(({attributes}) => attributes.alias) return new Intl.ListFormat('fr').format(alias) } -export default function SlugTeks({hasError, errorMessage, teks, anTeks, slug, komante}) { +export default function SlugTeks({hasError, errorMessage, paroles, parole, slug, commentaires}) { if (hasError) { console.log('⚠️ error :', errorMessage) return } - if (!anTeks) { + if (!parole) { return } - const awtis = anTeks.awtis.length === 1 ? anTeks.awtis[0].alias : jwennAwtis(anTeks.awtis) - const {kouveti} = anTeks + const artistes = parole.attributes.artistes.length === 1 ? parole.attributes.artistes[0].data.attributes.alias : jwennAwtis(parole.attributes.artistes) + const {couverture} = parole.attributes const formatKouveti = () => { - if (!kouveti) { + if (!couverture) { return null } - if (kouveti && kouveti.formats && kouveti.formats.large) { - return kouveti.formats.large + if (couverture && couverture.formats && couverture.formats.large) { + return couverture.formats.large } - if (kouveti && kouveti.formats && kouveti.formats.medium) { - return kouveti.formats.medium + if (couverture && couverture.formats && couverture.formats.medium) { + return couverture.formats.medium } - if (kouveti && kouveti.formats && kouveti.formats.small) { - return kouveti.formats.small + if (couverture && couverture.formats && couverture.formats.small) { + return couverture.formats.small } - return kouveti + return couverture } return ( @@ -51,25 +51,26 @@ export default function SlugTeks({hasError, errorMessage, teks, anTeks, slug, ko imageWidth={formatKouveti() ? formatKouveti().width : null} imageHeight={formatKouveti() ? formatKouveti().height : null} imageMime={formatKouveti() ? formatKouveti().mime : null} - title={`${awtis} - ${anTeks.tit} | Paroles et Traductions`} tab={1} slug={`paroles/${slug}`} + title={`${artistes} - ${parole.attributes.titre} | Paroles et Traductions`} tab={1} slug={`paroles/${slug}`} > - + ) } export async function getServerSideProps({query}) { const {slug} = query - let teks - let anTeks + let paroles + let parole let hasError let errorMessage - let komante + let commentaires try { - teks = await jwennTeks() - anTeks = await jwennTeksEpiSlug(slug) - komante = await jwennKomanteEpiTeksId(anTeks?.id) + paroles = await jwennTeks() + parole = paroles.find(({attributes}) => attributes.slug === slug) + commentaires = paroles.map(({attributes}) => attributes.commentaires) + commentaires = await jwennKomanteEpiTeksId(parole?.id) } catch (error) { errorMessage = error hasError = true @@ -79,10 +80,10 @@ export async function getServerSideProps({query}) { props: { hasError: hasError || null, errorMessage: errorMessage ? errorMessage.message : null, - teks: teks || null, - anTeks: anTeks || null, + paroles: paroles || null, + parole: parole || null, slug, - komante: komante || null + commentaires: commentaires || null } } } @@ -90,16 +91,16 @@ export async function getServerSideProps({query}) { SlugTeks.defaultProps = { hasError: null, errorMessage: null, - teks: null, - anTeks: null, - komante: null + paroles: null, + parole: null, + commentaires: null } SlugTeks.propTypes = { hasError: PropTypes.bool, errorMessage: PropTypes.string, - teks: PropTypes.array, - anTeks: PropTypes.object, + paroles: PropTypes.array, + parole: PropTypes.object, slug: PropTypes.string.isRequired, - komante: PropTypes.array + commentaires: PropTypes.array } diff --git a/pages/paroles/index.js b/pages/paroles/index.js index c5e7037..ac56a58 100644 --- a/pages/paroles/index.js +++ b/pages/paroles/index.js @@ -7,7 +7,7 @@ import HeadLayout from '../../components/head-layout' import Custom500 from '../500' -export default function Teks({errorCode, errorMessage, teks, denyeTeks}) { +export default function Teks({errorCode, errorMessage, paroles, denyeTeks}) { if (errorCode) { console.log('⚠️ error', errorMessage) return @@ -15,19 +15,19 @@ export default function Teks({errorCode, errorMessage, teks, denyeTeks}) { return ( - + ) } export async function getServerSideProps() { - let teks + let paroles let denyeTeks let hasError let errorMessage try { - teks = await jwennTeks() + paroles = await jwennTeks() denyeTeks = await jwennDenyeTeks() } catch (error) { errorMessage = error.message @@ -38,7 +38,7 @@ export async function getServerSideProps() { props: { errorCode: hasError || null, errorMessage: errorMessage || null, - teks: teks || null, + paroles: paroles || null, denyeTeks: denyeTeks || null } } @@ -47,13 +47,13 @@ export async function getServerSideProps() { Teks.defaultProps = { errorCode: null, errorMessage: null, - teks: null, + paroles: null, denyeTeks: null } Teks.propTypes = { errorCode: PropTypes.bool, errorMessage: PropTypes.string, - teks: PropTypes.array, + paroles: PropTypes.array, denyeTeks: PropTypes.array } From 47bc07c5d81adf57d82479af9f23fe8077f49b2c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?C=C3=A9dric=20FAMIBELLE-PRONZOLA?= Date: Fri, 20 May 2022 02:18:16 +0400 Subject: [PATCH 08/14] Change awtis to artiste --- components/awtis/awtis-biyografi.js | 16 +++--- components/awtis/awtis-detay.js | 25 ++++----- components/awtis/awtis-kat.js | 20 +++---- components/soumet/chwa-teks.js | 13 ++--- pages/awtis/[slug].js | 67 ++++++++++++++++-------- pages/awtis/index.js | 81 +++++++++++++++++++++-------- 6 files changed, 143 insertions(+), 79 deletions(-) diff --git a/components/awtis/awtis-biyografi.js b/components/awtis/awtis-biyografi.js index 64ec97c..42d7017 100644 --- a/components/awtis/awtis-biyografi.js +++ b/components/awtis/awtis-biyografi.js @@ -14,7 +14,7 @@ import { import MizikBadjMeni from './mizik-badj-meni' -export default function AwtisBiyografi({alias, teks, biyografi, esByografiOuve, meteEsByografiOuve}) { +export default function AwtisBiyografi({alias, paroles, biographie, esByografiOuve, meteEsByografiOuve}) { const handleClose = () => { meteEsByografiOuve(false) } @@ -40,7 +40,7 @@ export default function AwtisBiyografi({alias, teks, biyografi, esByografiOuve, > {alias} - + - {biyografi ? ( + {biographie ? ( - {biyografi} + {biographie} ) : ( @@ -62,7 +62,7 @@ export default function AwtisBiyografi({alias, teks, biyografi, esByografiOuve, @@ -72,12 +72,12 @@ export default function AwtisBiyografi({alias, teks, biyografi, esByografiOuve, AwtisBiyografi.propTypes = { alias: PropTypes.string.isRequired, - teks: PropTypes.array.isRequired, - biyografi: PropTypes.string, + paroles: PropTypes.array.isRequired, + biographie: PropTypes.string, esByografiOuve: PropTypes.bool.isRequired, meteEsByografiOuve: PropTypes.func.isRequired } AwtisBiyografi.defaultProps = { - biyografi: null + biographie: null } diff --git a/components/awtis/awtis-detay.js b/components/awtis/awtis-detay.js index 205d225..d7af5ad 100644 --- a/components/awtis/awtis-detay.js +++ b/components/awtis/awtis-detay.js @@ -13,18 +13,19 @@ import KeyboardBackspaceIcon from '@mui/icons-material/KeyboardBackspace' import AwtisBiyografi from './awtis-biyografi' import MizikLis from './mizik-lis' -const API_URL = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:1337' +const IMAGE_URL = process.env.NEXT_PUBLIC_API_URL_ROOT || 'http://localhost:1337' +const noImageUrl = 'https://place-hold.it/140x140?text=Indisponible' -const sortTeks = teks => teks.sort((a, b) => b.id - a.id) +const sortTeks = paroles => paroles.sort((a, b) => b.id - a.id) export default function AwtisDetay({anAwtis}) { const router = useRouter() const [esByografiOuve, meteEsByografiOuve] = useState(false) - const {alias, biyografi, teks, foto} = anAwtis - const sortedTeks = sortTeks(teks) - const gwanBiyo = anAwtis.biyografi.length > 100 + const {alias, biographie, paroles, photo} = anAwtis + const sortedTeks = sortTeks(paroles.data) + const gwanBiyo = biographie && biographie.length > 100 - const biyo = gwanBiyo ? `${anAwtis.biyografi.slice(0, 100)}...` : anAwtis.biyografi + const biyo = gwanBiyo ? `${biographie.slice(0, 100)}...` : biographie const handleClick = () => { meteEsByografiOuve(true) @@ -45,7 +46,7 @@ export default function AwtisDetay({anAwtis}) { @@ -69,7 +70,7 @@ export default function AwtisDetay({anAwtis}) { )} - {teks.length > 1 ? ( + {paroles.data.length > 1 ? ( } @@ -77,7 +78,7 @@ export default function AwtisDetay({anAwtis}) { id='panel-teks-header' > Liste des textes - + @@ -87,7 +88,7 @@ export default function AwtisDetay({anAwtis}) { <> Texte - + )} @@ -102,8 +103,8 @@ export default function AwtisDetay({anAwtis}) { {esByografiOuve && ( diff --git a/components/awtis/awtis-kat.js b/components/awtis/awtis-kat.js index ac20f10..a4674ab 100644 --- a/components/awtis/awtis-kat.js +++ b/components/awtis/awtis-kat.js @@ -23,6 +23,7 @@ import AwtisBiyografi from './awtis-biyografi' const PREFIX = 'awtis-kat' const SITE_URL = process.env.NEXT_PUBLIC_SITE_URL || 'http://localhost:3001' +const IMAGE_URL = process.env.NEXT_PUBLIC_API_URL_ROOT || 'http://localhost:1337' const classes = { root: `${PREFIX}-root`, @@ -54,12 +55,13 @@ const Kat = styled('div')(( } })) -export default function AwtisKat({anAwtis}) { +const noImageUrl = 'https://place-hold.it/140x140?text=Indisponible' + +export default function AwtisKat({artiste}) { const router = useRouter() const [esByografiOuve, meteEsByografiOuve] = useState(false) - const noImageUrl = 'https://place-hold.it/140x140?text=Pa%20ni%20imaj' - const {alias, biyografi, teks, foto, slug} = anAwtis + const {alias, biographie, paroles, photo, slug} = artiste const [expanded, setExpanded] = useState(false) @@ -76,7 +78,7 @@ export default function AwtisKat({anAwtis}) { className={classes.media} component='img' alt={alias} - image={`${foto.length > 0 ? `${process.env.NEXT_PUBLIC_API_URL}${foto[0].url}` : noImageUrl}`} + image={`${photo?.data?.attributes?.url ? `${IMAGE_URL}${photo?.data?.attributes?.url}` : noImageUrl}`} title={alias} /> @@ -84,7 +86,7 @@ export default function AwtisKat({anAwtis}) { {alias} - {anAwtis.teks.length} tèks + {`${paroles.data.length} ${paroles.data.length > 1 ? 'textes' : 'texte'}`} @@ -104,15 +106,15 @@ export default function AwtisKat({anAwtis}) { - + {esByografiOuve && ( @@ -123,5 +125,5 @@ export default function AwtisKat({anAwtis}) { } AwtisKat.propTypes = { - anAwtis: PropTypes.object.isRequired + artiste: PropTypes.object.isRequired } diff --git a/components/soumet/chwa-teks.js b/components/soumet/chwa-teks.js index 324c0a2..d5eaee7 100644 --- a/components/soumet/chwa-teks.js +++ b/components/soumet/chwa-teks.js @@ -15,7 +15,7 @@ import CircularProgress from '@mui/material/CircularProgress' import Typography from '@mui/material/Typography' import AudiotrackIcon from '@mui/icons-material/Audiotrack' -import {jwennTeksEpiUserId} from '../../lib/oki-api' +import {jwennUserEpiToken} from '../../lib/oki-api' function Chwa(props) { const {onClose, teksLis, selectedTeks, loading, open} = props @@ -37,14 +37,14 @@ function Chwa(props) { ) : ( - {teksLis.length > 0 ? teksLis.map(({id, tit, awtis}) => ( + {teksLis.length > 0 ? teksLis.map(({id, titre, artistes}) => ( handleListItemClick(id)}> - alias))} - ${tit}`} /> + alias))} - ${titre}`} /> )) : ( Aucun texte @@ -70,7 +70,6 @@ Chwa.propTypes = { export default function ChwaTeks({selectedTeks, setSelectedTeks}) { const {data: session} = useSession() const [loading, setLoading] = useState(false) - const {user} = session const [open, setOpen] = useState(false) const [teksLis, setTeksLis] = useState([]) @@ -78,9 +77,11 @@ export default function ChwaTeks({selectedTeks, setSelectedTeks}) { setOpen(true) setLoading(true) - const jwennTeks = await jwennTeksEpiUserId(user.id) + const user = await jwennUserEpiToken(session?.jwt) + const {paroles} = user + const parolesList = paroles && paroles.length > 0 ? paroles : [] - setTeksLis(jwennTeks) + setTeksLis(parolesList) setLoading(false) } diff --git a/pages/awtis/[slug].js b/pages/awtis/[slug].js index 8b44848..7a80d63 100644 --- a/pages/awtis/[slug].js +++ b/pages/awtis/[slug].js @@ -7,34 +7,38 @@ import HeadLayout from '../../components/head-layout' import {jwennAwtisEpiSlug} from '../../lib/oki-api' import Custom404 from '../404' +import Custom500 from '../500' -export default function SlugAwtis({error, anAwtis}) { - if (error) { - return +export default function SlugAwtis({errorCode, error404, errorMessage, anAwtis}) { + if (error404) { + return } - const {foto} = anAwtis + if (errorCode) { + console.log('⚠️ error', errorMessage) + return + } + + const {photo} = anAwtis const formatKouveti = () => { - if (foto.length === 0) { + if (!photo) { return null } - const [anFoto] = foto - - if (anFoto && anFoto.formats && anFoto.formats.large) { - return anFoto.formats.large + if (photo && photo.formats && photo.formats.large) { + return photo.formats.large } - if (anFoto && anFoto.formats && anFoto.formats.medium) { - return anFoto.formats.medium + if (photo && photo.formats && photo.formats.medium) { + return photo.formats.medium } - if (anFoto && anFoto.formats && anFoto.formats.small) { - return anFoto.formats.small + if (photo && photo.formats && photo.formats.small) { + return photo.formats.small } - return anFoto + return photo } return ( @@ -43,10 +47,10 @@ export default function SlugAwtis({error, anAwtis}) { imageWidth={formatKouveti() ? formatKouveti().width : null} imageHeight={formatKouveti() ? formatKouveti().height : null} imageMime={formatKouveti() ? formatKouveti().mime : null} - title={`${anAwtis.alias} - Paroles et Traductions`} tab={2} slug={`awtis/${anAwtis.slug}`} + title={`${anAwtis.attributes.alias} - Paroles et Traductions`} tab={2} slug={`awtis/${anAwtis.attributes.slug}`} > - +