Enhancement: Clans page error handling and Snowflake timeframe constr…

…aint (#544)

* refactor datatable implementation to be cleaner to read

* refactor to clans entrypoint

* add month check for snowflakes

* move snowflakes to a webpack asset

* spelling fix and eslint formatting

* undo some "refactoring" and add append a generic error message if clans fail to load

* add basic loading spinner

* linting

grunt/run.js

@@ -1,5 +1,5 @@
 module.exports = {
     webpack: {
-        args: ['node_modules/.bin/webpack']
-    }
+        args: ['node_modules/.bin/webpack'],
+    },
 }

public/styles/site/getClans.sass

@@ -29,8 +29,21 @@
         grid-template-columns: repeat(3, 1fr)
         li
           font-size: 10px
-
+
+.spinner
+  border: 6px solid rgba(0, 0, 0, 0.0)
+  border-left-color: #ffa300
+  border-radius: 50%
+  width: 220px
+  height: 220px
+  animation: spin 1s linear infinite
+  margin: 20px auto
+
+@keyframes spin
+  0%
+    transform: rotate(0deg)
+  100%
+    transform: rotate(360deg)
 
 #iAmMember
   display: none
-

src/backend/templates/layouts/default.pug

@@ -293,14 +293,7 @@ html(lang='en')
                             a(href=forumUrl) FORUMS
 
             script(src=webpackAssetJS('navigation'))
-            script(
-                src='https://unpkg.com/magic-snowflakes/dist/snowflakes.min.js',
-                crossorigin='anonymous'
-            )
-            script(type='text/javascript').
-                if (typeof Snowflakes !== 'undefined') {
-                    new Snowflakes()
-                }
+            script(src=webpackAssetJS('snowflakes'))
 
             //- Include template-specific javascript files by extending the js block
             block js

src/backend/templates/mixins/loading-spinner.pug

@@ -0,0 +1,2 @@
+mixin loading-spinner
+    .spinner

src/backend/templates/views/clans/clans.pug

@@ -1,7 +1,9 @@
 extends ../../layouts/default
+include ../../mixins/loading-spinner
 
 block content
     h1 Clans
+    +loading-spinner
     table#clan-table
 block js
     script(src=webpackAssetJS('clans'))

src/frontend/js/entrypoint/clans.js

@@ -5,22 +5,12 @@ import 'simple-datatables/dist/style.css'
 axios
     .get('/data/clans.json')
     .then((response) => {
-        if (
-            response.status !== 200 ||
-            !response.data ||
-            !response.data.length
-        ) {
-            console.error('request clans failed')
-
-            return
-        }
-
-        const clans = response.data
-        const datatable = new DataTable('#clan-table', {
+        document.querySelector('.spinner').remove()
+        const dataTable = new DataTable('#clan-table', {
             perPageSelect: null,
             data: {
                 headings: ['TAG', 'NAME', 'LEADER', 'POPULATION'],
-                data: clans.map((item) => {
+                data: response.data.map((item) => {
                     return [
                         item.tag,
                         item.name,
@@ -31,13 +21,21 @@ axios
             },
         })
 
-        datatable.on('datatable.selectrow', (rowIndex, event) => {
+        dataTable.on('datatable.selectrow', (rowIndex, event) => {
             if (typeof rowIndex === 'number') {
                 event.preventDefault()
-                window.location.href = '/clans/view/' + clans[rowIndex].id
+                window.location.href =
+                    '/clans/view/' + response.data[rowIndex].id
             }
         })
     })
-    .catch((err) => {
-        console.log(err, 'loading clans failed')
+    .catch((error) => {
+        document.querySelector('.spinner').remove()
+        const header = document.querySelector('h1')
+        const errorElement = document.createElement('h2')
+        errorElement.textContent =
+            'Failed to load clans. Please try again later'
+
+        console.error(error)
+        header.insertAdjacentElement('afterend', errorElement)
     })

src/frontend/js/entrypoint/navigation.js

@@ -138,19 +138,19 @@ document.addEventListener('DOMContentLoaded', () => {
 
     // function to make highligthed text change colors/pulsate (it goes from white to gold and viceversa)
     const highlightText = document.querySelectorAll('.highlightText')
-    let highLigthCounter = 0
+    let highlightCounter = 0
 
     function highlightPulse() {
-        if (highLigthCounter < 1) {
-            highLigthCounter++
+        if (highlightCounter < 1) {
+            highlightCounter++
             highlightText.forEach((element) => {
                 element.style.transition = '1s'
             })
             highlightText.forEach((element) => {
                 element.style.color = '#FFFFFF'
             })
         } else {
-            highLigthCounter--
+            highlightCounter--
             highlightText.forEach((element) => {
                 element.style.color = '#f7941d'
             })

src/frontend/js/entrypoint/snowflakes.js

@@ -0,0 +1,17 @@
+const script = document.createElement('script')
+
+script.src = 'https://unpkg.com/magic-snowflakes/dist/snowflakes.min.js'
+script.setAttribute('crossorigin', 'anonymous')
+
+document.body.appendChild(script)
+
+script.onload = function () {
+    const currentMonth = new Date().getMonth() + 1
+    if (
+        typeof Snowflakes !== 'undefined' &&
+        (currentMonth <= 2 || currentMonth >= 10)
+    ) {
+        // eslint-disable-next-line no-new, no-undef
+        new Snowflakes()
+    }
+}

webpack.config.js

@@ -7,30 +7,31 @@ module.exports = {
         rules: [
             {
                 test: /\.css$/i,
-                use: ['style-loader', 'css-loader']
-            }
-        ]
+                use: ['style-loader', 'css-loader'],
+            },
+        ],
     },
     entry: {
         clan: ['./src/frontend/js/entrypoint/clan.js'],
         clans: ['./src/frontend/js/entrypoint/clans.js'],
-        'content-creators': ['./src/frontend/js/entrypoint/content-creators.js'],
+        'content-creators': [
+            './src/frontend/js/entrypoint/content-creators.js',
+        ],
         donation: ['./src/frontend/js/entrypoint/donation.js'],
         'faf-teams': ['./src/frontend/js/entrypoint/faf-teams.js'],
         leaderboards: ['./src/frontend/js/entrypoint/leaderboards.js'],
         navigation: ['./src/frontend/js/entrypoint/navigation.js'],
+        snowflakes: ['./src/frontend/js/entrypoint/snowflakes.js'],
         newshub: ['./src/frontend/js/entrypoint/newshub.js'],
         play: ['./src/frontend/js/entrypoint/play.js'],
         report: ['./src/frontend/js/entrypoint/report.js'],
-        'clan-invite': ['./src/frontend/js/entrypoint/clan-invite.js']
+        'clan-invite': ['./src/frontend/js/entrypoint/clan-invite.js'],
     },
     output: {
         filename: '[name].[contenthash].js',
         path: path.resolve(__dirname, 'dist/js'),
         publicPath: '/dist/js',
-        clean: true
+        clean: true,
     },
-    plugins: [
-        new WebpackManifestPlugin({ useEntryKeys: true })
-    ]
+    plugins: [new WebpackManifestPlugin({ useEntryKeys: true })],
 }