fix(ui) - bookmarking

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 ( 
+    <div
+      className={ stl.favoriteWrapper }
+      onClick={ () => toggleFavorite(sessionId) }
+      data-favourite={ favorite }
+    >
+      <Icon name={ favorite ? 'star-solid' : 'star' } size="20" />
+    </div>
+  )
+}
+
+export default connect(null, { toggleFavorite })(Bookmark)

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;
+    }
+  }
+}

frontend/app/components/shared/Bookmark/index.js

@@ -0,0 +1 @@
+export { default } from './Bookmark'

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 && <LiveTag isLive={true} /> }
 
-          <div className={ cn(stl.iconDetails, 'px-4') }>
-            <div
-              className={ stl.favoriteWrapper }
-              onClick={ this.toggleFavorite }
-              data-favourite={ favorite }
-            >
-              <Icon name={ favorite ? 'star-solid' : 'star' } size="20" />
-            </div>
+          <div className={ cn(stl.iconDetails, stl.favorite, 'px-4') } data-favourite={favorite} >
+            <Bookmark sessionId={sessionId} favorite={favorite} />
           </div>
           
           <div className={ stl.playLink } id="play-button" data-viewed={ viewed }>

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;

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,
   };
 }