Merge pull request #115 from electerious/develop

v1.7.1

Author: electerious

Diff for: .github/FUNDING.yml

@@ -1 +1,2 @@
+github: electerious
 custom: ['https://paypal.me/electerious', 'https://www.buymeacoffee.com/electerious']

Diff for: CHANGELOG.md

@@ -4,6 +4,14 @@ All notable changes to this project will be documented in this file.
 
 The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/) and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html).
 
+## [1.7.1] - 2020-05-15
+
+### Added
+
+- Instructions for using Helm (#109, thanks @suda)
+- Instructions for using systemd (#112, thanks @LickABrick)
+- Instructions on how to update when hosting on Heroku (#107, thanks @ckipp01)
+
 ## [1.7.0] - 2020-04-19
 
 ### Added

Diff for: README.md

@@ -21,6 +21,7 @@ Get Ackee up and running…
 
 - […with Docker Compose](docs/Get%20started.md#with-docker-compose)
 - […with Docker](docs/Get%20started.md#with-docker)
+- […with Helm](docs/Get%20started.md#with-helm)
 - […without Docker](docs/Get%20started.md#without-docker)
 - […with Heroku](docs/Get%20started.md#with-heroku)
 
@@ -112,3 +113,4 @@ I am working hard on continuously developing and maintaining Ackee. Please consi
 - [Ackee-PHP](https://github.com/BrookeDot/ackee-php) - A PHP Class for Ackee
 - [use-ackee](https://github.com/electerious/use-ackee) - Use Ackee in React
 - [nuxt-ackee](https://github.com/bdrtsky/nuxt-ackee) - Nuxt.js module for Ackee
+- [django-ackee-middleware](https://github.com/suda/django-ackee-middleware) - Django middleware for Ackee

Diff for: docs/Get started.md

@@ -2,6 +2,7 @@
 
 - [With Docker Compose](#with-docker-compose)
 - [With Docker](#with-docker)
+- [With Helm](#with-helm)
 - [Without Docker](#without-docker)
 - [With Heroku](#with-heroku)
 
@@ -22,7 +23,7 @@ Only those two are required to run Ackee with the existing `docker-compose.yml`.
 
 Run this command in the root of the project to use the predefined `docker-compose.yml`. It contains everything you need, including MongoDB and Ackee.
 
-```
+```sh
 docker-compose up
 ```
 
@@ -45,13 +46,13 @@ Ackee now runs on port `3000` and is only accessible from you local network. It'
 
 Ackee requires a running MongoDB instance. The easiest way to install MongoDB is by using [Docker](https://www.docker.com). Skip this step if you have MongoDB installed or visit the [website of MongoDB](https://www.mongodb.com) for alternative setups.
 
-```
+```sh
 docker run -p 27017:27017 --name mongo mongo
 ```
 
 For persistent storage, mount a host directory to the container directory `/data/db`, which is identified as a potential mount point in the mongo Dockerfile. When starting a new container, Docker will use the volume of the previous container and copy it to the new container, ensuring that no data gets lost.
 
-```
+```sh
 docker run -p 27017:27017 -v /path/to/local/folder:/data/db --name mongo mongo
 ```
 
@@ -66,7 +67,7 @@ Explanation:
 
 ### 2. Run Ackee
 
-```
+```sh
 docker run -p 3000:3000 -e ACKEE_MONGODB='mongodb://mongo:27017/ackee' -e ACKEE_USERNAME='username' -e ACKEE_PASSWORD='password' --link mongo --name ackee electerious/ackee
 ```
 
@@ -91,6 +92,22 @@ Ackee now runs on port `3000` and is only accessible from you local network. It'
 - [SSL and HTTPS](SSL%20and%20HTTPS.md)
 - [CORS headers](CORS%20headers.md)
 
+## With Helm
+
+### 1. Create `values.yaml`
+
+Based on the [default `values.yaml`](https://github.com/suda/ackee-chart/blob/master/values.yaml) create your own with overrides as needed.
+
+### 2. Deploy with `helm`
+
+```
+helm repo add ackee https://raw.githubusercontent.com/suda/ackee-chart/master
+helm repo update
+helm install ackee-release ackee/ackee-chart -n ackee -f values.yaml
+```
+
+If you're using the `ingress-nginx`, enabling the ingress will set the necessary annotations to enable CORS.
+
 ## Without Docker
 
 ### 1. Install dependencies
@@ -123,15 +140,15 @@ The username and password variables are used to secure your Ackee interface/API.
 
 Install all required dependencies.
 
-```
+```sh
 yarn
 ```
 
 ### 4. Run Ackee
 
 Ackee will output the URL it's listening on once the server is running. Visit the URL with your browser and complete the finial steps using the interface.
 
-```
+```sh
 yarn start
 ```
 
@@ -152,4 +169,25 @@ Simply deploy to Heroku by clicking this button:
 
 ### 2. Configure Ackee
 
-Ensure that you're using the correct CORS headers by setting [`ACKEE_ALLOW_ORIGIN`](CORS%20headers.md#heroku-or-platforms-as-a-service-configuration).
+Ensure that you're using the correct CORS headers by setting [`ACKEE_ALLOW_ORIGIN`](CORS%20headers.md#heroku-or-platforms-as-a-service-configuration).
+
+### 3. Updating Ackee
+
+The easiest way to update Ackee once hosted on Heroku is to clone the repo down, pull the latest changes from Ackee, and then push them back up to Heroku. You'll need the Heroku CLI and Git for this to work.
+
+In your application view, you'll find instructions under the `Deploy` tab on how to clone down the project. It should look something like below:
+
+```sh
+heroku login
+heroku git:clone -a <your ackee applicaton name>
+```
+
+You'll then want to add the Ackee repo as origin, pull the latest changes, and push it back up to Heroku.
+
+```sh
+git remote add origin https://github.com/electerious/Ackee.git
+git pull origin master
+git push origin heroku master
+```
+
+After your application re-deploys you'll have the latest version of Ackee!

Diff for: docs/Systemd.md

@@ -0,0 +1,36 @@
+# Systemd
+
+This guide shows you how to configure Ackee with systemd. We assume that your Ackee is located and installed in `/opt/Ackee`.
+
+## 1. Make Ackee executable
+
+Make the `index.js` executable with `chmod +x /opt/Ackee/src/index.js`.
+
+## 2. Create the service
+
+Create a file named `ackee.service` in `/etc/systemd/system/`.
+ 
+```
+[Unit]
+Description=Ackee
+
+[Service]
+ExecStart=/opt/Ackee/src/index.js
+Restart=always
+User=nobody
+Group=nogroup
+Environment=PATH=/usr/bin:/usr/local/bin
+Environment=NODE_ENV=production
+WorkingDirectory=/opt/Ackee
+
+[Install]
+WantedBy=multi-user.target
+```
+
+# 3. Start the service
+
+Start the service with `systemctl start ackee.service` and check if everything is up and running with `systemctl status ackee.service`.
+
+# 4. Enable the service
+
+Enable the service on boot with `systemctl enable ackee.service`.

Diff for: package.json

@@ -1,7 +1,7 @@
 {
   "name": "ackee",
   "private": true,
-  "version": "1.7.0",
+  "version": "1.7.1",
   "authors": [
     "Tobias Reich <[email protected]>"
   ],
@@ -19,8 +19,8 @@
     "url": "https://github.com/electerious/Ackee.git"
   },
   "funding": {
-    "type" : "paypal",
-    "url" : "https://paypal.me/electerious"
+    "type": "paypal",
+    "url": "https://paypal.me/electerious"
   },
   "scripts": {
     "start": "node src/index.js",
@@ -34,18 +34,18 @@
     "extends": "@electerious/eslint-config"
   },
   "dependencies": {
-    "@babel/core": "^7.9.0",
-    "@babel/preset-env": "^7.9.5",
+    "@babel/core": "^7.9.6",
+    "@babel/preset-env": "^7.9.6",
     "ackee-tracker": "^3.2.3",
     "classnames": "^2.2.6",
-    "date-fns": "^2.12.0",
+    "date-fns": "^2.13.0",
     "dotenv": "^8.2.0",
     "formbase": "^12.0.1",
-    "immer": "^6.0.3",
+    "immer": "^6.0.5",
     "is-url": "^1.2.4",
     "micro": "^9.3.4",
     "microrouter": "^3.1.3",
-    "mongoose": "^5.9.7",
+    "mongoose": "^5.9.13",
     "node-fetch": "^2.6.0",
     "node-schedule": "^1.3.2",
     "normalize-url": "^5.0.0",
@@ -54,9 +54,10 @@
     "prop-types": "^15.7.2",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
-    "react-error-boundary": "^1.2.5",
+    "react-error-boundary": "^2.2.1",
+    "react-fast-compare": "^3.1.1",
     "react-redux": "^7.2.0",
-    "react-use": "^14.1.0",
+    "react-use": "^14.2.0",
     "redux": "^4.0.5",
     "redux-devtools-extension": "^2.13.8",
     "redux-thunk": "^2.3.0",
@@ -66,16 +67,16 @@
     "s-ago": "^2.1.0",
     "shortid": "^2.2.15",
     "signale": "^1.4.0",
-    "uuid": "^7.0.3"
+    "uuid": "^8.0.0"
   },
   "devDependencies": {
-    "@electerious/eslint-config": "^1.3.2",
-    "ava": "3.6.0",
-    "coveralls": "^3.0.11",
-    "eslint": "^6.8.0",
+    "@electerious/eslint-config": "^1.3.4",
+    "ava": "3.8.2",
+    "coveralls": "^3.1.0",
+    "eslint": "^7.0.0",
     "eslint-plugin-import": "^2.20.2",
     "eslint-plugin-react": "^7.19.0",
-    "eslint-plugin-react-hooks": "^3.0.0",
+    "eslint-plugin-react-hooks": "^4.0.0",
     "eslint-plugin-react-native": "^3.8.1",
     "mocked-env": "^1.3.2",
     "nodemon": "^2.0.3",

Diff for: src/index.js

@@ -1,3 +1,4 @@
+#!/usr/bin/env node
 'use strict'
 
 require('dotenv').config()
@@ -59,4 +60,4 @@ mongoose.connect(dbUrl, {
 	signale.fatal(err)
 	process.exit(1)
 
-})
+})

Diff for: src/ui/scripts/components/Context.js

@@ -4,19 +4,23 @@ import PropTypes from 'prop-types'
 import classNames from 'classnames'
 import { useClickAway } from 'react-use'
 
-import runWhenDefined from '../utils/runWhenDefined'
 import useMeasure from '../utils/useMeasure'
 
 export const BUTTON = Symbol()
 export const SEPARATOR = Symbol()
 
+const toPixel = (num) => `${ Math.round(num) }px`
+
 const Context = (props) => {
 
 	const ref = useRef()
-	const measurement = useMeasure(props.targetRef)
+	const measurement = useMeasure(props.targetRef, ref)
 
 	useClickAway(ref, props.onAwayClick, [ 'click' ])
 
+	const x = measurement == null ? undefined : toPixel(props.x(measurement))
+	const y = measurement == null ? undefined : toPixel(props.y(measurement))
+
 	return createPortal(
 		h('div', {
 			ref,
@@ -26,12 +30,8 @@ const Context = (props) => {
 				'visible': measurement != null
 			}),
 			style: {
-				'--top': runWhenDefined(props.top, measurement),
-				'--right': runWhenDefined(props.right, measurement),
-				'--bottom': runWhenDefined(props.bottom, measurement),
-				'--left': runWhenDefined(props.left, measurement),
-				'--x': props.x,
-				'--y': props.y
+				'--x': x,
+				'--y': y
 			}
 		},
 			props.items.map((item, index) => {
@@ -68,12 +68,8 @@ Context.propTypes = {
 	targetRef: PropTypes.shape({
 		current: PropTypes.instanceOf(Element)
 	}),
-	top: PropTypes.func,
-	right: PropTypes.func,
-	bottom: PropTypes.func,
-	left: PropTypes.func,
-	x: PropTypes.string,
-	y: PropTypes.string,
+	x: PropTypes.func.isRequired,
+	y: PropTypes.func.isRequired,
 	floating: PropTypes.bool,
 	items: PropTypes.arrayOf(PropTypes.object).isRequired,
 	onItemClick: PropTypes.func.isRequired,

Diff for: src/ui/scripts/components/Filter.js

@@ -60,6 +60,18 @@ const labels = {
 	[languages.LANGUAGES_SORTING_RECENT]: 'Recent'
 }
 
+const calculateX = (measurement) => {
+
+	return measurement.target.relative.x + measurement.target.width / 2 - measurement.element.width / 2
+
+}
+
+const calculateY = (measurement) => {
+
+	return measurement.target.relative.y - measurement.element.height - 10
+
+}
+
 const FilterItem = (props) => {
 
 	const ref = useRef()
@@ -82,11 +94,8 @@ const FilterItem = (props) => {
 			),
 			active === true && h(Context, {
 				targetRef: ref,
-				// Manually calculated works better on mobile when element is sticky to the bottom
-				bottom: () => `calc(4vh + 51px)`,
-				left: (measurement) => `${ measurement.left + measurement.width / 2 }px`,
-				x: '-50%',
-				y: '-10px',
+				x: calculateX,
+				y: calculateY,
 				floating: true,
 				items: props.items,
 				onItemClick: close,

Diff for: src/ui/scripts/components/Header.js

@@ -8,6 +8,23 @@ import IconArrowDown from './icons/IconArrowDown'
 const BUTTON = Symbol()
 const DROPDOWN = Symbol()
 
+const calculateX = (measurement) => {
+
+	return Math.min(
+		// Ensure that the context stays on the screen
+		measurement.body.width - measurement.element.width - 10,
+		// Ensure that the context is pinned to the target
+		measurement.target.absolute.x + measurement.target.width - measurement.element.width
+	)
+
+}
+
+const calculateY = (measurement) => {
+
+	return measurement.target.absolute.y + measurement.target.height + 10
+
+}
+
 const Spinner = (props) => {
 
 	return (
@@ -80,9 +97,8 @@ const Dropdown = (props) => {
 			),
 			active === true && h(Context, {
 				targetRef: ref,
-				top: (measurement) => `${ measurement.bottom - measurement.scrollY }px`,
-				right: (measurement) => `${ Math.max(10, measurement.scrollWidth - measurement.right) }px`,
-				y: '10px',
+				x: calculateX,
+				y: calculateY,
 				items: props.items,
 				onItemClick: close,
 				onAwayClick: close