From c9405ffafbf879e15c431a439256604f3c047bfb Mon Sep 17 00:00:00 2001
From: MiroslavDionisiev <miroslav@scratch.org>
Date: Wed, 4 Dec 2024 12:30:45 +0200
Subject: [PATCH] refactor: [UEPR-116] move playlist component to separate file

---
 .../youtube-playlist-item.jsx                 | 66 +++++++++++++++++
 .../youtube-playlist-item.scss                | 26 +++++++
 src/views/ideas/ideas.jsx                     | 70 ++-----------------
 src/views/ideas/ideas.scss                    | 29 +-------
 4 files changed, 98 insertions(+), 93 deletions(-)
 create mode 100644 src/components/youtube-playlist-item/youtube-playlist-item.jsx
 create mode 100644 src/components/youtube-playlist-item/youtube-playlist-item.scss

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 (
+        <div className="playlist">
+            <div className="playlist-title">
+                <FormattedMessage id={playlistTitleId} />
+            </div>
+            {loading ? (
+                <Spinner
+                    className="spinner"
+                    color="transparent-gray"
+                />
+            ) : (
+                <section className="playlist-videos">
+                    {playlistVideos
+                        .sort(
+                            (firstVideo, secondVideo) =>
+                                new Date(firstVideo.publishedAt).getTime() <
+                  new Date(secondVideo.publishedAt).getTime()
+                        )
+                        .map(video => (
+                            <YoutubeVideoButton
+                                key={video.videoId}
+                                onSelectedVideo={onSelectedVideo}
+                                {...video}
+                            />
+                        ))}
+                </section>
+            )}
+        </div>
+    );
+};
+
+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 (
-        <div className="playlist">
-            <div className="playlist-title">
-                <FormattedMessage id={playlists[playlistKey]} />
-            </div>
-            {loading ? (
-                <Spinner
-                    className="spinner"
-                    color="transparent-gray"
-                />
-            ) : (
-                <section className="playlist-videos">
-                    {playlistVideos
-                        .sort(
-                            (firstVideo, secondVideo) =>
-                                new Date(firstVideo.publishedAt).getTime() <
-                  new Date(secondVideo.publishedAt).getTime()
-                        )
-                        .map(video => (
-                            <YoutubeVideoButton
-                                key={video.videoId}
-                                onSelectedVideo={onSelectedVideo}
-                                {...video}
-                            />
-                        ))}
-                </section>
-            )}
-        </div>
-    );
-};
-
 const Ideas = () => {
     const intl = useIntl();
     const [youtubeVideoId, setYoutubeVideoId] = useState('');
@@ -252,9 +196,10 @@ const Ideas = () => {
                     </div>
                     <section className="playlists">
                         {Object.keys(playlists).map(playlistKey => (
-                            <PlaylistItem
+                            <YoutubePlaylistItem
                                 key={playlistKey}
-                                playlistKey={playlistKey}
+                                playlistRequestUri={`/ideas/videos/${playlistKey}`}
+                                playlistTitleId={playlists[playlistKey]}
                                 onSelectedVideo={onSelectedVideo}
                             />
                         ))}
@@ -368,11 +313,6 @@ const Ideas = () => {
     );
 };
 
-PlaylistItem.propTypes = {
-    playlistKey: PropTypes.string,
-    onSelectedVideo: PropTypes.func
-};
-
 render(
     <Page>
         <Ideas />
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;