Skip to content

Commit

Permalink
Update to webpack 2 and React 15
Browse files Browse the repository at this point in the history
  • Loading branch information
@meriouma
meriouma committed May 5, 2017
1 parent b87a69c commit 610f0da
Show file tree
Hide file tree
Showing 38 changed files with 613 additions and 492 deletions.
17 changes: 13 additions & 4 deletions .eslintrc
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,6 @@
"error",
"as-needed"
],
"consistent-return": "off",
"comma-dangle": "off",
"no-use-before-define": "off",
"import/no-unresolved": [
Expand All @@ -22,8 +21,17 @@
]
}
],
"indent": [
"error",
4
],
"max-len": [
2, 120, 2, {
"ignoreUrls": true,
"ignoreComments": false
}
],
"import/no-extraneous-dependencies": "off",
"react/jsx-no-bind": "off",
"react/jsx-filename-extension": [
"error",
{
Expand All @@ -33,8 +41,9 @@
]
}
],
"react/prefer-stateless-function": "off",
"generator-star-spacing": "off"
"react/sort-comp": 0,
"react/jsx-indent": 0,
"react/jsx-indent-props": [2, 4]
},
"plugins": [
"import",
Expand Down
2 changes: 1 addition & 1 deletion .gitattributes
View file
Original file line number Diff line number Diff line change
@@ -1 +1 @@
* text=auto
* text=auto eol=lf filter=tabspace
2 changes: 1 addition & 1 deletion README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ $ npm install
$ npm run dev
```

*Note: requires a node version >= 4 and an npm version >= 2.*
*Note: requires a node version >= 6.* and an npm version >= 3.*

## How to package
```bash
Expand Down
8 changes: 4 additions & 4 deletions app/app.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,9 +3,9 @@
<head>
<meta charset="utf-8">
<title>Tempora</title>
<link rel="stylesheet" href="../node_modules/font-awesome/css/font-awesome.min.css"/>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,100i,400,400i,700">
<link rel="stylesheet" href="https://unpkg.com/react-select/dist/react-select.css">
<link rel="stylesheet" href="../node_modules/font-awesome/css/font-awesome.min.css" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,100i,400,400i,700" />
<link rel="stylesheet" href="https://unpkg.com/react-select/dist/react-select.css" />
<script>
if (!process.env.HOT) {
const link = document.createElement('link');
Expand All @@ -17,7 +17,7 @@
</head>
<body>

<div id="root"></div>
<div id="root"></div>

<script>
{
Expand Down
12 changes: 6 additions & 6 deletions app/components/app-modal/AppModal.js
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React, {Component} from 'react';
import React, { Component } from 'react';
import Modal from 'react-modal';

import './Modal.scss';
Expand All @@ -8,22 +8,22 @@ export default class AppModal extends Component {
super(props);
this.state = {
visible: false,
title: "",
content: ""
title: '',
content: ''
};

window.eventEmitter.addListener('requestModal', this.openModal.bind(this));
}

componentDidMount() {
Modal.setAppElement("#root");
Modal.setAppElement('#root');
}

openModal(title, content: 'undefined') {
this.setState({
visible: true,
title: title,
content: content
title,
content
});
}

Expand Down
78 changes: 44 additions & 34 deletions app/components/dashboard/Dashboard.js
View file
Original file line number Diff line number Diff line change
@@ -1,19 +1,20 @@
import React, {Component, PropTypes} from "react";
import StatsRecap from "../stats-recap/StatsRecap";
import React, { Component } from 'react';
import StatsRecap from '../stats-recap/StatsRecap';

import * as WorklogService from "../../services/WorklogService";
import * as WorklogService from '../../services/WorklogService';
import { Worklog } from '../../services/apis/TempoApi';

import "./Dashboard.scss";
import './Dashboard.scss';

export default class Dashboard extends Component {
constructor(props) {
super(props);

this.state = {
selectedWorklog: ""
}
selectedWorklog: ''
};

window.eventEmitter.addListener('unselectActiveWorklog', () => this.setState({ selectedWorklog: "" }));
window.eventEmitter.addListener('unselectActiveWorklog', () => this.setState({ selectedWorklog: '' }));
}

selectWorklog(entry) {
Expand All @@ -26,28 +27,33 @@ export default class Dashboard extends Component {

showTimeframe(entries, entriesTitle) {
if (entries.length > 0) {
return (
return (
<tbody>
<tr className="dashboard__content__sep">
<td colSpan="2">{entriesTitle}</td>
<td>
<a href="#" onClick={() => this.props.orderByTime(entries)}>
<i className="fa fa-sort-numeric-asc" aria-hidden="true"></i>
</a>
<a href="#" onClick={() => this.props.orderByName(entries)}>
<i className="fa fa-sort-alpha-asc" aria-hidden="true"></i>
</a>
</td>
</tr>
{this.showEntries(entries)}
<tr className="dashboard__content__sep">
<td colSpan="2">{entriesTitle}</td>
<td>
<a href="javascript:;" onClick={() => this.props.orderByTime(entries)}>
<i className="fa fa-sort-numeric-asc" aria-hidden="true" />
</a>
<a href="javascript:;" onClick={() => this.props.orderByName(entries)}>
<i className="fa fa-sort-alpha-asc" aria-hidden="true" />
</a>
</td>
</tr>
{this.showEntries(entries)}
</tbody>
);
}
return false;
}

showEntries(entries) {
return entries.map((entry: Worklog) => (
<tr key={entry.id} onClick={() => this.selectWorklog(entry)} className={this.state.selectedWorklog == entry.id ? "is-active" : ""}>
return entries.map((entry: Worklog) => (
<tr
key={entry.id}
onClick={() => this.selectWorklog(entry)}
className={this.state.selectedWorklog === entry.id ? 'is-active' : ''}
>
<td><strong>{WorklogService.getTimeSpentInHours(entry.timeSpentSeconds)}</strong></td>
<td>[{entry.issue.key}]</td>
<td><p className="dashboard__content__truncated">{entry.comment}</p></td>
Expand All @@ -61,23 +67,27 @@ export default class Dashboard extends Component {
<div className="dashboard__content">
<table>
<thead>
<tr>
<th colSpan="2">Last entries</th>
<th className="is-right">
<a href="#" className="dashboard__content__refresh" onClick={() => this.props.refresh()}>
<i className="fa fa-refresh" aria-hidden="true"></i>
</a>
</th>
</tr>
<tr>
<th colSpan="2">Last entries</th>
<th className="is-right">
<a
href="javascript:;"
className="dashboard__content__refresh"
onClick={this.props.refresh}
>
<i className="fa fa-refresh" aria-hidden="true" />
</a>
</th>
</tr>
</thead>

{this.showTimeframe(this.props.worklogs.today, "Today")}
{this.showTimeframe(this.props.worklogs.today, 'Today')}

{this.showTimeframe(this.props.worklogs.yesterday, "Yesterday")}
{this.showTimeframe(this.props.worklogs.yesterday, 'Yesterday')}

{this.showTimeframe(this.props.worklogs.remainingWeek, "This week")}
{this.showTimeframe(this.props.worklogs.remainingWeek, 'This week')}

{this.showTimeframe(this.props.worklogs.lastWeek, "Last week")}
{this.showTimeframe(this.props.worklogs.lastWeek, 'Last week')}
</table>
</div>

Expand Down
76 changes: 44 additions & 32 deletions app/components/issues/Issues.js
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,11 @@
import React, {Component} from 'react';
import {shell} from 'electron';
import {Link} from 'react-router';
import React, { Component } from 'react';
import _ from 'lodash';
import { shell } from 'electron';
import { Link } from 'react-router-dom';

import * as StorageService from '../../services/StorageService';
import * as IssueService from '../../services/IssueService';

const ISSUE_BASE_URL = "https://arcbees.atlassian.net/browse";

export default class Issues extends Component {
constructor(props) {
super(props);
Expand All @@ -15,9 +14,9 @@ export default class Issues extends Component {
issues: [],
filteredIssues: [],
sortedIssues: [],
searchQuery: "",
searchQuery: '',
viewType: StorageService.getViewType(),
issuesStatusSortingOrder: [3,10601,10400,10600,10100]
issuesStatusSortingOrder: [3, 10601, 10400, 10600, 10100]
};
}

Expand All @@ -26,24 +25,23 @@ export default class Issues extends Component {
}

fetchIssues() {
let projectId = this.state.viewType === 'timer' ? StorageService.getActiveProjectId() : StorageService.getWorklogProjectId();
const projectId = this.state.viewType === 'timer'
? StorageService.getActiveProjectId()
: StorageService.getWorklogProjectId();
IssueService.getIssues(projectId).then(issues => {
this.setState({issues: issues.issues, filteredIssues: issues.issues})
this.setState({ issues: issues.issues, filteredIssues: issues.issues });
this.sortIssuesByStatus(this.state.filteredIssues);
});
}

sortIssuesByStatus(issues) {
let sortedIssues = [];
this.state.issuesStatusSortingOrder.map((issueStatus, key) => {
sortedIssues[key] = issues.filter(issue => {
return issue && issue.fields.status.id == issueStatus;
});
});
sortedIssues[sortedIssues.length] = issues.filter(issue => {
return issue && !_.includes(this.state.issuesStatusSortingOrder, parseInt(issue.fields.status.id));
const sortedIssues = [];
this.state.issuesStatusSortingOrder.forEach((issueStatus, key) => {
sortedIssues[key] = issues.filter(issue => issue && issue.fields.status.id === issueStatus);
});
this.setState({sortedIssues: sortedIssues});
sortedIssues[sortedIssues.length] = issues.filter(
issue => issue && !_.includes(this.state.issuesStatusSortingOrder, parseInt(issue.fields.status.id, 10)));
this.setState({ sortedIssues });
}

issueSelected(issueId, issueKey) {
Expand All @@ -60,16 +58,16 @@ export default class Issues extends Component {
searchChange(event) {
const searchQuery = event.target.value;
this.setState({
searchQuery: searchQuery,
searchQuery,
filteredIssues: this.filterIssues(searchQuery.toLowerCase())
});
}

filterIssues(searchQuery) {
const filteredIssues = this.state.issues.filter(issue => {
return issue &&
(issue.key.toLowerCase().indexOf(searchQuery) >= 0 || issue.fields.summary.toLowerCase().indexOf(searchQuery) >= 0);
});
const filteredIssues = this.state.issues.filter(
issue => issue && (issue.key.toLowerCase().indexOf(searchQuery) >= 0
|| issue.fields.summary.toLowerCase().indexOf(searchQuery) >= 0));

this.sortIssuesByStatus(filteredIssues);
return filteredIssues;
}
Expand All @@ -78,25 +76,34 @@ export default class Issues extends Component {
return this.state.sortedIssues.map((issues, key) => {
if (issues.length > 0) {
return (
<div key={"status-" + key}>
<div key={`status-${key}`}>
<h2 className="page__subtitle">{issues[0].fields.status.name}</h2>
<ul className="page__items">
{this.renderIssues(issues)}
</ul>
</div>
)
);
}
return false;
});
}

renderIssues(issues) {
return issues.map((issue) => (
return issues.map(issue => (
<li key={issue.id} className="page__item">
<Link to="/" onClick={() => this.issueSelected(issue.id, issue.key)} className="page__item__link page__item__link--with-icon">
{issue.key}<span className="page__item__link__desc">{issue.fields.summary}</span>
<Link
to="/"
onClick={() => this.issueSelected(issue.id, issue.key)
}
className="page__item__link page__item__link--with-icon"
>{issue.key}<span className="page__item__link__desc">{issue.fields.summary}</span>
</Link>
<a href="#" className="page__item__link-icon" onClick={() => shell.openExternal(ISSUE_BASE_URL + "/" + issue.key)}>
<i className="fa fa-external-link" aria-hidden="true"></i>
<a
href="javascript:;"
className="page__item__link-icon"
onClick={() => shell.openExternal(StorageService.getInstanceURL() + '/browse/' + issue.key)}
>
<i className="fa fa-external-link" aria-hidden="true" />
</a>
</li>
));
Expand All @@ -107,9 +114,14 @@ export default class Issues extends Component {
<div className="page">
<header className="page__header">
<h1 className="page__title">Tasks</h1>
<input className="page__search" placeholder="search" onChange={this.searchChange.bind(this)} value={this.state.searchQuery} />
<input
className="page__search"
placeholder="search"
onChange={this.searchChange.bind(this)}
value={this.state.searchQuery}
/>
<Link to="/" className="page__close">
<i className="fa fa-times" aria-hidden="true"></i>
<i className="fa fa-times" aria-hidden="true" />
</Link>
</header>
{this.showIssues()}
Expand Down
Loading

0 comments on commit 610f0da

Please sign in to comment.