Refactor date filters to be only methods and replace moment with dayjs

client/build/webpack.dev.conf.js

@@ -43,7 +43,7 @@ const devWebpackConfig = merge(baseWebpackConfig, {
   plugins: [
     new webpack.DefinePlugin({
       'process.env': require('../config/dev.env'),
-        // bundler feature flags https://github.com/vuejs/vue-next/tree/master/packages/vue#bundler-build-feature-flags
+      // bundler feature flags https://github.com/vuejs/vue-next/tree/master/packages/vue#bundler-build-feature-flags
       __VUE_OPTIONS_API__: true, // default, but explicit
       __VUE_PROD_DEVTOOLS__: false, // default, but explicit
     }),
@@ -67,8 +67,8 @@ const devWebpackConfig = merge(baseWebpackConfig, {
       ],
     }),
     new BundleAnalyzerPlugin({
-      generateStatsFile: true
+      analyzerMode: 'disabled' // do nothing by default, but be able to generate stats with --profile
-    }),
+    })
   ],
 });
 

client/package.json

@@ -6,6 +6,7 @@
   "private": true,
   "scripts": {
     "dev": "webpack serve --progress --config build/webpack.dev.conf.js",
+    "analyze": "webpack --profile --json --config build/webpack.dev.conf.js > dist/stats.json && webpack-bundle-analyzer dist/stats.json",
     "start": ". ../server/.env && npm run dev",
     "lint": "eslint --ext .js,.vue src",
     "fix-lint": "eslint --ext .js,.vue --fix src",
@@ -48,7 +49,7 @@
     "copy-webpack-plugin": "^10.1.0",
     "css-loader": "^0.28.0",
     "cy2": "^1.2.1",
-    "dayjs": "^1.10.4",
+    "dayjs": "^1.10.7",
     "debounce": "^1.2.0",
     "eslint": "^4.15.0",
     "eslint-config-standard": "^10.2.1",
@@ -67,7 +68,6 @@
     "html-webpack-plugin": "^5.5.0",
     "lodash": "^4.17.10",
     "mini-css-extract-plugin": "^2.4.5",
-    "moment": "^2.24.0",
     "node-notifier": "^5.1.2",
     "node-sass": "^4.13.1",
     "optimize-css-assets-webpack-plugin": "^6.0.1",

client/src/components/portfolio/ProjectEntry.vue

@@ -20,7 +20,7 @@
 
     <h3
       class="project-entry__heading"
-      data-cy="project-entry-date">{{ created | datetime }}</h3>
+      data-cy="project-entry-date">{{ createdDateTime }}</h3>
     <p
       class="project-entry__paragraph"
       data-cy="project-entry-activity">
@@ -32,7 +32,7 @@
       <document-block :value="{url: documentUrl}"/>
     </p>
     <div class="project-entry__date">
-      {{ created | date }}
+      {{ createdDate }}
     </div>
   </div>
 </template>
@@ -43,6 +43,7 @@
 
   import DELETE_PROJECT_ENTRY_MUTATION from '@/graphql/gql/mutations/deleteProjectEntry.gql';
   import PROJECT_QUERY from '@/graphql/gql/queries/projectQuery.gql';
+  import {dateFilter, dateTimeFilter} from '@/filters/date-filter';
 
   export default {
     props: ['description', 'documentUrl', 'created', 'id', 'readOnly'],
@@ -51,6 +52,15 @@
       MoreOptionsWidget,
     },
 
+    computed: {
+      createdDate() {
+        return dateFilter(this.created);
+      },
+      createdDateTime() {
+        return dateTimeFilter(this.created);
+      },
+    },
+
     methods: {
       editProjectEntry() {
         this.$store.dispatch('editProjectEntry', this.id);

client/src/components/rooms/Comment.vue

@@ -7,7 +7,7 @@
       <span class="comment__owner-name">{{ comment.owner.firstName }} {{ comment.owner.lastName }}</span>
     </div>
     <div class="comment__date">
-      {{ comment.created | datetime }}
+      {{ createdDate }}
     </div>
     <div class="comment__text">
       {{ comment.text }}
@@ -17,6 +17,7 @@
 
 <script>
   import UserWidget from '@/components/UserWidget';
+  import {dateTimeFilter} from '@/filters/date-filter';
 
   export default {
     props: {
@@ -26,6 +27,11 @@
       },
     },
     components: {UserWidget},
+    computed: {
+      createdDate() {
+        return dateTimeFilter(this.comment.created);
+      }
+    },
   };
 </script>
 

client/src/filters/date-filter.js

@@ -1,15 +1,18 @@
-import moment from 'moment';
+import dayjs from 'dayjs';
+require('dayjs/locale/de');
 
-moment.locale('de');
+dayjs.locale('de');
 
+// todo: test
 export const dateFilter = value => {
   if (value) {
-    return moment(String(value)).format('DD. MMMM YYYY');
+    return dayjs(String(value)).format('DD. MMMM YYYY');
   }
 };
 
+// todo: test
 export const dateTimeFilter = value => {
   if (value) {
-    return moment(String(value)).format('DD. MMMM YYYY, HH:mm');
+    return dayjs(String(value)).format('DD. MMMM YYYY, HH:mm');
   }
 };

client/src/main.js

@@ -7,7 +7,6 @@ import App from './App';
 import {postLoginRedirectUrlKey, router} from './router';
 import store from '@/store/index';
 import VueScrollTo from 'vue-scrollto';
-import {dateFilter, dateTimeFilter} from './filters/date-filter';
 import autoGrow from '@/directives/auto-grow';
 import clickOutside from '@/directives/click-outside';
 import ME_QUERY from '@/graphql/gql/queries/meQuery.gql';
@@ -59,9 +58,6 @@ const apolloProvider = new VueApollo({
   defaultClient: privateApolloClient,
 });
 
-Vue.filter('date', dateFilter);
-Vue.filter('datetime', dateTimeFilter);
-
 /* guards */
 
 function getCookieValue(cookieName) {