[WIP] Add communities

src/assets/styles/Main.sass

@@ -259,14 +259,16 @@ a
   & > .content
     @extend .flex-full, .no-padding
     .content-container
-      margin-top: 1em
+      margin-top: 0.75em
     .content-section
       margin-top: 5px !important
     .text
       font-size: 18px
       line-height: 1.2em
     & > .description
       margin-top: 0.25em !important
+      &.main-timestamp
+        @extend .no-margin
   .main-options-dropdown-container
     @extend .visibility-hidden
     margin-left: 0.5em
@@ -279,10 +281,8 @@ a
       @extend .text-color-base
     .main-options-dropdown-container
       @extend .visibility-visible
-
-.main-message-item, .main-profile-item
-  & > .image
-    align-self: start
+  &.main-post-item, &.main-message-item, &.main-profile-item
+    @extend .align-items-start
 
 .main-message
   @extend .no-shadow, .no-margin
@@ -630,8 +630,10 @@ a
   & > .buttons-container
     @extend .d-flex, .align-items-center
     margin-top: 1em
-    & > .add-buttons
+    & > .add-buttons-container
       @extend .flex-full
+    & > .main-as-community-checkbox
+      margin: 0 1em
   .images-tracks-section
     margin-top: 1em
 

src/components/BaseTimestamp.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="main-small-container">
+  <div class="main-small-container main-timestamp">
     <small>
       {{ createdText }}
     </small>

src/components/buttons/BaseSubmitButton.vue

@@ -1,9 +1,12 @@
 <template>
   <button
+    ref="button"
     type="submit"
     class="ui primary button main-submit-button"
     :class="{ inverted: isDarkMode }"
   >
+    <i class="check icon"></i>
+
     {{ actionText }}
   </button>
 </template>
@@ -28,6 +31,11 @@ export default {
         `actions.${this.actionKey}`
       )
     }
+  },
+  methods: {
+    click () {
+      this.$refs.button.click()
+    }
   }
 }
 </script>

src/components/buttons/community/BaseCommunityCreateButton.vue

@@ -1,6 +1,6 @@
 <template>
   <BaseButton
-    class="primary"
+    class="basic"
     icon="plus"
     :text="createText"
     @click="handleButtonClick"

src/components/buttons/playlist/BasePlaylistCreateButton.vue

@@ -1,6 +1,6 @@
 <template>
   <BaseButton
-    class="primary"
+    class="basic"
     icon="plus"
     :text="createText"
     @click="handleButtonClick"

src/components/containers/BaseDropdownContainer.vue

@@ -31,7 +31,10 @@
       :isError="isError"
     />
 
-    <div class="menu">
+    <div
+      class="menu"
+      :class="menuDirection"
+    >
       <slot></slot>
     </div>
   </div>
@@ -63,7 +66,8 @@ export default {
     header: String,
     isDisabled: Boolean,
     isLoading: Boolean,
-    isError: Boolean
+    isError: Boolean,
+    menuDirection: String
   },
   emits: [
     'change'

src/components/containers/forms/BaseFormContainer.vue

@@ -1,7 +1,7 @@
 <template>
   <form
-    class="ui form main-form"
     ref="form"
+    class="ui form main-form"
     :class="{
       loading: isLoading,
       inverted: isDarkMode

src/components/containers/forms/community/BaseCommunityCreateFormContainer.vue

@@ -15,8 +15,8 @@ import BaseFormContainer
 import { communityFormOptions } from '*/helpers/data/plugins/semantic'
 import createCommunity from '*/helpers/actions/api/community/create'
 import {
-  community as formatCommunityLink
-} from '*/helpers/formatters/links/communities'
+  main as formatCommunityMainLink
+} from '*/helpers/formatters/links/community'
 
 export default {
   name: 'BaseCommunityCreateFormContainer',
@@ -44,7 +44,7 @@ export default {
       })
     },
     communityUrl () {
-      return formatCommunityLink({
+      return formatCommunityMainLink({
         communityId: this.communityId
       })
     }

src/components/containers/forms/post/BasePostCreateFormContainer.vue

@@ -12,7 +12,8 @@
 import BaseFormContainer
   from '*/components/containers/forms/BaseFormContainer.vue'
 import { postFormOptions } from '*/helpers/data/plugins/semantic'
-import createPost from '*/helpers/actions/api/post/create'
+import createProfilePost from '*/helpers/actions/api/profile/post/create'
+import createCommunityPost from '*/helpers/actions/api/community/post/create'
 import { artistName as formatArtistName } from '*/helpers/formatters'
 
 export default {
@@ -21,7 +22,7 @@ export default {
     BaseFormContainer
   },
   props: {
-    profileId: {
+    postType: {
       type: String,
       required: true
     },
@@ -36,7 +37,9 @@ export default {
       default () {
         return []
       }
-    }
+    },
+    profileId: String,
+    communityId: String
   },
   emits: [
     'success'
@@ -82,17 +85,25 @@ export default {
 
         this.createPost(
           createArgs
-        ).then(
-          this.handleCreateSuccess
         )
       }
     },
-    handleCreateSuccess () {
-      this.$emit(
-        'success'
-      )
+    createProfilePost,
+    createCommunityPost,
+    createPost (args) {
+      switch (this.postType) {
+        case 'profile':
+          return this.createProfilePost(
+            args
+          )
+        case 'community':
+          return this.createCommunityPost(
+            args
+          )
+        default:
+          return null
+      }
     },
-    createPost,
     formatTrack (trackData) {
       const artistName =
         formatArtistName(
@@ -112,6 +123,8 @@ export default {
     formatCreateArgs (fields) {
       return {
         otherProfileId: this.profileId,
+        communityId: this.communityId,
+        byCommunity: !!fields.community,
         content: fields.content,
         tracks: this.tracksFormatted,
         images: this.imagesFormatted

src/components/containers/forms/post/BasePostUpdateFormContainer.vue

@@ -12,7 +12,8 @@
 import BaseFormContainer
   from '*/components/containers/forms/BaseFormContainer.vue'
 import { postFormOptions } from '*/helpers/data/plugins/semantic'
-import updatePost from '*/helpers/actions/api/post/update'
+import updateProfilePost from '*/helpers/actions/api/profile/post/update'
+import updateCommunityPost from '*/helpers/actions/api/community/post/update'
 import { artistName as formatArtistName } from '*/helpers/formatters'
 
 export default {
@@ -21,8 +22,8 @@ export default {
     BaseFormContainer
   },
   props: {
-    postId: {
-      type: String,
+    postData: {
+      type: Object,
       required: true
     },
     tracks: {
@@ -39,16 +40,24 @@ export default {
     }
   },
   emits: [
-    'postDataChange'
+    'success'
   ],
   data () {
     return {
-      postData: null,
       error: null,
       isLoading: false
     }
   },
   computed: {
+    postId () {
+      return this.postData.id
+    },
+    postType () {
+      return this.postData.post_type
+    },
+    communityId () {
+      return this.postData.community?.id
+    },
     options () {
       return postFormOptions({
         onSuccess: this.handleSuccess
@@ -60,18 +69,11 @@ export default {
       )
     },
     imagesFormatted () {
-      if (this.images.length) {
-        return this.images.map(
-          this.formatImage
-        )
-      } else {
-        return 'DELETED'
-      }
+      return this.images.map(
+        this.formatImage
+      )
     }
   },
-  watch: {
-    postData: 'handlePostDataChange'
-  },
   methods: {
     handleSuccess (event, fields) {
       event.preventDefault()
@@ -93,13 +95,22 @@ export default {
         )
       }
     },
-    handlePostDataChange (value) {
-      this.$emit(
-        'postDataChange',
-        value
-      )
+    updateProfilePost,
+    updateCommunityPost,
+    updatePost (args) {
+      switch (this.postType) {
+        case 'profile':
+          return this.updateProfilePost(
+            args
+          )
+        case 'community':
+          return this.updateCommunityPost(
+            args
+          )
+        default:
+          return null
+      }
     },
-    updatePost,
     formatTrack (trackData) {
       const artistName =
         formatArtistName(
@@ -119,7 +130,9 @@ export default {
     },
     formatUpdateArgs (fields) {
       return {
+        communityId: this.communityId,
         postId: this.postId,
+        byCommunity: !!fields.community,
         content: fields.content,
         tracks: this.tracksFormatted,
         images: this.imagesFormatted

src/components/containers/lists/BasePaginatedListContainer.vue

@@ -363,13 +363,13 @@ export default {
     handleClientPageCollectionChange (value) {
       if (value) {
         if (this.isFocusable) {
-          this.$emit('focus')
+          setTimeout(() => {
+            this.$emit('focus')
+          }, 0)
         }
 
         if (!this.isCollectionFull) {
-          this.$nextTick(() => {
-            this.fetchData()
-          })
+          this.fetchData()
         }
       }
     },

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

@@ -6,6 +6,7 @@
   >
     <slot
       :communityData="communityData"
+      :communityCreatorId="communityCreatorId"
       :isLoading="isLoading"
       :error="error"
       :fetchData="fetchData"
@@ -72,6 +73,9 @@ export default {
       return {
         communityId: this.communityId
       }
+    },
+    communityCreatorId () {
+      return this.communityData?.creator?.id?.toString()
     }
   },
   watch: {