apairon/mocoapp-browser-extension
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Update eslint cofig

Browse Source
This commit is contained in:
Manuel Bouza 2019-06-26 09:27:31 +02:00
parent fd04d6bf6c
commit 8b2e21c3cf
14 changed files with 115 additions and 151 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
.eslintrc.json
View File

@ -22,6 +22,11 @@
},
"sourceType": "module"
},
"settings": {
"react": {
"version": "detect"
}
},
"rules": {
"strict": 0,
"semi": ["error", "never"],

38
src/js/api/Client.js
View File

@ -3,19 +3,15 @@ import { formatDate } from "utils"
const baseURL = subdomain => {
if (process.env.NODE_ENV === "production") {
return `https://${encodeURIComponent(
subdomain
)}.mocoapp.com/api/browser_extensions`
return `https://${encodeURIComponent(subdomain)}.mocoapp.com/api/browser_extensions`
} else {
return `http://${encodeURIComponent(
subdomain
)}.mocoapp.localhost:3001/api/browser_extensions`
return `http://${encodeURIComponent(subdomain)}.mocoapp.localhost:3001/api/browser_extensions`
}
}
export default class Client {
#client;
#apiKey;
#client
#apiKey
constructor({ subdomain, apiKey, version }) {
this.#apiKey = apiKey
@ -25,9 +21,9 @@ export default class Client {
headers: {
common: {
"x-api-key": apiKey,
"x-extension-version": version
}
}
"x-extension-version": version,
},
},
})
}
@ -35,29 +31,29 @@ export default class Client {
this.#client.post("session", {
api_key: this.#apiKey,
remote_service: service?.name,
remote_id: service?.id
});
remote_id: service?.id,
})
projects = () => this.#client.get("projects");
projects = () => this.#client.get("projects")
schedules = (fromDate, toDate) =>
this.#client.get("schedules", {
params: { date: `${formatDate(fromDate)}:${formatDate(toDate)}` }
});
params: { date: `${formatDate(fromDate)}:${formatDate(toDate)}` },
})
activities = (fromDate, toDate) =>
this.#client.get("activities", {
params: { date: `${formatDate(fromDate)}:${formatDate(toDate)}` }
});
params: { date: `${formatDate(fromDate)}:${formatDate(toDate)}` },
})
bookedHours = service => {
if (!service) {
return Promise.resolve({ data: { hours: 0 } })
}
return this.#client.get("activities/tags", {
params: { selection: [service.id], remote_service: service.name }
params: { selection: [service.id], remote_service: service.name },
})
};
}
createActivity = activity => this.#client.post("activities", { activity });
createActivity = activity => this.#client.post("activities", { activity })
}

16
src/js/components/Calendar/Day.js
View File

@ -10,15 +10,11 @@ const Day = ({ date, hours, absence, active, onClick }) => {
return (
<div
className={cn(
"moco-bx-calendar__day",
`moco-bx-calendar__day--week-day-${getDay(date)}`,
{
"moco-bx-calendar__day--active": active,
"moco-bx-calendar__day--filled": hours > 0,
"moco-bx-calendar__day--absence": absence
}
)}
className={cn("moco-bx-calendar__day", `moco-bx-calendar__day--week-day-${getDay(date)}`, {
"moco-bx-calendar__day--active": active,
"moco-bx-calendar__day--filled": hours > 0,
"moco-bx-calendar__day--absence": absence,
})}
onClick={handleClick}
>
<span className="moco-bx-calendar__day-of-week">
@ -34,7 +30,7 @@ Day.propTypes = {
hours: PropTypes.number.isRequired,
absence: PropTypes.object,
active: PropTypes.bool.isRequired,
onClick: PropTypes.func.isRequired
onClick: PropTypes.func.isRequired,
}
export default Day

4
src/js/components/Calendar/Hours.js
View File

@ -35,9 +35,9 @@ Hours.propTypes = {
hours: PropTypes.number.isRequired,
absence: PropTypes.shape({
assignment_code: PropTypes.string,
assignment_color: PropTypes.string
assignment_color: PropTypes.string,
}),
active: PropTypes.bool.isRequired
active: PropTypes.bool.isRequired,
}
export default Hours

22
src/js/components/Calendar/index.js
View File

@ -5,22 +5,14 @@ import { formatDate } from "utils"
import { eachDay } from "date-fns"
import { pathEq } from "lodash/fp"
const findAbsence = (date, schedules) =>
schedules.find(pathEq("date", formatDate(date)))
const findAbsence = (date, schedules) => schedules.find(pathEq("date", formatDate(date)))
const hoursAtDate = (date, activities) =>
activities
.filter(pathEq("date", formatDate(date)))
.reduce((acc, activity) => acc + activity.hours, 0)
const Calendar = ({
fromDate,
toDate,
selectedDate,
activities,
schedules,
onChange
}) => (
const Calendar = ({ fromDate, toDate, selectedDate, activities, schedules, onChange }) => (
<div className="moco-bx-calendar">
{eachDay(fromDate, toDate).map(date => (
<Day
@ -44,17 +36,17 @@ Calendar.propTypes = {
id: PropTypes.number.isRequired,
date: PropTypes.string.isRequired,
hours: PropTypes.number.isRequired,
timer_started_at: PropTypes.string
}).isRequired
timer_started_at: PropTypes.string,
}).isRequired,
),
schedules: PropTypes.arrayOf(
PropTypes.shape({
date: PropTypes.string,
assignment_code: PropTypes.string,
assignment_color: PropTypes.string
})
assignment_color: PropTypes.string,
}),
).isRequired,
onChange: PropTypes.func.isRequired
onChange: PropTypes.func.isRequired,
}
export default Calendar

2
src/js/components/Errors/UnknownError.js
View File

@ -15,7 +15,7 @@ const UnknownError = ({ message = "Unbekannter Fehler" }) => (
)
UnknownError.propTypes = {
message: PropTypes.string
message: PropTypes.string,
}
export default UnknownError

11
src/js/components/Errors/UpgradeRequiredError.js
View File

@ -7,10 +7,7 @@ const UpgradeRequiredError = () => (
<div className="moco-bx-error-container">
<img className="moco-bx-logo" src={logo} alt="MOCO logo" />
<h1>Upgrade erforderlich</h1>
<p>
Die installierte MOCO Browser-Erweiterung ist veraltet &mdash; bitte
aktualisieren.
</p>
<p>Die installierte MOCO Browser-Erweiterung ist veraltet &mdash; bitte aktualisieren.</p>
{isChrome() ? (
<button
className="moco-bx-btn"
@ -22,11 +19,7 @@ const UpgradeRequiredError = () => (
<>
<br />
<p>Unter folgender URL:</p>
<img
className="firefox-addons"
src={firefoxAddons}
alt="about:addons"
/>
<img className="firefox-addons" src={firefoxAddons} alt="about:addons" />
</>
)}
</div>

24
src/js/components/Form.js
View File

@ -8,24 +8,24 @@ class Form extends Component {
changeset: PropTypes.shape({
project: PropTypes.object,
task: PropTypes.object,
hours: PropTypes.string
hours: PropTypes.string,
}).isRequired,
errors: PropTypes.object,
projects: PropTypes.array.isRequired,
onChange: PropTypes.func.isRequired,
onSubmit: PropTypes.func.isRequired
};
onSubmit: PropTypes.func.isRequired,
}
static defaultProps = {
inline: true
};
inline: true,
}
isValid = () => {
const { changeset } = this.props
return ["assignment_id", "task_id", "hours", "description"]
.map(prop => changeset[prop])
.every(Boolean)
};
}
handleTextareaKeyDown = event => {
const { onSubmit } = this.props
@ -34,7 +34,7 @@ class Form extends Component {
event.preventDefault()
this.isValid() && onSubmit(event)
}
};
}
render() {
const { projects, changeset, errors, onChange, onSubmit } = this.props
@ -44,7 +44,7 @@ class Form extends Component {
<form onSubmit={onSubmit}>
<div
className={cn("form-group", {
"has-error": errors.assignment_id || errors.task_id
"has-error": errors.assignment_id || errors.task_id,
})}
>
<Select
@ -69,9 +69,7 @@ class Form extends Component {
{errors.assignment_id ? (
<div className="form-error">{errors.assignment_id.join("; ")}</div>
) : null}
{errors.task_id ? (
<div className="form-error">{errors.task_id.join("; ")}</div>
) : null}
{errors.task_id ? <div className="form-error">{errors.task_id.join("; ")}</div> : null}
</div>
<div className={cn("form-group", { "has-error": errors.hours })}>
<input
@ -83,9 +81,7 @@ class Form extends Component {
autoComplete="off"
autoFocus
/>
{errors.hours ? (
<div className="form-error">{errors.hours.join("; ")}</div>
) : null}
{errors.hours ? <div className="form-error">{errors.hours.join("; ")}</div> : null}
</div>
<div className={cn("form-group", { "has-error": errors.description })}>
<textarea

32
src/js/components/Options.js
View File

@ -6,10 +6,10 @@ import ApiClient from "api/Client"
@observer
class Options extends Component {
@observable subdomain = "";
@observable apiKey = "";
@observable errorMessage = null;
@observable isSuccess = false;
@observable subdomain = ""
@observable apiKey = ""
@observable errorMessage = null
@observable isSuccess = false
componentDidMount() {
getSettings(false).then(({ subdomain, apiKey }) => {
@ -20,7 +20,7 @@ class Options extends Component {
onChange = event => {
this[event.target.name] = event.target.value.trim()
};
}
handleSubmit = _event => {
this.isSuccess = false
@ -30,7 +30,7 @@ class Options extends Component {
const apiClient = new ApiClient({
subdomain: this.subdomain,
apiKey: this.apiKey,
version
version,
})
apiClient
.login()
@ -39,32 +39,27 @@ class Options extends Component {
this.closeWindow()
})
.catch(error => {
this.errorMessage =
error.response?.data?.message || "Anmeldung fehlgeschlagen"
this.errorMessage = error.response?.data?.message || "Anmeldung fehlgeschlagen"
})
})
};
}
handleInputKeyDown = event => {
if (event.key === "Enter") {
this.handleSubmit()
}
};
}
closeWindow = () => {
isChrome() && window.close()
};
}
render() {
return (
<div className="moco-bx-options">
<h2 style={{ textAlign: "center" }}>Einstellungen</h2>
{this.errorMessage && (
<div className="text-danger">{this.errorMessage}</div>
)}
{this.isSuccess && (
<div className="text-success">Anmeldung erfolgreich</div>
)}
{this.errorMessage && <div className="text-danger">{this.errorMessage}</div>}
{this.isSuccess && <div className="text-success">Anmeldung erfolgreich</div>}
<div className="form-group">
<label>Internetadresse</label>
<div className="input-group">
@ -88,8 +83,7 @@ class Options extends Component {
onChange={this.onChange}
/>
<p className="text-muted">
Den API-Schlüssel findest du in deinem Profil unter
&quot;Integrationen&quot;.
Den API-Schlüssel findest du in deinem Profil unter &quot;Integrationen&quot;.
</p>
</div>
<button className="moco-bx-btn" onClick={this.handleSubmit}>

21
src/js/components/Popup.js
View File

@ -1,12 +1,7 @@
import React, { Component } from "react"
import PropTypes from "prop-types"
import queryString from "query-string"
import {
ERROR_UNKNOWN,
ERROR_UNAUTHORIZED,
ERROR_UPGRADE_REQUIRED,
serializeProps
} from "utils"
import { ERROR_UNKNOWN, ERROR_UNAUTHORIZED, ERROR_UPGRADE_REQUIRED, serializeProps } from "utils"
import { isChrome } from "utils/browser"
function getStyles(errorType) {
@ -21,7 +16,7 @@ function getStyles(errorType) {
: "461px"
: errorType === ERROR_UNKNOWN
? "550px"
: "558px"
: "558px",
}
}
@ -29,14 +24,14 @@ class Popup extends Component {
static propTypes = {
service: PropTypes.object,
errorType: PropTypes.string,
onRequestClose: PropTypes.func.isRequired
};
onRequestClose: PropTypes.func.isRequired,
}
handleRequestClose = event => {
if (event.target.classList.contains("moco-bx-popup")) {
this.props.onRequestClose()
}
};
}
componentDidMount() {
// Document might lose focus when clicking the browser action.
@ -64,7 +59,7 @@ class Popup extends Component {
"fromDate",
"toDate",
"errorType",
"errorMessage"
"errorMessage",
])(this.props)
const styles = getStyles(this.props.errorType)
@ -73,9 +68,7 @@ class Popup extends Component {
<div className="moco-bx-popup" onClick={this.handleRequestClose}>
<div className="moco-bx-popup-content" style={styles}>
<iframe
src={chrome.extension.getURL(
`popup.html?${queryString.stringify(serializedProps)}`
)}
src={chrome.extension.getURL(`popup.html?${queryString.stringify(serializedProps)}`)}
width={styles.width}
height={styles.height}
/>

10
src/js/components/Spinner.js
View File

@ -1,14 +1,14 @@
import React from 'react'
import PropTypes from 'prop-types'
import React from "react"
import PropTypes from "prop-types"
const Spinner = ({ style }) => (
<div className='moco-bx-spinner__container' style={style}>
<div className='moco-bx-spinner' role='status' />
<div className="moco-bx-spinner__container" style={style}>
<div className="moco-bx-spinner" role="status" />
</div>
)
Spinner.propTypes = {
style: PropTypes.object
style: PropTypes.object,
}
export default Spinner

17
src/js/components/shared/Header.js
View File

@ -1,20 +1,21 @@
import React from 'react'
import PropTypes from 'prop-types'
import React from "react"
import PropTypes from "prop-types"
import logoUrl from "images/logo.png"
const Header = ({ subdomain }) => (
<div className="moco-bx-logo__container">
<a href={`https://${subdomain}.mocoapp.com/activities`} target="_blank" rel="noopener noreferrer">
<img
className="moco-bx-logo"
src={chrome.extension.getURL(logoUrl)}
/>
<a
href={`https://${subdomain}.mocoapp.com/activities`}
target="_blank"
rel="noopener noreferrer"
>
<img className="moco-bx-logo" src={chrome.extension.getURL(logoUrl)} />
</a>
</div>
)
Header.propTypes = {
subdomain: PropTypes.string
subdomain: PropTypes.string,
}
export default Header

28
src/js/utils/TimeInputParser.js
View File

@ -1,5 +1,5 @@
export default class TimeInputParser {
#input;
#input
constructor(input) {
this.#input = input.toLowerCase().replace(/[\s()]/g, "")
@ -25,11 +25,11 @@ export default class TimeInputParser {
const calculated = hours * 3600 + minutes * 60
return isNegative ? -calculated : calculated
};
}
#parseDecimal = () => {
return this.#input.replace(/[.,]/g, ".")
};
}
#parseTimeAsSeconds = () => {
const match = this.#isTime()
@ -39,12 +39,12 @@ export default class TimeInputParser {
const minutes = parseInt(match[3])
return this.#calculateFromHoursAndMinutes(hours, minutes, isNegative)
};
}
#parseMinutesAsSeconds = () => {
const minutes = parseInt(this.#isMinutes()[1])
return minutes * 60
};
}
#parseRange = () => {
const match = this.#isRange()
@ -54,7 +54,7 @@ export default class TimeInputParser {
const to_hours = parseInt(match[3])
const to_minutes = parseInt(match[4])
return (to_hours - from_hours) * 3600 + (to_minutes - from_minutes) * 60
};
}
#parseHoursAndMinutes = () => {
const match = this.#isHoursAndMinutes()
@ -64,28 +64,26 @@ export default class TimeInputParser {
const minutes = parseInt(match[3])
return this.#calculateFromHoursAndMinutes(hours, minutes, isNegative)
};
}
#isDecimal = () => {
return this.#input.match(/^([-]?[0-9]{0,2})[.,]{1}([0-9]{1,2})$/)
};
}
#isTime = () => {
return this.#input.match(/^([-]?)([0-9]{1,2}):([0-9]{2})$/)
};
}
#isMinutes = () => {
return this.#input.match(/^([-]?[0-9]{1,3})(m|mins?)$/)
};
}
#isRange = () => {
return this.#input.match(
/^([0-9]{1,2})[:.]{0,1}([0-9]{2})-([0-9]{1,2})[:.]{0,1}([0-9]{2})$/
)
};
return this.#input.match(/^([0-9]{1,2})[:.]{0,1}([0-9]{2})-([0-9]{1,2})[:.]{0,1}([0-9]{2})$/)
}
#isHoursAndMinutes = () => {
// 1h 14m(in)
return this.#input.match(/^([-]?)([0-9]{1,2})h([0-9]{1,2})(m|mins?)$/)
};
}
}

36
src/js/utils/messaging.js
View File

@ -1,14 +1,14 @@
export class BackgroundMessenger {
#ports = new Map();
#handlers = new Map();
#onceHandlers = new Map();
#ports = new Map()
#handlers = new Map()
#onceHandlers = new Map()
#handler = action => {
const handler = this.#handlers.get(action.type)
if (handler) {
handler(action)
}
};
}
#onceHandler = action => {
const handler = this.#onceHandlers.get(action.type)
@ -16,7 +16,7 @@ export class BackgroundMessenger {
if (handler) {
handler(action)
}
};
}
#registerPort = (tabId, port) => {
this.#ports.set(tabId, port)
@ -25,14 +25,14 @@ export class BackgroundMessenger {
port.onDisconnect.addListener(() => {
this.#unregisterPort(tabId, port)
})
};
}
#unregisterPort = (tabId, port) => {
port.onMessage.removeListener(this.#handler)
port.onMessage.removeListener(this.#onceHandler)
port.disconnect()
this.#ports.delete(tabId)
};
}
connectTab = tab => {
const currentPort = this.#ports.get(tab.id)
@ -40,41 +40,41 @@ export class BackgroundMessenger {
const port = chrome.tabs.connect(tab.id)
this.#registerPort(tab.id, port)
}
};
}
disconnectTab = tabId => {
const port = this.#ports.get(tabId)
if (port) {
this.#unregisterPort(tabId, port)
}
};
}
postMessage = (tab, action) => {
const port = this.#ports.get(tab.id)
if (port) {
port.postMessage(action)
}
};
}
once = (type, handler) => {
this.#onceHandlers.set(type, handler)
};
}
on = (type, handler) => {
this.#handlers.set(type, handler)
};
}
}
export class ContentMessenger {
#port;
#handlers = new Map();
#port
#handlers = new Map()
#handler = action => {
const handler = this.#handlers.get(action.type)
if (handler) {
handler(action)
}
};
}
constructor(port) {
this.#port = port
@ -85,15 +85,15 @@ export class ContentMessenger {
if (this.#port) {
this.#port.postMessage(action)
}
};
}
on = (type, handler) => {
this.#handlers.set(type, handler)
};
}
stop = () => {
this.#port.onMessage.removeListener(this.#handler)
this.#port = null
this.#handlers.clear()
};
}
}