added game news

package.json

@@ -24,6 +24,7 @@
         "firebase-admin": "^9.2.0",
         "firebase-functions": "^3.11.0",
         "firebaseui": "^4.8.0",
+        "js-bbcode-parser": "^3.0.5",
         "lodash.chunk": "^4.2.0",
         "lodash.groupby": "^4.6.0",
         "lodash.orderby": "^4.6.0",

src/components/Game.vue

@@ -45,6 +45,7 @@
           class="my-1 w-25"
         />
         <game-description :game="game" />
+        <game-news :game="game" />
         <game-details :game="game" />
 
         <similar-games
@@ -95,6 +96,7 @@
 
 <script>
 import GameNotes from '@/components/Game/GameNotes';
+import GameNews from '@/components/Game/GameNews';
 import GameDetails from '@/components/Game/GameDetails';
 import GameRating from '@/components/Game/GameRating';
 import GameDescription from '@/components/Game/GameDescription';
@@ -111,6 +113,7 @@ export default {
     GameRating,
     GameImages,
     GameNotes,
+    GameNews,
     GameVideos,
     GameWebsites,
     SimilarGames,

src/components/Game/GameNews.vue

@@ -0,0 +1,88 @@
+<template lang="html">
+  <div class="game-news">
+    <pre>{{ articles.length }}</pre>
+    <b-card v-for ="article in articles" :key="article.id" class="mb-3">
+      <h5 class="mb-0">
+        <pre>{{ article.id }}</pre>
+        {{ article.title }}
+
+        <b-badge variant="info">{{ article.feedlabel }}</b-badge>
+      </h5>
+
+      <small>
+        By {{ article.author }} on
+        {{ $dayjs.unix(article.date).format('MMMM D, YYYY') }}
+      </small>
+
+      <p v-html="getformattedContent(article)" />
+
+      <b-button :href="article.url" variant="info" target="_blank">Read article</b-button>
+      <!-- TODO: add pc gamer logo /#/game/12597/owlboy -->
+
+      <!-- <vue-markdown v-html="parseBBcode(article.contents)" /> -->
+      <!-- <vue-markdown v-html="article.contents" /> -->
+      <!-- https://cdn.akamai.steamstatic.com/steamcommunity/public/images -->
+    </b-card>
+  </div>
+</template>
+
+<script>
+import VueMarkdown from 'vue-markdown';
+import bbCodeParser from 'js-bbcode-parser';
+
+export default {
+  components: {
+    VueMarkdown,
+  },
+
+  props: {
+    game: Object,
+  },
+
+  data() {
+    return {
+      articles: [],
+    };
+  },
+
+  computed: {
+    steamAppId() {
+      const websites = (this.game && this.game.websites) || [];
+
+      const steamData = websites.find(({ category }) => category === 13);
+      const steamUrl = steamData && steamData.url;
+      const steamAppId = steamUrl ? steamUrl.split('/')[4] : null;
+
+      return steamAppId;
+    },
+  },
+
+  mounted() {
+    if (this.steamAppId) this.loadNews();
+  },
+
+  methods: {
+    getformattedContent(article) {
+      const usesBBcodeFormat = article.feedname === 'steam_community_announcements';
+
+      return usesBBcodeFormat
+        ? bbCodeParser.parse(article.contents.replace(/{STEAM_CLAN_IMAGE}/g, 'https://cdn.akamai.steamstatic.com/steamcommunity/public/images/clans/'))
+        : article.contents;
+    },
+
+    async loadNews() {
+      this.articles = await this.$store.dispatch('LOAD_STEAM_GAME_NEWS', this.steamAppId);
+    },
+  },
+};
+</script>
+
+<style lang="scss" rel="stylesheet/scss">
+.game-news {
+  img {
+    width: 100%;
+    height: auto;
+    max-width: 100%;
+  }
+}
+</style>

src/store/actions.js

@@ -32,6 +32,19 @@ export default {
     });
   },
 
+  LOAD_STEAM_GAME_NEWS(context, steamGameId) {
+    return new Promise((resolve, reject) => {
+      axios.get(`${API_BASE}/steam-news?appId=${steamGameId}`)
+        .then(({ data }) => {
+          const gameNews = data && data.appnews && data.appnews.newsitems
+            ? data.appnews.newsitems
+            : null;
+
+          resolve(gameNews);
+        }).catch(reject);
+    });
+  },
+
   LOAD_BOARDS({ state, commit }) {
     return new Promise((resolve, reject) => {
       const db = firebase.firestore();