All files / client/components NotificationPage.tsx

0% Statements 0/18
0% Branches 0/2
0% Functions 0/7
0% Lines 0/18

Press n or j to go to the next uncovered block, b, p or k for the previous block.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103                                                                                                                                                                                                             
// This is the root component for #notification-page
 
import React from 'react'
import ListView from './Notification/ListView'
import Pager from './Notification/Pager'
import Crowi from 'client/util/Crowi'
import { Notification } from 'client/types/crowi'
 
interface Props {
  crowi: Crowi
}
 
interface State {
  notifications: []
  loaded: boolean
  hasPrev: boolean
  hasNext: boolean
}
 
export default class NotificationPage extends React.Component<Props, State> {
  limit: number
 
  offset: number
 
  constructor(props: Props) {
    super(props)
 
    this.limit = 16
    this.offset = 0
 
    this.state = {
      notifications: [],
      loaded: false,
      hasPrev: false,
      hasNext: false,
    }
  }
 
  componentDidMount() {
    this.getNotifications()
  }
 
  async handleNotificationOnClick(notification: Notification) {
    try {
      await this.props.crowi.apiPost('/notification.open', { id: notification._id })
      // jump to target page
      window.location.href = notification.target.path
    } catch (err) {
      // TODO: error handling
    }
  }
 
  async getNotifications() {
    try {
      const { notifications, hasPrev, hasNext } = await this.props.crowi.apiGet('/notification.list', {
        limit: this.limit,
        offset: this.offset,
      })
      this.setState({
        notifications,
        loaded: true,
        hasPrev,
        hasNext,
      })
    } catch (err) {
      // TODO error handling
    }
  }
 
  handleNextClick() {
    this.offset = this.offset + this.limit
    this.getNotifications()
  }
 
  handlePrevClick() {
    this.offset = this.offset - this.limit
    if (this.offset < 0) {
      this.offset = 0
    }
    this.getNotifications()
  }
 
  render() {
    return (
      <div>
        <Pager
          hasPrev={this.state.hasPrev}
          hasNext={this.state.hasNext}
          handlePrevClick={this.handlePrevClick.bind(this)}
          handleNextClick={this.handleNextClick.bind(this)}
        />
        <ListView loaded={this.state.loaded} notifications={this.state.notifications} notificationClickHandler={this.handleNotificationOnClick.bind(this)} />
        <Pager
          hasPrev={this.state.hasPrev}
          hasNext={this.state.hasNext}
          handlePrevClick={this.handlePrevClick.bind(this)}
          handleNextClick={this.handleNextClick.bind(this)}
        />
      </div>
    )
  }
}