[WIP] Add communities

src/assets/styles/Main.sass

@@ -279,10 +279,6 @@ a
       @extend .text-color-base
     .main-options-dropdown-container
       @extend .visibility-visible
-  &.main-playlist-item, &.main-profile-item
-    & > .content
-      & > .description
-        @extend .no-margin
 
 .main-message-item, .main-profile-item
   & > .image

src/components/buttons/community/BaseCommunityCreateButton.vue

@@ -0,0 +1,18 @@
+<template>
+  <div>button</div>
+</template>
+
+<script>
+export default {
+  name: 'BaseCommunityCreateButton',
+  components: {},
+  props: {},
+  data () {
+    return {}
+  },
+  computed: {},
+  methods: {}
+}
+</script>
+
+<style lang="sass" scoped></style>

src/components/buttons/playlist/BasePlaylistCreateButton.vue

@@ -0,0 +1,40 @@
+<template>
+  <BaseButton
+    class="primary"
+    icon="plus"
+    :text="createText"
+    @click="handleButtonClick"
+  />
+
+  <BasePlaylistCreateModal
+    ref="modal"
+  />
+</template>
+
+<script>
+import BaseButton from '@/buttons/BaseButton.vue'
+import BasePlaylistCreateModal
+  from '@/modals/playlist/BasePlaylistCreateModal.vue'
+
+export default {
+  name: 'BasePlaylistCreateButton',
+  components: {
+    BaseButton,
+    BasePlaylistCreateModal
+  },
+  computed: {
+    createText () {
+      return this.$t(
+        'actions.add.playlist'
+      )
+    }
+  },
+  methods: {
+    handleButtonClick () {
+      this.$refs.modal.show()
+    }
+  }
+}
+</script>
+
+<style lang="sass" scoped></style>

src/components/containers/pages/communities/BaseCommunitiesPageContainer.vue

@@ -0,0 +1,80 @@
+<template>
+  <BasePageContainer
+    :isShowLoader="!communitiesData"
+    :isLoading="isLoading"
+    :isError="!communitiesData && !!error"
+    :error="error"
+    @refresh="handleRefresh"
+  >
+    <slot
+      v-if="communitiesData"
+      :isLoading="isLoading"
+      :error="error"
+      :communitiesData="communitiesData"
+      :fetchData="fetchData"
+      :handleRefresh="handleRefresh"
+    ></slot>
+  </BasePageContainer>
+</template>
+
+<script>
+import BasePageContainer from '@/containers/pages/BasePageContainer.vue'
+import navigationMixin from '*/mixins/navigationMixin'
+import {
+  communities as formatCommunitiesPageNavigation
+} from '#/formatters/navigation'
+import formatCommunitiesPageTab from '#/formatters/tabs/communities'
+import getCommunities from '#/actions/api/communities/get'
+
+export default {
+  name: 'BaseCommunitiesPageContainer',
+  components: {
+    BasePageContainer
+  },
+  mixins: [
+    navigationMixin
+  ],
+  props: {
+    responsePageLimit: Number
+  },
+  data () {
+    return {
+      communitiesData: null,
+      error: null,
+      isLoading: false
+    }
+  },
+  computed: {
+    navigationSections () {
+      return formatCommunitiesPageNavigation()
+    },
+    tabData () {
+      return formatCommunitiesPageTab()
+    },
+    communitiesArgs () {
+      return {
+        limit: this.responsePageLimit
+      }
+    }
+  },
+  mounted () {
+    this.setNavigation()
+
+    this.fetchData()
+  },
+  methods: {
+    handleRefresh (page) {
+      this.fetchData(page)
+    },
+    getCommunities,
+    fetchData (page) {
+      this.getCommunities({
+        ...this.communitiesArgs,
+        page
+      })
+    }
+  }
+}
+</script>
+
+<style lang="sass" scoped></style>

src/components/containers/pages/community/BaseCommunityPageContainer.vue

@@ -0,0 +1,100 @@
+<template>
+  <BasePageContainer
+    :isShowLoader="!communityData"
+    :isLoading="isLoading"
+    :isError="!communityData && !!error"
+    :error="error"
+    @refresh="handleRefresh"
+  >
+    <slot
+      v-if="communityData"
+      :isLoading="isLoading"
+      :error="error"
+      :communityData="communityData"
+      :fetchData="fetchData"
+      :handleRefresh="handleRefresh"
+    ></slot>
+  </BasePageContainer>
+</template>
+
+<script>
+import BasePageContainer from '@/containers/pages/BasePageContainer.vue'
+import navigationMixin from '*/mixins/navigationMixin'
+import formatCommunityPageNavigation
+  from '#/formatters/navigation/community'
+import formatCommunityPageTab from '#/formatters/tabs/community'
+import getCommunity from '#/actions/api/community/get'
+
+export default {
+  name: 'BaseCommunityPageContainer',
+  components: {
+    BasePageContainer
+  },
+  mixins: [
+    navigationMixin
+  ],
+  provide () {
+    return {
+      setCommunityData: this.setCommunityData
+    }
+  },
+  props: {
+    communityId: String
+  },
+  data () {
+    return {
+      communityData: null,
+      error: null,
+      isLoading: false
+    }
+  },
+  computed: {
+    navigationSections () {
+      return formatCommunityPageNavigation(
+        this.navigationData
+      )
+    },
+    navigationData () {
+      return {
+        communityId: this.communityId,
+        communityTitle: this.communityTitleFetched
+      }
+    },
+    tabData () {
+      return formatCommunityPageTab(
+        this.navigationData
+      )
+    },
+    communityTitleFetched () {
+      return this.communityData?.title
+    },
+    communityArgs () {
+      return {
+        communityId: this.communityId
+      }
+    }
+  },
+  watch: {
+    communityData: 'handleNavigationDataChange'
+  },
+  mounted () {
+    this.fetchData()
+  },
+  methods: {
+    handleRefresh () {
+      this.fetchData()
+    },
+    getCommunity,
+    fetchData () {
+      this.getCommunity(
+        this.communityArgs
+      )
+    },
+    setCommunityData (value) {
+      this.communityData = value
+    }
+  }
+}
+</script>
+
+<style lang="sass" scoped></style>

src/components/containers/pages/profile/BaseProfilePageContainer.vue

@@ -27,6 +27,8 @@ import formatProfileLibraryPageTab from '#/formatters/tabs/profile/library'
 import formatProfileFavoritesPageTab from '#/formatters/tabs/profile/favorites'
 import formatProfilePlaylistsPageTab from '#/formatters/tabs/profile/playlists'
 import formatProfilePostsPageTab from '#/formatters/tabs/profile/posts'
+import formatProfileCommunitiesPageTab
+  from '#/formatters/tabs/profile/communities'
 import getProfile from '#/actions/api/profile/get'
 
 export default {
@@ -103,6 +105,10 @@ export default {
           return formatProfilePostsPageTab(
             this.navigationData
           )
+        case 'communities':
+          return formatProfileCommunitiesPageTab(
+            this.navigationData
+          )
         default:
           return formatProfilePageTab(
             this.navigationData

src/components/images/BaseImage.vue

@@ -28,6 +28,7 @@ export default {
         track: 'https://lastfm.freetls.fastly.net/i/u/300x300/4128a6eb29f94943c9d206c08e625904.png',
         playlist: 'https://lastfm.freetls.fastly.net/i/u/300x300/4128a6eb29f94943c9d206c08e625904.png',
         profile: 'https://lastfm.freetls.fastly.net/i/u/300x300/818148bf682d429dc215c1705eb27b98.png',
+        community: 'https://lastfm.freetls.fastly.net/i/u/300x300/818148bf682d429dc215c1705eb27b98.png',
         video: 'https://i.ytimg.com'
       }
     }

src/components/layout/panels/TheSidebarPanel.vue

@@ -15,6 +15,7 @@
         <BookmarksItem />
         <TopItem />
         <RadioItem />
+        <CommunitiesItem />
       </div>
 
       <div>
@@ -37,6 +38,7 @@ import FavoritesItem from './TheSidebarPanel/FavoritesItem.vue'
 import BookmarksItem from './TheSidebarPanel/BookmarksItem.vue'
 import TopItem from './TheSidebarPanel/TopItem.vue'
 import RadioItem from './TheSidebarPanel/RadioItem.vue'
+import CommunitiesItem from './TheSidebarPanel/CommunitiesItem.vue'
 import SettingsItem from './TheSidebarPanel/SettingsItem.vue'
 import LogoutItem from './TheSidebarPanel/LogoutItem.vue'
 
@@ -53,6 +55,7 @@ export default {
     BookmarksItem,
     TopItem,
     RadioItem,
+    CommunitiesItem,
     SettingsItem,
     LogoutItem
   },

src/components/layout/panels/TheSidebarPanel/CommunitiesItem.vue

@@ -0,0 +1,42 @@
+<template>
+  <BaseSidebarItem
+    icon="users"
+    :text="communitiesText"
+    :link="profileCommunitiesLink"
+  />
+</template>
+
+<script>
+import { mapState } from 'vuex'
+import BaseSidebarItem from '@/BaseSidebarItem.vue'
+import {
+  communities as formatProfileCommunitiesLink
+} from '#/formatters/links/profile'
+
+export default {
+  name: 'CommunitiesItem',
+  components: {
+    BaseSidebarItem
+  },
+  computed: {
+    ...mapState('profile', {
+      profileInfo: 'info'
+    }),
+    communitiesText () {
+      return this.$t(
+        'navigation.communities'
+      )
+    },
+    profileCommunitiesLink () {
+      return formatProfileCommunitiesLink({
+        profileId: this.profileId
+      })
+    },
+    profileId () {
+      return this.profileInfo.id.toString()
+    }
+  }
+}
+</script>
+
+<style lang="sass" scoped></style>

src/components/lists/communities/BaseCommunitiesSimpleList.vue

@@ -0,0 +1,40 @@
+<template>
+  <BaseListContainer class="selection">
+    <CommunityItem
+      v-for="communityData in communitiesCollection"
+      :key="communityData.uuid"
+      :communityData="communityData"
+    />
+  </BaseListContainer>
+</template>
+
+<script>
+import BaseListContainer from '@/containers/lists/BaseListContainer.vue'
+import CommunityItem from './BaseCommunitiesSimpleList/CommunityItem.vue'
+import { collection as formatCollection } from '#/formatters'
+
+export default {
+  name: 'BaseCommunitiesSimpleList',
+  components: {
+    BaseListContainer,
+    CommunityItem
+  },
+  props: {
+    communities: {
+      type: Array,
+      default () {
+        return []
+      }
+    }
+  },
+  computed: {
+    communitiesCollection () {
+      return formatCollection(
+        this.communities
+      )
+    }
+  }
+}
+</script>
+
+<style lang="sass" scoped></style>