[https://github.com/tracim/tracim/issues/745] added handler on app's btns + handler for btn 'see more' + fixed member's avatar

frontend/src/action-creator.async.js

@@ -240,9 +240,9 @@ export const getWorkspaceContentList = (user, idWorkspace, idParent) => dispatch
   })
 }
 
-export const getWorkspaceRecentActivityList = (user, idWorkspace) => dispatch => {
+export const getWorkspaceRecentActivityList = (user, idWorkspace, beforeId = null) => dispatch => {
   return fetchWrapper({
-    url: `${FETCH_CONFIG.apiUrl}/users/${user.user_id}/workspaces/${idWorkspace}/contents/recently_active?limit=10`,
+    url: `${FETCH_CONFIG.apiUrl}/users/${user.user_id}/workspaces/${idWorkspace}/contents/recently_active?limit=10${beforeId ? `&before_content_id=${beforeId}` : ''}`,
     param: {
       headers: {
         ...FETCH_CONFIG.headers,

frontend/src/action-creator.sync.js

@@ -2,6 +2,7 @@ export const SET = 'Set'
 export const UPDATE = 'Update'
 export const ADD = 'Add'
 export const REMOVE = 'Remove'
+export const APPEND = 'Append'
 
 export const TIMEZONE = 'Timezone'
 export const setTimezone = timezone => ({ type: `${SET}/${TIMEZONE}`, timezone })
@@ -52,8 +53,7 @@ export const WORKSPACE_MEMBER_ADD = `${WORKSPACE_MEMBER}/${ADD}`
 export const WORKSPACE_RECENT_ACTIVITY = `${WORKSPACE}/RecentActivity/List`
 export const WORKSPACE_RECENT_ACTIVITY_LIST = `${WORKSPACE_RECENT_ACTIVITY}/List`
 export const setWorkspaceRecentActivityList = workspaceRecentActivityList => ({ type: `${SET}/${WORKSPACE_RECENT_ACTIVITY_LIST}`, workspaceRecentActivityList })
-export const WORKSPACE_RECENT_ACTIVITY_FOR_USER_LIST = `${WORKSPACE_RECENT_ACTIVITY}/ForUser/List`
-export const setWorkspaceRecentActivityForUserList = workspaceRecentActivityForUserList => ({ type: `${SET}/${WORKSPACE_RECENT_ACTIVITY_FOR_USER_LIST}`, workspaceRecentActivityForUserList })
+export const appendWorkspaceRecentActivityList = workspaceRecentActivityList => ({ type: `${APPEND}/${WORKSPACE_RECENT_ACTIVITY_LIST}`, workspaceRecentActivityList })
 
 export const WORKSPACE_READ_STATUS = `${WORKSPACE}/ReadStatus`
 export const WORKSPACE_READ_STATUS_LIST = `${WORKSPACE_READ_STATUS}/List`

frontend/src/component/Dashboard/ContentTypeBtn.jsx

@@ -15,6 +15,7 @@ export const ContentTypeBtn = props =>
         backgroundColor: color(props.hexcolor).darken(0.15).hexString()
       }
     }}
+    onClick={props.onClickBtn}
   >
     <div className={classnames(`${props.customClass}__text`)}>
       <div className={classnames(`${props.customClass}__text__icon`)}>
@@ -33,7 +34,8 @@ ContentTypeBtn.propTypes = {
   label: PropTypes.string.isRequired,
   faIcon: PropTypes.string.isRequired,
   creationLabel: PropTypes.string.isRequired,
-  customClass: PropTypes.string
+  customClass: PropTypes.string,
+  onClickBtn: PropTypes.func
 }
 
 ContentTypeBtn.defaultProps = {

frontend/src/component/Dashboard/MemberList.jsx

@@ -45,7 +45,7 @@ export class MemberList extends React.Component {
                   {props.memberList.map(m =>
                     <li className='memberlist__list__item' key={m.id}>
                       <div className='memberlist__list__item__avatar'>
-                        {m.avatarUrl ? <img src={m.avatarUrl} /> : <img src='NYI' />}
+                        <img src={m.avatarUrl} />
                       </div>
 
                       <div className='memberlist__list__item__info mr-auto'>

frontend/src/component/Dashboard/MemberList.styl

@@ -21,14 +21,6 @@
       display flex
       border-bottom 1px solid grey
       padding 10px 15px
-      &:hover
-        background-color fourthColor
-      &:nth-last-child(1)
-        border-bottom 0
-      &:nth-child(even)
-        background-color grey-hover
-        &:hover
-          background-color fourthColor
       &__avatar
         margin-right 20px
         & > img

frontend/src/component/Dashboard/RecentActivity.jsx

@@ -20,11 +20,11 @@ export const RecentActivity = props =>
     </div>
 
     <div className='activity__wrapper'>
-      {props.recentActivityFilteredForUser.map(content => {
+      {props.recentActivityList.map(content => {
         const contentType = props.contentTypeList.find(ct => ct.slug === content.type)
         return (
           <div
-            className='activity__workspace'
+            className={classnames('activity__workspace', {'read': props.readByUserList.includes(content.id)})}
             onClick={() => props.onClickRecentContent(content.id, content.type)}
             key={content.id}
           >
@@ -53,7 +53,12 @@ export default RecentActivity
 
 RecentActivity.propTypes = {
   t: PropTypes.func.isRequired,
-  recentActivityFilteredForUser: PropTypes.array.isRequired,
+  recentActivityList: PropTypes.array.isRequired,
   contentTypeList: PropTypes.array.isRequired,
-  onClickSeeMore: PropTypes.func.isRequired
+  onClickSeeMore: PropTypes.func.isRequired,
+  readByUserList: PropTypes.array
+}
+
+RecentActivity.defaultProps = {
+  readByUserList: []
 }

frontend/src/component/Dashboard/RecentActivity.styl

@@ -23,6 +23,9 @@
     border-bottom 1px solid grey
     padding 15px
     cursor pointer
+    font-weight bold
+    &.read
+      font-weight normal
     &:hover
       background-color fourthColor
     &:nth-child(even)
@@ -34,9 +37,6 @@
       font-size 25px
     &__name
       font-size 18px
-      font-weight 500
-      span
-        font-weight 400
   &__more
     &__btn
       margin 15px

frontend/src/container/Dashboard.jsx

@@ -20,7 +20,7 @@ import {
   setWorkspaceDetail,
   setWorkspaceMemberList,
   setWorkspaceRecentActivityList,
-  setWorkspaceRecentActivityForUserList,
+  appendWorkspaceRecentActivityList,
   setWorkspaceReadStatusList
 } from '../action-creator.sync.js'
 import { ROLE, PAGE } from '../helper.js'
@@ -34,7 +34,7 @@ class Dashboard extends React.Component {
   constructor (props) {
     super(props)
     this.state = {
-      workspaceIdInUrl: props.match.params.idws ? parseInt(props.match.params.idws) : null, // this is used to avoid handling the parseInt everytime
+      workspaceIdInUrl: props.match.params.idws ? parseInt(props.match.params.idws) : null, // this is used to avoid handling the parseInt every time
       newMember: {
         id: '',
         avatarUrl: '',
@@ -51,6 +51,26 @@ class Dashboard extends React.Component {
   }
 
   async componentDidMount () {
+    this.loadWorkspaceDetail()
+    this.loadMemberList()
+    this.loadRecentActivity()
+  }
+
+  componentDidUpdate (prevProps, prevState) {
+    const { props, state } = this
+
+    if (prevProps.match.params.idws !== props.match.params.idws) {
+      this.setState({workspaceIdInUrl: props.match.params.idws ? parseInt(props.match.params.idws) : null})
+    }
+
+    if (prevState.workspaceIdInUrl !== state.workspaceIdInUrl) {
+      this.loadWorkspaceDetail()
+      this.loadMemberList()
+      this.loadRecentActivity()
+    }
+  }
+
+  loadWorkspaceDetail = async () => {
     const { props, state } = this
 
     const fetchWorkspaceDetail = await props.dispatch(getWorkspaceDetail(props.user, state.workspaceIdInUrl))
@@ -58,8 +78,6 @@ class Dashboard extends React.Component {
       case 200: props.dispatch(setWorkspaceDetail(fetchWorkspaceDetail.json)); break
       default: props.dispatch(newFlashMessage(`${props.t('An error has happened while fetching')} ${props.t('workspace detail')}`, 'warning')); break
     }
-    this.loadMemberList()
-    this.loadRecentActivity()
   }
 
   loadMemberList = async () => {
@@ -87,11 +105,6 @@ class Dashboard extends React.Component {
       case 200: props.dispatch(setWorkspaceReadStatusList(fetchWorkspaceReadStatusList.json)); break
       default: props.dispatch(newFlashMessage(`${props.t('An error has happened while fetching')} ${props.t('read status list')}`, 'warning')); break
     }
-
-    const readStatusForUserList = fetchWorkspaceReadStatusList.json.filter(c => c.read_by_user).map(c => c.content_id)
-    const recentActivityForUserList = fetchWorkspaceRecentActivityList.json.filter(content => !readStatusForUserList.includes(content.content_id))
-
-    props.dispatch(setWorkspaceRecentActivityForUserList(recentActivityForUserList))
   }
 
   handleToggleNewMemberDashboard = () => this.setState(prevState => ({displayNewMemberDashboard: !prevState.displayNewMemberDashboard}))
@@ -114,7 +127,15 @@ class Dashboard extends React.Component {
   }
 
   handleClickSeeMore = async () => {
-    console.log('nyi')
+    const { props, state } = this
+
+    const idLastRecentActivity = props.curWs.recentActivityList[props.curWs.recentActivityList.length - 1].id
+
+    const fetchWorkspaceRecentActivityList = await props.dispatch(getWorkspaceRecentActivityList(props.user, state.workspaceIdInUrl, idLastRecentActivity))
+    switch (fetchWorkspaceRecentActivityList.status) {
+      case 200: props.dispatch(appendWorkspaceRecentActivityList(fetchWorkspaceRecentActivityList.json)); break
+      default: props.dispatch(newFlashMessage(`${props.t('An error has happened while fetching')} ${props.t('recent activity list')}`, 'warning')); break
+    }
   }
 
   handleSearchUser = async userNameToSearch => {
@@ -223,6 +244,7 @@ class Dashboard extends React.Component {
                   label={ct.label}
                   faIcon={ct.faIcon}
                   creationLabel={ct.creationLabel}
+                  onClickBtn={() => props.history.push(PAGE.WORKSPACE.NEW(props.curWs.id, ct.slug))}
                   key={ct.label}
                 />
               )}
@@ -231,7 +253,8 @@ class Dashboard extends React.Component {
             <div className='dashboard__workspaceInfo'>
               <RecentActivity
                 customClass='dashboard__activity'
-                recentActivityFilteredForUser={props.curWs.recentActivityForUserList}
+                recentActivityList={props.curWs.recentActivityList}
+                readByUserList={props.curWs.contentReadStatusList}
                 contentTypeList={props.contentType}
                 onClickRecentContent={this.handleClickRecentContent}
                 onClickEverythingAsRead={this.handleClickMarkRecentActivityAsRead}

frontend/src/container/Tracim.jsx

@@ -106,11 +106,11 @@ class Tracim extends React.Component {
 
               <Route exact path={PAGE.WORKSPACE.ROOT} render={() => props.workspaceList.length === 0 // handle '/' and redirect to first workspace
                 ? null // @FIXME this needs to be handled in case of new user that has no workspace
-                : <Redirect to={{pathname: `/workspaces/${props.workspaceList[0].id}/contents`, state: {from: props.location}}} />
+                : <Redirect to={{pathname: PAGE.WORKSPACE.DASHBOARD(props.workspaceList[0].id), state: {from: props.location}}} />
               } />
 
               <Route exact path={`${PAGE.WORKSPACE.ROOT}/:idws`} render={props2 => // handle '/workspaces/:id' and add '/contents'
-                <Redirect to={{pathname: `/workspaces/${props2.match.params.idws}/contents`, state: {from: props.location}}} />
+                <Redirect to={{pathname: PAGE.WORKSPACE.CONTENT_LIST(props2.match.params.idws), state: {from: props.location}}} />
               } />
 
               <Route path={PAGE.WORKSPACE.DASHBOARD(':idws')} component={Dashboard} />

frontend/src/reducer/currentWorkspace.js

@@ -1,11 +1,13 @@
 import {
   SET,
+  APPEND,
   WORKSPACE_DETAIL,
   WORKSPACE_MEMBER_LIST,
-  WORKSPACE_READ_STATUS_LIST, WORKSPACE_RECENT_ACTIVITY_FOR_USER_LIST,
+  WORKSPACE_READ_STATUS_LIST,
   WORKSPACE_RECENT_ACTIVITY_LIST
 } from '../action-creator.sync.js'
 import { handleRouteFromApi } from '../helper.js'
+import { generateAvatarFromPublicName } from 'tracim_frontend_lib'
 
 const defaultWorkspace = {
   id: 0,
@@ -43,7 +45,9 @@ export default function currentWorkspace (state = defaultWorkspace, action) {
         memberList: action.workspaceMemberList.map(m => ({
           id: m.user_id,
           publicName: m.user.public_name,
-          avatarUrl: m.user.avatar_url,
+          avatarUrl: m.user.avatar_url
+            ? m.user.avatar_url
+            : m.user.public_name ? generateAvatarFromPublicName(m.user.public_name) : '',
           role: m.role,
           isActive: m.is_active
         }))
@@ -66,21 +70,24 @@ export default function currentWorkspace (state = defaultWorkspace, action) {
         }))
       }
 
-    case `${SET}/${WORKSPACE_RECENT_ACTIVITY_FOR_USER_LIST}`:
+    case `${APPEND}/${WORKSPACE_RECENT_ACTIVITY_LIST}`:
       return {
         ...state,
-        recentActivityForUserList: action.workspaceRecentActivityForUserList.map(ra => ({
-          id: ra.content_id,
-          slug: ra.slug,
-          label: ra.label,
-          type: ra.content_type,
-          idParent: ra.parent_id,
-          showInUi: ra.show_in_ui,
-          isArchived: ra.is_archived,
-          isDeleted: ra.is_deleted,
-          statusSlug: ra.status,
-          subContentTypeSlug: ra.sub_content_types
-        }))
+        recentActivityList: [
+          ...state.recentActivityList,
+          ...action.workspaceRecentActivityList.map(ra => ({
+            id: ra.content_id,
+            slug: ra.slug,
+            label: ra.label,
+            type: ra.content_type,
+            idParent: ra.parent_id,
+            showInUi: ra.show_in_ui,
+            isArchived: ra.is_archived,
+            isDeleted: ra.is_deleted,
+            statusSlug: ra.status,
+            subContentTypeSlug: ra.sub_content_types
+          }))
+        ]
       }
 
     case `${SET}/${WORKSPACE_READ_STATUS_LIST}`: