From b1dbd977091761eb5ab7f770d0ecb29a64b4e9df Mon Sep 17 00:00:00 2001 From: Shekar Siri Date: Thu, 19 Aug 2021 13:23:24 +0530 Subject: [PATCH] fix(ui) - bookmarking --- .../components/shared/Bookmark/Bookmark.tsx | 26 +++++++++++++++++++ .../components/shared/Bookmark/bookmark.css | 14 ++++++++++ .../app/components/shared/Bookmark/index.js | 1 + .../shared/SessionItem/SessionItem.js | 21 +++------------ .../shared/SessionItem/sessionItem.css | 24 ++++++----------- frontend/app/duck/sessions.js | 17 +++++++----- 6 files changed, 62 insertions(+), 41 deletions(-) create mode 100644 frontend/app/components/shared/Bookmark/Bookmark.tsx create mode 100644 frontend/app/components/shared/Bookmark/bookmark.css create mode 100644 frontend/app/components/shared/Bookmark/index.js diff --git a/frontend/app/components/shared/Bookmark/Bookmark.tsx b/frontend/app/components/shared/Bookmark/Bookmark.tsx new file mode 100644 index 000000000..ed75e6c7e --- /dev/null +++ b/frontend/app/components/shared/Bookmark/Bookmark.tsx @@ -0,0 +1,26 @@ +import React, { useState } from 'react' +import stl from './bookmark.css' +import { Icon } from 'UI' +import { toggleFavorite } from 'Duck/sessions' +import { connect } from 'react-redux' +// import Session from 'Types/session'; + +interface Props { + toggleFavorite: (session) => void, + favorite: Boolean, + sessionId: any +} +function Bookmark({ toggleFavorite, sessionId, favorite } : Props ) { + + return ( +
toggleFavorite(sessionId) } + data-favourite={ favorite } + > + +
+ ) +} + +export default connect(null, { toggleFavorite })(Bookmark) diff --git a/frontend/app/components/shared/Bookmark/bookmark.css b/frontend/app/components/shared/Bookmark/bookmark.css new file mode 100644 index 000000000..9e44e8115 --- /dev/null +++ b/frontend/app/components/shared/Bookmark/bookmark.css @@ -0,0 +1,14 @@ +.favoriteWrapper { + cursor: pointer; + display: flex; + align-items: center; + /* opacity: 0; */ + margin: 0 15px; + + &[data-favourite=true] { + opacity: 1; + & svg { + fill: $teal; + } + } +} \ No newline at end of file diff --git a/frontend/app/components/shared/Bookmark/index.js b/frontend/app/components/shared/Bookmark/index.js new file mode 100644 index 000000000..4110151af --- /dev/null +++ b/frontend/app/components/shared/Bookmark/index.js @@ -0,0 +1 @@ +export { default } from './Bookmark' \ No newline at end of file diff --git a/frontend/app/components/shared/SessionItem/SessionItem.js b/frontend/app/components/shared/SessionItem/SessionItem.js index 36a7f186a..301bf4463 100644 --- a/frontend/app/components/shared/SessionItem/SessionItem.js +++ b/frontend/app/components/shared/SessionItem/SessionItem.js @@ -15,7 +15,7 @@ import { session as sessionRoute } from 'App/routes'; import { durationFormatted, formatTimeOrDate } from 'App/date'; import stl from './sessionItem.css'; import LiveTag from 'Shared/LiveTag'; -import { session } from '../../../routes'; +import Bookmark from 'Shared/Bookmark'; import Counter from './Counter' const Label = ({ label = '', color = 'color-gray-medium'}) => ( @@ -25,15 +25,6 @@ const Label = ({ label = '', color = 'color-gray-medium'}) => ( timezone: state.getIn(['sessions', 'timezone']) }), { toggleFavorite }) export default class SessionItem extends React.PureComponent { - state = { favouriting: false }; - - toggleFavorite = () => { - this.setState({ favouriting: true }); - this.props.toggleFavorite(this.props.session).then(() => { - this.setState({ favouriting: false }); - }); - } - // eslint-disable-next-line complexity render() { const { @@ -114,14 +105,8 @@ export default class SessionItem extends React.PureComponent { { live && } -
-
- -
+
+
diff --git a/frontend/app/components/shared/SessionItem/sessionItem.css b/frontend/app/components/shared/SessionItem/sessionItem.css index 853e70bea..8f9824bec 100644 --- a/frontend/app/components/shared/SessionItem/sessionItem.css +++ b/frontend/app/components/shared/SessionItem/sessionItem.css @@ -20,13 +20,20 @@ align-items: center; border: solid thin #EEEEEE; + & .favorite { + opacity: 0; + &[data-favourite=true] { + opacity: 1; + } + } + &:hover { & .playLink { transition: all 0.4s; opacity: 1; } - & .favoriteWrapper { + & .favorite { transition: all 0.4s; opacity: 1; } @@ -81,21 +88,6 @@ } } -.favoriteWrapper { - cursor: pointer; - display: flex; - align-items: center; - opacity: 0; - margin: 0 15px; - - &[data-favourite=true] { - opacity: 1; - & svg { - fill: $teal; - } - } -} - .playLink { display: flex; align-items: center; diff --git a/frontend/app/duck/sessions.js b/frontend/app/duck/sessions.js index 9089490c4..271a590ec 100644 --- a/frontend/app/duck/sessions.js +++ b/frontend/app/duck/sessions.js @@ -120,9 +120,10 @@ const reducer = (state = initialState, action = {}) => { return state .set('list', list) .set('sessionIds', list.map(({ sessionId }) => sessionId ).toJS()) + .set('favoriteList', list.filter(({ favorite }) => favorite)) .set('total', total) .set('keyMap', keyMap) - .set('wdTypeCount', wdTypeCount); + .set('wdTypeCount', wdTypeCount); case SET_AUTOPLAY_VALUES: { const sessionIds = state.get('sessionIds') const currentSessionId = state.get('current').sessionId @@ -179,13 +180,15 @@ const reducer = (state = initialState, action = {}) => { .set('visitedEvents', visitedEvents) .set('host', visitedEvents[0] && visitedEvents[0].host); } - case FETCH_FAVORITE_LIST.SUCCESS: + case FETCH_FAVORITE_LIST.SUCCESS: return state .set('favoriteList', List(action.data).map(Session)); case TOGGLE_FAVORITE.SUCCESS: { - const id = action.session.sessionId; + const id = action.sessionId; + const session = state.get('list').find(({sessionId}) => sessionId === id) const wasInFavorite = state .get('favoriteList').findIndex(({ sessionId }) => sessionId === id) > -1; + return state .update('list', list => list .map(session => (session.sessionId === id @@ -193,7 +196,7 @@ const reducer = (state = initialState, action = {}) => { : session))) .update('favoriteList', list => (wasInFavorite ? list.filter(({ sessionId }) => sessionId !== id) - : list.push(action.session.set('favorite', true)))) + : list.push(session.set('favorite', true)))) .update('current', session => (session.sessionId === id ? session.set('favorite', !wasInFavorite) : session)); @@ -283,11 +286,11 @@ export const fetch = (sessionId) => (dispatch, getState) => { }); } -export function toggleFavorite(session) { +export function toggleFavorite(sessionId) { return { types: TOGGLE_FAVORITE.toArray(), - call: client => client.get(`/sessions2/${ session.sessionId }/favorite`), - session, + call: client => client.get(`/sessions2/${ sessionId }/favorite`), + sessionId, }; }