Merge branch 'mail-notifications' into 'master'

Notifications

Closes #706, #705 et #710

See merge request framasoft/mobilizon!930

.gitignore

@@ -26,6 +26,7 @@ priv/data/*
 !priv/data/.gitkeep
 priv/errors/*
 !priv/errors/.gitkeep
+priv/cert/
 .vscode/
 cover/
 site/

CHANGELOG.md

@@ -4,7 +4,7 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
-## 1.1.4 - 19-05-2021
+## 1.1.4 - 2021-05-19
 
 ### Fixes
 
@@ -20,7 +20,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Galician
 - Italian
 
-## 1.1.3 - 03-05-2021
+## 1.1.3 - 2021-05-03
 
 ### Changed
 
@@ -39,7 +39,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Russian
 - Spanish
 
-## 1.1.2 - 28-04-2021
+## 1.1.2 - 2021-04-28
 
 ### Changed
 
@@ -64,7 +64,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Slovenian
 - Russian
 
-## 1.1.1 - 22-04-2021
+## 1.1.1 - 2021-04-22
 
 ### Changed
 
@@ -96,7 +96,6 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Fixed editing an user's email in CLI
 - Fixed suspended actors being refreshed
 
-
 ### Translations
 
 - Gaelic
@@ -107,7 +106,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Slovenian
 - Spanish
 
-## 1.1.0 - 31-03-2021
+## 1.1.0 - 2021-03-31
 
 This version introduces a new way to install and host Mobilizon : Elixir releases. This is the new default way of installing Mobilizon. Please read [UPGRADE.md](./UPGRADE.md#upgrading-from-10-to-11) for details on how to migrate to Elixir binary releases or stay on source install.
 
@@ -203,7 +202,7 @@ This version introduces a new way to install and host Mobilizon : Elixir releas
 - Slovenian
 - Spanish
 
-## 1.1.0-rc.3 - 30-03-2021
+## 1.1.0-rc.3 - 2021-03-30
 
 ### Changed
 
@@ -214,7 +213,7 @@ This version introduces a new way to install and host Mobilizon : Elixir releas
 - Fixed parsing the IP from the MOBILIZON_INSTANCE_LISTEN_IP env variable for Docker
 - Fixed release startup in Docker container
 
-## 1.1.0-rc.2 - 30-03-2021
+## 1.1.0-rc.2 - 2021-03-30
 
 ### Added
 
@@ -238,7 +237,7 @@ This version introduces a new way to install and host Mobilizon : Elixir releas
 - Hungarian
 - Russian
 - Spanish
-## 1.1.0-rc.1 - 29-03-2021
+## 1.1.0-rc.1 - 2021-03-29
 
 ### Added
 
@@ -282,17 +281,17 @@ This version introduces a new way to install and host Mobilizon : Elixir releas
 - Slovenian
 - Spanish
 
-## 1.1.0-beta.6 - 17-03-2021
+## 1.1.0-beta.6 - 2021-03-17
 
 ### Fixed
 - Fixed a typo in range/radius showing the wrong radius for close events on homepage
 
-## 1.1.0-beta.5 - 17-03-2021
+## 1.1.0-beta.5 - 2021-03-17
 
 ### Fixed
 - Fixed a typo in range/radius preventing close events from showing up
 
-## 1.1.0-beta.4 - 17-03-2021
+## 1.1.0-beta.4 - 2021-03-17
 
 ### Fixed
 
@@ -300,13 +299,13 @@ This version introduces a new way to install and host Mobilizon : Elixir releas
 - Fixed location field not showing in preferences if setting not already set
 - Fixed lasts events published order on the homepage
 
-## 1.1.0-beta.3 - 16-03-2021
+## 1.1.0-beta.3 - 2021-03-16
 
 ### Fixed
 - Handle ActivityPub Fetcher returning text that's not JSON
 - Fix accessing a group profile when not a member
 
-## 1.1.0-beta.2 - 16-03-2021
+## 1.1.0-beta.2 - 2021-03-16
 
 ### Fixed
 - Fixed geospatial configuration only being evaluated at compile-time, not at runtime
@@ -314,7 +313,7 @@ This version introduces a new way to install and host Mobilizon : Elixir releas
 ### Translations
 - Slovenian
 
-## 1.1.0-beta.1 - 10-03-2021
+## 1.1.0-beta.1 - 2021-03-10
 
 This version introduces a new way to install and host Mobilizon : Elixir releases. This is the new default way of installing Mobilizon. Please read [UPGRADE.md](./UPGRADE.md#upgrading-from-10-to-11) for details on how to migrate to Elixir binary releases or stay on source install.
 
@@ -370,7 +369,7 @@ This version introduces a new way to install and host Mobilizon : Elixir releas
 - Spanish
 - Russian
 
-## 1.0.7 - 27-02-2021
+## 1.0.7 - 2021-02-27
 
 ### Fixed
 
@@ -380,7 +379,7 @@ This version introduces a new way to install and host Mobilizon : Elixir releas
 - Fixed search form display
 - Fixed wrong year in CHANGELOG.md
 
-## 1.0.6 - 04-02-2021
+## 1.0.6 - 2021-02-04
 
 ### Added
 
@@ -392,13 +391,13 @@ This version introduces a new way to install and host Mobilizon : Elixir releas
 - Fixed sending events & posts to group followers
 - Fixed redirection after deleting an event
 
-## 1.0.5 - 27-01-2021
+## 1.0.5 - 2021-01-27
 
 ### Fixed
 
 - Fixed duplicate entries in search with empty search query
 
-## 1.0.4 - 26-01-2021
+## 1.0.4 - 2021-02-26
 
 ### Added
 
@@ -445,7 +444,7 @@ This version introduces a new way to install and host Mobilizon : Elixir releas
 - Spanish
 - Swedish
 
-## 1.0.3 - 18-12-2020
+## 1.0.3 - 2020-12-18
 
 **This release adds new migrations, be sure to run them before restarting Mobilizon**
 

config/config.exs

@@ -44,9 +44,6 @@ config :mobilizon, :events, creation: true
 
 # Configures the endpoint
 config :mobilizon, Mobilizon.Web.Endpoint,
-  http: [
-    transport_options: [socket_opts: [:inet6]]
-  ],
   url: [
     host: "mobilizon.local",
     scheme: "https"
@@ -123,14 +120,19 @@ config :logger, Sentry.LoggerBackend,
   level: :warn,
   capture_log_messages: true
 
-config :mobilizon, Mobilizon.Web.Auth.Guardian, issuer: "mobilizon"
+config :mobilizon, Mobilizon.Web.Auth.Guardian,
+  issuer: "mobilizon",
+  token_ttl: %{
+    "access" => {15, :minutes},
+    "refresh" => {60, :days}
+  }
 
 config :guardian, Guardian.DB,
   repo: Mobilizon.Storage.Repo,
   # default
   schema_name: "guardian_tokens",
   # store all token types if not set
-  # token_types: ["refresh_token"],
+  token_types: ["refresh"],
   # default: 60 minutes
   sweep_interval: 60
 
@@ -170,6 +172,9 @@ config :phoenix, :format_encoders, json: Jason, "activity-json": Jason
 config :phoenix, :json_library, Jason
 config :phoenix, :filter_parameters, ["password", "token"]
 
+config :absinthe, schema: Mobilizon.GraphQL.Schema
+config :absinthe, Absinthe.Logger, filter_variables: ["token", "password", "secret"]
+
 config :ex_cldr,
   default_locale: "en",
   default_backend: Mobilizon.Cldr
@@ -265,7 +270,7 @@ config :mobilizon, :anonymous,
 config :mobilizon, Oban,
   repo: Mobilizon.Storage.Repo,
   log: false,
-  queues: [default: 10, search: 5, mailers: 10, background: 5, activity: 5],
+  queues: [default: 10, search: 5, mailers: 10, background: 5, activity: 5, notifications: 5],
   plugins: [
     {Oban.Plugins.Cron,
      crontab: [
@@ -298,6 +303,16 @@ config :mobilizon, :external_resource_providers, %{
   "https://docs.google.com/spreadsheets/" => :google_spreadsheets
 }
 
+config :mobilizon, Mobilizon.Service.Notifier,
+  notifiers: [
+    Mobilizon.Service.Notifier.Email,
+    Mobilizon.Service.Notifier.Push
+  ]
+
+config :mobilizon, Mobilizon.Service.Notifier.Email, enabled: true
+
+config :mobilizon, Mobilizon.Service.Notifier.Push, enabled: true
+
 # Import environment specific config. This must remain at the bottom
 # of this file so it overrides the configuration defined above.
 import_config "#{config_env()}.exs"

config/dev.exs

@@ -24,7 +24,8 @@ config :mobilizon, Mobilizon.Web.Endpoint,
       "node_modules/webpack/bin/webpack.js",
       "--mode",
       "development",
-      "--watch-stdin",
+      "--watch",
+      "--watch-options-stdin",
       "--config",
       "node_modules/@vue/cli-service/webpack.config.js",
       cd: Path.expand("../js", __DIR__)

config/prod.exs

@@ -43,9 +43,6 @@ cond do
       File.exists?("./config/#{System.get_env("INSTANCE_CONFIG")}") ->
     import_config System.get_env("INSTANCE_CONFIG")
 
-  File.exists?("./config/prod.secret.exs") ->
-    import_config "prod.secret.exs"
-
   true ->
     :ok
 end

js/.browserslistrc

@@ -1,3 +1,4 @@
 > 1%
 last 2 versions
 not dead
+not ie 11

js/.eslintrc.js

@@ -8,8 +8,8 @@ module.exports = {
   extends: [
     "plugin:vue/essential",
     "eslint:recommended",
-    "@vue/prettier",
     "@vue/typescript/recommended",
+    "@vue/prettier",
     "@vue/prettier/@typescript-eslint",
   ],
 

js/package.json

@@ -8,12 +8,13 @@
     "test:unit": "LANG=en_US.UTF-8 LANGUAGE=en_US:en LC_ALL=en_US.UTF-8 vue-cli-service test:unit",
     "test:e2e": "vue-cli-service test:e2e",
     "lint": "vue-cli-service lint",
-    "build:assets": "vue-cli-service build --modern",
+    "build:assets": "vue-cli-service build",
     "build:pictures": "bash ./scripts/build/pictures.sh"
   },
   "dependencies": {
     "@absinthe/socket": "^0.2.1",
     "@absinthe/socket-apollo-link": "^0.2.1",
+    "@apollo/client": "^3.3.16",
     "@mdi/font": "^5.0.45",
     "@tiptap/core": "^2.0.0-beta.41",
     "@tiptap/extension-blockquote": "^2.0.0-beta.6",
@@ -29,14 +30,6 @@
     "@tiptap/starter-kit": "^2.0.0-beta.37",
     "@tiptap/vue-2": "^2.0.0-beta.21",
     "apollo-absinthe-upload-link": "^1.5.0",
-    "apollo-cache": "^1.3.5",
-    "apollo-cache-inmemory": "^1.6.6",
-    "apollo-client": "^2.6.10",
-    "apollo-link": "^1.2.14",
-    "apollo-link-error": "^1.1.13",
-    "apollo-link-http": "^1.5.17",
-    "apollo-link-ws": "^1.0.19",
-    "apollo-utilities": "^1.3.2",
     "buefy": "^0.9.0",
     "bulma-divider": "^0.2.0",
     "core-js": "^3.6.4",
@@ -44,13 +37,14 @@
     "graphql": "^15.0.0",
     "graphql-tag": "^2.10.3",
     "intersection-observer": "^0.12.0",
+    "jwt-decode": "^3.1.2",
     "leaflet": "^1.4.0",
     "leaflet.locatecontrol": "^0.73.0",
     "lodash": "^4.17.11",
     "ngeohash": "^0.6.3",
     "p-debounce": "^4.0.0",
     "phoenix": "^1.4.11",
-    "register-service-worker": "^1.7.1",
+    "register-service-worker": "^1.7.2",
     "tippy.js": "^6.2.3",
     "unfetch": "^4.2.0",
     "v-tooltip": "^2.1.3",
@@ -78,36 +72,34 @@
     "@types/vuedraggable": "^2.23.0",
     "@typescript-eslint/eslint-plugin": "^4.18.0",
     "@typescript-eslint/parser": "^4.18.0",
-    "@vue/cli-plugin-babel": "~4.5.13",
+    "@vue/cli-plugin-babel": "~5.0.0-beta.0",
-    "@vue/cli-plugin-e2e-cypress": "~4.5.13",
+    "@vue/cli-plugin-e2e-cypress": "~5.0.0-beta.0",
-    "@vue/cli-plugin-eslint": "~4.5.13",
+    "@vue/cli-plugin-eslint": "~5.0.0-beta.0",
-    "@vue/cli-plugin-pwa": "~4.5.13",
+    "@vue/cli-plugin-pwa": "~5.0.0-beta.0",
-    "@vue/cli-plugin-router": "~4.5.13",
+    "@vue/cli-plugin-router": "~5.0.0-beta.0",
-    "@vue/cli-plugin-typescript": "~4.5.13",
+    "@vue/cli-plugin-typescript": "~5.0.0-beta.0",
-    "@vue/cli-plugin-unit-jest": "~4.5.13",
+    "@vue/cli-plugin-unit-jest": "~5.0.0-beta.0",
-    "@vue/cli-service": "~4.5.13",
+    "@vue/cli-service": "~5.0.0-beta.0",
     "@vue/eslint-config-prettier": "^6.0.0",
     "@vue/eslint-config-typescript": "^7.0.0",
     "@vue/test-utils": "^1.1.0",
-    "eslint": "^6.7.2",
+    "eslint": "^7.20.0",
     "eslint-plugin-cypress": "^2.10.3",
     "eslint-plugin-import": "^2.20.2",
     "eslint-plugin-prettier": "^3.3.1",
-    "eslint-plugin-vue": "^6.2.2",
+    "eslint-plugin-vue": "^7.6.0",
     "flush-promises": "^1.0.2",
     "jest-junit": "^12.0.0",
-    "mock-apollo-client": "^0.6",
+    "mock-apollo-client": "^1.1.0",
     "prettier": "^2.2.1",
     "prettier-eslint": "^12.0.0",
-    "sass": "^1.29.0",
+    "sass": "^1.34.1",
-    "sass-loader": "^8.0.2",
+    "sass-loader": "^12.0.0",
+    "ts-jest": "^26.5.3",
     "typescript": "~4.1.5",
-    "vue-cli-plugin-svg": "~0.1.3",
     "vue-i18n-extract": "^1.0.2",
+    "vue-jest": "^4.0.1",
     "vue-template-compiler": "^2.6.11",
-    "webpack-cli": "^3.3"
+    "webpack-cli": "^4.7.0"
-  },
-  "resolutions": {
-    "workbox-webpack-plugin": "5.1.3"
   }
 }

js/public/img/icons/favicon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="60" height="60"><path style="opacity:1;fill:#fea72b;fill-opacity:1;stroke:none;stroke-opacity:1" d="M-5.801-6.164h72.69v72.871h-72.69z"/><g data-name="Calque 2"><g data-name="header"><path d="M26.58 27.06q0 8-4.26 12.3a12.21 12.21 0 0 1-9 3.42 12.21 12.21 0 0 1-9-3.42Q0 35.1 0 27.06q0-8.04 4.26-12.3a12.21 12.21 0 0 1 9-3.42 12.21 12.21 0 0 1 9 3.42q4.32 4.24 4.32 12.3zM13.29 17q-5.67 0-5.67 10.06t5.67 10.08q5.71 0 5.71-10.08T13.29 17z" style="fill:#3a384c;fill-opacity:1" transform="translate(14.627 5.256) scale(1.15671)"/><path d="M9 6.78a7.37 7.37 0 0 1-.6-3 7.37 7.37 0 0 1 .6-3A8.09 8.09 0 0 1 12.83 0a7.05 7.05 0 0 1 3.69.84 7.37 7.37 0 0 1 .6 3 7.37 7.37 0 0 1-.6 3 7.46 7.46 0 0 1-3.87.84A6.49 6.49 0 0 1 9 6.78z" style="fill:#fff" transform="translate(14.627 5.256) scale(1.15671)"/></g></g></svg>

js/public/img/icons/safari-pinned-tab.svg

@@ -1,149 +1 @@
-<?xml version="1.0" standalone="no"?>
+<svg xmlns="http://www.w3.org/2000/svg" width="60" height="60"><path style="opacity:1;fill:#fea72b;fill-opacity:1;stroke:none;stroke-opacity:1" d="M-5.801-6.164h72.69v72.871h-72.69z"/><g data-name="Calque 2"><g data-name="header"><path d="M26.58 27.06q0 8-4.26 12.3a12.21 12.21 0 0 1-9 3.42 12.21 12.21 0 0 1-9-3.42Q0 35.1 0 27.06q0-8.04 4.26-12.3a12.21 12.21 0 0 1 9-3.42 12.21 12.21 0 0 1 9 3.42q4.32 4.24 4.32 12.3zM13.29 17q-5.67 0-5.67 10.06t5.67 10.08q5.71 0 5.71-10.08T13.29 17z" style="fill:#3a384c;fill-opacity:1" transform="translate(14.627 5.256) scale(1.15671)"/><path d="M9 6.78a7.37 7.37 0 0 1-.6-3 7.37 7.37 0 0 1 .6-3A8.09 8.09 0 0 1 12.83 0a7.05 7.05 0 0 1 3.69.84 7.37 7.37 0 0 1 .6 3 7.37 7.37 0 0 1-.6 3 7.46 7.46 0 0 1-3.87.84A6.49 6.49 0 0 1 9 6.78z" style="fill:#fff" transform="translate(14.627 5.256) scale(1.15671)"/></g></g></svg>
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
- "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
-<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
- width="16.000000pt" height="16.000000pt" viewBox="0 0 16.000000 16.000000"
- preserveAspectRatio="xMidYMid meet">
-<metadata>
-Created by potrace 1.11, written by Peter Selinger 2001-2013
-</metadata>
-<g transform="translate(0.000000,16.000000) scale(0.000320,-0.000320)"
-fill="#000000" stroke="none">
-<path d="M18 46618 c45 -75 122 -207 122 -211 0 -2 25 -45 55 -95 30 -50 55
--96 55 -102 0 -5 5 -10 10 -10 6 0 10 -4 10 -9 0 -5 73 -135 161 -288 89 -153
-173 -298 187 -323 14 -25 32 -57 41 -72 88 -149 187 -324 189 -335 2 -7 8 -13
-13 -13 5 0 9 -4 9 -10 0 -5 46 -89 103 -187 175 -302 490 -846 507 -876 8 -16
-20 -36 25 -45 28 -46 290 -498 339 -585 13 -23 74 -129 136 -236 61 -107 123
--215 137 -240 14 -25 29 -50 33 -56 5 -5 23 -37 40 -70 18 -33 38 -67 44 -75
-11 -16 21 -33 63 -109 14 -25 29 -50 33 -56 4 -5 21 -35 38 -65 55 -100 261
--455 269 -465 4 -5 14 -21 20 -35 15 -29 41 -75 103 -180 24 -41 52 -88 60
--105 9 -16 57 -100 107 -185 112 -193 362 -626 380 -660 8 -14 23 -38 33 -55
-11 -16 23 -37 27 -45 4 -8 26 -46 48 -85 23 -38 53 -90 67 -115 46 -81 64
--113 178 -310 62 -107 121 -210 132 -227 37 -67 56 -99 85 -148 16 -27 32 -57
-36 -65 4 -8 15 -27 25 -42 9 -15 53 -89 96 -165 44 -76 177 -307 296 -513 120
--206 268 -463 330 -570 131 -227 117 -203 200 -348 36 -62 73 -125 82 -140 10
--15 21 -34 25 -42 4 -8 20 -37 36 -65 17 -27 38 -65 48 -82 49 -85 64 -111 87
--153 13 -25 28 -49 32 -55 4 -5 78 -134 165 -285 87 -151 166 -288 176 -305
-10 -16 26 -43 35 -59 9 -17 125 -217 257 -445 132 -229 253 -441 270 -471 17
--30 45 -79 64 -108 18 -29 33 -54 33 -57 0 -2 20 -37 44 -77 24 -40 123 -212
-221 -383 97 -170 190 -330 205 -355 16 -25 39 -65 53 -90 13 -25 81 -144 152
--265 70 -121 137 -238 150 -260 12 -22 37 -65 55 -95 18 -30 43 -73 55 -95 12
--22 48 -85 80 -140 77 -132 163 -280 190 -330 13 -22 71 -123 130 -225 59
--102 116 -199 126 -217 10 -17 29 -50 43 -72 15 -22 26 -43 26 -45 0 -2 27
--50 60 -106 33 -56 60 -103 60 -105 0 -2 55 -98 90 -155 8 -14 182 -316 239
--414 13 -22 45 -79 72 -124 27 -46 49 -86 49 -89 0 -2 14 -24 30 -48 16 -24
-30 -46 30 -49 0 -5 74 -135 100 -176 5 -8 24 -42 43 -75 50 -88 58 -101 262
--455 104 -179 199 -345 213 -370 14 -25 28 -49 32 -55 4 -5 17 -26 28 -45 10
--19 62 -109 114 -200 114 -197 133 -230 170 -295 16 -27 33 -57 38 -65 17 -28
-96 -165 103 -180 4 -8 16 -28 26 -45 10 -16 77 -131 148 -255 72 -124 181
--313 243 -420 62 -107 121 -209 131 -227 35 -62 323 -560 392 -678 38 -66 83
--145 100 -175 16 -30 33 -59 37 -65 4 -5 17 -27 29 -47 34 -61 56 -100 90
--156 17 -29 31 -55 31 -57 0 -2 17 -32 39 -67 21 -35 134 -229 251 -433 117
--203 235 -407 261 -451 27 -45 49 -85 49 -88 0 -4 8 -19 19 -34 15 -21 200
--341 309 -533 10 -19 33 -58 51 -87 17 -29 31 -54 31 -56 0 -2 25 -44 55 -94
-30 -50 55 -95 55 -98 0 -4 6 -15 14 -23 7 -9 27 -41 43 -71 17 -30 170 -297
-342 -594 171 -296 311 -542 311 -547 0 -5 5 -9 10 -9 6 0 10 -4 10 -10 0 -5
-22 -47 49 -92 27 -46 58 -99 68 -118 24 -43 81 -140 93 -160 5 -8 66 -114 135
--235 69 -121 130 -227 135 -235 12 -21 259 -447 283 -490 10 -19 28 -47 38
--62 11 -14 19 -29 19 -32 0 -3 37 -69 83 -148 99 -170 305 -526 337 -583 13
--22 31 -53 41 -70 11 -16 22 -37 26 -45 7 -14 82 -146 103 -180 14 -24 181
--311 205 -355 13 -22 46 -80 75 -130 29 -49 64 -110 78 -135 14 -25 51 -88 82
--140 31 -52 59 -102 63 -110 4 -8 18 -33 31 -55 205 -353 284 -489 309 -535
-17 -30 45 -78 62 -106 18 -28 36 -60 39 -72 4 -12 12 -22 17 -22 5 0 9 -4 9
--10 0 -5 109 -197 241 -427 133 -230 250 -431 259 -448 51 -90 222 -385 280
--485 37 -63 78 -135 92 -160 14 -25 67 -117 118 -205 51 -88 101 -175 111
--193 34 -58 55 -95 149 -257 51 -88 101 -173 110 -190 9 -16 76 -131 147 -255
-72 -124 140 -241 151 -260 61 -108 281 -489 355 -615 38 -66 77 -133 87 -150
-35 -63 91 -161 100 -175 14 -23 99 -169 128 -220 54 -97 135 -235 142 -245 4
--5 20 -32 35 -60 26 -48 238 -416 276 -480 10 -16 26 -46 37 -65 30 -53 382
--661 403 -695 10 -16 22 -37 26 -45 4 -8 26 -48 50 -88 24 -41 43 -75 43 -77
-0 -2 22 -40 50 -85 27 -45 50 -84 50 -86 0 -3 38 -69 83 -147 84 -142 302
--520 340 -587 10 -19 34 -60 52 -90 18 -30 44 -75 57 -100 14 -25 45 -79 70
--120 25 -41 56 -96 70 -121 14 -25 77 -133 138 -240 62 -107 122 -210 132
--229 25 -43 310 -535 337 -581 11 -19 26 -45 34 -59 17 -32 238 -414 266 -460
-11 -19 24 -41 28 -49 3 -7 75 -133 160 -278 84 -146 153 -269 153 -274 0 -5 5
--9 10 -9 6 0 10 -4 10 -10 0 -5 82 -150 181 -322 182 -314 201 -346 240 -415
-12 -21 80 -139 152 -263 71 -124 141 -245 155 -270 14 -25 28 -49 32 -55 6 -8
-145 -248 220 -380 37 -66 209 -362 229 -395 11 -19 24 -42 28 -49 4 -8 67
--118 140 -243 73 -125 133 -230 133 -233 0 -2 15 -28 33 -57 19 -29 47 -78 64
--108 17 -30 53 -93 79 -139 53 -90 82 -141 157 -272 82 -142 115 -199 381
--659 142 -245 268 -463 281 -485 12 -22 71 -125 132 -230 60 -104 172 -298
-248 -430 76 -132 146 -253 156 -270 11 -16 22 -36 26 -44 3 -8 30 -54 60 -103
-29 -49 53 -91 53 -93 0 -3 18 -34 40 -70 22 -36 40 -67 40 -69 0 -2 37 -66 81
--142 45 -77 98 -168 119 -204 20 -36 47 -81 58 -100 12 -19 27 -47 33 -62 6
--16 15 -28 20 -28 5 0 9 -4 9 -9 0 -6 63 -118 140 -251 77 -133 140 -243 140
--245 0 -2 18 -33 41 -70 22 -37 49 -83 60 -101 10 -19 29 -51 40 -71 25 -45
-109 -189 126 -218 7 -11 17 -29 22 -40 6 -11 22 -38 35 -60 14 -22 37 -62 52
--90 14 -27 35 -62 45 -77 11 -14 19 -29 19 -32 0 -3 18 -35 40 -71 22 -36 40
--67 40 -69 0 -2 19 -35 42 -72 23 -38 55 -94 72 -124 26 -47 139 -244 171
--298 6 -9 21 -36 34 -60 28 -48 37 -51 51 -19 6 12 19 36 29 52 10 17 27 46
-38 65 11 19 104 181 208 360 103 179 199 345 213 370 14 25 42 74 64 109 21
-34 38 65 38 67 0 2 18 33 40 69 22 36 40 67 40 69 0 3 177 310 199 346 16 26
-136 234 140 244 2 5 25 44 52 88 27 44 49 81 49 84 0 2 18 34 40 70 22 36 40
-67 40 69 0 2 20 36 43 77 35 58 169 289 297 513 9 17 50 86 90 155 40 69 86
-150 103 180 16 30 35 62 41 70 6 8 16 24 22 35 35 64 72 129 167 293 59 100
-116 199 127 220 11 20 30 53 41 72 43 72 1070 1850 1121 1940 14 25 65 113
-113 195 48 83 96 166 107 185 10 19 28 50 38 68 11 18 73 124 137 235 64 111
-175 303 246 427 71 124 173 299 225 390 52 91 116 202 143 248 27 45 49 85 49
-89 0 4 6 14 14 22 7 9 28 43 46 76 26 47 251 436 378 655 11 19 29 51 40 70
-11 19 101 176 201 348 99 172 181 317 181 323 0 5 5 9 10 9 6 0 10 5 10 11 0
-6 8 23 18 37 11 15 32 52 49 82 16 30 130 228 253 440 122 212 234 405 248
-430 13 25 39 70 57 100 39 65 69 117 130 225 25 44 50 87 55 95 12 19 78 134
-220 380 61 107 129 224 150 260 161 277 222 382 246 425 15 28 47 83 71 123
-24 41 43 78 43 83 0 5 4 9 8 9 4 0 13 12 19 28 7 15 23 45 36 67 66 110 277
-478 277 483 0 3 6 13 14 21 7 9 27 41 43 71 17 30 45 80 63 110 34 57 375 649
-394 685 6 11 16 27 22 35 6 8 26 42 44 75 18 33 41 74 51 90 10 17 24 41 32
-55 54 97 72 128 88 152 11 14 19 28 19 30 0 3 79 141 175 308 96 167 175 305
-175 308 0 3 6 13 14 21 7 9 26 39 41 66 33 60 276 483 338 587 24 40 46 80 50
-88 4 8 13 24 20 35 14 23 95 163 125 215 11 19 52 91 92 160 40 69 80 139 90
-155 9 17 103 179 207 360 105 182 200 346 211 365 103 181 463 802 489 845 7
-11 15 27 19 35 4 8 29 51 55 95 64 110 828 1433 848 1470 9 17 24 41 33 55 9
-14 29 48 45 77 15 28 52 93 82 145 30 51 62 107 71 123 17 30 231 398 400 690
-51 88 103 179 115 202 12 23 26 48 32 55 6 7 24 38 40 68 17 30 61 107 98 170
-37 63 84 144 103 180 19 36 41 72 48 81 8 8 14 18 14 21 0 4 27 51 59 106 32
-55 72 124 89 154 16 29 71 125 122 213 51 88 104 180 118 205 13 25 28 50 32
-55 4 6 17 26 28 45 11 19 45 80 77 135 31 55 66 116 77 135 11 19 88 152 171
-295 401 694 620 1072 650 1125 11 19 87 152 170 295 83 143 158 273 166 288 9
-16 21 36 26 45 6 9 31 52 55 96 25 43 54 94 66 115 11 20 95 164 186 321 91
-157 173 299 182 315 9 17 26 46 37 65 12 19 66 114 121 210 56 96 108 186 117
-200 8 14 24 40 34 59 24 45 383 664 412 713 5 9 17 29 26 45 15 28 120 210
-241 419 36 61 68 117 72 125 4 8 12 23 19 34 35 57 245 420 262 453 11 20 35
-61 53 90 17 29 32 54 32 56 0 3 28 51 62 108 33 57 70 119 80 138 10 19 23 42
-28 50 5 8 32 53 59 100 27 47 149 258 271 470 122 212 234 405 248 430 30 53
-62 108 80 135 6 11 15 27 19 35 4 8 85 150 181 315 96 165 187 323 202 350 31
-56 116 202 130 225 5 8 25 42 43 75 19 33 92 159 162 280 149 257 157 271 202
-350 19 33 38 67 43 75 9 14 228 392 275 475 12 22 55 96 95 165 40 69 80 139
-90 155 24 42 202 350 221 383 9 15 27 47 41 72 14 25 75 131 136 236 61 106
-121 210 134 232 99 172 271 470 279 482 5 8 23 40 40 70 18 30 81 141 142 245
-60 105 121 210 135 235 14 25 71 124 127 220 56 96 143 247 194 335 51 88 96
-167 102 175 14 24 180 311 204 355 23 43 340 590 356 615 5 8 50 87 101 175
-171 301 517 898 582 1008 25 43 46 81 46 83 0 2 12 23 27 47 14 23 40 67 56
-97 16 30 35 62 42 70 7 8 15 22 18 30 4 8 20 38 37 65 16 28 33 57 37 65 6 12
-111 196 143 250 5 8 55 95 112 193 57 98 113 195 126 215 12 20 27 46 32 57 6
-11 14 27 20 35 5 8 76 130 156 270 80 140 165 287 187 325 23 39 52 90 66 115
-13 25 30 52 37 61 8 8 14 18 14 21 0 4 41 77 92 165 50 87 175 302 276 478
-101 176 208 360 236 408 28 49 67 117 86 152 19 35 41 70 48 77 6 6 12 15 12
-19 0 7 124 224 167 291 12 21 23 40 23 42 0 2 21 40 46 83 26 43 55 92 64 109
-54 95 327 568 354 614 19 30 45 75 59 100 71 128 82 145 89 148 4 2 8 8 8 13
-0 5 42 82 94 172 311 538 496 858 518 897 14 25 40 70 58 100 18 30 42 71 53
-90 10 19 79 139 152 265 73 127 142 246 153 265 10 19 43 76 72 125 29 50 63
-108 75 130 65 116 80 140 87 143 4 2 8 8 8 12 0 8 114 212 140 250 6 8 14 24
-20 35 5 11 54 97 108 190 l100 170 -9611 3 c-5286 1 -9614 -1 -9618 -5 -5 -6
--419 -719 -619 -1068 -89 -155 -267 -463 -323 -560 -38 -66 -81 -140 -95 -165
--31 -56 -263 -457 -526 -910 -110 -190 -224 -388 -254 -440 -29 -52 -61 -109
--71 -125 -23 -39 -243 -420 -268 -465 -11 -19 -204 -352 -428 -740 -224 -388
--477 -826 -563 -975 -85 -148 -185 -322 -222 -385 -37 -63 -120 -207 -185
--320 -65 -113 -177 -306 -248 -430 -72 -124 -172 -297 -222 -385 -51 -88 -142
--245 -202 -350 -131 -226 -247 -427 -408 -705 -65 -113 -249 -432 -410 -710
--160 -278 -388 -673 -506 -877 -118 -205 -216 -373 -219 -373 -3 0 -52 82
--109 183 -58 100 -144 250 -192 332 -95 164 -402 696 -647 1120 -85 149 -228
-396 -317 550 -212 365 -982 1700 -1008 1745 -10 19 -43 76 -72 125 -29 50 -64
-110 -77 135 -14 25 -63 110 -110 190 -47 80 -96 165 -110 190 -14 25 -99 171
--188 325 -89 154 -174 300 -188 325 -13 25 -64 113 -112 195 -48 83 -140 242
--205 355 -65 113 -183 317 -263 454 -79 137 -152 264 -163 282 -50 89 -335
-583 -354 614 -12 19 -34 58 -50 85 -15 28 -129 226 -253 440 -124 215 -235
-408 -247 430 -12 22 -69 121 -127 220 -58 99 -226 389 -373 645 -148 256 -324
-561 -392 678 -67 117 -134 232 -147 255 -13 23 -33 59 -46 80 l-22 37 -9615 0
--9615 0 20 -32z"/>
-</g>
-</svg>

js/src/App.vue

@@ -50,6 +50,8 @@ import { initializeCurrentActor } from "./utils/auth";
 import { CONFIG } from "./graphql/config";
 import { IConfig } from "./types/config.model";
 import { ICurrentUser } from "./types/current-user.model";
+import jwt_decode, { JwtPayload } from "jwt-decode";
+import { refreshAccessToken } from "./apollo/utils";
 
 @Component({
   apollo: {
@@ -63,6 +65,11 @@ import { ICurrentUser } from "./types/current-user.model";
       import(/* webpackChunkName: "editor" */ "./components/Error.vue"),
     "mobilizon-footer": Footer,
   },
+  metaInfo() {
+    return {
+      titleTemplate: "%s | Mobilizon",
+    };
+  },
 })
 export default class App extends Vue {
   config!: IConfig;
@@ -71,6 +78,10 @@ export default class App extends Vue {
 
   error: Error | null = null;
 
+  online = true;
+
+  interval: number | undefined = undefined;
+
   async created(): Promise<void> {
     if (await this.initializeCurrentUser()) {
       await initializeCurrentActor(this.$apollo.provider.defaultClient);
@@ -100,6 +111,41 @@ export default class App extends Vue {
     }
     return false;
   }
+
+  mounted(): void {
+    this.online = window.navigator.onLine;
+    window.addEventListener("offline", () => {
+      this.online = false;
+      this.showOfflineNetworkWarning();
+      console.log("offline");
+    });
+    window.addEventListener("online", () => {
+      this.online = true;
+      console.log("online");
+    });
+
+    this.interval = setInterval(async () => {
+      const accessToken = localStorage.getItem(AUTH_ACCESS_TOKEN);
+      if (accessToken) {
+        const token = jwt_decode<JwtPayload>(accessToken);
+        if (
+          token?.exp !== undefined &&
+          new Date(token.exp * 1000 - 60000) < new Date()
+        ) {
+          refreshAccessToken(this.$apollo.getClient());
+        }
+      }
+    }, 60000);
+  }
+
+  showOfflineNetworkWarning(): void {
+    this.$notifier.error(this.$t("You are offline") as string);
+  }
+
+  unmounted(): void {
+    clearInterval(this.interval);
+    this.interval = undefined;
+  }
 }
 </script>
 

js/src/apollo/user.ts

@@ -1,12 +1,14 @@
+import { CURRENT_ACTOR_CLIENT } from "@/graphql/actor";
+import { CURRENT_USER_CLIENT } from "@/graphql/user";
 import { ICurrentUserRole } from "@/types/enums";
-import { ApolloCache } from "apollo-cache";
+import { ApolloCache, NormalizedCacheObject } from "@apollo/client/cache";
-import { NormalizedCacheObject } from "apollo-cache-inmemory";
+import { Resolvers } from "@apollo/client/core/types";
-import { Resolvers } from "apollo-client/core/types";
 
 export default function buildCurrentUserResolver(
   cache: ApolloCache<NormalizedCacheObject>
 ): Resolvers {
-  cache.writeData({
+  cache.writeQuery({
+    query: CURRENT_USER_CLIENT,
     data: {
       currentUser: {
         __typename: "CurrentUser",
@@ -15,6 +17,12 @@ export default function buildCurrentUserResolver(
         isLoggedIn: false,
         role: ICurrentUserRole.USER,
       },
+    },
+  });
+
+  cache.writeQuery({
+    query: CURRENT_ACTOR_CLIENT,
+    data: {
       currentActor: {
         __typename: "CurrentActor",
         id: null,
@@ -47,7 +55,7 @@ export default function buildCurrentUserResolver(
           },
         };
 
-        localCache.writeData({ data });
+        localCache.writeQuery({ data, query: CURRENT_USER_CLIENT });
       },
       updateCurrentActor: (
         _: any,
@@ -74,7 +82,7 @@ export default function buildCurrentUserResolver(
           },
         };
 
-        localCache.writeData({ data });
+        localCache.writeQuery({ data, query: CURRENT_ACTOR_CLIENT });
       },
     },
   };

js/src/apollo/utils.ts

@@ -1,16 +1,92 @@
-import {
-  IntrospectionFragmentMatcher,
-  NormalizedCacheObject,
-} from "apollo-cache-inmemory";
 import { AUTH_ACCESS_TOKEN, AUTH_REFRESH_TOKEN } from "@/constants";
 import { REFRESH_TOKEN } from "@/graphql/auth";
+import { IFollower } from "@/types/actor/follower.model";
+import { IParticipant } from "@/types/participant.model";
+import { Paginate } from "@/types/paginate";
 import { saveTokenData } from "@/utils/auth";
-import { ApolloClient } from "apollo-client";
+import {
+  ApolloClient,
+  FieldPolicy,
+  NormalizedCacheObject,
+  Reference,
+  TypePolicies,
+} from "@apollo/client/core";
 import introspectionQueryResultData from "../../fragmentTypes.json";
+import { IMember } from "@/types/actor/member.model";
+import { IComment } from "@/types/comment.model";
+import { IEvent } from "@/types/event.model";
+import { IActivity } from "@/types/activity.model";
 
-export const fragmentMatcher = new IntrospectionFragmentMatcher({
+type possibleTypes = { name: string };
-  introspectionQueryResultData,
+type schemaType = {
-});
+  kind: string;
+  name: string;
+  possibleTypes: possibleTypes[];
+};
+
+// eslint-disable-next-line no-underscore-dangle
+const types = introspectionQueryResultData.__schema.types as schemaType[];
+export const possibleTypes = types.reduce((acc, type) => {
+  if (type.kind === "INTERFACE") {
+    acc[type.name] = type.possibleTypes.map(({ name }) => name);
+  }
+  return acc;
+}, {} as Record<string, string[]>);
+
+export const typePolicies: TypePolicies = {
+  Discussion: {
+    fields: {
+      comments: paginatedLimitPagination(),
+    },
+  },
+  Group: {
+    fields: {
+      organizedEvents: paginatedLimitPagination([
+        "afterDatetime",
+        "beforeDatetime",
+      ]),
+      activity: paginatedLimitPagination<IActivity>(["type", "author"]),
+    },
+  },
+  Person: {
+    fields: {
+      organizedEvents: pageLimitPagination(),
+      participations: paginatedLimitPagination<IParticipant>(["eventId"]),
+      memberships: paginatedLimitPagination<IMember>(["group"]),
+    },
+  },
+  Event: {
+    fields: {
+      participants: paginatedLimitPagination<IParticipant>(["roles"]),
+      commnents: pageLimitPagination<IComment>(),
+      relatedEvents: pageLimitPagination<IEvent>(),
+    },
+  },
+  RootQueryType: {
+    fields: {
+      relayFollowers: paginatedLimitPagination<IFollower>(),
+      relayFollowings: paginatedLimitPagination<IFollower>([
+        "orderBy",
+        "direction",
+      ]),
+      events: paginatedLimitPagination(),
+      groups: paginatedLimitPagination([
+        "preferredUsername",
+        "name",
+        "domain",
+        "local",
+        "suspended",
+      ]),
+      persons: paginatedLimitPagination([
+        "preferredUsername",
+        "name",
+        "domain",
+        "local",
+        "suspended",
+      ]),
+    },
+  },
+};
 
 export async function refreshAccessToken(
   apolloClient: ApolloClient<NormalizedCacheObject>
@@ -37,3 +113,73 @@ export async function refreshAccessToken(
     return false;
   }
 }
+
+type KeyArgs = FieldPolicy<any>["keyArgs"];
+
+export function pageLimitPagination<T = Reference>(
+  keyArgs: KeyArgs = false
+): FieldPolicy<T[]> {
+  return {
+    keyArgs,
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    merge(existing, incoming, { args }) {
+      console.log("pageLimitPagination");
+      console.log("existing", existing);
+      console.log("incoming", incoming);
+      // console.log("args", args);
+      if (!incoming) return existing;
+      if (!existing) return incoming; // existing will be empty the first time
+
+      return doMerge(existing as Array<T>, incoming as Array<T>, args);
+    },
+  };
+}
+
+export function paginatedLimitPagination<T = Paginate<any>>(
+  keyArgs: KeyArgs = false
+): FieldPolicy<Paginate<T>> {
+  return {
+    keyArgs,
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    merge(existing, incoming, { args }) {
+      console.log("paginatedLimitPagination");
+      console.log("existing", existing);
+      console.log("incoming", incoming);
+      if (!incoming) return existing;
+      if (!existing) return incoming; // existing will be empty the first time
+
+      return {
+        total: incoming.total,
+        elements: doMerge(existing.elements, incoming.elements, args),
+      };
+    },
+  };
+}
+
+function doMerge<T = any>(
+  existing: Array<T>,
+  incoming: Array<T>,
+  args: Record<string, any> | null
+): Array<T> {
+  const merged = existing ? existing.slice(0) : [];
+  let res;
+  if (args) {
+    // Assume an page of 1 if args.page omitted.
+    const { page = 1, limit = 10 } = args;
+    console.log("args, selected", { page, limit });
+    for (let i = 0; i < incoming.length; ++i) {
+      merged[(page - 1) * limit + i] = incoming[i];
+    }
+    res = merged;
+  } else {
+    // It's unusual (probably a mistake) for a paginated field not
+    // to receive any arguments, so you might prefer to throw an
+    // exception here, instead of recovering by appending incoming
+    // onto the existing array.
+    res = [...merged, ...incoming];
+  }
+  console.log("doMerge returns", res);
+  return res;
+}

js/src/components/Account/ActorAutoComplete.vue

@@ -45,7 +45,7 @@
 </template>
 <script lang="ts">
 import { Component, Model, Vue, Watch } from "vue-property-decorator";
-import { debounce } from "lodash";
+import debounce from "lodash/debounce";
 import { IPerson } from "@/types/actor";
 import { SEARCH_PERSONS } from "@/graphql/search";
 import { Paginate } from "@/types/paginate";

js/src/components/Activity/GroupActivityItem.vue

@@ -8,7 +8,9 @@
           slot="group"
           :to="{
             name: RouteName.GROUP,
-            params: { preferredUsername: usernameWithDomain(activity.object) },
+            params: {
+              preferredUsername: subjectParams.group_federated_username,
+            },
           }"
           >{{ subjectParams.group_name }}</router-link
         >

js/src/components/Activity/MemberActivityItem.vue

@@ -18,7 +18,7 @@
           ></popover-actor-card
         >
         <b slot="member" v-else>{{
-          subjectParams.member_preferred_username
+          subjectParams.member_actor_federated_username
         }}</b>
         <popover-actor-card
           :actor="activity.author"
@@ -83,6 +83,8 @@ export default class MemberActivityItem extends mixins(ActivityMixin) {
           return "You added the member {member}.";
         }
         return "{profile} added the member {member}.";
+      case ActivityMemberSubject.MEMBER_JOINED:
+        return "{member} joined the group.";
       case ActivityMemberSubject.MEMBER_UPDATED:
         if (this.subjectParams.member_role && this.subjectParams.old_role) {
           return this.roleUpdate;

js/src/components/Admin/Followers.vue

@@ -10,8 +10,13 @@
       :show-detail-icon="false"
       paginated
       backend-pagination
+      :current-page.sync="page"
+      :aria-next-label="$t('Next page')"
+      :aria-previous-label="$t('Previous page')"
+      :aria-page-label="$t('Page')"
+      :aria-current-label="$t('Current page')"
       :total="relayFollowers.total"
-      :per-page="perPage"
+      :per-page="FOLLOWERS_PER_PAGE"
       @page-change="onFollowersPageChange"
       checkable
       checkbox-position="left"
@@ -123,14 +128,33 @@
   </div>
 </template>
 <script lang="ts">
-import { Component, Mixins } from "vue-property-decorator";
+import { Component, Mixins, Ref } from "vue-property-decorator";
 import { SnackbarProgrammatic as Snackbar } from "buefy";
 import { formatDistanceToNow } from "date-fns";
-import { ACCEPT_RELAY, REJECT_RELAY } from "../../graphql/admin";
+import {
+  ACCEPT_RELAY,
+  REJECT_RELAY,
+  RELAY_FOLLOWERS,
+} from "../../graphql/admin";
 import { IFollower } from "../../types/actor/follower.model";
 import RelayMixin from "../../mixins/relay";
+import RouteName from "@/router/name";
+import { Paginate } from "@/types/paginate";
+
+const FOLLOWERS_PER_PAGE = 10;
 
 @Component({
+  apollo: {
+    relayFollowers: {
+      query: RELAY_FOLLOWERS,
+      variables() {
+        return {
+          page: this.page,
+          limit: FOLLOWERS_PER_PAGE,
+        };
+      },
+    },
+  },
   metaInfo() {
     return {
       title: this.$t("Followers") as string,
@@ -143,14 +167,36 @@ export default class Followers extends Mixins(RelayMixin) {
 
   formatDistanceToNow = formatDistanceToNow;
 
-  async acceptRelays(): Promise<void> {
+  relayFollowers: Paginate<IFollower> = { elements: [], total: 0 };
-    await this.checkedRows.forEach((row: IFollower) => {
+
+  checkedRows: IFollower[] = [];
+
+  FOLLOWERS_PER_PAGE = FOLLOWERS_PER_PAGE;
+
+  @Ref("table") readonly table!: any;
+
+  toggle(row: Record<string, unknown>): void {
+    this.table.toggleDetails(row);
+  }
+
+  get page(): number {
+    return parseInt((this.$route.query.page as string) || "1", 10);
+  }
+
+  set page(page: number) {
+    this.pushRouter(RouteName.RELAY_FOLLOWERS, {
+      page: page.toString(),
+    });
+  }
+
+  acceptRelays(): void {
+    this.checkedRows.forEach((row: IFollower) => {
       this.acceptRelay(`${row.actor.preferredUsername}@${row.actor.domain}`);
     });
   }
 
-  async rejectRelays(): Promise<void> {
+  rejectRelays(): void {
-    await this.checkedRows.forEach((row: IFollower) => {
+    this.checkedRows.forEach((row: IFollower) => {
       this.rejectRelay(`${row.actor.preferredUsername}@${row.actor.domain}`);
     });
   }
@@ -196,5 +242,19 @@ export default class Followers extends Mixins(RelayMixin) {
   get checkedRowsHaveAtLeastOneToApprove(): boolean {
     return this.checkedRows.some((checkedRow) => !checkedRow.approved);
   }
+
+  async onFollowersPageChange(page: number): Promise<void> {
+    this.page = page;
+    try {
+      await this.$apollo.queries.relayFollowers.fetchMore({
+        variables: {
+          page: this.page,
+          limit: FOLLOWERS_PER_PAGE,
+        },
+      });
+    } catch (err) {
+      console.error(err);
+    }
+  }
 }
 </script>

js/src/components/Admin/Followings.vue

@@ -32,8 +32,13 @@
       :show-detail-icon="false"
       paginated
       backend-pagination
+      :current-page.sync="page"
+      :aria-next-label="$t('Next page')"
+      :aria-previous-label="$t('Previous page')"
+      :aria-page-label="$t('Page')"
+      :aria-current-label="$t('Current page')"
       :total="relayFollowings.total"
-      :per-page="perPage"
+      :per-page="FOLLOWINGS_PER_PAGE"
       @page-change="onFollowingsPageChange"
       checkable
       checkbox-position="left"
@@ -127,7 +132,7 @@
         </b-button>
       </template>
     </b-table>
-    <b-message type="is-danger" v-if="relayFollowings.elements.length === 0">{{
+    <b-message type="is-danger" v-if="relayFollowings.total === 0">{{
       $t("You don't follow any instances yet.")
     }}</b-message>
   </div>
@@ -139,8 +144,31 @@ import { formatDistanceToNow } from "date-fns";
 import { ADD_RELAY, REMOVE_RELAY } from "../../graphql/admin";
 import { IFollower } from "../../types/actor/follower.model";
 import RelayMixin from "../../mixins/relay";
+import { RELAY_FOLLOWINGS } from "@/graphql/admin";
+import { Paginate } from "@/types/paginate";
+import RouteName from "@/router/name";
+import {
+  ApolloCache,
+  FetchResult,
+  InMemoryCache,
+  Reference,
+} from "@apollo/client/core";
+import gql from "graphql-tag";
+
+const FOLLOWINGS_PER_PAGE = 10;
 
 @Component({
+  apollo: {
+    relayFollowings: {
+      query: RELAY_FOLLOWINGS,
+      variables() {
+        return {
+          page: this.page,
+          limit: FOLLOWINGS_PER_PAGE,
+        };
+      },
+    },
+  },
   metaInfo() {
     return {
       title: this.$t("Followings") as string,
@@ -155,16 +183,78 @@ export default class Followings extends Mixins(RelayMixin) {
 
   formatDistanceToNow = formatDistanceToNow;
 
+  relayFollowings: Paginate<IFollower> = { elements: [], total: 0 };
+
+  FOLLOWINGS_PER_PAGE = FOLLOWINGS_PER_PAGE;
+
+  checkedRows: IFollower[] = [];
+
+  get page(): number {
+    return parseInt((this.$route.query.page as string) || "1", 10);
+  }
+
+  set page(page: number) {
+    this.pushRouter(RouteName.RELAY_FOLLOWINGS, {
+      page: page.toString(),
+    });
+  }
+
+  async onFollowingsPageChange(page: number): Promise<void> {
+    this.page = page;
+    try {
+      await this.$apollo.queries.relayFollowings.fetchMore({
+        variables: {
+          page: this.page,
+          limit: FOLLOWINGS_PER_PAGE,
+        },
+      });
+    } catch (err) {
+      console.error(err);
+    }
+  }
+
   async followRelay(e: Event): Promise<void> {
     e.preventDefault();
     try {
-      await this.$apollo.mutate({
+      await this.$apollo.mutate<{ relayFollowings: Paginate<IFollower> }>({
         mutation: ADD_RELAY,
         variables: {
           address: this.newRelayAddress.trim(), // trim to fix copy and paste domain name spaces and tabs
         },
+        update(cache: ApolloCache<InMemoryCache>, { data }: FetchResult) {
+          cache.modify({
+            fields: {
+              relayFollowings(
+                existingFollowings = { elements: [], total: 0 },
+                { readField }
+              ) {
+                const newFollowingRef = cache.writeFragment({
+                  id: `${data?.addRelay.__typename}:${data?.addRelay.id}`,
+                  data: data?.addRelay,
+                  fragment: gql`
+                    fragment NewFollowing on Follower {
+                      id
+                    }
+                  `,
+                });
+                if (
+                  existingFollowings.elements.some(
+                    (ref: Reference) =>
+                      readField("id", ref) === data?.addRelay.id
+                  )
+                ) {
+                  return existingFollowings;
+                }
+                return {
+                  total: existingFollowings.total + 1,
+                  elements: [newFollowingRef, ...existingFollowings.elements],
+                };
+              },
+            },
+            broadcast: false,
+          });
+        },
       });
-      await this.$apollo.queries.relayFollowings.refetch();
       this.newRelayAddress = "";
     } catch (err) {
       Snackbar.open({
@@ -175,21 +265,35 @@ export default class Followings extends Mixins(RelayMixin) {
     }
   }
 
-  async removeRelays(): Promise<void> {
+  removeRelays(): void {
-    await this.checkedRows.forEach((row: IFollower) => {
+    this.checkedRows.forEach((row: IFollower) => {
-      this.removeRelay(
+      this.removeRelay(row);
-        `${row.targetActor.preferredUsername}@${row.targetActor.domain}`
-      );
     });
   }
 
-  async removeRelay(address: string): Promise<void> {
+  async removeRelay(follower: IFollower): Promise<void> {
+    const address = `${follower.targetActor.preferredUsername}@${follower.targetActor.domain}`;
     try {
       await this.$apollo.mutate({
         mutation: REMOVE_RELAY,
         variables: {
           address,
         },
+        update(cache: ApolloCache<InMemoryCache>) {
+          cache.modify({
+            fields: {
+              relayFollowings(existingFollowingRefs, { readField }) {
+                return {
+                  total: existingFollowingRefs.total - 1,
+                  elements: existingFollowingRefs.elements.filter(
+                    (followingRef: Reference) =>
+                      follower.id !== readField("id", followingRef)
+                  ),
+                };
+              },
+            },
+          });
+        },
       });
       await this.$apollo.queries.relayFollowings.refetch();
       this.checkedRows = [];

js/src/components/Comment/Comment.vue

@@ -6,32 +6,26 @@
       :id="commentId"
     >
       <popover-actor-card
-        class="media-left"
         :actor="comment.actor"
         :inline="true"
         v-if="comment.actor"
       >
         <figure
-          class="image is-48x48"
+          class="image is-32x32 media-left"
           v-if="!comment.deletedAt && comment.actor.avatar"
         >
           <img class="is-rounded" :src="comment.actor.avatar.url" alt="" />
         </figure>
-        <b-icon
+        <b-icon class="media-left" v-else icon="account-circle" />
-          class="media-left"
-          v-else
-          size="is-large"
-          icon="account-circle"
-        />
       </popover-actor-card>
       <div v-else class="media-left">
         <figure
-          class="image is-48x48"
+          class="image is-32x32"
           v-if="!comment.deletedAt && comment.actor.avatar"
         >
           <img class="is-rounded" :src="comment.actor.avatar.url" alt="" />
         </figure>
-        <b-icon v-else size="is-large" icon="account-circle" />
+        <b-icon v-else icon="account-circle" />
       </div>
       <div class="media-content">
         <div class="content">
@@ -39,23 +33,25 @@
             <strong :class="{ organizer: commentFromOrganizer }">{{
               comment.actor.name
             }}</strong>
-            <small>@{{ usernameWithDomain(comment.actor) }}</small>
+            <small class="has-text-grey">{{
-            <a class="comment-link has-text-grey" :href="commentURL">
+              usernameWithDomain(comment.actor)
-              <small>{{
+            }}</small>
-                formatDistanceToNow(new Date(comment.updatedAt), {
-                  locale: $dateFnsLocale,
-                  addSuffix: true,
-                })
-              }}</small>
-            </a>
           </span>
           <a v-else class="comment-link has-text-grey" :href="commentURL">
             <span>{{ $t("[deleted]") }}</span>
           </a>
+          <a class="comment-link has-text-grey" :href="commentURL">
+            <small>{{
+              formatDistanceToNow(new Date(comment.updatedAt), {
+                locale: $dateFnsLocale,
+                addSuffix: true,
+              })
+            }}</small>
+          </a>
           <span class="icons" v-if="!comment.deletedAt">
             <button
               v-if="comment.actor.id === currentActor.id"
-              @click="$emit('delete-comment', comment)"
+              @click="deleteComment"
             >
               <b-icon icon="delete" size="is-small" aria-hidden="true" />
               <span class="visually-hidden">{{ $t("Delete") }}</span>
@@ -183,7 +179,6 @@ import { CommentModeration } from "@/types/enums";
 import { CommentModel, IComment } from "../../types/comment.model";
 import { CURRENT_ACTOR_CLIENT } from "../../graphql/actor";
 import { IPerson, usernameWithDomain } from "../../types/actor";
-import { COMMENTS_THREADS, FETCH_THREAD_REPLIES } from "../../graphql/comment";
 import { IEvent } from "../../types/event.model";
 import ReportModal from "../Report/ReportModal.vue";
 import { IReport } from "../../types/report.model";
@@ -257,39 +252,15 @@ export default class Comment extends Vue {
     this.$emit("create-comment", this.newComment);
     this.newComment = new CommentModel();
     this.replyTo = false;
+    this.showReplies = true;
   }
 
-  async fetchReplies(): Promise<void> {
+  deleteComment(): void {
-    const parentId = this.comment.id;
+    this.$emit("delete-comment", this.comment);
-    const { data } = await this.$apollo.query<{ thread: IComment[] }>({
+    this.showReplies = false;
-      query: FETCH_THREAD_REPLIES,
+  }
-      variables: {
+
-        threadId: parentId,
+  fetchReplies(): void {
-      },
-    });
-    if (!data) return;
-    const { thread } = data;
-    const eventData = this.$apollo.getClient().readQuery<{ event: IEvent }>({
-      query: COMMENTS_THREADS,
-      variables: {
-        eventUUID: this.event.uuid,
-      },
-    });
-    if (!eventData) return;
-    const { event } = eventData;
-    const { comments } = event;
-    const parentCommentIndex = comments.findIndex(
-      (oldComment) => oldComment.id === parentId
-    );
-    const parentComment = comments[parentCommentIndex];
-    if (!parentComment) return;
-    parentComment.replies = thread;
-    comments[parentCommentIndex] = parentComment;
-    event.comments = comments;
-    this.$apollo.getClient().writeQuery({
-      query: COMMENTS_THREADS,
-      data: { event },
-    });
     this.showReplies = true;
   }
 
@@ -394,8 +365,17 @@ form.reply {
   }
 }
 
-.comment-link small:hover {
+a.comment-link {
-  color: hsl(0, 0%, 21%);
+  text-decoration: none;
+  margin-left: 5px;
+  &:hover {
+    text-decoration: underline;
+  }
+  small {
+    &:hover {
+      color: hsl(0, 0%, 21%);
+    }
+  }
 }
 
 .root-comment .replies {

js/src/components/Comment/CommentTree.vue

@@ -17,26 +17,34 @@
         </figure>
         <div class="media-content">
           <div class="field">
-            <p class="control">
+            <div class="field">
-              <editor
+              <p class="control">
-                ref="commenteditor"
+                <editor
-                mode="comment"
+                  ref="commenteditor"
-                v-model="newComment.text"
+                  mode="comment"
-              />
+                  v-model="newComment.text"
-            </p>
+                />
-            <p class="help is-danger" v-if="emptyCommentError">
+              </p>
-              {{ $t("Comment text can't be empty") }}
+              <p class="help is-danger" v-if="emptyCommentError">
-            </p>
+                {{ $t("Comment text can't be empty") }}
-          </div>
+              </p>
-          <div class="send-comment">
+            </div>
-            <b-button
+            <div class="field notify-participants" v-if="isEventOrganiser">
-              native-type="submit"
+              <b-switch v-model="newComment.isAnnouncement">{{
-              type="is-primary"
+                $t("Notify participants")
-              class="comment-button-submit"
+              }}</b-switch>
-              >{{ $t("Post a comment") }}</b-button
+            </div>
-            >
           </div>
         </div>
+        <div class="send-comment">
+          <b-button
+            native-type="submit"
+            type="is-primary"
+            class="comment-button-submit"
+            icon-left="send"
+            :aria-label="$t('Post a comment')"
+          />
+        </div>
       </article>
     </form>
     <b-notification v-else-if="isConnected" :closable="false">{{
@@ -82,20 +90,18 @@ import { CommentModel, IComment } from "../../types/comment.model";
 import {
   CREATE_COMMENT_FROM_EVENT,
   DELETE_COMMENT,
-  COMMENTS_THREADS,
+  COMMENTS_THREADS_WITH_REPLIES,
-  FETCH_THREAD_REPLIES,
 } from "../../graphql/comment";
 import { CURRENT_ACTOR_CLIENT } from "../../graphql/actor";
 import { IPerson } from "../../types/actor";
 import { IEvent } from "../../types/event.model";
+import { ApolloCache, FetchResult, InMemoryCache } from "@apollo/client/core";
 
 @Component({
   apollo: {
-    currentActor: {
+    currentActor: CURRENT_ACTOR_CLIENT,
-      query: CURRENT_ACTOR_CLIENT,
-    },
     comments: {
-      query: COMMENTS_THREADS,
+      query: COMMENTS_THREADS_WITH_REPLIES,
       variables() {
         return {
           eventUUID: this.event.uuid,
@@ -156,24 +162,23 @@ export default class CommentTree extends Vue {
           inReplyToCommentId: comment.inReplyToComment
             ? comment.inReplyToComment.id
             : null,
+          isAnnouncement: comment.isAnnouncement,
         },
-        update: (store, { data }) => {
+        update: (store: ApolloCache<InMemoryCache>, { data }: FetchResult) => {
           if (data == null) return;
-          const newComment = data.createComment;
-
           // comments are attached to the event, so we can pass it to replies later
-          newComment.event = this.event;
+          const newComment = { ...data.createComment, event: this.event };
 
           // we load all existing threads
           const commentThreadsData = store.readQuery<{ event: IEvent }>({
-            query: COMMENTS_THREADS,
+            query: COMMENTS_THREADS_WITH_REPLIES,
             variables: {
               eventUUID: this.event.uuid,
             },
           });
           if (!commentThreadsData) return;
           const { event } = commentThreadsData;
-          const { comments: oldComments } = event;
+          const oldComments = [...event.comments];
 
           // if it's no a root comment, we first need to find
           // existing replies and add the new reply to it
@@ -184,44 +189,25 @@ export default class CommentTree extends Vue {
             );
             const parentComment = oldComments[parentCommentIndex];
 
-            let oldReplyList: IComment[] = [];
+            // replace the root comment with has the updated list of replies in the thread list
-            try {
+            oldComments.splice(parentCommentIndex, 1, {
-              const threadData = store.readQuery<{ thread: IComment[] }>({
+              ...parentComment,
-                query: FETCH_THREAD_REPLIES,
+              replies: [...parentComment.replies, newComment],
-                variables: {
+            });
-                  threadId: parentComment.id,
-                },
-              });
-              if (!threadData) return;
-              oldReplyList = threadData.thread;
-            } catch (e) {
-              // This simply means there's no loaded replies yet
-            } finally {
-              oldReplyList.push(newComment);
-
-              // save the updated list of replies (with the one we've just added)
-              store.writeQuery({
-                query: FETCH_THREAD_REPLIES,
-                data: { thread: oldReplyList },
-                variables: {
-                  threadId: parentComment.id,
-                },
-              });
-
-              // replace the root comment with has the updated list of replies in the thread list
-              parentComment.replies = oldReplyList;
-              event.comments.splice(parentCommentIndex, 1, parentComment);
-            }
           } else {
             // otherwise it's simply a new thread and we add it to the list
             oldComments.push(newComment);
           }
 
           // finally we save the thread list
-          event.comments = oldComments;
           store.writeQuery({
-            query: COMMENTS_THREADS,
+            query: COMMENTS_THREADS_WITH_REPLIES,
-            data: { event },
+            data: {
+              event: {
+                ...event,
+                comments: oldComments,
+              },
+            },
             variables: {
               eventUUID: this.event.uuid,
             },
@@ -249,63 +235,66 @@ export default class CommentTree extends Vue {
         variables: {
           commentId: comment.id,
         },
-        update: (store, { data }) => {
+        update: (store: ApolloCache<InMemoryCache>, { data }: FetchResult) => {
           if (data == null) return;
           const deletedCommentId = data.deleteComment.id;
 
           const commentsData = store.readQuery<{ event: IEvent }>({
-            query: COMMENTS_THREADS,
+            query: COMMENTS_THREADS_WITH_REPLIES,
             variables: {
               eventUUID: this.event.uuid,
             },
           });
           if (!commentsData) return;
           const { event } = commentsData;
-          const { comments: oldComments } = event;
+          let updatedComments: IComment[] = [...event.comments];
 
           if (comment.originComment) {
             // we have deleted a reply to a thread
-            const localData = store.readQuery<{ thread: IComment[] }>({
-              query: FETCH_THREAD_REPLIES,
-              variables: {
-                threadId: comment.originComment.id,
-              },
-            });
-            if (!localData) return;
-            const { thread: oldReplyList } = localData;
-            const replies = oldReplyList.filter(
-              (reply) => reply.id !== deletedCommentId
-            );
-            store.writeQuery({
-              query: FETCH_THREAD_REPLIES,
-              variables: {
-                threadId: comment.originComment.id,
-              },
-              data: { thread: replies },
-            });
-
             const { originComment } = comment;
 
-            const parentCommentIndex = oldComments.findIndex(
+            const parentCommentIndex = updatedComments.findIndex(
               (oldComment) => oldComment.id === originComment.id
             );
-            const parentComment = oldComments[parentCommentIndex];
+            const parentComment = updatedComments[parentCommentIndex];
-            parentComment.replies = replies;
+            const updatedReplies = parentComment.replies.map((reply) => {
-            parentComment.totalReplies -= 1;
+              if (reply.id === deletedCommentId) {
-            oldComments.splice(parentCommentIndex, 1, parentComment);
+                return {
-            event.comments = oldComments;
+                  ...reply,
+                  deletedAt: new Date().toString(),
+                };
+              }
+              return reply;
+            });
+            updatedComments.splice(parentCommentIndex, 1, {
+              ...parentComment,
+              replies: updatedReplies,
+              totalReplies: parentComment.totalReplies - 1,
+            });
+            console.log("updatedComments", updatedComments);
           } else {
             // we have deleted a thread itself
-            event.comments = oldComments.filter(
+            updatedComments = updatedComments.map((reply) => {
-              (reply) => reply.id !== deletedCommentId
+              if (reply.id === deletedCommentId) {
-            );
+                return {
+                  ...reply,
+                  deletedAt: new Date().toString(),
+                };
+              }
+              return reply;
+            });
           }
           store.writeQuery({
-            query: COMMENTS_THREADS,
+            query: COMMENTS_THREADS_WITH_REPLIES,
             variables: {
               eventUUID: this.event.uuid,
             },
-            data: { event },
+            data: {
+              event: {
+                ...event,
+                comments: updatedComments,
+              },
+            },
           });
         },
       });
@@ -376,6 +365,10 @@ form.new-comment {
       flex: 1;
       padding-right: 10px;
       margin-bottom: 0;
+
+      &.notify-participants {
+        margin-top: 0.5rem;
+      }
     }
   }
 }

js/src/components/Editor.vue

@@ -255,6 +255,7 @@ export default class EditorComponent extends Vue {
         }),
         ...defaultExtensions(),
       ],
+      injectCSS: false,
       content: this.value,
       onUpdate: () => {
         this.$emit("input", this.editor?.getHTML());

js/src/components/Editor/Image.ts

@@ -1,10 +1,10 @@
 import { UPLOAD_MEDIA } from "@/graphql/upload";
 import apolloProvider from "@/vue-apollo";
-import ApolloClient from "apollo-client";
+import { ApolloClient } from "@apollo/client/core/ApolloClient";
-import { NormalizedCacheObject } from "apollo-cache-inmemory";
 import { Plugin } from "prosemirror-state";
 import { EditorView } from "prosemirror-view";
 import Image from "@tiptap/extension-image";
+import { NormalizedCacheObject } from "@apollo/client/cache";
 
 /* eslint-disable class-methods-use-this */
 

js/src/components/Editor/Mention.ts

@@ -2,11 +2,11 @@ import { SEARCH_PERSONS } from "@/graphql/search";
 import { VueRenderer } from "@tiptap/vue-2";
 import tippy from "tippy.js";
 import MentionList from "./MentionList.vue";
-import ApolloClient from "apollo-client";
+import { ApolloClient } from "@apollo/client/core/ApolloClient";
-import { NormalizedCacheObject } from "apollo-cache-inmemory";
 import apolloProvider from "@/vue-apollo";
 import { IPerson } from "@/types/actor";
 import pDebounce from "p-debounce";
+import { NormalizedCacheObject } from "@apollo/client/cache/inmemory/types";
 
 const client =
   apolloProvider.defaultClient as ApolloClient<NormalizedCacheObject>;

js/src/components/Event/AddressAutoComplete.vue

@@ -54,7 +54,8 @@
 <script lang="ts">
 import { Component, Prop, Vue, Watch } from "vue-property-decorator";
 import { LatLng } from "leaflet";
-import { debounce, DebouncedFunc } from "lodash";
+import debounce from "lodash/debounce";
+import { DebouncedFunc } from "lodash";
 import { Address, IAddress } from "../../types/address.model";
 import { ADDRESS, REVERSE_GEOCODE } from "../../graphql/address";
 import { CONFIG } from "../../graphql/config";

js/src/components/Event/FullAddressAutoComplete.vue

@@ -111,7 +111,8 @@
 <script lang="ts">
 import { Component, Prop, Vue, Watch } from "vue-property-decorator";
 import { LatLng } from "leaflet";
-import { debounce, DebouncedFunc } from "lodash";
+import debounce from "lodash/debounce";
+import { DebouncedFunc } from "lodash";
 import { Address, IAddress } from "../../types/address.model";
 import { ADDRESS, REVERSE_GEOCODE } from "../../graphql/address";
 import { CONFIG } from "../../graphql/config";

js/src/components/Event/TagInput.vue

@@ -28,7 +28,8 @@
 </template>
 <script lang="ts">
 import { Component, Prop, Vue } from "vue-property-decorator";
-import { get, differenceBy } from "lodash";
+import get from "lodash/get";
+import differenceBy from "lodash/differenceBy";
 import { ITag } from "../../types/tag.model";
 
 @Component({

js/src/components/NavBar.vue

@@ -234,7 +234,9 @@ export default class NavBar extends Vue {
       query: IDENTITIES,
     });
     if (data) {
-      this.identities = data.identities.map((identity) => new Person(identity));
+      this.identities = data.identities.map(
+        (identity: IPerson) => new Person(identity)
+      );
 
       // If we don't have any identities, the user has validated their account,
       // is logging for the first time but didn't create an identity somehow

js/src/components/Participation/ParticipationWithoutAccount.vue

@@ -134,6 +134,7 @@ import { addLocalUnconfirmedAnonymousParticipation } from "@/services/AnonymousP
 import { EventJoinOptions, ParticipantRole } from "@/types/enums";
 import RouteName from "@/router/name";
 import { IParticipant } from "../../types/participant.model";
+import { ApolloCache, FetchResult, InMemoryCache } from "@apollo/client/core";
 
 @Component({
   apollo: {
@@ -195,7 +196,10 @@ export default class ParticipationWithoutAccount extends Vue {
           message: this.anonymousParticipation.message,
           locale: this.$i18n.locale,
         },
-        update: (store, { data: updateData }) => {
+        update: (
+          store: ApolloCache<InMemoryCache>,
+          { data: updateData }: FetchResult
+        ) => {
           if (updateData == null) {
             console.error(
               "Cannot update event participant cache, because of data null value."
@@ -213,25 +217,24 @@ export default class ParticipationWithoutAccount extends Vue {
             );
             return;
           }
-          const { event } = cachedData;
+          const participantStats = { ...cachedData.event.participantStats };
-          if (event === null) {
-            console.error(
-              "Cannot update event participant cache, because of null value."
-            );
-            return;
-          }
 
           if (updateData.joinEvent.role === ParticipantRole.NOT_CONFIRMED) {
-            event.participantStats.notConfirmed += 1;
+            participantStats.notConfirmed += 1;
           } else {
-            event.participantStats.going += 1;
+            participantStats.going += 1;
-            event.participantStats.participant += 1;
+            participantStats.participant += 1;
           }
 
           store.writeQuery({
             query: FETCH_EVENT_BASIC,
             variables: { uuid: this.event.uuid },
-            data: { event },
+            data: {
+              event: {
+                ...cachedData.event,
+                participantStats,
+              },
+            },
           });
         },
       });

js/src/components/PictureUpload.vue

@@ -152,7 +152,7 @@ export default class PictureUpload extends Vue {
         console.error(e);
       }
     }
-    return this.defaultImage ? this.defaultImage.url : null;
+    return this.defaultImage?.url;
   }
 
   onFileChanged(file: File | null): void {

js/src/components/Todo/FullTodo.vue

@@ -18,7 +18,8 @@
 </template>
 <script lang="ts">
 import { Component, Prop, Vue } from "vue-property-decorator";
-import { debounce, DebouncedFunc } from "lodash";
+import debounce from "lodash/debounce";
+import { DebouncedFunc } from "lodash";
 import { SnackbarProgrammatic as Snackbar } from "buefy";
 import { ITodo } from "../../types/todos";
 import RouteName from "../../router/name";

js/src/graphql/actor.ts

@@ -37,12 +37,14 @@ export const FETCH_PERSON = gql`
 `;
 
 export const GET_PERSON = gql`
-  query (
+  query Person(
     $actorId: ID!
     $organizedEventsPage: Int
     $organizedEventsLimit: Int
     $participationPage: Int
     $participationLimit: Int
+    $membershipsPage: Int
+    $membershipsLimit: Int
   ) {
     person(id: $actorId) {
       id
@@ -89,6 +91,24 @@ export const GET_PERSON = gql`
           }
         }
       }
+      memberships(page: $membershipsPage, limit: $membershipsLimit) {
+        total
+        elements {
+          id
+          role
+          insertedAt
+          parent {
+            id
+            preferredUsername
+            name
+            domain
+            avatar {
+              id
+              url
+            }
+          }
+        }
+      }
       user {
         id
         email
@@ -353,7 +373,7 @@ export const LOGGED_USER_MEMBERSHIPS = gql`
 `;
 
 export const IDENTITIES = gql`
-  query {
+  query Identities {
     identities {
       id
       avatar {
@@ -433,7 +453,10 @@ export const PERSON_MEMBERSHIP_GROUP = gql`
 `;
 
 export const GROUP_MEMBERSHIP_SUBSCRIPTION_CHANGED = gql`
-  subscription ($actorId: ID!, $group: String!) {
+  subscription GroupMembershipSubscriptionChanged(
+    $actorId: ID!
+    $group: String!
+  ) {
     groupMembershipChanged(personId: $actorId, group: $group) {
       id
       memberships {

js/src/graphql/admin.ts

@@ -37,6 +37,7 @@ export const DASHBOARD = gql`
 
 export const RELAY_FRAGMENT = gql`
   fragment relayFragment on Follower {
+    id
     actor {
       id
       preferredUsername

js/src/graphql/auth.ts

@@ -46,3 +46,9 @@ export const REFRESH_TOKEN = gql`
     }
   }
 `;
+
+export const LOGOUT = gql`
+  mutation Logout($refreshToken: String!) {
+    logout(refreshToken: $refreshToken)
+  }
+`;

js/src/graphql/comment.ts

@@ -21,8 +21,10 @@ export const COMMENT_FIELDS_FRAGMENT = gql`
       summary
     }
     totalReplies
+    insertedAt
     updatedAt
     deletedAt
+    isAnnouncement
   }
 `;
 
@@ -37,6 +39,12 @@ export const COMMENT_RECURSIVE_FRAGMENT = gql`
     }
     replies {
       ...CommentFields
+      inReplyToComment {
+        ...CommentFields
+      }
+      originComment {
+        ...CommentFields
+      }
       replies {
         ...CommentFields
       }
@@ -46,7 +54,7 @@ export const COMMENT_RECURSIVE_FRAGMENT = gql`
 `;
 
 export const FETCH_THREAD_REPLIES = gql`
-  query ($threadId: ID!) {
+  query FetchThreadReplies($threadId: ID!) {
     thread(id: $threadId) {
       ...CommentRecursive
     }
@@ -55,7 +63,7 @@ export const FETCH_THREAD_REPLIES = gql`
 `;
 
 export const COMMENTS_THREADS = gql`
-  query ($eventUUID: UUID!) {
+  query CommentThreads($eventUUID: UUID!) {
     event(uuid: $eventUUID) {
       id
       uuid
@@ -67,16 +75,31 @@ export const COMMENTS_THREADS = gql`
   ${COMMENT_FIELDS_FRAGMENT}
 `;
 
+export const COMMENTS_THREADS_WITH_REPLIES = gql`
+  query CommentThreadsWithReplies($eventUUID: UUID!) {
+    event(uuid: $eventUUID) {
+      id
+      uuid
+      comments {
+        ...CommentRecursive
+      }
+    }
+  }
+  ${COMMENT_RECURSIVE_FRAGMENT}
+`;
+
 export const CREATE_COMMENT_FROM_EVENT = gql`
   mutation CreateCommentFromEvent(
     $eventId: ID!
     $text: String!
     $inReplyToCommentId: ID
+    $isAnnouncement: Boolean
   ) {
     createComment(
       eventId: $eventId
       text: $text
       inReplyToCommentId: $inReplyToCommentId
+      isAnnouncement: $isAnnouncement
     ) {
       ...CommentRecursive
     }

js/src/graphql/config.ts

@@ -1,7 +1,7 @@
 import gql from "graphql-tag";
 
 export const CONFIG = gql`
-  query {
+  query FullConfig {
     config {
       name
       description
@@ -84,6 +84,10 @@ export const CONFIG = gql`
       instanceFeeds {
         enabled
       }
+      webPush {
+        enabled
+        publicKey
+      }
     }
   }
 `;
@@ -160,3 +164,14 @@ export const TIMEZONES = gql`
     }
   }
 `;
+
+export const WEB_PUSH = gql`
+  query {
+    config {
+      webPush {
+        enabled
+        publicKey
+      }
+    }
+  }
+`;

js/src/graphql/discussion.ts

@@ -67,6 +67,17 @@ export const DISCUSSION_FIELDS_FRAGMENT = gql`
       text
       insertedAt
       updatedAt
+      deletedAt
+      publishedAt
+      actor {
+        id
+        domain
+        name
+        preferredUsername
+        avatar {
+          url
+        }
+      }
     }
     actor {
       id
@@ -104,8 +115,7 @@ export const REPLY_TO_DISCUSSION = gql`
 export const GET_DISCUSSION = gql`
   query getDiscussion($slug: String!, $page: Int, $limit: Int) {
     discussion(slug: $slug) {
-      comments(page: $page, limit: $limit)
+      comments(page: $page, limit: $limit) {
-        @connection(key: "discussion-comments", filter: ["slug"]) {
         total
         elements {
           id
@@ -158,6 +168,8 @@ export const DISCUSSION_COMMENT_CHANGED = gql`
         text
         updatedAt
         insertedAt
+        deletedAt
+        publishedAt
         actor {
           id
           preferredUsername

js/src/graphql/event.ts

@@ -76,7 +76,7 @@ const optionsQuery = `
 `;
 
 export const FETCH_EVENT = gql`
-  query($uuid:UUID!) {
+  query FetchEvent($uuid:UUID!) {
     event(uuid: $uuid) {
       id,
       uuid,
@@ -532,7 +532,7 @@ export const DELETE_EVENT = gql`
 `;
 
 export const PARTICIPANTS = gql`
-  query($uuid: UUID!, $page: Int, $limit: Int, $roles: String) {
+  query Participants($uuid: UUID!, $page: Int, $limit: Int, $roles: String) {
     event(uuid: $uuid) {
       id,
       uuid,
@@ -551,7 +551,7 @@ export const PARTICIPANTS = gql`
 `;
 
 export const EVENT_PERSON_PARTICIPATION = gql`
-  query ($actorId: ID!, $eventId: ID!) {
+  query EventPersonParticipation($actorId: ID!, $eventId: ID!) {
     person(id: $actorId) {
       id
       participations(eventId: $eventId) {
@@ -572,7 +572,10 @@ export const EVENT_PERSON_PARTICIPATION = gql`
 `;
 
 export const EVENT_PERSON_PARTICIPATION_SUBSCRIPTION_CHANGED = gql`
-  subscription ($actorId: ID!, $eventId: ID!) {
+  subscription EventPersonParticipationSubscriptionChanged(
+    $actorId: ID!
+    $eventId: ID!
+  ) {
     eventPersonParticipationChanged(personId: $actorId) {
       id
       participations(eventId: $eventId) {
@@ -593,7 +596,7 @@ export const EVENT_PERSON_PARTICIPATION_SUBSCRIPTION_CHANGED = gql`
 `;
 
 export const FETCH_GROUP_EVENTS = gql`
-  query (
+  query FetchGroupEvents(
     $name: String!
     $afterDateTime: DateTime
     $beforeDateTime: DateTime

js/src/graphql/group.ts

@@ -119,19 +119,19 @@ export const GROUP_FIELDS_FRAGMENTS = gql`
       }
       total
     }
-    discussions {
+    discussions(page: $discussionsPage, limit: $discussionsLimit) {
       total
       elements {
         ...DiscussionBasicFields
       }
     }
-    posts {
+    posts(page: $postsPage, limit: $postsLimit) {
       total
       elements {
         ...PostBasicFields
       }
     }
-    members {
+    members(page: $membersPage, limit: $membersLimit) {
       elements {
         id
         role
@@ -194,6 +194,12 @@ export const FETCH_GROUP = gql`
     $beforeDateTime: DateTime
     $organisedEventsPage: Int
     $organisedEventslimit: Int
+    $postsPage: Int
+    $postsLimit: Int
+    $membersPage: Int
+    $membersLimit: Int
+    $discussionsPage: Int
+    $discussionsLimit: Int
   ) {
     group(preferredUsername: $name) {
       ...GroupFullFields
@@ -212,6 +218,12 @@ export const GET_GROUP = gql`
     $beforeDateTime: DateTime
     $organisedEventsPage: Int
     $organisedEventslimit: Int
+    $postsPage: Int
+    $postsLimit: Int
+    $membersPage: Int
+    $membersLimit: Int
+    $discussionsPage: Int
+    $discussionsLimit: Int
   ) {
     getGroup(id: $id) {
       mediaSize

js/src/graphql/report.ts

@@ -1,41 +1,44 @@
 import gql from "graphql-tag";
 
 export const REPORTS = gql`
-  query Reports($status: ReportStatus) {
+  query Reports($status: ReportStatus, $page: Int, $limit: Int) {
-    reports(status: $status) {
+    reports(status: $status, page: $page, limit: $limit) {
-      id
+      total
-      reported {
+      elements {
         id
-        preferredUsername
+        reported {
-        domain
-        name
-        avatar {
           id
-          url
+          preferredUsername
+          domain
+          name
+          avatar {
+            id
+            url
+          }
         }
-      }
+        reporter {
-      reporter {
-        id
-        preferredUsername
-        name
-        avatar {
           id
-          url
+          preferredUsername
+          name
+          avatar {
+            id
+            url
+          }
+          domain
+          type
         }
-        domain
+        event {
-        type
-      }
-      event {
-        id
-        uuid
-        title
-        picture {
           id
-          url
+          uuid
+          title
+          picture {
+            id
+            url
+          }
         }
+        status
+        content
       }
-      status
-      content
     }
   }
 `;

js/src/graphql/user.ts

@@ -91,7 +91,7 @@ export const SUSPEND_USER = gql`
 `;
 
 export const CURRENT_USER_CLIENT = gql`
-  query {
+  query CurrentUserClient {
     currentUser @client {
       id
       email
@@ -171,6 +171,38 @@ export const SET_USER_SETTINGS = gql`
   ${USER_SETTINGS_FRAGMENT}
 `;
 
+export const USER_NOTIFICATIONS = gql`
+  query UserNotifications {
+    loggedUser {
+      id
+      locale
+      settings {
+        ...UserSettingFragment
+      }
+      activitySettings {
+        key
+        method
+        enabled
+      }
+    }
+  }
+  ${USER_SETTINGS_FRAGMENT}
+`;
+
+export const UPDATE_ACTIVITY_SETTING = gql`
+  mutation UpdateActivitySetting(
+    $key: String!
+    $method: String!
+    $enabled: Boolean!
+  ) {
+    updateActivitySetting(key: $key, method: $method, enabled: $enabled) {
+      key
+      method
+      enabled
+    }
+  }
+`;
+
 export const LIST_USERS = gql`
   query ListUsers($email: String, $page: Int, $limit: Int) {
     users(email: $email, page: $page, limit: $limit) {

js/src/graphql/webPush.ts

@@ -0,0 +1,13 @@
+import gql from "graphql-tag";
+
+export const REGISTER_PUSH_MUTATION = gql`
+  mutation RegisterPush($endpoint: String!, $auth: String!, $p256dh: String!) {
+    registerPush(endpoint: $endpoint, auth: $auth, p256dh: $p256dh)
+  }
+`;
+
+export const UNREGISTER_PUSH_MUTATION = gql`
+  mutation UnRegisterPush($endpoint: String!) {
+    unregisterPush(endpoint: $endpoint)
+  }
+`;

js/src/i18n/en_US.json

@@ -990,5 +990,56 @@
   "{moderator} has unsuspended group {profile}": "{moderator} has unsuspended group {profile}",
   "{moderator} has done an unknown action": "{moderator} has done an unknown action",
   "{moderator} has deleted a comment from {author} under the event {event}": "{moderator} has deleted a comment from {author} under the event {event}",
-  "{moderator} has deleted a comment from {author}": "{moderator} has deleted a comment from {author}"
+  "{moderator} has deleted a comment from {author}": "{moderator} has deleted a comment from {author}",
+  "You are offline": "You are offline",
+  "Create a new profile": "Create a new profile",
+  "Edit profile {profile}": "Edit profile {profile}",
+  "Identities": "Identities",
+  "Profile": "Profile",
+  "Register": "Register",
+  "No members found": "No members found",
+  "No organized events found": "No organized events found",
+  "Error while suspending group": "Error while suspending group",
+  "Triggered profile refreshment": "Triggered profile refreshment",
+  "No organized events listed": "No organized events listed",
+  "No participations listed": "No participations listed",
+  "{number} memberships": "{number} memberships",
+  "Group": "Group",
+  "No memberships found": "No memberships found",
+  "No group matches the filters": "No group matches the filters",
+  "{group} events": "{group} events",
+  "Interact with a remote content": "Interact with a remote content",
+  "Page not found": "Page not found",
+  "{folder} - Resources": "{folder} - Resources",
+  "General settings": "General settings",
+  "Unsubscribe to WebPush": "Unsubscribe to WebPush",
+  "WebPush": "WebPush",
+  "You can't use webpush in this browser.": "You can't use webpush in this browser.",
+  "Notify participants": "Notify participants",
+  "Browser notifications": "Browser notifications",
+  "Unsubscribe to browser notifications": "Unsubscribe to browser notifications",
+  "Activate browser notification": "Activate browser notification",
+  "You can't use notifications in this browser.": "You can't use notifications in this browser.",
+  "Notification settings": "Notification settings",
+  "Select the activities for which you wish to receive an email or a push notification.": "Select the activities for which you wish to receive an email or a push notification.",
+  "Push": "Push",
+  "Mentions": "Mentions",
+  "I've been mentionned in a comment under an event": "I've been mentionned in a comment under an event",
+  "I've been mentionned in a group discussion": "I've been mentionned in a group discussion",
+  "An event I'm going to has been updated": "An event I'm going to has been updated",
+  "An event I'm going to has posted an announcement": "An event I'm going to has posted an announcement",
+  "An event I'm organizing has a new pending participation": "An event I'm organizing has a new pending participation",
+  "An event I'm organizing has a new participation": "An event I'm organizing has a new participation",
+  "An event I'm organizing has a new comment": "An event I'm organizing has a new comment",
+  "Group activity": "Group activity",
+  "An event from one of my groups has been published": "An event from one of my groups has been published",
+  "An event from one of my groups has been updated or deleted": "An event from one of my groups has been updated or deleted",
+  "A discussion has been created or updated": "A discussion has been created or updated",
+  "A post has been published": "A post has been published",
+  "A post has been updated": "A post has been updated",
+  "A resource has been created or updated": "A resource has been created or updated",
+  "A member requested to join one of my groups": "A member requested to join one of my groups",
+  "A member has been updated": "A member has been updated",
+  "User settings": "User settings",
+  "You changed your email or password": "You changed your email or password"
 }

js/src/i18n/fr_FR.json

@@ -1047,7 +1047,7 @@
   "{moderator} suspended group {profile}": "{moderator} a suspendu le groupe {profile}",
   "{moderator} suspended profile {profile}": "{moderator} a suspendu le profil {profile}",
   "{nb} km": "{nb} km",
-  "{number} members": "{number} membres",
+  "{number} members": "Aucun⋅e membre|Un⋅e membre|{number} membres",
   "{number} organized events": "Aucun événement organisé|Un événement organisé|{number} événements organisés",
   "{number} participations": "Aucune participation|Une participation|{number} participations",
   "{number} posts": "Aucun billet|Un billet|{number} billets",
@@ -1084,5 +1084,53 @@
   "{profile} updated the member {member}.": "{profile} a mis à jour le ou la membre {member}.",
   "{title} ({count} todos)": "{title} ({count} todos)",
   "{username} was invited to {group}": "{username} a été invité à {group}",
-  "© The OpenStreetMap Contributors": "© Les Contributeur⋅ices OpenStreetMap"
+  "© The OpenStreetMap Contributors": "© Les Contributeur⋅ices OpenStreetMap",
+  "You are offline": "Vous êtes hors-ligne",
+  "Create a new profile": "Créer un nouveau profil",
+  "Edit profile {profile}": "Éditer le profil {profile}",
+  "Identities": "Identités",
+  "Profile": "Profil",
+  "No members found": "Aucun⋅e membre trouvé⋅e",
+  "No organized events found": "Aucun événement organisé trouvé",
+  "Error while suspending group": "Erreur lors de la suspension du groupe",
+  "Triggered profile refreshment": "Rafraîchissement du profil demandé",
+  "No organized events listed": "Aucun événement organisé listé",
+  "No participations listed": "Aucune participation listée",
+  "{number} memberships": "{number} adhésions",
+  "No memberships found": "Aucune adhésion trouvée",
+  "No group matches the filters": "Aucun groupe ne correspond aux filtres",
+  "{group} events": "Événements de {group}",
+  "Interact with a remote content": "Interagir avec un contenu distant",
+  "{folder} - Resources": "{folder} - Ressources",
+  "General settings": "Paramètres généraux",
+  "Unsubscribe to WebPush": "Se désinscrire de WebPush",
+  "WebPush": "WebPush",
+  "You can't use webpush in this browser.": "Vous ne pouvez pas utiliser webpush dans ce navigateur.",
+  "Notify participants": "Notifier les participant⋅es",
+  "Browser notifications": "Notifications du navigateur",
+  "Unsubscribe to browser notifications": "Se désabonner des notifications du navigateur",
+  "Activate browser notification": "Activer le notifications du navigateur",
+  "You can't use notifications in this browser.": "Vous ne pouvez pas utiliser les notifications dans ce navigateur.",
+  "Notification settings": "Paramètres des notifications",
+  "Select the activities for which you wish to receive an email or a push notification.": "Sélectionnez les activités pour lesquelles vous souhaitez recevoir un email ou une notification push.",
+  "Push": "Push",
+  "Mentions": "Mentions",
+  "I've been mentionned in a comment under an event": "J'ai été mentionné⋅e dans un commentaire sous un événement",
+  "I've been mentionned in a group discussion": "J'ai été mentionné⋅e dans une discussion d'un groupe",
+  "An event I'm going to has been updated": "Un événement auquel je participe a été mis à jour",
+  "An event I'm going to has posted an announcement": "Un événement auquel je participe a posté une mise à jour",
+  "An event I'm organizing has a new pending participation": "Un événement que j'organise a une nouvelle participation en attente",
+  "An event I'm organizing has a new participation": "Un événement que j'organise a une nouvelle participation",
+  "An event I'm organizing has a new comment": "Un événement que j'organise a un nouveau commentaire",
+  "Group activity": "Activité des groupes",
+  "An event from one of my groups has been published": "Un événement d'un de mes groupes a été publié",
+  "An event from one of my groups has been updated or deleted": "Un événement d'un de mes groupes a été mis à jour ou supprimé",
+  "A discussion has been created or updated": "Une discussion a été créée ou mise à jour",
+  "A post has been published": "Un billet a été publié",
+  "A post has been updated": "Un billet a été mis à jour",
+  "A resource has been created or updated": "Une resource a été créée ou mise à jour",
+  "A member requested to join one of my groups": "Un membre a demandé a rejoindre l'un de mes groupes",
+  "A member has been updated": "Un membre a été mis à jour",
+  "User settings": "Paramètres utilisateur⋅ices",
+  "You changed your email or password": "Vous avez modifié votre email ou votre mot de passe"
 }

js/src/mixins/event.ts

@@ -11,6 +11,7 @@ import {
   LEAVE_EVENT,
 } from "../graphql/event";
 import { IPerson } from "../types/actor";
+import { ApolloCache, FetchResult, InMemoryCache } from "@apollo/client/core";
 
 @Component
 export default class EventMixin extends mixins(Vue) {
@@ -30,7 +31,7 @@ export default class EventMixin extends mixins(Vue) {
           actorId,
           token,
         },
-        update: (store, { data }) => {
+        update: (store: ApolloCache<InMemoryCache>, { data }: FetchResult) => {
           if (data == null) return;
           let participation;
 
@@ -43,19 +44,18 @@ export default class EventMixin extends mixins(Vue) {
             });
             if (participationCachedData == null) return;
             const { person } = participationCachedData;
-            if (person === null) {
-              console.error(
-                "Cannot update participation cache, because of null value."
-              );
-              return;
-            }
             [participation] = person.participations.elements;
-            person.participations.elements = [];
+
-            person.participations.total = 0;
+            store.modify({
-            store.writeQuery({
+              id: `Person:${actorId}`,
-              query: EVENT_PERSON_PARTICIPATION,
+              fields: {
-              variables: { eventId: event.id, actorId },
+                participations() {
-              data: { person },
+                  return {
+                    elements: [],
+                    total: 0,
+                  };
+                },
+              },
             });
           }
 
@@ -69,21 +69,27 @@ export default class EventMixin extends mixins(Vue) {
             console.error("Cannot update event cache, because of null value.");
             return;
           }
+          const participantStats = { ...eventCached.participantStats };
           if (
             participation &&
-            participation.role === ParticipantRole.NOT_APPROVED
+            participation?.role === ParticipantRole.NOT_APPROVED
           ) {
-            eventCached.participantStats.notApproved -= 1;
+            participantStats.notApproved -= 1;
           } else if (anonymousParticipationConfirmed === false) {
-            eventCached.participantStats.notConfirmed -= 1;
+            participantStats.notConfirmed -= 1;
           } else {
-            eventCached.participantStats.going -= 1;
+            participantStats.going -= 1;
-            eventCached.participantStats.participant -= 1;
+            participantStats.participant -= 1;
           }
           store.writeQuery({
             query: FETCH_EVENT,
             variables: { uuid: event.uuid },
-            data: { event: eventCached },
+            data: {
+              event: {
+                ...eventCached,
+                participantStats,
+              },
+            },
           });
         },
       });

js/src/mixins/relay.ts

@@ -1,106 +1,30 @@
-import { Component, Vue, Ref } from "vue-property-decorator";
 import { IActor } from "@/types/actor";
-import { IFollower } from "@/types/actor/follower.model";
-import { RELAY_FOLLOWERS, RELAY_FOLLOWINGS } from "@/graphql/admin";
-import { Paginate } from "@/types/paginate";
 import { ActorType } from "@/types/enums";
+import { Component, Vue, Ref } from "vue-property-decorator";
+import VueRouter from "vue-router";
+const { isNavigationFailure, NavigationFailureType } = VueRouter;
 
-@Component({
+@Component
-  apollo: {
-    relayFollowings: {
-      query: RELAY_FOLLOWINGS,
-      fetchPolicy: "cache-and-network",
-      variables() {
-        return {
-          page: this.followingsPage,
-          limit: this.perPage,
-        };
-      },
-    },
-    relayFollowers: {
-      query: RELAY_FOLLOWERS,
-      fetchPolicy: "cache-and-network",
-      variables() {
-        return {
-          page: this.followersPage,
-          limit: this.perPage,
-        };
-      },
-    },
-  },
-})
 export default class RelayMixin extends Vue {
   @Ref("table") readonly table!: any;
 
-  relayFollowers: Paginate<IFollower> = { elements: [], total: 0 };
-
-  relayFollowings: Paginate<IFollower> = { elements: [], total: 0 };
-
-  checkedRows: IFollower[] = [];
-
-  followingsPage = 1;
-
-  followersPage = 1;
-
-  perPage = 10;
-
   toggle(row: Record<string, unknown>): void {
     this.table.toggleDetails(row);
   }
 
-  async onFollowingsPageChange(page: number): Promise<void> {
+  protected async pushRouter(
-    this.followingsPage = page;
+    routeName: string,
+    args: Record<string, string>
+  ): Promise<void> {
     try {
-      await this.$apollo.queries.relayFollowings.fetchMore({
+      await this.$router.push({
-        variables: {
+        name: routeName,
-          page: this.followingsPage,
+        query: { ...this.$route.query, ...args },
-          limit: this.perPage,
-        },
-        updateQuery: (previousResult, { fetchMoreResult }) => {
-          if (!fetchMoreResult) return previousResult;
-          const newFollowings = fetchMoreResult.relayFollowings.elements;
-          return {
-            relayFollowings: {
-              __typename: previousResult.relayFollowings.__typename,
-              total: previousResult.relayFollowings.total,
-              elements: [
-                ...previousResult.relayFollowings.elements,
-                ...newFollowings,
-              ],
-            },
-          };
-        },
       });
-    } catch (err) {
+    } catch (e) {
-      console.error(err);
+      if (isNavigationFailure(e, NavigationFailureType.redirected)) {
-    }
+        throw Error(e.toString());
-  }
+      }
-
-  async onFollowersPageChange(page: number): Promise<void> {
-    this.followersPage = page;
-    try {
-      await this.$apollo.queries.relayFollowers.fetchMore({
-        variables: {
-          page: this.followersPage,
-          limit: this.perPage,
-        },
-        updateQuery: (previousResult, { fetchMoreResult }) => {
-          if (!fetchMoreResult) return previousResult;
-          const newFollowers = fetchMoreResult.relayFollowers.elements;
-          return {
-            relayFollowers: {
-              __typename: previousResult.relayFollowers.__typename,
-              total: previousResult.relayFollowers.total,
-              elements: [
-                ...previousResult.relayFollowers.elements,
-                ...newFollowers,
-              ],
-            },
-          };
-        },
-      });
-    } catch (err) {
-      console.error(err);
     }
   }
 

js/src/registerServiceWorker.ts

@@ -2,7 +2,7 @@
 
 import { register } from "register-service-worker";
 
-if (process.env.NODE_ENV === "production") {
+if ("serviceWorker" in navigator && isProduction()) {
   register(`${process.env.BASE_URL}service-worker.js`, {
     ready() {
       console.log(
@@ -32,3 +32,8 @@ if (process.env.NODE_ENV === "production") {
     },
   });
 }
+
+function isProduction(): boolean {
+  return true;
+  // return process.env.NODE_ENV === "production";
+}

js/src/router/error.ts

@@ -1,4 +1,3 @@
-import { beforeRegisterGuard } from "@/router/guards/register-guard";
 import { RouteConfig } from "vue-router";
 import { EsModuleComponent } from "vue/types/options";
 
@@ -12,6 +11,5 @@ export const errorRoutes: RouteConfig[] = [
     name: ErrorRouteName.ERROR,
     component: (): Promise<EsModuleComponent> =>
       import(/* webpackChunkName: "Error" */ "../views/Error.vue"),
-    beforeEnter: beforeRegisterGuard,
   },
 ];

js/src/router/guards/register-guard.ts

@@ -2,6 +2,7 @@ import { ErrorCode } from "@/types/enums";
 import { NavigationGuard } from "vue-router";
 import { CONFIG } from "../../graphql/config";
 import apolloProvider from "../../vue-apollo";
+import { ErrorRouteName } from "../error";
 
 export const beforeRegisterGuard: NavigationGuard = async (to, from, next) => {
   const { data } = await apolloProvider.defaultClient.query({
@@ -12,7 +13,7 @@ export const beforeRegisterGuard: NavigationGuard = async (to, from, next) => {
 
   if (!config.registrationsOpen && !config.registrationsAllowlist) {
     return next({
-      name: "Error",
+      name: ErrorRouteName.ERROR,
       query: { code: ErrorCode.REGISTRATION_CLOSED },
     });
   }

js/src/router/index.ts

@@ -47,7 +47,7 @@ export const routes = [
     path: "/search",
     name: RouteName.SEARCH,
     component: (): Promise<EsModuleComponent> =>
-      import(/* webpackChunkName: "search" */ "../views/Search.vue"),
+      import(/* webpackChunkName: "Search" */ "@/views/Search.vue"),
     props: true,
     meta: { requiredAuth: false },
   },
@@ -140,7 +140,9 @@ export const routes = [
     path: "/404",
     name: RouteName.PAGE_NOT_FOUND,
     component: (): Promise<EsModuleComponent> =>
-      import(/* webpackChunkName: "search" */ "../views/PageNotFound.vue"),
+      import(
+        /* webpackChunkName: "PageNotFound" */ "../views/PageNotFound.vue"
+      ),
     meta: { requiredAuth: false },
   },
   {

js/src/service-worker.ts

@@ -0,0 +1,100 @@
+import { registerRoute } from "workbox-routing";
+import {
+  NetworkFirst,
+  StaleWhileRevalidate,
+  CacheFirst,
+} from "workbox-strategies";
+
+// Used for filtering matches based on status code, header, or both
+import { CacheableResponsePlugin } from "workbox-cacheable-response";
+// Used to limit entries in cache, remove entries after a certain period of time
+import { ExpirationPlugin } from "workbox-expiration";
+
+import { precacheAndRoute } from "workbox-precaching";
+import { IPushNotification } from "./types/push-notification";
+
+// Use with precache injection
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore
+// eslint-disable-next-line no-underscore-dangle
+precacheAndRoute(self.__WB_MANIFEST);
+
+registerRoute(
+  // Check to see if the request is a navigation to a new page
+  ({ request }) => request.mode === "navigate",
+  // Use a Network First caching strategy
+  new NetworkFirst({
+    // Put all cached files in a cache named 'pages'
+    cacheName: "pages",
+    plugins: [
+      // Ensure that only requests that result in a 200 status are cached
+      new CacheableResponsePlugin({
+        statuses: [200],
+      }),
+    ],
+  })
+);
+
+// Cache CSS, JS, and Web Worker requests with a Stale While Revalidate strategy
+registerRoute(
+  // Check to see if the request's destination is style for stylesheets, script for JavaScript, or worker for web worker
+  ({ request }) =>
+    request.destination === "style" ||
+    request.destination === "script" ||
+    request.destination === "worker",
+  // Use a Stale While Revalidate caching strategy
+  new StaleWhileRevalidate({
+    // Put all cached files in a cache named 'assets'
+    cacheName: "assets",
+    plugins: [
+      // Ensure that only requests that result in a 200 status are cached
+      new CacheableResponsePlugin({
+        statuses: [200],
+      }),
+    ],
+  })
+);
+
+// Cache images with a Cache First strategy
+registerRoute(
+  // Check to see if the request's destination is style for an image
+  ({ request }) => request.destination === "image",
+  // Use a Cache First caching strategy
+  new CacheFirst({
+    // Put all cached files in a cache named 'images'
+    cacheName: "images",
+    plugins: [
+      // Ensure that only requests that result in a 200 status are cached
+      new CacheableResponsePlugin({
+        statuses: [200],
+      }),
+      // Don't cache more than 50 items, and expire them after 30 days
+      new ExpirationPlugin({
+        maxEntries: 50,
+        maxAgeSeconds: 60 * 60 * 24 * 30, // 30 Days
+      }),
+    ],
+  })
+);
+
+self.addEventListener("push", async (event: any) => {
+  const payload = event.data.json() as IPushNotification;
+  console.log("received push", payload);
+  const options = {
+    title: payload.title,
+    body: payload.body,
+    icon: "/img/icons/android-chrome-512x512.png",
+    badge: "/img/icons/badge-128x128.png",
+    timestamp: new Date(payload.timestamp),
+    lang: payload.locale,
+    data: {
+      dateOfArrival: Date.now(),
+    },
+  };
+
+  event.waitUntil(
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    self.registration.showNotification(payload.title, options)
+  );
+});

js/src/services/push-subscription.ts

@@ -0,0 +1,60 @@
+import apolloProvider from "@/vue-apollo";
+import { NormalizedCacheObject } from "@apollo/client/cache/inmemory/types";
+import { ApolloClient } from "@apollo/client/core/ApolloClient";
+import { WEB_PUSH } from "../graphql/config";
+import { IConfig } from "../types/config.model";
+
+function urlBase64ToUint8Array(base64String: string): Uint8Array {
+  const padding = "=".repeat((4 - (base64String.length % 4)) % 4);
+  const base64 = (base64String + padding).replace(/-/g, "+").replace(/_/g, "/");
+
+  const rawData = window.atob(base64);
+  const outputArray = new Uint8Array(rawData.length);
+
+  for (let i = 0; i < rawData.length; ++i) {
+    outputArray[i] = rawData.charCodeAt(i);
+  }
+  return outputArray;
+}
+
+export async function subscribeUserToPush(): Promise<PushSubscription | null> {
+  const client =
+    apolloProvider.defaultClient as ApolloClient<NormalizedCacheObject>;
+
+  const registration = await navigator.serviceWorker.ready;
+  const { data } = await client.mutate<{ config: IConfig }>({
+    mutation: WEB_PUSH,
+  });
+
+  if (data?.config?.webPush?.enabled && data?.config?.webPush?.publicKey) {
+    const subscribeOptions = {
+      userVisibleOnly: true,
+      applicationServerKey: urlBase64ToUint8Array(
+        data?.config?.webPush?.publicKey
+      ),
+    };
+    const pushSubscription = await registration.pushManager.subscribe(
+      subscribeOptions
+    );
+    console.log(
+      "Received PushSubscription: ",
+      JSON.stringify(pushSubscription)
+    );
+    return pushSubscription;
+  }
+  return null;
+}
+
+export async function unsubscribeUserToPush(): Promise<string | undefined> {
+  console.log("performing unsubscribeUserToPush");
+  const registration = await navigator.serviceWorker.ready;
+  console.log("found registration", registration);
+  const subscription = await registration.pushManager.getSubscription();
+  console.log("found subscription", subscription);
+  if (subscription && (await subscription?.unsubscribe()) === true) {
+    console.log("done unsubscription");
+    return subscription?.endpoint;
+  }
+  console.log("went wrong");
+  return undefined;
+}

js/src/types/apollo.ts

@@ -1,4 +1,5 @@
-import { ServerError, ServerParseError } from "apollo-link-http-common";
+import { ServerParseError } from "@apollo/client/link/http";
+import { ServerError } from "@apollo/client/link/utils";
 
 function isServerError(
   err: Error | ServerError | ServerParseError | undefined

js/src/types/comment.model.ts

@@ -19,6 +19,7 @@ export interface IComment {
   totalReplies: number;
   insertedAt?: Date | string;
   publishedAt?: Date | string;
+  isAnnouncement: boolean;
 }
 
 export class CommentModel implements IComment {
@@ -50,6 +51,8 @@ export class CommentModel implements IComment {
 
   totalReplies = 0;
 
+  isAnnouncement = false;
+
   constructor(hash?: IComment) {
     if (!hash) return;
 
@@ -66,5 +69,6 @@ export class CommentModel implements IComment {
     this.deletedAt = hash.deletedAt;
     this.insertedAt = new Date(hash.insertedAt as string);
     this.totalReplies = hash.totalReplies;
+    this.isAnnouncement = hash.isAnnouncement;
   }
 }

js/src/types/config.model.ts

@@ -98,4 +98,8 @@ export interface IConfig {
   instanceFeeds: {
     enabled: boolean;
   };
+  webPush: {
+    enabled: boolean;
+    publicKey: string;
+  };
 }

js/src/types/current-user.model.ts

@@ -28,6 +28,12 @@ export interface IUserSettings {
   location?: IUserPreferredLocation;
 }
 
+export interface IActivitySetting {
+  key: string;
+  method: string;
+  enabled: boolean;
+}
+
 export interface IUser extends ICurrentUser {
   confirmedAt: Date;
   confirmationSendAt: Date;
@@ -37,6 +43,7 @@ export interface IUser extends ICurrentUser {
   mediaSize: number;
   drafts: IEvent[];
   settings: IUserSettings;
+  activitySettings: IActivitySetting[];
   locale: string;
   provider?: string;
   lastSignInAt: string;

js/src/types/event.model.ts

@@ -42,6 +42,7 @@ interface IEventEditJSON {
   draft: boolean;
   picture?: IMedia | { mediaId: string } | null;
   attributedToId: string | null;
+  organizerActorId?: string;
   onlineAddress?: string;
   phoneAddress?: string;
   physicalAddress?: IAddress;
@@ -209,8 +210,8 @@ export class EventModel implements IEvent {
       tags: this.tags.map((t) => t.title),
       onlineAddress: this.onlineAddress,
       phoneAddress: this.phoneAddress,
-      physicalAddress: this.physicalAddress,
+      physicalAddress: this.removeTypeName(this.physicalAddress),
-      options: this.options,
+      options: this.removeTypeName(this.options),
       attributedToId:
         this.attributedTo && this.attributedTo.id ? this.attributedTo.id : null,
       contacts: this.contacts.map(({ id }) => ({
@@ -218,4 +219,13 @@ export class EventModel implements IEvent {
       })),
     };
   }
+
+  private removeTypeName(entity: any): any {
+    if (entity?.__typename) {
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      const { __typename, ...purgedEntity } = entity;
+      return purgedEntity;
+    }
+    return entity;
+  }
 }

js/src/types/push-notification.ts

@@ -0,0 +1,7 @@
+export interface IPushNotification {
+  title: string;
+  body: string;
+  url: string;
+  timestamp: string;
+  locale: string;
+}

js/src/utils/auth.ts

@@ -9,11 +9,12 @@ import {
 } from "@/constants";
 import { ILogin, IToken } from "@/types/login.model";
 import { UPDATE_CURRENT_USER_CLIENT } from "@/graphql/user";
-import ApolloClient from "apollo-client";
+import { ApolloClient } from "@apollo/client/core/ApolloClient";
 import { IPerson } from "@/types/actor";
 import { IDENTITIES, UPDATE_CURRENT_ACTOR_CLIENT } from "@/graphql/actor";
-import { NormalizedCacheObject } from "apollo-cache-inmemory";
 import { ICurrentUserRole } from "@/types/enums";
+import { NormalizedCacheObject } from "@apollo/client/cache/inmemory/types";
+import { LOGOUT } from "@/graphql/auth";
 
 export function saveTokenData(obj: IToken): void {
   localStorage.setItem(AUTH_ACCESS_TOKEN, obj.accessToken);
@@ -96,6 +97,13 @@ export async function initializeCurrentActor(
 export async function logout(
   apollo: ApolloClient<NormalizedCacheObject>
 ): Promise<void> {
+  await apollo.mutate({
+    mutation: LOGOUT,
+    variables: {
+      refreshToken: localStorage.getItem(AUTH_REFRESH_TOKEN),
+    },
+  });
+
   await apollo.mutate({
     mutation: UPDATE_CURRENT_USER_CLIENT,
     variables: {

js/src/views/About.vue

@@ -108,6 +108,15 @@ import RouteName from "../router/name";
       query: CONFIG,
     },
   },
+  metaInfo() {
+    return {
+      title: this.$t("About {instance}", {
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore
+        instance: this?.config?.name,
+      }) as string,
+    };
+  },
 })
 export default class About extends Vue {
   config!: IConfig;

js/src/views/About/AboutInstance.vue

@@ -135,6 +135,15 @@ import langs from "../../i18n/langs.json";
   components: {
     InstanceContactLink,
   },
+  metaInfo() {
+    return {
+      title: this.$t("About {instance}", {
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore
+        instance: this?.config?.name,
+      }) as string,
+    };
+  },
 })
 export default class AboutInstance extends Vue {
   config!: IConfig;

js/src/views/About/Glossary.vue

@@ -73,6 +73,11 @@ import { IConfig } from "../../types/config.model";
   apollo: {
     config: ABOUT,
   },
+  metaInfo() {
+    return {
+      title: this.$t("Glossary") as string,
+    };
+  },
 })
 export default class Glossary extends Vue {
   config!: IConfig;

js/src/views/About/Privacy.vue

@@ -29,6 +29,11 @@ import { InstancePrivacyType } from "@/types/enums";
       },
     },
   },
+  metaInfo() {
+    return {
+      title: this.$t("Privacy Policy") as string,
+    };
+  },
 })
 export default class Privacy extends Vue {
   config!: IConfig;

js/src/views/About/Rules.vue

@@ -18,6 +18,11 @@ import RouteName from "../../router/name";
       query: RULES,
     },
   },
+  metaInfo() {
+    return {
+      title: this.$t("Rules") as string,
+    };
+  },
 })
 export default class Rules extends Vue {
   config!: IConfig;

js/src/views/About/Terms.vue

@@ -25,6 +25,11 @@ import { InstanceTermsType } from "@/types/enums";
       },
     },
   },
+  metaInfo() {
+    return {
+      title: this.$t("Terms") as string,
+    };
+  },
 })
 export default class Terms extends Vue {
   config!: IConfig;