Add home page / Change feed page

Author: staniel359

src/components/containers/pages/feed/BaseFeedPageContainer.vue

@@ -0,0 +1,88 @@
+<template>
+  <BasePageContainer
+    :response-data="feedData"
+    :is-loading="isLoading"
+    :error="error"
+  >
+    <slot
+      :feed-data="feedData"
+      :is-loading="isLoading"
+      :error="error"
+      :fetch-data="fetchData"
+      :refresh="refresh"
+    />
+  </BasePageContainer>
+</template>
+
+<script>
+import BasePageContainer
+  from '*/components/containers/pages/BasePageContainer.vue'
+import navigationMixin from '*/mixins/navigationMixin'
+import {
+  feed as formatFeedPageNavigation
+} from '*/helpers/formatters/navigation'
+import {
+  feed as formatFeedPageTab
+} from '*/helpers/formatters/tabs'
+import getFeed from '*/helpers/actions/api/feed/get'
+
+export default {
+  name: 'BaseFeedPageContainer',
+  components: {
+    BasePageContainer
+  },
+  mixins: [
+    navigationMixin
+  ],
+  props: {
+    limit: Number
+  },
+  data () {
+    return {
+      feedData: null,
+      error: null,
+      isLoading: false
+    }
+  },
+  computed: {
+    navigationSections () {
+      return formatFeedPageNavigation()
+    },
+    tabData () {
+      return formatFeedPageTab()
+    },
+    feedArgs () {
+      return {
+        limit: this.limit
+      }
+    }
+  },
+  mounted () {
+    this.setNavigation()
+
+    this.fetchData()
+  },
+  methods: {
+    getFeed,
+    fetchData (
+      page
+    ) {
+      this.getFeed(
+        {
+          ...this.feedArgs,
+          page
+        }
+      )
+    },
+    refresh (
+      page
+    ) {
+      this.fetchData(
+        page
+      )
+    }
+  }
+}
+</script>
+
+<style lang="sass" scoped></style>

src/components/layout/TheBrowserTabs.vue

@@ -235,7 +235,7 @@ export default {
     getNewTabData () {
       return {
         uuid: generateKey(),
-        path: 'feed'
+        path: 'home'
       }
     }
   }

src/helpers/data/plugins/i18n/locales/en.json

@@ -1,5 +1,6 @@
 {
   "navigation": {
+    "home": "Home page",
     "artists": "Artists",
     "artist": "Artist",
     "albums": "Albums",

src/helpers/data/plugins/i18n/locales/ru.json

@@ -1,5 +1,6 @@
 {
   "navigation": {
+    "home": "Домашняя страница",
     "artists": "Исполнители",
     "artist": "Исполнитель",
     "albums": "Альбомы",

src/helpers/data/plugins/router/routes.js

@@ -1,6 +1,9 @@
 const RootPage = () => import(
   '*/views/RootPage.vue'
 )
+const HomePage = () => import(
+  '*/views/HomePage.vue'
+)
 const FeedPage = () => import(
   '*/views/FeedPage.vue'
 )
@@ -175,6 +178,13 @@ export default [
     component: RootPage,
     props: true
   },
+  {
+    path: '/home',
+    exact: true,
+    name: 'HomePage',
+    component: HomePage,
+    props: true
+  },
   {
     path: '/feed',
     exact: true,

src/helpers/formatters/navigation.js

@@ -1,3 +1,5 @@
+import formatHomeSection
+  from '*/helpers/formatters/navigation/sections/home'
 import formatFeedSection
   from '*/helpers/formatters/navigation/sections/feed'
 import formatProfilesSection
@@ -13,6 +15,16 @@ import formatConversationsSection
 import formatCommunitiesSection
   from '*/helpers/formatters/navigation/sections/communities'
 
+export function home () {
+  return [
+    formatHomeSection(
+      {
+        isActive: true
+      }
+    )
+  ]
+}
+
 export function feed () {
   return [
     formatFeedSection(

src/helpers/formatters/navigation/sections/home.js

@@ -0,0 +1,14 @@
+import i18n from '*/plugins/i18n'
+
+export default function (
+  {
+    isActive
+  }
+) {
+  return {
+    name: i18n.global.t(
+      'navigation.home'
+    ),
+    isActive
+  }
+}

src/helpers/formatters/tabs.js

@@ -1,5 +1,17 @@
 import i18n from '*/plugins/i18n'
 
+export function home () {
+  const title = i18n.global.t(
+    'navigation.home'
+  )
+
+  return {
+    title,
+    path: 'home',
+    icon: 'home'
+  }
+}
+
 export function feed () {
   const title = i18n.global.t(
     'navigation.feed'

src/views/FeedPage.vue

@@ -1,57 +1,46 @@
 <template>
-  <div
-    :class="[
-      'feed-page-container',
-      'main-page-segment-container'
-    ]"
+  <BaseFeedPageContainer
+    :limit="limit"
   >
-    <BaseHeader
-      class="main-app-title"
-      tag="h1"
-      text="muffon"
-    />
-
-    <FeedSegment />
-  </div>
+    <template #default="pageSlotProps">
+      <BasePaginatedPageContainer
+        response-data-name="feedData"
+        :slot-props-data="pageSlotProps"
+        :scope="scope"
+        :limit="limit"
+      >
+        <template #default="slotProps">
+          <BasePostsSimpleList
+            :posts="slotProps[scope]"
+          />
+        </template>
+      </BasePaginatedPageContainer>
+    </template>
+  </BaseFeedPageContainer>
 </template>
 
 <script>
-import BaseHeader from '*/components/BaseHeader.vue'
-import FeedSegment from './FeedPage/FeedSegment.vue'
-import navigationMixin from '*/mixins/navigationMixin'
-import {
-  feed as formatFeedPageNavigation
-} from '*/helpers/formatters/navigation'
-import {
-  feed as formatFeedPageTab
-} from '*/helpers/formatters/tabs'
+import BaseFeedPageContainer
+  from '*/components/containers/pages/feed/BaseFeedPageContainer.vue'
+import BasePaginatedPageContainer
+  from '*/components/containers/pages/BasePaginatedPageContainer.vue'
+import BasePostsSimpleList
+  from '*/components/lists/posts/BasePostsSimpleList.vue'
 
 export default {
   name: 'FeedPage',
   components: {
-    BaseHeader,
-    FeedSegment
+    BaseFeedPageContainer,
+    BasePaginatedPageContainer,
+    BasePostsSimpleList
   },
-  mixins: [
-    navigationMixin
-  ],
-  computed: {
-    navigationSections () {
-      return formatFeedPageNavigation()
-    },
-    tabData () {
-      return formatFeedPageTab()
+  data () {
+    return {
+      limit: 50,
+      scope: 'feed'
     }
-  },
-  mounted () {
-    this.setNavigation()
   }
 }
 </script>
 
-<style lang="sass" scoped>
-.feed-page-container
-  @extend .d-flex, .flex-column, .align-items-center
-  padding-top: 5vh
-  height: 70vh
-</style>
+<style lang="sass" scoped></style>