Move frontend to bootstrap-vue, add linting

Signed-off-by: Knut Ahlers <knut@ahlers.me>

.eslintrc.js

@@ -0,0 +1,82 @@
+// https://eslint.org/docs/user-guide/configuring
+
+module.exports = {
+  'root': true,
+  'parserOptions': {
+    ecmaVersion: 6,
+  },
+  'env': {
+    browser: true,
+  },
+  'extends': [
+    // https://github.com/standard/standard/blob/master/docs/RULES-en.md
+    'eslint:recommended',
+  ],
+  // required to lint *.vue files
+  'plugins': [],
+  'globals': {
+    axios: true,
+    Vue: true,
+  },
+  // add your custom rules here
+  'rules': {
+    'array-bracket-newline': ['error', { multiline: true }],
+    'array-bracket-spacing': ['error'],
+    'arrow-body-style': ['error', 'as-needed'],
+    'arrow-parens': ['error', 'as-needed'],
+    'arrow-spacing': ['error', { before: true, after: true }],
+    'block-spacing': ['error'],
+    'brace-style': ['error', '1tbs'],
+    'comma-dangle': ['error', 'always-multiline'], // Apply Contentflow rules
+    'comma-spacing': ['error'],
+    'comma-style': ['error', 'last'],
+    'curly': ['error'],
+    'dot-location': ['error', 'property'],
+    'dot-notation': ['error'],
+    'eol-last': ['error', 'always'],
+    'eqeqeq': ['error', 'always', { 'null': 'ignore' }],
+    'func-call-spacing': ['error', 'never'],
+    'function-paren-newline': ['error', 'multiline'],
+    'generator-star-spacing': ['off'], // allow async-await
+    'implicit-arrow-linebreak': ['error'],
+    'indent': ['error', 2],
+    'key-spacing': ['error', { beforeColon: false, afterColon: true, mode: 'strict' }],
+    'keyword-spacing': ['error'],
+    'linebreak-style': ['error', 'unix'],
+    'lines-between-class-members': ['error'],
+    'multiline-comment-style': ['warn'],
+    'newline-per-chained-call': ['error'],
+    'no-console': ['off'],
+    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off', // allow debugger during development
+    'no-else-return': ['error'],
+    'no-extra-parens': ['error'],
+    'no-implicit-coercion': ['error'],
+    'no-lonely-if': ['error'],
+    'no-multiple-empty-lines': ['warn', { max: 2, maxEOF: 0, maxBOF: 0 }],
+    'no-multi-spaces': ['error'],
+    'no-trailing-spaces': ['error'],
+    'no-unneeded-ternary': ['error'],
+    'no-useless-return': ['error'],
+    'no-whitespace-before-property': ['error'],
+    'object-curly-newline': ['error', { consistent: true }],
+    'object-curly-spacing': ['error', 'always'],
+    'object-shorthand': ['error'],
+    'padded-blocks': ['error', 'never'],
+    'prefer-arrow-callback': ['error'],
+    'prefer-const': ['error'],
+    'prefer-object-spread': ['error'],
+    'prefer-template': ['error'],
+    'quote-props': ['error', 'consistent-as-needed', { keywords: true }],
+    'quotes': ['error', 'single', { allowTemplateLiterals: true }],
+    'semi': ['error', 'never'],
+    'space-before-blocks': ['error', 'always'],
+    'spaced-comment': ['warn', 'always'],
+    'space-infix-ops': ['error'],
+    'space-in-parens': ['error', 'never'],
+    'space-unary-ops': ['error', { words: true, nonwords: false }],
+    'switch-colon-spacing': ['error'],
+    'unicode-bom': ['error', 'never'],
+    'wrap-iife': ['error'],
+    'yoda': ['error'],
+  },
+}

frontend/app.css

@@ -0,0 +1,20 @@
+.card-img-top {
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: cover;
+  padding-bottom: 100%;
+}
+.faved, .faved:hover, .faved:active {
+  color: yellow;
+}
+.user-image {
+  border-radius: 1.25rem;
+  height: 36px;
+}
+.tweet {
+  max-height: 50px;
+  white-space: pre-line;
+}
+.toast, .toast-header {
+  background-color: rgba(34,34,34,0.85);
+}

frontend/app.js

@@ -0,0 +1,123 @@
+function sortOrder(i, j) {
+  switch (true) {
+  case i < j:
+    return -1
+  case j < i:
+    return 1
+  default:
+    return 0
+  }
+}
+
+new Vue({
+  computed: {
+  },
+
+  data: {
+    tweets: [],
+    modalTweet: null,
+  },
+
+  el: '#app',
+
+  methods: {
+    callModal(tweet) {
+      this.modalTweet = tweet
+    },
+
+    favourite(tweet) {
+      axios
+        .post('/api/favourite', { id: tweet.id })
+        .then(res => {
+          if (res.data.length === 0) {
+            this.refetch(tweet)
+            return
+          }
+
+          this.upsertTweets(res.data)
+        })
+        .catch(err => console.log(err))
+    },
+
+    notify(text, title = 'MediaTimeline Viewer') {
+      this.$bvToast.toast(text, {
+        title,
+        autoHideDelay: 3000,
+        appendToast: true,
+      })
+    },
+
+    refetch(tweet) {
+      axios
+        .post('/api/refresh', { id: tweet.id })
+        .then(res => {
+          if (res.data.length === 0) {
+            return
+          }
+
+          this.upsertTweets(res.data)
+        })
+        .catch(err => console.log(err))
+    },
+
+    refresh(forceReload = false) {
+      let apiURL = '/api/page' // By default query page 1
+      if (this.tweets.length > 0 && !forceReload) {
+        apiURL = `/api/since?id=${this.tweets[0].id}`
+      }
+
+      axios
+        .get(apiURL)
+        .then(resp => {
+          if (resp.data.length === 0) {
+            return
+          }
+
+          this.upsertTweets(resp.data)
+        })
+        .catch(err => {
+          console.log(err)
+        })
+    },
+
+    triggerForceFetch() {
+      axios
+        .post('/api/force-reload')
+        .then(() => {
+          this.notify('Force refresh triggered, reloading tweets in 10s')
+          window.setTimeout(() => this.refresh(true), 10000)
+        })
+        .catch(err => console.log(err))
+    },
+
+    upsertTweets(data) {
+      let tweets = this.tweets
+
+      for (const idx in data) {
+        const tweet = data[idx]
+        let inserted = false
+
+        for (let i = 0; i < tweets.length; i++) {
+          if (tweets[i].id === tweet.id) {
+            tweets[i] = tweet
+            inserted = true
+            break
+          }
+        }
+
+        if (!inserted) {
+          tweets = [...tweets, tweet]
+        }
+      }
+
+      tweets.sort((j, i) => sortOrder(i.id, j.id))
+      this.tweets = tweets
+    },
+  },
+
+  mounted() {
+    this.refresh()
+    window.setInterval(this.refresh, 30000)
+  },
+
+})

frontend/index.html

@@ -10,121 +10,83 @@
     <!-- Bootstrap -->
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootswatch@4.3.1/dist/darkly/bootstrap.min.css"
           integrity="sha256-6W1mxPaAt4a6pkJVW5x5Xmq/LvxuQpR9dlzgy77SeZs=" crossorigin="anonymous">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-vue@2.0.0-rc.19/dist/bootstrap-vue.min.css"
+          integrity="sha256-OnoDycdaaImljNTTBlX6Ki09xe93BWXN5T+Iqh4788s=" crossorigin="anonymous">
     <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css"
           integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
 
-    <style>
+    <link rel="stylesheet" href="app.css">
-      .card-img-top {
-        background-position: center;
-        background-repeat: no-repeat;
-        background-size: cover;
-        padding-bottom: 100%;
-      }
-      .faved {
-        color: yellow;
-      }
-      .user-image {
-        border-radius: 1.25rem;
-        height: 36px;
-      }
-      .tweet {
-        max-height: 50px;
-        white-space: pre-line;
-      }
-    </style>
 
   </head>
   <body>
     <div id="app">
-      <nav class="navbar navbar-expand-lg navbar-light bg-light mb-5">
+      <b-navbar toggleable="lg" type="light" variant="light" class="mb-5">
-        <a class="navbar-brand" href="#">MediaTimeline Viewer</a>
+        <b-navbar-brand href="#">MediaTimeline Viewer</b-navbar-brand>
-        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
+        <b-navbar-toggle target="nav-collapse"></b-navbar-toggle>
-          <span class="navbar-toggler-icon"></span>
-        </button>
 
-        <div class="collapse navbar-collapse" id="navbarSupportedContent">
+        <b-collapse id="nav-collapse" is-nav>
-          <ul class="navbar-nav ml-auto">
+          <b-navbar-nav class="ml-auto">
-            <li class="nav-item">
+            <b-nav-item href="#" @click="triggerForceFetch"><i class="fas fa-sync"></i> Force reload</b-nav-item>
-              <a class="nav-link" href="#" @click="triggerForceFetch"><i class="fas fa-sync"></i> Force reload</a>
+          </b-navbar-nav>
-            </li>
+        </b-collapse>
-          </ul>
+      </b-navbar>
-        </div>
-      </nav>
 
-      <div class="container">
+      <b-container>
 
-        <div class="row">
+        <b-row>
 
-          <div class="col-lg-3 col-md-4 col-12" v-for="tweet in tweets" :key="tweet.id" v-if="tweet.images">
+          <b-col lg="3" md="4" xs="12" v-for="tweet in tweets" :key="tweet.id" v-if="tweet.images">
-            <div class="card mb-3">
+            <b-card class="mb-3" no-body>
               <div :style="`background-image: url('${tweet.images[0].image}')`" class="card-img-top"></div>
-              <div class="card-body">
 
-                <div class="media">
+              <b-card-body>
-                  <img :src="tweet.user.image" class="mr-2 user-image">
+                <b-media>
-                  <div class="media-body">
+                  <b-img slot="aside" class="user-image" :src="tweet.user.image"></b-img>
+
                   <h6 class="mt-0 mb-0">{{ tweet.user.screen_name }}</h6>
                   <small>{{ moment(tweet.posted).format('lll') }}</small>
-                  </div>
+                </b-media>
-                </div>
+              </b-card-body>
 
-              </div>
+              <b-card-footer class="text-right">
-              <div class="card-footer text-right">
+                <b-button size="sm" variant="secondary" :href="`https://twitter.com/${tweet.user.screen_name}/status/${tweet.id}`">
-                <a class="btn btn-sm btn-secondary" :href="`https://twitter.com/${tweet.user.screen_name}/status/${tweet.id}`">
                   <i class="fas fa-link"></i>
-                </a>
+                </b-button>
-                <button class="btn btn-sm btn-secondary" @click="refetch(tweet)">
+                <b-button size="sm" variant="secondary" @click="refetch(tweet)">
                   <i class="fas fa-sync"></i>
-                </button>
+                </b-button>
-                <button 
+                <b-button size="sm" variant="secondary" :class="{ 'faved': tweet.favorited }" @click="favourite(tweet)">
-                  :class="{ btn: true, 'btn-sm': true, 'btn-secondary': true, 'faved': tweet.favorited }"
-                  @click="favourite(tweet)"
-                >
                   <i class="fas fa-star"></i>
-                </button>
+                </b-button>
-                <button class="btn btn-sm btn-secondary" @click="callModal(tweet)">
+                <b-button size="sm" variant="secondary" @click="callModal(tweet)">
                   <i class="fas fa-search-plus"></i>
-                  <span class="badge badge-light badge-pill" v-if="tweet.images.length > 1">{{ tweet.images.length }}</span>
+                  <b-badge pill variant="light" v-if="tweet.images.length > 1">{{ tweet.images.length }}</b-badge>
-                </button>
+                </b-button>
-              </div>
+              </b-card-footer>
-            </div>
-          </div>
 
-        </div>
+            </b-card>
+          </b-col>
 
-        <div class="modal" tabindex="-1" role="dialog" v-if="modalTweet">
+        </b-row>
-          <div class="modal-dialog" role="document">
-            <div class="modal-content">
-              <div class="modal-header">
-                <h5 class="modal-title">{{ modalTweet.user.screen_name }}</h5>
-                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-                  <span aria-hidden="true">&times;</span>
-                </button>
-              </div>
-              <div class="modal-body">
 
-                <div id="carouselExampleControls" class="carousel slide">
+        <b-modal
-                  <div class="carousel-inner">
+          centered
-                    <div :class="{ 'carousel-item': true, 'active': idx == 0 }" v-for="(image, idx) in modalTweet.images">
+          @hidden="modalTweet = null"
-                      <img :src="image.image" class="d-block w-100">
+          hide-footer
-                    </div>
+          :title="modalTweet.user.screen_name"
-                  </div>
+          v-if="modalTweet"
-                  <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev" v-if="modalTweet.images.length > 1">
+          :visible="true"
-                    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
+        >
-                    <span class="sr-only">Previous</span>
+          <b-carousel :controls="modalTweet.images.length > 1">
-                  </a>
+            <b-carousel-slide
-                  <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next" v-if="modalTweet.images.length > 1">
+              :img-src="image.image"
-                    <span class="carousel-control-next-icon" aria-hidden="true"></span>
+              :key="image.id"
-                    <span class="sr-only">Next</span>
+              v-for="(image, idx) in modalTweet.images"
-                  </a>
+            ></b-carousel-slide>
-                </div>
+          </b-carousel>
+        </b-modal>
 
-              </div>
+      </b-container>
-            </div>
-          </div>
-        </div>
-
-      </div> <!-- /.container -->
     </div> <!-- /#app -->
 
 
@@ -137,6 +99,8 @@
 
     <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.min.js"
             integrity="sha256-chlNFSVx3TdcQ2Xlw7SvnbLAavAQLO0Y/LBiWX04viY=" crossorigin="anonymous"></script>
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap-vue@2.0.0-rc.19/dist/bootstrap-vue.min.js"
+            integrity="sha256-7SSbIENEPA/7lL18+muIwRP381WW9QrjcnC9C9mS9So=" crossorigin="anonymous"></script>
 
     <script src="https://cdn.jsdelivr.net/npm/axios@0.18.0/dist/axios.min.js"
             integrity="sha256-mpnrJ5DpEZZkwkE1ZgkEQQJW/46CSEh/STrZKOB/qoM=" crossorigin="anonymous"></script>
@@ -144,137 +108,7 @@
     <script src="https://cdn.jsdelivr.net/npm/moment@2.24.0/min/moment.min.js"
             integrity="sha256-4iQZ6BVL4qNKlQ27TExEhBN1HFPvAvAMbFavKKosSWQ=" crossorigin="anonymous"></script>
 
-    <script>
+    <script src="app.js"></script>
-      function sortOrder(i, j) {
-        switch (true) {
-          case i < j:
-            return -1
-          case j < i:
-            return 1
-          default:
-            return 0
-        }
-      }
-
-      let app = new Vue({
-        computed: {
-        },
-
-        data: {
-          tweets: [],
-          modalTweet: null,
-        },
-
-        el: "#app",
-
-        methods: {
-          callModal(tweet) {
-            this.modalTweet = tweet
-          },
-
-          favourite(tweet) {
-            axios
-              .post('/api/favourite', { id: tweet.id })
-              .then((res) => {
-                if (res.data.length === 0) {
-                  this.refetch(tweet)
-                  return
-                }
-
-                this.upsertTweets(res.data)
-              })
-              .catch((err) => console.log(err))
-          },
-
-          refetch(tweet) {
-            axios
-              .post('/api/refresh', { id: tweet.id })
-              .then((res) => {
-                if (res.data.length === 0) {
-                  return
-                }
-
-                this.upsertTweets(res.data)
-              })
-              .catch((err) => console.log(err))
-          },
-
-          refresh(forceReload = false) {
-            let apiURL = '/api/page' // By default query page 1
-            if (this.tweets.length > 0 && !forceReload) {
-              apiURL = `/api/since?id=${this.tweets[0].id}`
-            }
-
-            axios
-              .get(apiURL)
-              .then((resp) => {
-                if (resp.data.length === 0) {
-                  return
-                }
-
-                this.upsertTweets(resp.data)
-              })
-              .catch((err) => {
-                console.log(err)
-              })
-          },
-
-          triggerForceFetch() {
-            axios
-              .post('/api/force-reload')
-              .then(() => {
-                window.setTimeout(() => this.refresh(true), 10000)
-              })
-              .catch((err) => console.log(err))
-          },
-
-          upsertTweets(data) {
-            let tweets = this.tweets
-
-            for (idx in data) {
-              let tweet = data[idx]
-              let inserted = false
-
-              for (let i = 0; i < tweets.length; i++) {
-                if (tweets[i].id == tweet.id) {
-                  tweets[i] = tweet
-                  inserted = true
-                  break
-                }
-              }
-
-              if (!inserted) {
-                tweets = [...tweets, tweet]
-              }
-            }
-
-            tweets.sort((j, i) => sortOrder(i.id, j.id))
-            this.tweets = tweets
-          },
-        },
-
-        mounted() {
-          this.refresh()
-          window.setInterval(this.refresh, 30000)
-        },
-
-        watch: {
-          modalTweet() {
-            window.setTimeout(() => {
-              $('.modal').on('hide.bs.modal', () => {
-                // When modal is closed clean it up
-                $('.carousel').carousel('dispose')
-                this.modalTweet = null
-              })
-              $('.modal').modal('show')
-              $('.carousel').carousel({
-                pause: true,
-              })
-            }, 100)
-          },
-        },
-      })
-    </script>
   </body>
 </html>