use optional chaining (finally!)

src/App.vue

@@ -75,11 +75,11 @@ export default {
     },
 
     dockPosition() {
-      return this.settings && this.settings.dockPosition;
+      return this.settings?.dockPosition;
     },
 
     isPublicRoute() {
-      return this.$route.meta && this.$route.meta.public;
+      return this.$route.meta?.public;
     },
 
     isBoard() {

src/components/Board/AddListModal.vue

@@ -74,7 +74,7 @@ export default {
     },
 
     isEmptyBoard() {
-      return this.board.lists && this.board.lists.length === 0;
+      return this.board?.lists?.length === 0;
     },
 
     disabled() {

src/components/BoardsDropdown.vue

@@ -87,7 +87,7 @@ export default {
     },
 
     dockPosition() {
-      return this.settings && this.settings.dockPosition;
+      return this.settings?.dockPosition;
     },
 
     boardInitials() {

src/components/Game/AddRemoveGame.vue

@@ -21,7 +21,7 @@ export default {
     ...mapState(['board']),
 
     gameInList() {
-      return this.game && this.list.games.includes(this.game.id);
+      return this.game && this.list?.games.includes(this.game?.id);
     },
 
     label() {

src/components/Game/AmazonLinks.vue

@@ -54,7 +54,8 @@ export default {
 
   computed: {
     amazonLinks() {
-      return this.game && this.game.external_games
+      // TODO: put link category in constant
+      return this.game?.external_games
         ? this.game.external_games.filter(({ category }) => category === 20)
         : [];
     },

src/components/Game/GameDescription.vue

@@ -52,32 +52,24 @@ export default {
     },
 
     gameDescription() {
-      const steamDescription = this.game && this.game.steam && this.game.steam.short_description
+      // const wikipediaDescription = this.wikipediaArticle?.lead?.sections[0]?.text
-        ? this.game.steam.short_description
-        : null;
-
-
-      // const wikipediaDescription = this.wikipediaArticle && this.wikipediaArticle.lead && this.wikipediaArticle.lead.sections[0]
       //   ? this.wikipediaArticle.lead.sections[0].text
       //   : null;
 
-      const igdbDescription = this.game && this.game.summary
+      const steamDescription = this.game?.steam?.short_description || null;
-        ? this.game.summary
+      const igdbDescription = this.game?.summary || null;
-        : null;
 
       return steamDescription || igdbDescription;
     },
 
     trimmedDescription() {
-      return this.gameDescription && this.gameDescription.length > 1200
+      return this.gameDescription?.length > 1200
         ? `${this.gameDescription.substr(0, 1200)}...`
         : null;
     },
 
     source() {
-      if (this.game.steam && this.game.steam.short_description) {
+      if (this.game?.steam?.short_description) return 'Steam';
-        return 'Steam';
-      }
 
       return this.wikipediaArticle && this.wikipediaArticle.lead && this.wikipediaArticle.lead[0]
         ? 'Wikipedia'
@@ -91,8 +83,9 @@ export default {
 
   methods: {
     async loadWikipediaArticle() {
-      const wikiData = this.game && this.game.websites
+      const wikiData = this.game?.websites
         ? this.game.websites.find(({ url, category }) => {
+          // TODO: put in constant
           const wikipediaIgdbCategory = 3;
 
           return url.includes('/wiki/') && category === wikipediaIgdbCategory;

src/components/Game/GameDetails.vue

@@ -47,7 +47,7 @@ export default {
     ...mapState(['game']),
 
     gameDevelopers() {
-      return this.game && this.game.involved_companies
+      return this.game?.involved_companies
         ? this.game.involved_companies
           .filter(({ developer }) => developer)
           .map(({ company }) => company.name).join(', ')
@@ -55,7 +55,7 @@ export default {
     },
 
     gamePublishers() {
-      return this.game && this.game.involved_companies
+      return this.game?.involved_companies
         ? this.game.involved_companies
           .filter(({ publisher }) => publisher)
           .map(({ company }) => company.name).join(', ')
@@ -63,20 +63,20 @@ export default {
     },
 
     gameModes() {
-      return this.game && this.game.game_modes
+      return this.game?.game_modes
         ? this.game.game_modes.map(({ name }) => name).join(', ')
         : null;
     },
 
     playerPerspectives() {
-      return this.game && this.game.player_perspectives
+      return this.game?.player_perspectives
         ? this.game.player_perspectives.map(({ name }) => name).join(', ')
         : null;
     },
 
     // TODO: fix infinite loop
     // timeline() {
-    //   const releaseDates = this.game && this.game.release_dates;
+    //   const releaseDates = this.game?.release_dates;
     //
     //   const sortedActivities = releaseDates
     //     ? releaseDates.sort((a, b) => b.date - a.date)

src/components/Game/GameGenres.vue

@@ -24,9 +24,7 @@ export default {
     ...mapState(['game']),
 
     gameGenres() {
-      const gameGenres = this.game && this.game.genres
+      const gameGenres = this.game?.genres || [];
-        ? this.game.genres
-        : null;
 
       return gameGenres.map(genre => ({
         ...genre,

src/components/Game/GameModal.vue

@@ -146,11 +146,7 @@ export default {
     ...mapState(['board', 'notes', 'activeGame', 'games', 'platform', 'user', 'settings']),
 
     hasMultipleGames() {
-      // TODO: use optional chaining
+      return this.activeGame?.list?.games?.length > 1;
-      return this.activeGame
-        && this.activeGame.list
-        && this.activeGame.list.games
-        && this.activeGame.list.games.length > 1;
     },
 
     standalone() {
@@ -158,7 +154,7 @@ export default {
     },
 
     rating() {
-      return this.game && this.game.rating
+      return this.game?.rating
         ? Math.round((this.game.rating / 20) * 2) / 2
         : false;
     },

src/components/Game/GameNews.vue

@@ -61,10 +61,9 @@ export default {
 
   computed: {
     steamAppId() {
-      const websites = (this.game && this.game.websites) || [];
+      const websites = this.game?.websites || [];
-
       const steamData = websites.find(({ category }) => category === 13);
-      const steamUrl = steamData && steamData.url;
+      const steamUrl = steamData?.url;
       const steamAppId = steamUrl ? steamUrl.split('/')[4] : null;
 
       return steamAppId;

src/components/Game/GameSidebar.vue

@@ -41,15 +41,11 @@ export default {
     ...mapState(['board', 'notes', 'activeGame', 'games', 'platform', 'user', 'settings']),
 
     gameDetailView() {
-      return this.settings && this.settings.gameDetailView;
+      return this.settings?.gameDetailView;
     },
 
     hasMultipleGames() {
-      // TODO: use optional chaining
+      return this.activeGame?.list?.games?.length > 1;
-      return this.activeGame
-        && this.activeGame.list
-        && this.activeGame.list.games
-        && this.activeGame.list.games.length > 1;
     },
 
     standalone() {
@@ -57,7 +53,7 @@ export default {
     },
 
     rating() {
-      return this.game && this.game.rating
+      return this.game?.rating
         ? Math.round((this.game.rating / 20) * 2) / 2
         : false;
     },
@@ -75,7 +71,7 @@ export default {
     nextDisabled() {
       const { list } = this.activeGame;
 
-      const isLast = this.list && list.games && this.gameIndex === list.games.length - 1;
+      const isLast = this.list?.games && this.gameIndex === list.games.length - 1;
 
       return !this.list || isLast;
     },

src/components/Game/SimilarGames.vue

@@ -39,7 +39,7 @@ export default {
     ...mapState(['game', 'games']),
 
     similarGameIds() {
-      return this.game && this.game.similar_games;
+      return this.game?.similar_games;
     },
   },
 

src/components/GameDetail.vue

@@ -181,19 +181,17 @@ export default {
       // TODO: put in constant
       const twitterCategory = 5;
 
-      // TODO: use optional chaining
+      const twitterUrl = this.game?.websites
-      const twitterUrl = this.game && this.game.websites
         ? this.game.websites.find(({ category }) => category === twitterCategory)
         : '';
 
-      // TODO: use optional chaining
+      return twitterUrl?.url
-      return twitterUrl && twitterUrl.url
         ? twitterUrl.url.split('twitter.com/')[1]
         : null;
     },
 
     gameCoverUrl() {
-      const imageId = this.game && this.game.cover && this.game.cover.image_id;
+      const imageId = this.game?.cover?.image_id;
 
       return imageId
         ? `https://images.igdb.com/igdb/image/upload/t_cover_big_2x/${imageId}.jpg`

src/components/Lists/GameList.vue

@@ -210,7 +210,7 @@ export default {
 
   methods: {
     openGame(gameId, list) {
-      const gameDetailView = this.settings && this.settings.gameDetailView;
+      const gameDetailView = this.settings?.gameDetailView;
 
       // TODO: rename and make it more generic e.g. active_game_data
       this.$store.commit('SET_GAME_MODAL_DATA', { gameId, list });

src/components/PageHeader.vue

@@ -69,11 +69,11 @@ export default {
     ...mapState(['board', 'boards', 'user']),
 
     showBackButton() {
-      return this.$route.name === 'game' && this.board && this.board.id;
+      return this.$route.name === 'game' && this.board?.id;
     },
 
     showBoardName() {
-      return this.$route.name === 'board' && this.board && this.board.name;
+      return this.$route.name === 'board' && this.board?.name;
     },
   },
 };

src/components/ProviderCard.vue

@@ -23,13 +23,13 @@ export default {
     },
 
     dateJoined() {
-      return this.user && this.user.dateJoined
+      return this.user?.dateJoined
         ? this.$dayjs(this.user.dateJoined).format('M/D/YYYY')
         : null;
     },
 
     lastLogin() {
-      return this.user && this.user.lastLogin
+      return this.user?.lastLogin
         ? this.$dayjs(this.user.lastLogin).format('M/D/YYYY')
         : null;
     },

src/components/PublicDock.vue

@@ -24,7 +24,7 @@ export default {
     ...mapState(['settings']),
 
     dockPosition() {
-      return this.settings && this.settings.dockPosition;
+      return this.settings?.dockPosition;
     },
   },
 };

src/mixins/gameCardMixin.js

@@ -24,7 +24,7 @@ export default {
     showGameTags() {
       const { settings } = this.list;
 
-      return settings && settings.showGameTags && this.gameTags;
+      return settings?.showGameTags && this.gameTags;
     },
 
     gameProgress() {
@@ -38,7 +38,7 @@ export default {
     gameNotes() {
       const { settings } = this.list;
 
-      return settings && settings.showGameNotes && this.notes[this.gameId];
+      return settings?.showGameNotes && this.notes[this.gameId];
     },
 
     game() {

src/pages/AuthPage.vue

@@ -52,7 +52,7 @@ export default {
         this.$store.commit('SET_SESSION_EXPIRED', false);
       }
 
-      if (this.user && this.user.uid) {
+      if (this.user?.uid) {
         this.$router.replace({ name: 'home' });
       } else {
         this.startAuthUI();
@@ -118,9 +118,8 @@ export default {
           // TODO: move this logic to the action
           const [latestRelease] = releases;
 
-          const latestReleaseVersion = latestRelease && latestRelease.tag_name;
+          const latestReleaseVersion = latestRelease?.tag_name;
-
+          const lastReleaseSeenByUser = this.settings?.release || null;
-          const lastReleaseSeenByUser = (this.settings && this.settings.release) || null;
 
           if (latestReleaseVersion !== lastReleaseSeenByUser) {
             this.$store.commit('SET_NOTIFICATION', true);

src/pages/BoardPage.vue

@@ -99,8 +99,7 @@ export default {
     },
 
     isPublicRoute() {
-      // OPTIMIZE: use optional chaining
+      return this.$route.meta?.public;
-      return this.$route.meta && this.$route.meta.public;
     },
 
     showBoard() {
@@ -115,7 +114,7 @@ export default {
         ? `background-image: url('${this.backgroundUrl}');`
         : null;
 
-      const backgroundColor = this.board && this.board.backgroundColor
+      const backgroundColor = this.board?.backgroundColor
         ? `background-color: ${this.board.backgroundColor};`
         : null;
 
@@ -123,12 +122,11 @@ export default {
     },
 
     boardId() {
-      return this.$route.params.id;
+      return this.$route.params?.id;
     },
 
     empty() {
-      // OPTIMIZE: use optional chaining
+      return this.board?.lists?.length === 0;
-      return this.board && this.board.lists && this.board.lists.length === 0;
     },
   },
 
@@ -195,7 +193,7 @@ export default {
     },
 
     async loadBoardBackground() {
-      const url = this.board && this.board.backgroundUrl;
+      const url = this.board?.backgroundUrl;
 
       if (url) {
         this.backgroundUrl = url.includes('igdb')

src/pages/GamePage.vue

@@ -34,9 +34,9 @@ export default {
     },
 
     // backdropUrl() {
-    //   const screenshots = this.game && this.game.screenshots;
+    //   const screenshots = this.game?.screenshots;
     //
-    //   return screenshots && screenshots.length
+    //   return screenshots.length > 0
     //     ? `https://images.igdb.com/igdb/image/upload/t_screenshot_huge_2x/${screenshots[0].image_id}.jpg`
     //     : '';
     // },
@@ -60,7 +60,7 @@ export default {
 
   methods: {
     async loadGame() {
-      const gameCached = this.game.id && this.game.id === this.gameId;
+      const gameCached = this.game?.id === this.gameId;
 
       if (!this.gameId || gameCached) return;
 
@@ -81,7 +81,7 @@ export default {
       const gogCategoryId = 17;
       const steamCategoryId = 13;
 
-      const steamPage = this.game && this.game.websites
+      const steamPage = this.game?.websites
         ? this.game.websites.find(({ category }) => category === steamCategoryId)
         : null;
 
@@ -93,7 +93,7 @@ export default {
         : null;
 
 
-      const gogPage = this.game && this.game.websites
+      const gogPage = this.game?.websites
         ? this.game.websites.find(({ category }) => category === gogCategoryId)
         : null;
 

src/pages/PublicProfilePage.vue

@@ -72,9 +72,7 @@ export default {
     ...mapState(['user']),
 
     canEdit() {
-      return this.profile && this.profile.uid
+      return this.user?.uid === this.profile?.uid;
-        ? this.user && this.user.uid === this.profile.uid
-        : false;
     },
 
     userName() {

src/pages/game/GameMediaPage.vue

@@ -158,7 +158,7 @@ export default {
     },
 
     screenshots() {
-      return this.game && this.game.screenshots ? this.game.screenshots : [];
+      return this.game?.screenshots || [];
     },
 
     subtitle() {
@@ -168,7 +168,7 @@ export default {
     },
 
     gameThumbnails() {
-      const gogImages = this.game.gog && this.game.gog.gallery
+      const gogImages = this.game?.gog?.gallery
         // eslint-disable-next-line
         ? this.game.gog.gallery.map((image) => {
           const imageId = image.split('.com/')[1];
@@ -179,12 +179,12 @@ export default {
         })
         : [];
 
-      const steamImages = this.game.steam && this.game.steam.screenshots
+      const steamImages = this.game?.steam?.screenshots
         // eslint-disable-next-line
         ? this.game.steam.screenshots.map(({ path_thumbnail }) => path_thumbnail)
         : [];
 
-      const igdbImages = this.game && this.game.screenshots
+      const igdbImages = this.game?.screenshots
         // eslint-disable-next-line
         ? this.game.screenshots.map(({ image_id }) => `https://images.igdb.com/igdb/image/upload/t_screenshot_med_2x/${image_id}.jpg`)
         : [];
@@ -198,7 +198,7 @@ export default {
     },
 
     gameImages() {
-      const gogImages = this.game.gog && this.game.gog.gallery
+      const gogImages = this.game?.gog?.gallery
         // eslint-disable-next-line
         ? this.game.gog.gallery.map((image) => {
           const imageId = image.split('.com/')[1];
@@ -209,12 +209,12 @@ export default {
         })
         : [];
 
-      const steamImages = this.game.steam && this.game.steam.screenshots
+      const steamImages = this.game?.steam?.screenshots
         // eslint-disable-next-line
         ? this.game.steam.screenshots.map(({ path_full }) => path_full)
         : [];
 
-      const igdbImages = this.game && this.game.screenshots
+      const igdbImages = this.game?.screenshots
         // eslint-disable-next-line
         ? this.game.screenshots.map(({ image_id }) => `https://images.igdb.com/igdb/image/upload/t_screenshot_huge_2x/${image_id}.jpg`)
         : [];

src/store/actions.js

@@ -781,7 +781,7 @@ export default {
 
           const latestReleaseVersion = latestRelease && latestRelease.tag_name;
 
-          const lastReleaseSeenByUser = (this.settings && this.settings.release) || null;
+          const lastReleaseSeenByUser = this.settings?.release || null;
 
           if (latestReleaseVersion !== lastReleaseSeenByUser) {
             commit('SET_NOTIFICATION', true);