Skip to content
This repository has been archived by the owner on Nov 7, 2019. It is now read-only.

Commit

Permalink
Merge a8afdf8 into 9f7c4a5
Browse files Browse the repository at this point in the history
  • Loading branch information
Magdalena Noffke committed Oct 22, 2019
2 parents 9f7c4a5 + a8afdf8 commit faab206
Show file tree
Hide file tree
Showing 6 changed files with 160 additions and 227 deletions.
165 changes: 136 additions & 29 deletions apps/questions/assets/QuestionBox.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import React from 'react'
import QuestionList from './QuestionList'
import InfoBox from './InfoBox'
import Filters from './Filters'
import StatisticsBox from './StatisticsBox'

export default class QuestionBox extends React.Component {
constructor (props) {
Expand All @@ -12,6 +13,7 @@ export default class QuestionBox extends React.Component {
this.state = {
questions: [],
filteredQuestions: [],
answeredQuestions: [],
category: '-1',
categoryName: django.gettext('select category'),
displayNotHiddenOnly: false,
Expand Down Expand Up @@ -82,13 +84,23 @@ export default class QuestionBox extends React.Component {
filterQuestions (questions) {
const filteredQuestions = []
questions.forEach((item) => {
if (this.isInFilter(item)) {
if (this.isInFilter(item) && !item.is_answered) {
filteredQuestions.push(item)
}
})
return filteredQuestions
}

getAnsweredQuestions (questions) {
const answeredQuestions = []
questions.forEach((item) => {
if (item.is_answered) {
answeredQuestions.push(item)
}
})
return answeredQuestions
}

updateList () {
const filteredQuestions = this.filterQuestions(this.state.questions)
this.setState({
Expand All @@ -98,7 +110,7 @@ export default class QuestionBox extends React.Component {
}

getUrl () {
const url = this.props.questions_api_url + '?is_answered=0'
const url = this.props.questions_api_url
if (this.state.orderedByLikes) {
return url + '&ordering=-like_count'
}
Expand All @@ -112,6 +124,7 @@ export default class QuestionBox extends React.Component {
.then(data => this.setState({
questions: data,
filteredQuestions: this.filterQuestions(data),
answeredQuestions: this.getAnsweredQuestions(data),
orderingChanged: false
}))
}
Expand Down Expand Up @@ -149,32 +162,126 @@ export default class QuestionBox extends React.Component {
render () {
return (
<div>
<Filters
categories={this.props.categories}
currentCategory={this.state.category}
currentCategoryName={this.state.categoryName}
setCategories={this.setCategory.bind(this)}
orderedByLikes={this.state.orderedByLikes}
toggleOrdering={this.toggleOrdering.bind(this)}
displayOnShortlist={this.state.displayOnShortlist}
displayNotHiddenOnly={this.state.displayNotHiddenOnly}
toggleDisplayOnShortlist={this.toggleDisplayOnShortlist.bind(this)}
toggledisplayNotHiddenOnly={this.toggledisplayNotHiddenOnly.bind(this)}
isModerator={this.props.isModerator}
/>
<InfoBox
isModerator={this.props.isModerator}
/>

<QuestionList
questions={this.state.filteredQuestions}
removeFromList={this.removeFromList.bind(this)}
updateQuestion={this.updateQuestion.bind(this)}
handleLike={this.handleLike.bind(this)}
isModerator={this.props.isModerator}
togglePollingPaused={this.togglePollingPaused.bind(this)}
hasLikingPermission={this.props.hasLikingPermission}
/>
</div>)
<div className="tablist tablist--left">
<div className="l-wrapper">
<nav className="nav">
<a
id="tab-information"
className="tab"
data-toggle="tab"
href="#tabpanel-information"
role="tab"
aria-controls="tabpanel-information"
aria-expanded="false"
>
{django.gettext('Information')}
</a>
<a
id="tab-questions"
className="tab active"
data-toggle="tab"
href="#tabpanel-questions"
role="tab"
aria-controls="tabpanel-questions"
aria-expanded="true"
>
{django.gettext('Questions')}
</a>
<a
id="tab-statistics"
className="tab"
data-toggle="tab"
href="#tabpanel-statistics"
role="tab"
aria-controls="tabpanel-statistics"
aria-expanded="false"
>
{django.gettext('Statistics')}
</a>
</nav>
</div>
</div>
<div
className="tabpanel"
id="tabpanel-information"
role="tabpanel"
aria-labelledby="tab-information"
aria-expanded="false"
>
<div className="l-wrapper">
<div className="l-center-8">
{this.props.information}
</div>
</div>
</div>

<div
className="tabpanel active"
id="tabpanel-questions"
role="tabpanel"
aria-labelledby="tab-questions"
aria-expanded="true"
>
<div className="container">
<div className="row mb-5">
<div className="col-12">
<Filters
categories={this.props.categories}
currentCategory={this.state.category}
currentCategoryName={this.state.categoryName}
setCategories={this.setCategory.bind(this)}
orderedByLikes={this.state.orderedByLikes}
toggleOrdering={this.toggleOrdering.bind(this)}
displayOnShortlist={this.state.displayOnShortlist}
displayNotHiddenOnly={this.state.displayNotHiddenOnly}
toggleDisplayOnShortlist={this.toggleDisplayOnShortlist.bind(this)}
toggledisplayNotHiddenOnly={this.toggledisplayNotHiddenOnly.bind(this)}
isModerator={this.props.isModerator}
/>
<InfoBox
isModerator={this.props.isModerator}
/>
<QuestionList
questions={this.state.filteredQuestions}
removeFromList={this.removeFromList.bind(this)}
updateQuestion={this.updateQuestion.bind(this)}
handleLike={this.handleLike.bind(this)}
isModerator={this.props.isModerator}
togglePollingPaused={this.togglePollingPaused.bind(this)}
hasLikingPermission={this.props.hasLikingPermission}
/>
{this.props.hasAskQuestionsPermission &&
<a
href={this.props.askQuestionUrl}
className="btn btn--primary btn--full btn--huge question-list-button mb-4"
id="question-create"
>
<i className="fa fa-plus question-list-button-icon" aria-hidden="true" />
{django.gettext('Add Question')}
</a>}
</div>
</div>
</div>
</div>
<div
className="tabpanel"
id="tabpanel-statistics"
role="tabpanel"
aria-labelledby="tab-statistics"
aria-expanded="false"
>
<div className="l-wrapper">
<div className="l-center-8">
<StatisticsBox
answeredQuestions={this.state.answeredQuestions}
questions_api_url={this.props.questions_api_url}
categories={this.props.categories}
isModerator={this.props.isModerator}
/>
</div>
</div>
</div>
</div>
)
}
}
4 changes: 2 additions & 2 deletions apps/questions/assets/QuestionUser.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,7 @@ export default class QuestionUser extends React.Component {
const undoLikeTag = django.gettext('undo like')

return (
<div className="list-group-item border-bottom mb-2">
<div className="list-group-item border-left-0 border-top-0 border-right-0 border-bottom mb-2">
<div>
<p>
{this.props.is_on_shortlist &&
Expand All @@ -68,7 +68,7 @@ export default class QuestionUser extends React.Component {
<div>
{this.props.hasLikingPermission
? (
<button type="button" className="btn btn-transparent float-right px-3" onClick={this.handleLike.bind(this)}>
<button type="button" className="btn btn--transparent border-0 float-right px-3" onClick={this.handleLike.bind(this)}>
<span className="text-muted">{this.state.likes}</span>
<span className="sr-only">{likesTag}</span>
<i className={this.state.session_like ? 'icon-like text-secondary ml-2' : 'icon-like text-muted ml-2'} aria-label={this.state.session_like ? addLikeTag : undoLikeTag} />
Expand Down
72 changes: 8 additions & 64 deletions apps/questions/assets/StatisticsBox.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
/* global fetch */
import django from 'django'
import { updateItem } from './helpers.js'
import React from 'react'
Expand All @@ -8,84 +7,29 @@ import QuestionModerator from './QuestionModerator'
export default class StatisticsBox extends React.Component {
constructor (props) {
super(props)

this.state = {
answeredQuestions: [],
hiddenQuestions: [],
combinedQuestions: [],
pollingPaused: false
}
}

fetchAnsweredQuestions () {
const url = this.props.questions_api_url + '?is_answered=1'
return fetch(url).then((response) => response.json())
}

/* fetchHiddenAnswers () {
const url = this.props.questions_api_url + '?is_hidden=1'
return fetch (url).then((response) => response.json())
} */

fetchProcessedQuestions () {
return Promise.all([this.fetchAnsweredQuestions()])
this.state = { answeredQuestions: props.answeredQuestions }
}

/* getCombinedList (answeredQuestions, hiddenQuestions) {
if (this.props.isModerator) {
return answeredQuestions.concat(hiddenQuestions)
} else {
return answeredQuestions
}
} */

getItems () {
if (!this.state.pollingPaused) {
this.fetchProcessedQuestions().then(([answeredQuestions]) => {
this.setState({
answeredQuestions: answeredQuestions,
combinedQuestions: answeredQuestions
})
})
}
componentWillReceiveProps (props) {
this.setState({ answeredQuestions: props.answeredQuestions })
}

updateQuestion (data, id) {
this.setState({
pollingPaused: true
})
const url = this.props.questions_api_url + id + '/'
return updateItem(data, url, 'PATCH')
}

removeFromList (id, data) {
this.updateQuestion(data, id)
.then(response => this.setState(prevState => ({
combinedQuestions: prevState.combinedQuestions.filter(question => question.id !== id),
pollingPaused: false
answeredQuestions: prevState.answeredQuestions.filter(question => question.id !== id)
})))
}

togglePollingPaused () {
const pollingPaused = !this.state.pollingPaused
this.setState({
pollingPaused: pollingPaused
})
}

componentDidMount () {
this.getItems()
this.timer = setInterval(() => this.getItems(), 5000)
}

componentWillUnmount () {
this.timer = null
}

countCategory (category) {
let countPerCategory = 0
let answeredQuestions = 0
this.state.answeredQuestions.forEach(function (question) {
this.props.answeredQuestions.forEach(function (question) {
if (question.is_answered && !question.is_hidden) {
answeredQuestions++
if (question.category === category) {
Expand Down Expand Up @@ -124,13 +68,13 @@ export default class StatisticsBox extends React.Component {
{this.props.isModerator
? (
<div className="list-group mt-md-4">
{this.state.combinedQuestions.map((question, index) => {
{this.state.answeredQuestions.map((question, index) => {
return (
<QuestionModerator
updateQuestion={this.updateQuestion.bind(this)}
displayIsOnShortlist={false}
displayIsLive={false}
displayIsHidden={question.is_hidden}
displayIsHidden={false}
displayIsAnswered={question.is_answered}
removeFromList={this.removeFromList.bind(this)}
key={question.id}
Expand All @@ -150,7 +94,7 @@ export default class StatisticsBox extends React.Component {
)
: (
<div className="list-group mt-3 mt-md-4">
{this.state.combinedQuestions.map((question, index) => {
{this.state.answeredQuestions.map((question, index) => {
return (
<QuestionUser
key={question.id}
Expand Down

0 comments on commit faab206

Please sign in to comment.