diff --git a/src/components/youtube-playlist-item/youtube-playlist-item.jsx b/src/components/youtube-playlist-item/youtube-playlist-item.jsx new file mode 100644 index 000000000..5a57a1248 --- /dev/null +++ b/src/components/youtube-playlist-item/youtube-playlist-item.jsx @@ -0,0 +1,66 @@ +import React, {useEffect, useState} from 'react'; +import PropTypes from 'prop-types'; + +import {FormattedMessage} from 'react-intl'; +import api from '../../lib/api'; +import {YoutubeVideoButton} from '../youtube-video-button/youtube-video-button.jsx'; +import Spinner from '../spinner/spinner.jsx'; + +import './youtube-playlist-item.scss'; + +export const YoutubePlaylistItem = ({playlistRequestUri, playlistTitleId, onSelectedVideo}) => { + const [loading, setLoading] = useState(true); + const [playlistVideos, setPlaylistVideos] = useState([]); + + useEffect(() => { + api({ + host: process.env.ROOT_URL, + method: 'GET', + uri: playlistRequestUri, + headers: { + 'Content-Type': 'application/json' + } + }, (_err, body, res) => { + setLoading(false); + if (res.statusCode === 200) { + setPlaylistVideos(body); + } + }); + }, []); + + return ( +
+
+ +
+ {loading ? ( + + ) : ( +
+ {playlistVideos + .sort( + (firstVideo, secondVideo) => + new Date(firstVideo.publishedAt).getTime() < + new Date(secondVideo.publishedAt).getTime() + ) + .map(video => ( + + ))} +
+ )} +
+ ); +}; + +YoutubePlaylistItem.propTypes = { + playlistRequestUri: PropTypes.string, + playlistTitleId: PropTypes.string, + onSelectedVideo: PropTypes.func +}; diff --git a/src/components/youtube-playlist-item/youtube-playlist-item.scss b/src/components/youtube-playlist-item/youtube-playlist-item.scss new file mode 100644 index 000000000..91f03c4b1 --- /dev/null +++ b/src/components/youtube-playlist-item/youtube-playlist-item.scss @@ -0,0 +1,26 @@ +.playlist { + display: flex; + flex-direction: column; + gap: 1rem; + + .playlist-title { + display: flex; + justify-content: start; + font-size: 2rem; + font-weight: 700; + line-height: 2.5rem; + } + + .spinner { + width: 100%; + height: 50px; + } + + .playlist-videos { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(13.125rem, auto)); + justify-content: space-around; + align-items: start; + gap: 1rem; + } +} \ No newline at end of file diff --git a/src/views/ideas/ideas.jsx b/src/views/ideas/ideas.jsx index ef381b9a9..3de349989 100644 --- a/src/views/ideas/ideas.jsx +++ b/src/views/ideas/ideas.jsx @@ -1,8 +1,6 @@ const FormattedMessage = require('react-intl').FormattedMessage; const React = require('react'); -const {useState, useCallback, useEffect} = require('react'); -const PropTypes = require('prop-types'); -const api = require('../../lib/api'); +const {useState, useCallback} = require('react'); const Button = require('../../components/forms/button.jsx'); const FlexRow = require('../../components/flex-row/flex-row.jsx'); @@ -12,13 +10,10 @@ const Page = require('../../components/page/www/page.jsx'); const render = require('../../lib/render.jsx'); const {useIntl} = require('react-intl'); -const { - YoutubeVideoButton -} = require('../../components/youtube-video-button/youtube-video-button.jsx'); const { YoutubeVideoModal } = require('../../components/youtube-video-modal/youtube-video-modal.jsx'); -const Spinner = require('../../components/spinner/spinner.jsx'); +const {YoutubePlaylistItem} = require('../../components/youtube-playlist-item/youtube-playlist-item.jsx'); require('./ideas.scss'); @@ -101,57 +96,6 @@ const playlists = { 'advanced-topics': 'ideas.advancedTopics' }; -const PlaylistItem = ({playlistKey, onSelectedVideo}) => { - const [loading, setLoading] = useState(true); - const [playlistVideos, setPlaylistVideos] = useState([]); - - useEffect(() => { - api({ - host: process.env.ROOT_URL, - method: 'GET', - uri: `/ideas/videos/${playlistKey}`, - headers: { - 'Content-Type': 'application/json' - } - }, (_err, body, res) => { - setLoading(false); - if (res.statusCode === 200) { - setPlaylistVideos(body); - } - }); - }, []); - - return ( -
-
- -
- {loading ? ( - - ) : ( -
- {playlistVideos - .sort( - (firstVideo, secondVideo) => - new Date(firstVideo.publishedAt).getTime() < - new Date(secondVideo.publishedAt).getTime() - ) - .map(video => ( - - ))} -
- )} -
- ); -}; - const Ideas = () => { const intl = useIntl(); const [youtubeVideoId, setYoutubeVideoId] = useState(''); @@ -252,9 +196,10 @@ const Ideas = () => {
{Object.keys(playlists).map(playlistKey => ( - ))} @@ -368,11 +313,6 @@ const Ideas = () => { ); }; -PlaylistItem.propTypes = { - playlistKey: PropTypes.string, - onSelectedVideo: PropTypes.func -}; - render( diff --git a/src/views/ideas/ideas.scss b/src/views/ideas/ideas.scss index 7b5b788db..b8a8a8c58 100644 --- a/src/views/ideas/ideas.scss +++ b/src/views/ideas/ideas.scss @@ -92,33 +92,6 @@ $base-bg: $ui-white; } } -.playlist { - display: flex; - flex-direction: column; - gap: 1rem; - - .playlist-title { - display: flex; - justify-content: start; - font-size: 2rem; - font-weight: 700; - line-height: 2.5rem; - } - - .spinner { - width: 100%; - height: 50px; - } - - .playlist-videos { - display: grid; - grid-template-columns: repeat(auto-fill, minmax(13.125rem, auto)); - justify-content: space-around; - align-items: start; - gap: 1rem; - } -} - .physical-ideas { .inner { display: flex; @@ -203,7 +176,7 @@ $base-bg: $ui-white; } } -.tips, .physical-ideas, .playlist { +.tips, .physical-ideas { .section-header { display: flex; justify-content: start;