update redux to store podcast name and category

This commit is contained in:
jinhojang6 2020-03-21 01:45:07 +09:00
parent 0c3330c05d
commit 78aa3c918a
No known key found for this signature in database
GPG Key ID: 0E7AA62CB0D9E6F3
7 changed files with 183 additions and 38 deletions

View File

@ -1,5 +1,15 @@
import "@babel/polyfill";
export const podcastData = (category, name) => dispatch => {
localStorage.setItem('category', category)
localStorage.setItem('name', name)
dispatch({
type: 'PODCAST_DATA',
category: category,
name: name,
})
}
export const setLoading = () => dispatch => {
dispatch({
type: 'SET_LOADING'

View File

@ -148,7 +148,7 @@ class Controls extends Component {
</div>
<AudioPlayer
src={track.src}
showLoopControl={false}
// showLoopControl={false}
/>
</div>
)

View File

@ -3,13 +3,14 @@ import moment from 'moment'
import { connect } from 'react-redux'
import { setAudio } from '../actions/player'
import { withRouter } from 'react-router-dom'
import { podcasts } from '../data/podcasts'
import '../css/EpisodeListElement.styles.css'
class EpisodeListElement extends Component {
handleOnClick = e => {
this.playAudio()
if (window.innerWidth <= 600) {
this.props.history.push('/nowplaying')
}
@ -44,7 +45,8 @@ class EpisodeListElement extends Component {
}
render() {
const { date, title, theme, trackId, duration, nowPlayingId } = this.props
const { date, title, theme, trackId, duration, nowPlayingId, name } = this.props
console.log(this.props)
const isPlaying = trackId === nowPlayingId
const minutesLong = Math.round(
@ -63,7 +65,7 @@ class EpisodeListElement extends Component {
{minutesLong} mins
</p>
<h3 className='EpisodeListElement-title'>
{title.length > 50 ? title.substring(0, 50) + '...' : title}
{title}
</h3>
</div>
<button
@ -86,7 +88,9 @@ class EpisodeListElement extends Component {
const mapStateToProps = state => ({
nowPlayingId: state.player.track.id,
podcastImage: state.podcast.podcast.img,
podcast: state.podcast.podcast.title
podcast: state.podcast.podcast.title,
category: state.podcast.category,
name: state.podcast.name
})
export default withRouter(

View File

@ -29,7 +29,8 @@ export const podcasts = [
creator: 'Corey & Demetrick',
link: 'https://feeds.simplecast.com/xCQr3ykc',
img:
'https://lh3.googleusercontent.com/h-NtM2BbbFddHMNyTGBmGdzge-zqyy9-LCSUnRF8r7st1s6ZIzZM01YFTAcFkvlf8TfF2cptTBSlNUGEVpf_1SM8LPO00tPo6OAKaSDePLu6_TC6IBWSZpVeIr1aTvDXrEwuFqPQ0w=w2400'
'https://lh3.googleusercontent.com/h-NtM2BbbFddHMNyTGBmGdzge-zqyy9-LCSUnRF8r7st1s6ZIzZM01YFTAcFkvlf8TfF2cptTBSlNUGEVpf_1SM8LPO00tPo6OAKaSDePLu6_TC6IBWSZpVeIr1aTvDXrEwuFqPQ0w=w2400',
featured: ['']
},
{
category: 'featured',
@ -37,7 +38,8 @@ export const podcasts = [
creator: 'Epicenter Media',
link: 'https://feeds.simplecast.com/lKmQDG9R',
img:
'https://lh3.googleusercontent.com/cwsJClMXMYPuo17tQmeZDYhXI7ZKQta4AUGJ0mKrFaPBpRFssVpxLvzE-eScQ8vdBkTvcB9B5oF_tyY_gQAix-7muSwBfPrj1x5Pfa4r-6TCXJqxg6l8beQ9GVGjlDquy0I_oYlGKg=w2400'
'https://lh3.googleusercontent.com/cwsJClMXMYPuo17tQmeZDYhXI7ZKQta4AUGJ0mKrFaPBpRFssVpxLvzE-eScQ8vdBkTvcB9B5oF_tyY_gQAix-7muSwBfPrj1x5Pfa4r-6TCXJqxg6l8beQ9GVGjlDquy0I_oYlGKg=w2400',
featured: ['']
},
{
category: 'featured',
@ -45,6 +47,7 @@ export const podcasts = [
creator: 'Daniel Weinzveg',
link: 'https://feeds.soundcloud.com/users/soundcloud:users:80553246/sounds.rss',
img:
'https://s3-us-west-2.amazonaws.com/anchor-generated-image-bank/production/podcast_uploaded400/639445/639445-1528081749835-3cb9a831dc539.jpg'
'https://s3-us-west-2.amazonaws.com/anchor-generated-image-bank/production/podcast_uploaded400/639445/639445-1528081749835-3cb9a831dc539.jpg',
featured: ['']
}
]

View File

@ -4,10 +4,16 @@ import { Link } from 'react-router-dom'
import ProgressiveImage from 'react-progressive-image'
import { podcasts, categories } from '../data/podcasts'
import { switchDisplay } from '../actions/settings'
import { podcastData } from '../actions/podcast'
import '../css/HomePage.styles.css'
class Featured extends Component {
handlePodcastData(podcast){
this.props.podcastData(podcast.category, podcast.name )
}
displayGrid = () => {
const list = []
podcasts.map((podcast) => {
@ -16,13 +22,15 @@ class Featured extends Component {
}
})
const gridPodcasts = list.map(podcast => (
const gridPodcasts = list.map(podcast =>
{
return(
<Link
key={podcast.name}
className="Home-podcast"
to={`/podcast/${podcast.name.replace(/ /g, '_')}`}
>
<div>
<div onClick={() => this.handlePodcastData(podcast)}>
<ProgressiveImage
src={podcast.img.replace(/100x100/g, '360x360')}
placeholder={podcast.img.replace(/100x100/g, '30x30')}
@ -40,7 +48,7 @@ class Featured extends Component {
</h3>
</div>
</Link>
))
)})
return (
<Fragment>
@ -104,10 +112,10 @@ class Featured extends Component {
const mapStateToProps = state => ({
theme: state.settings.theme,
display: state.settings.display
display: state.settings.display,
})
export default connect(
mapStateToProps,
{ switchDisplay }
{ switchDisplay, podcastData }
)(Featured)

View File

@ -8,7 +8,9 @@ const podcastState = {
description: ''
},
error: '',
loading: true
loading: true,
category: localStorage.getItem('category') || '',
name: localStorage.getItem('name') || ''
}
const podcastReducer = (state = podcastState, action) => {
@ -22,6 +24,12 @@ const podcastReducer = (state = podcastState, action) => {
...action.podcast
}
}
case 'PODCAST_DATA':
return {
...state,
category: action.category,
name: action.name
}
case 'SET_ERROR':
return {
...state,

118
yarn.lock
View File

@ -749,6 +749,13 @@
dependencies:
regenerator-runtime "^0.13.2"
"@babel/runtime@^7.4.2", "@babel/runtime@^7.6.3":
version "7.8.7"
resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.8.7.tgz#8fefce9802db54881ba59f90bb28719b4996324d"
integrity sha512-+AATMUFppJDw6aiR5NVPHqIQBlV/Pj8wY/EZH+lmvRdUo9xBaz/rF3alAwFJQavvKfeOlPE7oaaDHVbcySbCsg==
dependencies:
regenerator-runtime "^0.13.4"
"@babel/template@^7.4.4", "@babel/template@^7.8.3":
version "7.8.3"
resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.8.3.tgz#e02ad04fe262a657809327f578056ca15fd4d1b8"
@ -2117,6 +2124,11 @@ boolbase@^1.0.0, boolbase@~1.0.0:
resolved "https://registry.yarnpkg.com/boolbase/-/boolbase-1.0.0.tgz#68dff5fbe60c51eb37725ea9e3ed310dcc1e776e"
integrity sha1-aN/1++YMUes3cl6p4+0xDcwed24=
bowser@^1.7.3:
version "1.9.4"
resolved "https://registry.yarnpkg.com/bowser/-/bowser-1.9.4.tgz#890c58a2813a9d3243704334fa81b96a5c150c9a"
integrity sha512-9IdMmj2KjigRq6oWhmwv1W36pDuA4STQZ8q6YO9um+x07xgYNCD3Oou+WP/3L1HNz7iqythGet3/p4wvc8AAwQ==
brace-expansion@^1.1.7:
version "1.1.11"
resolved "https://registry.yarnpkg.com/brace-expansion/-/brace-expansion-1.1.11.tgz#3c7fcbf529d87226f3d2f52b966ff5271eb441dd"
@ -2606,6 +2618,13 @@ copy-descriptor@^0.1.0:
resolved "https://registry.yarnpkg.com/copy-descriptor/-/copy-descriptor-0.1.1.tgz#676f6eb3c39997c2ee1ac3a924fd6124748f578d"
integrity sha1-Z29us8OZl8LuGsOpJP1hJHSPV40=
copy-to-clipboard@^3:
version "3.3.1"
resolved "https://registry.yarnpkg.com/copy-to-clipboard/-/copy-to-clipboard-3.3.1.tgz#115aa1a9998ffab6196f93076ad6da3b913662ae"
integrity sha512-i13qo6kIHTTpCm8/Wup+0b1mVWETvu2kIMzKoK8FpkLkFxlt0znUAHcMzox+T8sPlqtZXq3CulEjQHsYiGFJUw==
dependencies:
toggle-selection "^1.0.6"
copy-to-clipboard@^3.2.0:
version "3.2.1"
resolved "https://registry.yarnpkg.com/copy-to-clipboard/-/copy-to-clipboard-3.2.1.tgz#b1a1137100e5665d5a96015cb579e30e90e07c44"
@ -2743,6 +2762,14 @@ css-declaration-sorter@^4.0.1:
postcss "^7.0.1"
timsort "^0.3.0"
css-in-js-utils@^2.0.0:
version "2.0.1"
resolved "https://registry.yarnpkg.com/css-in-js-utils/-/css-in-js-utils-2.0.1.tgz#3b472b398787291b47cfe3e44fecfdd9e914ba99"
integrity sha512-PJF0SpJT+WdbVVt0AOYp9C8GnuruRlL/UFW7932nLWmFLQTaWEzTBQEx7/hn4BuV+WON75iAViSUJLiU3PKbpA==
dependencies:
hyphenate-style-name "^1.0.2"
isobject "^3.0.1"
css-modules-loader-core@^1.1.0:
version "1.1.0"
resolved "https://registry.yarnpkg.com/css-modules-loader-core/-/css-modules-loader-core-1.1.0.tgz#5908668294a1becd261ae0a4ce21b0b551f21d16"
@ -2899,7 +2926,7 @@ cssstyle@^1.1.1:
dependencies:
cssom "0.3.x"
csstype@^2.2.0:
csstype@^2.2.0, csstype@^2.6.7:
version "2.6.9"
resolved "https://registry.yarnpkg.com/csstype/-/csstype-2.6.9.tgz#05141d0cd557a56b8891394c1911c40c8a98d098"
integrity sha512-xz39Sb4+OaTsULgUERcCk+TJj8ylkL4aSVDQiX/ksxbELSqwkgt4d4RD7fovIdgJGSuNYqwZEiVjYY5l0ask+Q==
@ -2935,7 +2962,7 @@ deasync@^0.1.14:
bindings "^1.5.0"
node-addon-api "^1.7.1"
debug@2.6.9, debug@^2.2.0, debug@^2.3.3, debug@^2.6.8, debug@^2.6.9:
debug@2.6.9, debug@^2.1.3, debug@^2.2.0, debug@^2.3.3, debug@^2.6.8, debug@^2.6.9:
version "2.6.9"
resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.9.tgz#5d128515df134ff327e90a4c93f4e077a536341f"
integrity sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==
@ -3063,6 +3090,14 @@ dom-closest@^0.2.0:
dependencies:
dom-matches ">=1.0.1"
dom-helpers@^5.0.1:
version "5.1.3"
resolved "https://registry.yarnpkg.com/dom-helpers/-/dom-helpers-5.1.3.tgz#7233248eb3a2d1f74aafca31e52c5299cc8ce821"
integrity sha512-nZD1OtwfWGRBWlpANxacBEZrEuLa16o1nh7YopFWeoF68Zt8GGEmzHu6Xv4F3XaFIC+YXtTLrzgqKxFgLEe4jw==
dependencies:
"@babel/runtime" "^7.6.3"
csstype "^2.6.7"
dom-matches@>=1.0.1:
version "2.0.0"
resolved "https://registry.yarnpkg.com/dom-matches/-/dom-matches-2.0.0.tgz#d2728b416a87533980eb089b848d253cf23a758c"
@ -3454,7 +3489,7 @@ fastparse@^1.1.1:
resolved "https://registry.yarnpkg.com/fastparse/-/fastparse-1.1.2.tgz#91728c5a5942eced8531283c79441ee4122c35a9"
integrity sha512-483XLLxTVIwWK3QTrMGRqUfUpoOs/0hbQrl2oz4J0pAcm3A3bu84wxTFqGqkJzewCLdME38xJLJAxBABfQT8sQ==
fbjs@^0.8.15, fbjs@^0.8.16, fbjs@^0.8.9:
fbjs@^0.8.12, fbjs@^0.8.15, fbjs@^0.8.16, fbjs@^0.8.9:
version "0.8.17"
resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-0.8.17.tgz#c4d598ead6949112653d6588b01a5cdcd9f90fdd"
integrity sha1-xNWY6taUkRJlPWWIsBpc3Nn5D90=
@ -3690,6 +3725,17 @@ gh-pages@^2.2.0:
fs-extra "^8.1.0"
globby "^6.1.0"
glamor@^2.20.40:
version "2.20.40"
resolved "https://registry.yarnpkg.com/glamor/-/glamor-2.20.40.tgz#f606660357b7cf18dface731ad1a2cfa93817f05"
integrity sha512-DNXCd+c14N9QF8aAKrfl4xakPk5FdcFwmH7sD0qnC0Pr7xoZ5W9yovhUrY/dJc3psfGGXC58vqQyRtuskyUJxA==
dependencies:
fbjs "^0.8.12"
inline-style-prefixer "^3.0.6"
object-assign "^4.1.1"
prop-types "^15.5.10"
through "^2.3.8"
glob-parent@^3.1.0:
version "3.1.0"
resolved "https://registry.yarnpkg.com/glob-parent/-/glob-parent-3.1.0.tgz#9e6af6299d8d3bd2bd40430832bd113df906c5ae"
@ -4019,6 +4065,11 @@ humanize-url@^1.0.0:
normalize-url "^1.0.0"
strip-url-auth "^1.0.0"
hyphenate-style-name@^1.0.2:
version "1.0.3"
resolved "https://registry.yarnpkg.com/hyphenate-style-name/-/hyphenate-style-name-1.0.3.tgz#097bb7fa0b8f1a9cf0bd5c734cf95899981a9b48"
integrity sha512-EcuixamT82oplpoJ2XU4pDtKGWQ7b00CD9f1ug9IaQ3p1bkHMiKCZ9ut9QDI6qsa6cpUuB+A/I+zLtdNK4n2DQ==
iconv-lite@0.4.24, iconv-lite@~0.4.13:
version "0.4.24"
resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.24.tgz#2022b4b25fbddc21d2f524974a474aafe733908b"
@ -4094,6 +4145,14 @@ inherits@2.0.3:
resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.3.tgz#633c2c83e3da42a502f52466022480f4208261de"
integrity sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=
inline-style-prefixer@^3.0.6:
version "3.0.8"
resolved "https://registry.yarnpkg.com/inline-style-prefixer/-/inline-style-prefixer-3.0.8.tgz#8551b8e5b4d573244e66a34b04f7d32076a2b534"
integrity sha1-hVG45bTVcyROZqNLBPfTIHaitTQ=
dependencies:
bowser "^1.7.3"
css-in-js-utils "^2.0.0"
invariant@^2.2.2, invariant@^2.2.4:
version "2.2.4"
resolved "https://registry.yarnpkg.com/invariant/-/invariant-2.2.4.tgz#610f3c92c9359ce1db616e538008d23ff35158e6"
@ -4552,6 +4611,13 @@ jsonfile@^4.0.0:
optionalDependencies:
graceful-fs "^4.1.6"
jsonp@^0.2.1:
version "0.2.1"
resolved "https://registry.yarnpkg.com/jsonp/-/jsonp-0.2.1.tgz#a65b4fa0f10bda719a05441ea7b94c55f3e15bae"
integrity sha1-pltPoPEL2nGaBUQep7lMVfPhW64=
dependencies:
debug "^2.1.3"
jsprim@^1.2.2:
version "1.4.1"
resolved "https://registry.yarnpkg.com/jsprim/-/jsprim-1.4.1.tgz#313e66bc1e5cc06e438bc1b7499c2e5c56acb6a2"
@ -6543,6 +6609,14 @@ rc-util@^4.0.4, rc-util@^4.1.1, rc-util@^4.13.0, rc-util@^4.15.3, rc-util@^4.15.
react-lifecycles-compat "^3.0.4"
shallowequal "^1.1.0"
react-copy-to-clipboard@^5.0.2:
version "5.0.2"
resolved "https://registry.yarnpkg.com/react-copy-to-clipboard/-/react-copy-to-clipboard-5.0.2.tgz#d82a437e081e68dfca3761fbd57dbf2abdda1316"
integrity sha512-/2t5mLMMPuN5GmdXo6TebFa8IoFxZ+KTDDqYhcDm0PhkgEzSxVvIX26G20s1EB02A4h2UZgwtfymZ3lGJm0OLg==
dependencies:
copy-to-clipboard "^3"
prop-types "^15.5.8"
react-dom@^16.8.6:
version "16.12.0"
resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.12.0.tgz#0da4b714b8d13c2038c9396b54a92baea633fe11"
@ -6641,6 +6715,14 @@ react-router@5.1.2:
tiny-invariant "^1.0.2"
tiny-warning "^1.0.0"
react-share@^4.0.1:
version "4.1.0"
resolved "https://registry.yarnpkg.com/react-share/-/react-share-4.1.0.tgz#45cbed5ddcbb24504143bcfc0e9b8a729ce274e0"
integrity sha512-4/XqVBC+hreniU08zkzAkOGC3FPdJhcLzt1QCdybsZPd5ieUS++iChEEptvNoksiJ5NxbI2VRoDY9ovLAGl7GQ==
dependencies:
classnames "^2.2.5"
jsonp "^0.2.1"
react-slick@~0.25.2:
version "0.25.2"
resolved "https://registry.yarnpkg.com/react-slick/-/react-slick-0.25.2.tgz#56331b67d47d8bcfe2dceb6acab1c8fd5bd1f6bc"
@ -6652,6 +6734,26 @@ react-slick@~0.25.2:
lodash.debounce "^4.0.8"
resize-observer-polyfill "^1.5.0"
react-toastify@^5.5.0:
version "5.5.0"
resolved "https://registry.yarnpkg.com/react-toastify/-/react-toastify-5.5.0.tgz#f55de44f6b5e3ce3b13b69e5bb4427f2c9404822"
integrity sha512-jsVme7jALIFGRyQsri/g4YTsRuaaGI70T6/ikjwZMB4mwTZaCWqj5NqxhGrRStKlJc5npXKKvKeqTiRGQl78LQ==
dependencies:
"@babel/runtime" "^7.4.2"
classnames "^2.2.6"
prop-types "^15.7.2"
react-transition-group "^4"
react-transition-group@^4:
version "4.3.0"
resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-4.3.0.tgz#fea832e386cf8796c58b61874a3319704f5ce683"
integrity sha512-1qRV1ZuVSdxPlPf4O8t7inxUGpdyO5zG9IoNfJxSO0ImU2A1YWkEQvFPuIPZmMLkg5hYs7vv5mMOyfgSkvAwvw==
dependencies:
"@babel/runtime" "^7.5.5"
dom-helpers "^5.0.1"
loose-envify "^1.4.0"
prop-types "^15.6.2"
react@^16.8.3, react@^16.8.6:
version "16.12.0"
resolved "https://registry.yarnpkg.com/react/-/react-16.12.0.tgz#0c0a9c6a142429e3614834d5a778e18aa78a0b83"
@ -6757,6 +6859,11 @@ regenerator-runtime@^0.13.2:
resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.3.tgz#7cf6a77d8f5c6f60eb73c5fc1955b2ceb01e6bf5"
integrity sha512-naKIZz2GQ8JWh///G7L3X6LaQUAMp2lvb1rvwwsURe/VXwD6VMfr+/1NuNw3ag8v2kY1aQ/go5SNn79O9JU7yw==
regenerator-runtime@^0.13.4:
version "0.13.5"
resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.5.tgz#d878a1d094b4306d10b9096484b33ebd55e26697"
integrity sha512-ZS5w8CpKFinUzOwW3c83oPeVXoNsrLsaCoLtJvAClH135j/R77RuymhiSErhm2lKcwSCIpmvIWSbDkIfAqKQlA==
regenerator-transform@^0.10.0:
version "0.10.1"
resolved "https://registry.yarnpkg.com/regenerator-transform/-/regenerator-transform-0.10.1.tgz#1e4996837231da8b7f3cf4114d71b5691a0680dd"
@ -7648,6 +7755,11 @@ through2@^2.0.0, through2@~2.0.3:
readable-stream "~2.3.6"
xtend "~4.0.1"
through@^2.3.8:
version "2.3.8"
resolved "https://registry.yarnpkg.com/through/-/through-2.3.8.tgz#0dd4c9ffaabc357960b1b724115d7e0e86a2e1f5"
integrity sha1-DdTJ/6q8NXlgsbckEV1+Doai4fU=
timers-browserify@^2.0.4:
version "2.0.11"
resolved "https://registry.yarnpkg.com/timers-browserify/-/timers-browserify-2.0.11.tgz#800b1f3eee272e5bc53ee465a04d0e804c31211f"