Migrate to vue-query (#2567)

* Clearer name for offer queries * Initial version of vue-query for activities * Add instrumentation for some enrich getters * WIP Experimentation/exploration about getters * SHOW_PERFORMANCE_INFO also enable instrumentation * Refine activity users * Work in progress queries/mutations/services Quite rough at the moment, lots of broken bits * Ongoing vue-query work * Don't require services to have an id * Switch from useRouteParam to useQueryParams useRouteParam had concurrency issues when using it for multiple params * Less activity query caching * Improved group activities page * Use vue-query for place activities * Continuing with vue-query for places * Ongoing vue-query work * Implement status in vue-query * More vue-query ongoing work * Remove status datastore * More places/feedback into vue-query * A lot more vue-query... * Remove unneeded code * Vue-query mutations for activity editing * Remove unused code * Ongoing * Vue-query for history * Remove unused history datastore * Use vue-query for activity type editing * Some cleanup, and more implementation * Clear data on login, minor tweaks * Initial vue-query for messages Only for group wall at the moment, and probably missing a bunch of thread stuff * indexById for feedback * Cleanup * Adding detail threads to vue-query Quite rough for now... * Working thread detail view :) * Only current group users mentionable * Faked threadMeta for new threads * 20 messages per page * Make place wall work again * Add state docs * Don't refetch messages on window focus * Add more state/query/mutation/enrichment docs * vue-query for application list other application usages are untouched: grouppreview, notifications, latestMessages, detail... * Convert activity enrichers to helpers * Fix is-unread for walls * Fixup user list and add trust/revoke mutations * Fixup unread/continuation logic * Implement detail view for activities * Slightly improvement to detail * Implement user chat detail view * remove enriching for applications list * show application in detail view accept/decline not converted yet * Add explicit ordering and button to load older * Specify ordering for application messages * Add more sensible page size * Fix place display * Convert remaining enrichers to helpers * Fix sidenav group map * Refactor sidenavboxes * Use more bootstrap data * A few bits and bobs * Don't fetch users/group-info in vuex... * Move more breadcrumb logic to component * Remove some route store actions * Fix activity history statistics * Convert breadcrumb datastore * Remove loadingprogress datastore My new implementation is a bit more choppy as it doesn't implement the smoothing logic we had before, could add that if desired... * Implement search without vuex * Add back esc key to close search * Fixup offers chat * applications: create and withdraw * Remove debug <pre> * Implement user-not-found logic * Close detail service when using detail route * Save detail notification options via vue-query * Remove unused actions * Move home of current group to service from vuex * Add TODO * fix applications in group gallery * remove deprecated group join feature all groups are on applications by now * add application accept/decline, cleanup * add applications updater, remove applications datastore * convert notifications, first try * application api cleanup * fix notification routes * Move markUserActive to service * Use composition API for performance tool * Remove unused code * Group socket updaters * Move banners out of store and implement toasts * Move geo out of datastore * Remove agreements * Less currentStore stuff * Migrate out more currentGroup.js * And more away from currentGroup store * Fix groups in a couple of places * A whole bunch of vue-query progress * latestMessages, first steps * add todo * disable calls to latestMessages datastore * Moved filtered places into current group service so map shows same as list, as in prod * Add artifical response delay for local dev * Better wall loading status * Add in-memory infinite scroll for member list It gets slow quite quickly as the members add up... * Fixup signup * Fixup history detail page * Migrate i18n * Remove currentGroup module :) * Remove timezones module * Migrate community feed vuex store * Remove invitations (they are unused now) * Remove unused file * Remove refresh (and pull to refresh) ... I think pull to refresh might be better implemented in lower down components rather than refreshing EVERYTHING? and maybe vue-query will already refresh things ok? * Close detail view on logout * Don't hijack '/' from input/textareas * Fixup groupId param for link * Implement mobile views for some detail pages for thread and activity pages specifically * Nicer activity filter wrapping * Filter out less useful stuff for search ... plus add pretty place status colours * latestMessages: make it mostly work! * Fancier dev sleep feature, not automatically on * Fix user chat mobile view * Fixup latest messages opening things * Show detail sidebar over detail router view * Prevent overflowing slots * Allow to dismiss community banner * Add application mobile route * Migrate issues * Fix query update helper * Remove issues store * Fix bread for active issue * Almost removed groups datastore * Don't use stuff from >/helpers * Only worry about query order meta when needed * Better activities view with no activities * Minor improvements to application detail UI - make user link clickable - don't make group look like it's clickable * Adding missing .value * Remove calls to removed functions * Fix missing order meta param, coding error * Fixup group create * Reimplement and remove groups store module * Disable vuex stores! Still installed, and some more to convert but yeah, happy :) * Fix axios handling of nulls * Remove .catch() calls from router push add debug Getting errors .then() is not a function on the issue chat... * Attempt to resolve router issue Should either be a component directly, or a function that returns a promise. * Fix reactivity bug, must pass refs to query keys * Reorder imports and enforce with eslint A bit gratuitous but made me happy :) * Reimplement password reset * Reimplement unsubscribe all for group * Remove unused $store usage * A little auth isLogged in refinement And enforcing "no services in queries" guideline * Convert push and pwa stuff * Push tweaks and blind cordova implementations Hooking up vue-query into cordova online/focus events * A bit more push token fiddling * Fixup multicroppa * Send x-forwarded-for headers in dev proxy * Only load cordova stuff if needed * Fix up profile image edit * Remove away logging * Activity type editing remove vuex calls * Remove vuex from feedback list * Remove vuex! * Update vuex -> vue-query in readme * Remove unused datastore helpers * Initialize router plugin inside detail service * Linting fix * Remove old datastore helpers tests * Refine eslint import order config * Fixup offer query tests * Fixup changephoto test * Make tests pass, upgrade to jest 28 ... just don't look at how many I skipped... * Enhance mock backend a little * Fixup linting * Nicer "your application is pending" alignment ... on group preview page * Slightly more refined application pending UI * remove notice * TODO is done * Fix message reaction user names * Fix chat conversation messages spilling out * Fix mobile reaction list dialog * Don't log ECONNABORTED query errors * Use native isArray method Avoiding loading lodash * Use object format for input-style .. so we can merge more easily * Use overflow: hidden for autogrow inputs See quasarframework/quasar#14263 * Remove unused class, use object shorthand notation * Set groupId in link explicitly * Refine note about archived activity type filtering * Remove getPreviousPage from state docs * Make sure activityTypeIconProps are present * Remove unused mutationOptions configuration * Remove unused listMore methods Passing cursors as params now... * Remove console log * Remove console logging * Remove outdated comment * Remove unused createInstrument * A little rejig of boot files * Add more groupIds to router links * Safer ref access * Better function naming * Add back leave group toast * Use maybeUpdateDataWith more and document * Add TODO * Remove unneeded comments/logs * Remove empty file * Remove logging, add TODO detail * Add "Load earlier messages" to translations * Re-enable eslint * Use maybeUpdateDataWith for message detail * Remove unneeded getPreviousPageParam * Alter comments * Remove commented out code * Add comment * Remove dev/debug code * Remove enrichment related code * Remove commented out code * Add comment * Remove unused test file * Remove commented out line * Only use lodash random if we need it in dev * fix feedback pagination * fix activity statistics periodFilter * remove clearIssueMeta comment * enable period user refresh * remove notification meta need to remove from backend as well * remove WallConversation TODO * remove old code Co-authored-by: Tilmann Becker <tilmann.becker@gmail.com>
karrot-dev · Aug 25, 2022 · e02d4a5 · e02d4a5
1 parent 69e2376
commit e02d4a5
Show file tree

Hide file tree

Showing 504 changed files with 12,614 additions and 14,698 deletions.
diff --git a/.circleci/config.yml b/.circleci/config.yml
@@ -375,7 +375,7 @@ jobs:
             git checkout -b $BRANCH
             yarn upgrade --latest --ignore-engines
             # holding back jest to 27 due to https://github.com/vuejs/vue-jest/issues/467
-            yarn upgrade --latest --ignore-engines jest@^27 babel-jest@^27 jest-environment-jsdom@^27
+            yarn upgrade --latest --ignore-engines jest@^28 babel-jest@^28 jest-environment-jsdom@^28
             tee pr.txt \<<EOL
             [CI] update dependencies
 

diff --git a/.eslintrc.js b/.eslintrc.js
@@ -21,7 +21,7 @@ module.exports = {
     // but leave only one uncommented!
     // See https://eslint.vuejs.org/rules/#available-rules
     'plugin:vue/vue3-recommended', // Priority C: Recommended (Minimizing Arbitrary Choices and Cognitive Overhead)
-
+    'plugin:import/recommended',
     'standard',
 
   ],
@@ -48,14 +48,41 @@ module.exports = {
     'arrow-parens': 'off',
     'one-var': 'off',
 
-    'import/first': 'off',
-    'import/named': 'error',
-    'import/namespace': 'error',
-    'import/default': 'error',
-    'import/export': 'error',
-    'import/extensions': 'off',
     'import/no-unresolved': 'off',
-    'import/no-extraneous-dependencies': 'off',
+    'import/order': ['error', {
+      groups: [
+        'builtin', // node "builtin" modules
+        'external',
+        'internal',
+        'parent', // modules from a "parent" directory ('../blah')
+        'sibling', // "sibling" modules from the same or a sibling's directory ('./foo/foo')
+        'index', // "index" of the current directory ('./')
+        'object', // typescript stuff
+        'type', // typescript stuff
+      ],
+      pathGroups: [
+        {
+          // put component files nicely below
+          pattern: '@/**/components/**',
+          group: 'internal',
+          position: 'after',
+        },
+        {
+          pattern: '@/**',
+          group: 'internal',
+        },
+        {
+          pattern: '>/**',
+          group: 'internal',
+          position: 'after',
+        },
+      ],
+      pathGroupsExcludedImportTypes: [],
+      'newlines-between': 'always',
+      alphabetize: {
+        order: 'asc',
+      },
+    }],
     'prefer-promise-reject-errors': 'off',
     'multiline-ternary': ['error', 'always-multiline'],
 
@@ -75,4 +102,13 @@ module.exports = {
     // allow single word component names, see https://github.com/karrot-dev/karrot-frontend/issues/2463
     'vue/multi-word-component-names': 'off',
   },
+
+  settings: {
+    // uses 'eslint-import-resolver-webpack':
+    'import/resolver': {
+      webpack: {
+        config: './webpack.aliases.js',
+      },
+    },
+  },
 }
diff --git a/.gitignore b/.gitignore
@@ -15,6 +15,9 @@ node_modules
 /src-cordova/getpassword
 /src-cordova/ul_web_hooks
 
+# Dev certs
+/build/dev-certs/*.pem
+
 # Capacitor related directories and files
 /src-capacitor/www
 /src-capacitor/node_modules

diff --git a/README.md b/README.md
@@ -107,7 +107,7 @@ _Karrot_ is built with open-source software. Here are some of them:
 
 - [Django](https://www.djangoproject.com/)
 - [Django REST framework](http://www.django-rest-framework.org/)
-- [VueJS](https://vuejs.org/) + [Vuex](https://vuex.vuejs.org)
+- [VueJS](https://vuejs.org/) + [vue-query](https://github.com/DamianOsipiuk/vue-query)
 - [Quasar Framework](http://quasar.dev/)
 - [Twemoji](https://github.com/twitter/twemoji)
 
diff --git a/build/config.js b/build/config.js
@@ -1,5 +1,7 @@
 require('dotenv').config()
 
+const execSync = require('child_process').execSync
+
 const backend = (process.env.BACKEND || 'https://dev.karrot.world').replace(/\/$/, '') // no trailing slash
 
 const backendProxy = {
@@ -11,7 +13,14 @@ const backendProxy = {
   // so we need to use the origin origin (localhost).
   changeOrigin: /^https:/.test(backend),
   ws: true,
-  onProxyReq: (proxyReq) => {
+  // This is needed if using https in local dev, so we give image URLS the right host
+  xfwd: true,
+  onProxyReq: (proxyReq, req, res) => {
+    // We generate a local one on the fly
+    // Have a look at https://dev.karrot.world/about.json to see what it should contain
+    if (req.url === '/about.json') {
+      return res.send(getLocalAboutJSON())
+    }
     if (/^https:/.test(backend)) {
       // For secure backends we must set the referer to make django happy
       // https://github.com/django/django/blob/master/django/middleware/csrf.py#L226
@@ -39,5 +48,26 @@ module.exports = {
       target: 'https://dev.karrot.world',
       changeOrigin: true,
     },
+    '/about.json': backendProxy,
   },
 }
+
+function getLocalAboutJSON () {
+  return {
+    commitSHA: run('git rev-parse HEAD'),
+    commitSHAShort: run('git rev-parse --short HEAD'),
+    ref: run('git rev-parse --abbrev-ref HEAD'),
+    env: 'local',
+    apkURL: null,
+    date: new Date().toISOString().replace(/T.*/, ''),
+  }
+}
+
+function run (cmd) {
+  try {
+    return execSync(cmd).toString().trim()
+  }
+  catch (error) {
+    return null
+  }
+}
diff --git a/build/dev-certs/README.md b/build/dev-certs/README.md
@@ -0,0 +1,22 @@
+If you want to make local certs for pwa/serviceWorker/push testing in local dev you need:
+
+Install mkcert, see https://github.com/FiloSottile/mkcert
+
+Install the root ca
+
+   mkcert -install
+
+run this (in this directory) to generate the local certs
+
+    mkcert -cert-file cert.pem -key-file key.pem localhost
+
+copy the root ca into here:
+
+  cp $(mkcert -CAROOT)/rootCA.pem ca.pem
+
+(I'm using docker, so a symlink won't work here, but if you're not you could do that!)
+
+You want to end up with three files:
+- cert.pem
+- key.pem
+- ca.pem
diff --git a/build/script.serve.js b/build/script.serve.js
@@ -1,11 +1,11 @@
 /**
  * Serves built files from 'dist', proxies API requests and websockets to backend
  */
+const { join } = require('path')
 
-const express = require('express')
 const compression = require('compression')
+const express = require('express')
 const proxyMiddleware = require('http-proxy-middleware').createProxyMiddleware
-const { join } = require('path')
 
 const { proxyTable } = require('./config')
 

diff --git a/docs/src/SUMMARY.md b/docs/src/SUMMARY.md
@@ -13,6 +13,7 @@
   - [Account](features/account.md)
   - [General](features/general.md)
 - [Frontend structure](frontend-structure.md)
+  - [State](state.md)
   - [Forms](forms.md)
   - [Pages and Routes](pages.md)
   - [Alerts](alerts.md)