From 775c1f29b2cda5cafeec343ee5eb0cfd69b139df Mon Sep 17 00:00:00 2001 From: ras1 Date: Sun, 11 Aug 2024 00:16:18 -0400 Subject: [PATCH] Code Cleanup (#114) --- CNAME | 1 - __tests__/pages/PlaylistsManager.test.js | 8 --- package.json | 2 +- src/AppConstants.js | 8 +-- src/AppRoot.js | 18 +++--- src/components/ButtonList.js | 63 +++++------------- src/components/CurrentVideoInfo.jsx | 36 +++++------ src/components/LoadingPlaceholder.js | 15 ++--- src/components/Player.js | 82 +++++++++++------------- src/components/PlaylistSelector.js | 72 ++++++++++----------- src/components/PlaylistSelectorItem.js | 30 ++++----- src/components/ToggleableButton.js | 15 ++--- src/components/VideoSelector.js | 40 ++++-------- src/components/VideoTitleDisplay.js | 35 +++------- src/hooks/UseEffectOnce.js | 2 +- src/hooks/UseLocalStorage.js | 18 +++--- src/hooks/UsePlaylistDataFetcher.js | 16 ++--- src/hooks/UseVideoPlayer.js | 14 ++-- src/index.js | 12 ++-- src/pages/PlaylistsManager.jsx | 7 -- src/pages/PlaylistsSearch.jsx | 48 +++++++------- src/pages/ShufflePlayer.js | 34 +++++----- src/pages/TrackPlaylistForm.js | 62 +++++++++--------- yarn.lock | 43 ++++++------- 24 files changed, 281 insertions(+), 400 deletions(-) delete mode 100644 CNAME delete mode 100644 __tests__/pages/PlaylistsManager.test.js delete mode 100644 src/pages/PlaylistsManager.jsx diff --git a/CNAME b/CNAME deleted file mode 100644 index d234283..0000000 --- a/CNAME +++ /dev/null @@ -1 +0,0 @@ -syt.hebron.wtf \ No newline at end of file diff --git a/__tests__/pages/PlaylistsManager.test.js b/__tests__/pages/PlaylistsManager.test.js deleted file mode 100644 index 3185c96..0000000 --- a/__tests__/pages/PlaylistsManager.test.js +++ /dev/null @@ -1,8 +0,0 @@ -import React from 'react'; -import ReactDOM from 'react-dom'; -import PlaylistsManager from '../../src/pages/PlaylistsManager'; - -it('renders without crashing', () => { - const div = document.createElement('div'); - ReactDOM.render(, div); -}); diff --git a/package.json b/package.json index 09711f9..26f3bab 100644 --- a/package.json +++ b/package.json @@ -8,7 +8,6 @@ "@honeybadger-io/react": "^6.1.23", "@tomplum/react-textfit": "^1.1.5", "axios": "^1.6.0", - "gh-pages": "^5.0.0", "nan": "^2.15.0", "react": "^17.0.2", "react-dom": "^17.0.2", @@ -48,6 +47,7 @@ "@babel/preset-react": "^7.16.7", "@testing-library/react": "^12.1.2", "@testing-library/react-hooks": "^7.0.2", + "gh-pages": "^6.1.1", "postcss-normalize": "^10.0.1", "react-test-renderer": "^17.0.2" } diff --git a/src/AppConstants.js b/src/AppConstants.js index 227bb26..c544ee2 100644 --- a/src/AppConstants.js +++ b/src/AppConstants.js @@ -1,5 +1,5 @@ -// const APIRoot = "http://localhost:8000"; // When running locally -const APIRoot = "https://happy-youtube-watcher.herokuapp.com"; +// const APIRoot = "http://localhost:8000" // When running locally +const APIRoot = "https://happy-youtube-watcher.herokuapp.com" const appConstants = { APIEndpoints: { SHUFFLE: APIRoot + "/shuffle", @@ -7,5 +7,5 @@ const appConstants = { TRACKED_VIDEOS: APIRoot + "/videos", }, SelectedPlaylistIdsKey: "selectedPlaylistIds" -}; -export default appConstants; \ No newline at end of file +} +export default appConstants \ No newline at end of file diff --git a/src/AppRoot.js b/src/AppRoot.js index 8c11062..b2a612d 100644 --- a/src/AppRoot.js +++ b/src/AppRoot.js @@ -1,25 +1,23 @@ -import React from "react"; +import React from "react" import { HashRouter as Router, Routes, Route -} from "react-router-dom"; -import ShufflePlayer from './pages/ShufflePlayer'; -import TrackPlaylistForm from './pages/TrackPlaylistForm'; -import PlaylistsManager from './pages/PlaylistsManager'; -import PlaylistsSearch from './pages/PlaylistsSearch'; +} from "react-router-dom" +import ShufflePlayer from './pages/ShufflePlayer' +import TrackPlaylistForm from './pages/TrackPlaylistForm' +import PlaylistsSearch from './pages/PlaylistsSearch' export default function AppRoot() { - return( + return (
}> - }> }> }>
- ); -} + ) +} \ No newline at end of file diff --git a/src/components/ButtonList.js b/src/components/ButtonList.js index cfb9ec0..cddb8ff 100644 --- a/src/components/ButtonList.js +++ b/src/components/ButtonList.js @@ -1,48 +1,19 @@ -import React from 'react'; -import { Link } from 'react-router-dom'; -import ToggleableButton from './ToggleableButton'; +import React from 'react' +import { Link } from 'react-router-dom' +import ToggleableButton from './ToggleableButton' -function ButtonList(props) { - return ( -
-
- - - - - - - - - -
+export default function ButtonList(props) { + return
+
+ + + + + + + + +
- ) -} - -export default ButtonList; +
+} \ No newline at end of file diff --git a/src/components/CurrentVideoInfo.jsx b/src/components/CurrentVideoInfo.jsx index a16ce5c..d6fdcbb 100644 --- a/src/components/CurrentVideoInfo.jsx +++ b/src/components/CurrentVideoInfo.jsx @@ -1,7 +1,7 @@ -import React, { useState } from 'react'; -import { Textfit } from '@tomplum/react-textfit'; +import React, { useState } from 'react' +import { Textfit } from '@tomplum/react-textfit' -function CurrentVideoInfo(props) { +export default function CurrentVideoInfo(props) { const [hideDescription, setHideDescription] = useState(true) var titleOpts = { @@ -16,22 +16,18 @@ function CurrentVideoInfo(props) { paddingRight: 10, flex: 0 } - return ( - <> -
setHideDescription(!hideDescription)}> - {props.currentVideo.title} - - Go to Youtube Site - -
+ return <> +
setHideDescription(!hideDescription)}> + {props.currentVideo.title} + + Go to Youtube Site + +
-
-
- {props.currentVideo.description} -
+
+
+ {props.currentVideo.description}
- - ); -} - -export default CurrentVideoInfo; \ No newline at end of file +
+ +} \ No newline at end of file diff --git a/src/components/LoadingPlaceholder.js b/src/components/LoadingPlaceholder.js index 6b99469..1496e8a 100644 --- a/src/components/LoadingPlaceholder.js +++ b/src/components/LoadingPlaceholder.js @@ -1,15 +1,12 @@ -import React from 'react'; +import React from 'react' -function LoadingPlaceholder(props) { - return( -
+export default function LoadingPlaceholder(props) { + return
- +
Give me a minute to wake up... so sleepy...
-
); -} - -export default LoadingPlaceholder; +
+} \ No newline at end of file diff --git a/src/components/Player.js b/src/components/Player.js index de30273..4735b40 100644 --- a/src/components/Player.js +++ b/src/components/Player.js @@ -1,55 +1,51 @@ -import React from 'react'; -import ReactPlayer from 'react-player'; +import React from 'react' +import ReactPlayer from 'react-player' -function Player(props) { - const YOUTUBE_PLAYLIST_VIDEO_LIMIT = 200; +export default function Player(props) { + const YOUTUBE_PLAYLIST_VIDEO_LIMIT = 200 function onPlay() { - var internalPlayer = props.playerRef.current?.getInternalPlayer(); - var videoData = internalPlayer.getVideoData(); - var video = props.videos.find(v => v.video_id === videoData.video_id); - props.setCurrentVideo(video); + var internalPlayer = props.playerRef.current?.getInternalPlayer() + var videoData = internalPlayer.getVideoData() + var video = props.videos.find(v => v.video_id === videoData.video_id) + props.setCurrentVideo(video) } function onError() { - var internalPlayer = props.playerRef.current?.getInternalPlayer(); + var internalPlayer = props.playerRef.current?.getInternalPlayer() var videoUrl = internalPlayer.getVideoUrl() - if (!videoUrl) return; - console.log(`BROKEN VIDEO: ${getVideoId(videoUrl)}`); - internalPlayer.nextVideo(); + if (!videoUrl) return + console.log(`BROKEN VIDEO: ${getVideoId(videoUrl)}`) + internalPlayer.nextVideo() } function getVideoId(url) { - const urlParams = new URLSearchParams(new URL(url).search); - return urlParams.get('v'); + const urlParams = new URLSearchParams(new URL(url).search) + return urlParams.get('v') } - return ( -
- `https://www.youtube.com/watch?v=${v.video_id}`)} - controls={true} - loop={props.repeatVideo} - playing={true} - width={"100%"} - height={"800px"} - onPlay={onPlay} - onError={onError} - config={{ - youtube: { - playerVars: {}, - embedOptions: { - host: "https://www.youtube-nocookie.com", - } - }, - attributes: {}, - tracks: [], - }} - /> -
- ); -} - -export default Player; \ No newline at end of file + return
+ `https://www.youtube.com/watch?v=${v.video_id}`)} + controls={true} + loop={props.repeatVideo} + playing={true} + width={"100%"} + height={"800px"} + onPlay={onPlay} + onError={onError} + config={{ + youtube: { + playerVars: {}, + embedOptions: { + host: "https://www.youtube-nocookie.com", + } + }, + attributes: {}, + tracks: [], + }} + /> +
+} \ No newline at end of file diff --git a/src/components/PlaylistSelector.js b/src/components/PlaylistSelector.js index 9752100..a07e2f8 100644 --- a/src/components/PlaylistSelector.js +++ b/src/components/PlaylistSelector.js @@ -1,55 +1,53 @@ -import React, { useState } from 'react'; -import PlaylistSelectorItem from './PlaylistSelectorItem'; +import React, { useState } from 'react' +import PlaylistSelectorItem from './PlaylistSelectorItem' export default function PlaylistSelector(props) { - const [collapsed, setCollapsed] = useState(props.isCollapsedDefault); - return ( -
-
setCollapsed(!collapsed)} - >Playlists Expand/Collapse
+ const [collapsed, setCollapsed] = useState(props.isCollapsedDefault) + return
+
setCollapsed(!collapsed)} + >Playlists Expand/Collapse
-
-
- {props.playlists.map(p => - togglePlaylistSelection(props, playlist_id)} - /> - )} -
- - +
+
+ {props.playlists.map(p => + togglePlaylistSelection(props, playlist_id)} + /> + )}
+ +
- ); +
} function onSelectNone(props) { const selectedNoPlaylists = props.playlists.map(p => { return { ...p, is_default: false } - }); - props.setPlaylistIds([]); - props.setLoadedPlaylists(selectedNoPlaylists); + }) + props.setPlaylistIds([]) + props.setLoadedPlaylists(selectedNoPlaylists) } function togglePlaylistSelection(props, togglePlaylistId) { const toggledOnePlaylist = props.playlists.map(p => { return p.playlist_id === togglePlaylistId ? { ...p, is_default: !p.is_default } : p - }); + }) const playlistIds = toggledOnePlaylist .filter(p => p.is_default) - .map(p => p.playlist_id); - props.setPlaylistIds(playlistIds); - props.setLoadedPlaylists(toggledOnePlaylist); + .map(p => p.playlist_id) + props.setPlaylistIds(playlistIds) + props.setLoadedPlaylists(toggledOnePlaylist) } \ No newline at end of file diff --git a/src/components/PlaylistSelectorItem.js b/src/components/PlaylistSelectorItem.js index 1095ad2..377aad4 100644 --- a/src/components/PlaylistSelectorItem.js +++ b/src/components/PlaylistSelectorItem.js @@ -1,18 +1,14 @@ -import React from 'react'; +import React from 'react' -function PlaylistSelectorItem(props) { - return ( -
- -
- ) -} - -export default PlaylistSelectorItem; \ No newline at end of file +export default function PlaylistSelectorItem(props) { + return
+ +
+} \ No newline at end of file diff --git a/src/components/ToggleableButton.js b/src/components/ToggleableButton.js index 5b1f391..37a641c 100644 --- a/src/components/ToggleableButton.js +++ b/src/components/ToggleableButton.js @@ -1,12 +1,5 @@ -import React from 'react'; +import React from 'react' -function ToggleableButton(props) { - return ( - - ) -} - -export default ToggleableButton; \ No newline at end of file +export default function ToggleableButton(props) { + return +} \ No newline at end of file diff --git a/src/components/VideoSelector.js b/src/components/VideoSelector.js index 9ae2aa9..fe91793 100644 --- a/src/components/VideoSelector.js +++ b/src/components/VideoSelector.js @@ -1,30 +1,18 @@ -import React, { useState } from 'react'; -import VideoTitleDisplay from './VideoTitleDisplay'; +import React, { useState } from 'react' +import VideoTitleDisplay from './VideoTitleDisplay' -function VideoSelector({ videos, onVideoClicked, isCollapsedDefault }) { - const [collapsed, setCollapsed] = useState(isCollapsedDefault); - const playedVideos = videos.slice().reverse(); +export default function VideoSelector({ videos, onVideoClicked, isCollapsedDefault }) { + const [collapsed, setCollapsed] = useState(isCollapsedDefault) + const playedVideos = videos.slice().reverse() - return ( -
-
setCollapsed(!collapsed)} - >Video History Expand/Collapse
+ return
+
setCollapsed(!collapsed)} + >Video History Expand/Collapse
-
- { - playedVideos.map((video, index) => - - )} -
+
+ {playedVideos.map((video, index) => )}
- ); -} - -export default VideoSelector; +
+} \ No newline at end of file diff --git a/src/components/VideoTitleDisplay.js b/src/components/VideoTitleDisplay.js index cfb2e64..2c10a06 100644 --- a/src/components/VideoTitleDisplay.js +++ b/src/components/VideoTitleDisplay.js @@ -1,6 +1,6 @@ -import React from 'react'; +import React from 'react' -function VideoTitleDisplay({ video, onVideoClicked, className }) { +export default function VideoTitleDisplay({ video, onVideoClicked, className }) { const titleOpts = { flex: 1 } @@ -9,27 +9,10 @@ function VideoTitleDisplay({ video, onVideoClicked, className }) { flex: 0 } - return ( -
-
onVideoClicked(video)} - style={titleOpts} - > - {video.title} -
- - Go to Youtube - -
- ); -} - -export default VideoTitleDisplay; \ No newline at end of file + return
+
onVideoClicked(video)} style={titleOpts}>{video.title}
+ + Go to Youtube + +
+} \ No newline at end of file diff --git a/src/hooks/UseEffectOnce.js b/src/hooks/UseEffectOnce.js index 9b92a4c..b0f749c 100644 --- a/src/hooks/UseEffectOnce.js +++ b/src/hooks/UseEffectOnce.js @@ -1,4 +1,4 @@ -import { useEffect, useRef } from 'react'; +import { useEffect, useRef } from 'react' export default function useEffectOnce(effectFunction) { const wasUsed = useRef(false) diff --git a/src/hooks/UseLocalStorage.js b/src/hooks/UseLocalStorage.js index 3f693f5..e682e08 100644 --- a/src/hooks/UseLocalStorage.js +++ b/src/hooks/UseLocalStorage.js @@ -1,19 +1,19 @@ -import { useState, useEffect } from 'react'; +import { useState, useEffect } from 'react' export default function useLocalStorage(key, initialValue) { const [storedValue, setStoredValue] = useState(() => { try { - const item = window.localStorage.getItem(key); - return item ? JSON.parse(item) : initialValue; + const item = window.localStorage.getItem(key) + return item ? JSON.parse(item) : initialValue } catch (error) { - console.log(error); - return initialValue; + console.log(error) + return initialValue } - }); + }) useEffect(() => { - window.localStorage.setItem(key, JSON.stringify(storedValue)); - }, [key, storedValue]); + window.localStorage.setItem(key, JSON.stringify(storedValue)) + }, [key, storedValue]) - return [storedValue, setStoredValue]; + return [storedValue, setStoredValue] } \ No newline at end of file diff --git a/src/hooks/UsePlaylistDataFetcher.js b/src/hooks/UsePlaylistDataFetcher.js index 1576381..e51a632 100644 --- a/src/hooks/UsePlaylistDataFetcher.js +++ b/src/hooks/UsePlaylistDataFetcher.js @@ -1,10 +1,10 @@ -import { useState } from 'react'; -import axios from 'axios'; -import AppConstants from '../AppConstants'; -import useEffectOnce from './UseEffectOnce'; +import { useState } from 'react' +import axios from 'axios' +import AppConstants from '../AppConstants' +import useEffectOnce from './UseEffectOnce' export default function usePlaylistDataFetcher(initialPlaylistIds) { - const [playlists, setPlaylists] = useState([]); + const [playlists, setPlaylists] = useState([]) useEffectOnce(() => { axios.get(AppConstants.APIEndpoints.TRACKED_PLAYLISTS) @@ -16,7 +16,7 @@ export default function usePlaylistDataFetcher(initialPlaylistIds) { setPlaylists(response.data) }) .catch(error => console.log(`Couldn't retrieve tracked playlists! ${error}`)) - }, [initialPlaylistIds]); + }, [initialPlaylistIds]) - return [playlists, setPlaylists]; -} + return [playlists, setPlaylists] +} \ No newline at end of file diff --git a/src/hooks/UseVideoPlayer.js b/src/hooks/UseVideoPlayer.js index 190e589..5ee3544 100644 --- a/src/hooks/UseVideoPlayer.js +++ b/src/hooks/UseVideoPlayer.js @@ -1,5 +1,5 @@ -import { useState, useEffect } from 'react'; -import useVideoDataFetcher from '../hooks/UseVideoDataFetcher'; +import { useState, useEffect } from 'react' +import useVideoDataFetcher from '../hooks/UseVideoDataFetcher' export default function useVideoPlayer(selectedPlaylistIds) { const [currentVideos, setCurrentVideos] = useState([]) @@ -10,7 +10,7 @@ export default function useVideoPlayer(selectedPlaylistIds) { function shuffleVideos() { if (!videoFetchResult.isLoaded) { setCurrentVideos([]) // fix to allow combine playlist to work, breaks youtube playlist control - return; + return } const shuffledVideos = fisherYatesShuffle([...videoFetchResult.videos]) setCurrentVideos(shuffledVideos) @@ -19,14 +19,14 @@ export default function useVideoPlayer(selectedPlaylistIds) { function fisherYatesShuffle(array) { for (let i = array.length - 1; i > 0; i--) { const j = Math.floor(Math.random() * (i + 1)); - [array[i], array[j]] = [array[j], array[i]]; // Swap elements + [array[i], array[j]] = [array[j], array[i]] // Swap elements } - return array; + return array } return { currentVideos, setVideoFetchPlaylistIds, isLoaded: videoFetchResult.isLoaded - }; -} + } +} \ No newline at end of file diff --git a/src/index.js b/src/index.js index e4f88fa..7f637ec 100644 --- a/src/index.js +++ b/src/index.js @@ -1,8 +1,8 @@ -import React from 'react'; -import ReactDOM from 'react-dom'; -import './index.css'; -import './normalize.css'; -import AppRoot from './AppRoot'; +import React from 'react' +import ReactDOM from 'react-dom' +import './index.css' +import './normalize.css' +import AppRoot from './AppRoot' import { Honeybadger, HoneybadgerErrorBoundary } from "@honeybadger-io/react" const config = { @@ -12,4 +12,4 @@ const config = { const honeybadger = Honeybadger.configure(config) -ReactDOM.render(, document.getElementById("root")); \ No newline at end of file +ReactDOM.render(, document.getElementById("root")) \ No newline at end of file diff --git a/src/pages/PlaylistsManager.jsx b/src/pages/PlaylistsManager.jsx deleted file mode 100644 index d0fd289..0000000 --- a/src/pages/PlaylistsManager.jsx +++ /dev/null @@ -1,7 +0,0 @@ -import React from 'react'; - -function PlaylistsManager(props) { - return(

Playlists Manager

); -} - -export default PlaylistsManager; \ No newline at end of file diff --git a/src/pages/PlaylistsSearch.jsx b/src/pages/PlaylistsSearch.jsx index 396a31b..ca3c644 100644 --- a/src/pages/PlaylistsSearch.jsx +++ b/src/pages/PlaylistsSearch.jsx @@ -1,7 +1,7 @@ -import React, { useState, useEffect } from 'react'; -import axios from 'axios'; -import AppConstants from '../AppConstants'; -import LoadingPlaceholder from '../components/LoadingPlaceholder'; +import React, { useState, useEffect } from 'react' +import axios from 'axios' +import AppConstants from '../AppConstants' +import LoadingPlaceholder from '../components/LoadingPlaceholder' import SearchField from 'react-search-field' const List = props => ( @@ -26,7 +26,7 @@ const List = props => ( }
-); +) function filteredList(queryString, list) { return list.filter(item => matchingItem(item, queryString)) @@ -34,43 +34,39 @@ function filteredList(queryString, list) { function matchingItem(item, queryString) { if (queryString === "") { return true } - queryString = queryString.toLowerCase(); + queryString = queryString.toLowerCase() if (item.videoId.toString().toLowerCase().search(queryString) >= 0 || item.title.toString().toLowerCase().search(queryString) >= 0 || item.description.toString().toLowerCase().search(queryString) >= 0 ) { - return true; + return true } - return false; + return false } -function PlaylistsSearch(props) { - const [isLoaded, setIsLoaded] = useState(false); - const [loadedVideos, setLoadedVideos] = useState([]); - const [queryString, setQueryString] = useState(""); +export default function PlaylistsSearch(props) { + const [isLoaded, setIsLoaded] = useState(false) + const [loadedVideos, setLoadedVideos] = useState([]) + const [queryString, setQueryString] = useState("") - useEffect(loadVideos, [isLoaded]); + useEffect(loadVideos, [isLoaded]) function loadVideos() { - if (isLoaded) return; + if (isLoaded) return axios.get(AppConstants.APIEndpoints.TRACKED_VIDEOS) .then(response => { - setIsLoaded(true); + setIsLoaded(true) setLoadedVideos(response.data) }) .catch(error => console.log(`Couldn't retrieve tracked videos: ${error}`)) } - return ( -
-
Search All Videos
-
- setQueryString(value)} placeholder="Search Videos..." /> -
- {!isLoaded ? : } + return
+
Search All Videos
+
+ setQueryString(value)} placeholder="Search Videos..." />
- ); -} - -export default PlaylistsSearch; \ No newline at end of file + {!isLoaded ? : } +
+} \ No newline at end of file diff --git a/src/pages/ShufflePlayer.js b/src/pages/ShufflePlayer.js index 6f2db6b..3262780 100644 --- a/src/pages/ShufflePlayer.js +++ b/src/pages/ShufflePlayer.js @@ -1,32 +1,28 @@ -import React, { useState, useRef } from 'react'; -import AppConstants from '../AppConstants'; -import ButtonList from '../components/ButtonList'; -import CurrentVideoInfo from '../components/CurrentVideoInfo'; -import LoadingPlaceholder from '../components/LoadingPlaceholder'; -import Player from '../components/Player'; -import PlaylistSelector from '../components/PlaylistSelector'; -import useLocalStorage from '../hooks/UseLocalStorage'; -import usePlaylistDataFetcher from '../hooks/UsePlaylistDataFetcher'; -import useVideoPlayer from '../hooks/UseVideoPlayer'; +import React, { useState, useRef } from 'react' +import AppConstants from '../AppConstants' +import ButtonList from '../components/ButtonList' +import CurrentVideoInfo from '../components/CurrentVideoInfo' +import LoadingPlaceholder from '../components/LoadingPlaceholder' +import Player from '../components/Player' +import PlaylistSelector from '../components/PlaylistSelector' +import useLocalStorage from '../hooks/UseLocalStorage' +import usePlaylistDataFetcher from '../hooks/UsePlaylistDataFetcher' +import useVideoPlayer from '../hooks/UseVideoPlayer' export default function ShufflePlayer() { const [currentVideo, setCurrentVideo] = useState({}) const [repeatVideo, setRepeatVideo] = useState(false) const [hideVideo, setHideVideo] = useState(true) - const playerRef = useRef(null); + const playerRef = useRef(null) - const [selectedPlaylistIds, setSelectedPlaylistIds] = useLocalStorage(AppConstants.SelectedPlaylistIdsKey, []); - const [playlists, setPlaylists] = usePlaylistDataFetcher(selectedPlaylistIds); + const [selectedPlaylistIds, setSelectedPlaylistIds] = useLocalStorage(AppConstants.SelectedPlaylistIdsKey, []) + const [playlists, setPlaylists] = usePlaylistDataFetcher(selectedPlaylistIds) - const { - currentVideos, - setVideoFetchPlaylistIds, - isLoaded - } = useVideoPlayer(selectedPlaylistIds); + const { currentVideos, setVideoFetchPlaylistIds, isLoaded } = useVideoPlayer(selectedPlaylistIds) if (!isLoaded) { - return ; + return } return
diff --git a/src/pages/TrackPlaylistForm.js b/src/pages/TrackPlaylistForm.js index d9b9198..01ef2cb 100644 --- a/src/pages/TrackPlaylistForm.js +++ b/src/pages/TrackPlaylistForm.js @@ -1,11 +1,11 @@ -import React from "react"; -import {Navigate} from 'react-router-dom' -import axios from 'axios'; -import AppConstants from '../AppConstants'; +import React from "react" +import { Navigate } from 'react-router-dom' +import axios from 'axios' +import AppConstants from '../AppConstants' -class TrackPlaylistForm extends React.Component { +export default class TrackPlaylistForm extends React.Component { constructor(props) { - super(props); + super(props) this.state = { playlist_id: '', is_default: true, @@ -13,51 +13,47 @@ class TrackPlaylistForm extends React.Component { redirect_home: false, } - this.handleInputChange = this.handleInputChange.bind(this); - this.handleSubmit = this.handleSubmit.bind(this); + this.handleInputChange = this.handleInputChange.bind(this) + this.handleSubmit = this.handleSubmit.bind(this) } handleInputChange(event) { - const target = event.target; - const value = target.name === 'is_default' ? target.checked : target.value; - const name = target.name; + const target = event.target + const value = target.name === 'is_default' ? target.checked : target.value + const name = target.name - this.setState({[name]: value}); + this.setState({ [name]: value }) } handleSubmit(event) { - event.preventDefault(); - this.setState({server_errors: []}) - axios.post(AppConstants.APIEndpoints.TRACKED_PLAYLISTS, {playlist_id: this.state.playlist_id, is_default: this.state.is_default}) + event.preventDefault() + this.setState({ server_errors: [] }) + axios.post(AppConstants.APIEndpoints.TRACKED_PLAYLISTS, { playlist_id: this.state.playlist_id, is_default: this.state.is_default }) .then((response) => { if (response.status >= 200 && response.status < 300) { - this.setState({redirect_home: true}) + this.setState({ redirect_home: true }) } }) - .catch((e) => this.setState({server_errors: [e], redirect_home: false})) + .catch((e) => this.setState({ server_errors: [e], redirect_home: false })) } render() { if (this.state.redirect_home) { - return() + return } - return( -
- - + return + + - - + + -

+

-
0 ? '' : 'hide'}`}> - Submission Errors: {this.state.server_errors.map((e, index) =>
  • {e.response.data.errors}
    • )} -
    -
    - ) +
    0 ? '' : 'hide'}`}> + Submission Errors: {this.state.server_errors.map((e, index) =>
  • {e.response.data.errors}
    • )} +
    + } -} - -export default TrackPlaylistForm; +} \ No newline at end of file diff --git a/yarn.lock b/yarn.lock index 4955daf..68f343e 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3238,7 +3238,12 @@ combined-stream@^1.0.8: dependencies: delayed-stream "~1.0.0" -commander@^2.18.0, commander@^2.20.0: +commander@^11.0.0: + version "11.1.0" + resolved "https://registry.yarnpkg.com/commander/-/commander-11.1.0.tgz#62fdce76006a68e5c1ab3314dc92e800eb83d906" + integrity sha512-yPVavfyCcRhmorC7rWlkHn15b4wDVgVmBA7kV4QVBsF7kv/9TKJAbAXVTxvTnwP8HHKjRCJDClKbciiYS7p0DQ== + +commander@^2.20.0: version "2.20.3" resolved "https://registry.yarnpkg.com/commander/-/commander-2.20.3.tgz#fd485e84c03eb4881c20722ba48035e8531aeb33" integrity sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ== @@ -4580,14 +4585,14 @@ fs-extra@^10.0.0: jsonfile "^6.0.1" universalify "^2.0.0" -fs-extra@^8.1.0: - version "8.1.0" - resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-8.1.0.tgz#49d43c45a88cd9677668cb7be1b46efdb8d2e1c0" - integrity sha512-yhlQgA6mnOJUKOsRUFsgJdQCvkKhcz8tlZG5HBQfReYZy46OwLcY+Zia0mtdHsOo9y/hP+CxMN0TU9QxoOtG4g== +fs-extra@^11.1.1: + version "11.2.0" + resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-11.2.0.tgz#e70e17dfad64232287d01929399e0ea7c86b0e5b" + integrity sha512-PmDi3uwK5nFuXh7XDTlVnS17xJS7vW36is2+w3xcv8SVxiB4NyATf4ctkVY5bkSjX0Y4nbvZCq1/EjtEyr9ktw== dependencies: graceful-fs "^4.2.0" - jsonfile "^4.0.0" - universalify "^0.1.0" + jsonfile "^6.0.1" + universalify "^2.0.0" fs-extra@^9.0.0, fs-extra@^9.0.1: version "9.1.0" @@ -4676,17 +4681,17 @@ get-symbol-description@^1.0.0: call-bind "^1.0.2" get-intrinsic "^1.1.1" -gh-pages@^5.0.0: - version "5.0.0" - resolved "https://registry.yarnpkg.com/gh-pages/-/gh-pages-5.0.0.tgz#e0893272a0e33f0453e53a3c017c33b91ddd6394" - integrity sha512-Nqp1SjkPIB94Xw/3yYNTUL+G2dxlhjvv1zeN/4kMC1jfViTEqhtVz/Ba1zSXHuvXCN9ADNS1dN4r5/J/nZWEQQ== +gh-pages@^6.1.1: + version "6.1.1" + resolved "https://registry.yarnpkg.com/gh-pages/-/gh-pages-6.1.1.tgz#e80af927a081cb480657fde5a0b87ea2e77d6c74" + integrity sha512-upnohfjBwN5hBP9w2dPE7HO5JJTHzSGMV1JrLrHvNuqmjoYHg6TBrCcnEoorjG/e0ejbuvnwyKMdTyM40PEByw== dependencies: async "^3.2.4" - commander "^2.18.0" + commander "^11.0.0" email-addresses "^5.0.0" filenamify "^4.3.0" find-cache-dir "^3.3.1" - fs-extra "^8.1.0" + fs-extra "^11.1.1" globby "^6.1.0" glob-parent@^5.1.2, glob-parent@~5.1.2: @@ -5914,13 +5919,6 @@ json5@^2.1.2, json5@^2.2.0, json5@^2.2.1: resolved "https://registry.yarnpkg.com/json5/-/json5-2.2.1.tgz#655d50ed1e6f95ad1a3caababd2b0efda10b395c" integrity sha512-1hqLFMSrGHRHxav9q9gNjJ5EXznIxGVO09xQRrwplcS8qs28pZ8s8hupZAmqDwZUmVZ2Qb2jnyPOWcDH8m8dlA== -jsonfile@^4.0.0: - version "4.0.0" - resolved "https://registry.yarnpkg.com/jsonfile/-/jsonfile-4.0.0.tgz#8771aae0799b64076b76640fca058f9c10e33ecb" - integrity sha512-m6F1R3z8jjlf2imQHS2Qez5sjKWQzbuuhuJ/FKYFRZvPE3PuHcSMVZzfsLhGVOkfd20obL5SWEBew5ShlquNxg== - optionalDependencies: - graceful-fs "^4.1.6" - jsonfile@^6.0.1: version "6.1.0" resolved "https://registry.yarnpkg.com/jsonfile/-/jsonfile-6.1.0.tgz#bc55b2634793c679ec6403094eb13698a6ec0aae" @@ -8690,11 +8688,6 @@ unique-string@^2.0.0: dependencies: crypto-random-string "^2.0.0" -universalify@^0.1.0: - version "0.1.2" - resolved "https://registry.yarnpkg.com/universalify/-/universalify-0.1.2.tgz#b646f69be3942dabcecc9d6639c80dc105efaa66" - integrity sha512-rBJeI5CXAlmy1pV+617WB9J63U6XcazHHF2f2dbJix4XzpUF0RS3Zbj0FGIOCAva5P/d/GBOYaACQ1w+0azUkg== - universalify@^0.2.0: version "0.2.0" resolved "https://registry.yarnpkg.com/universalify/-/universalify-0.2.0.tgz#6451760566fa857534745ab1dde952d1b1761be0"