some bugs of user profile's article list sub route and home page

[xjxl520303]

Hi, guys

This is a very excellent demo project for the Nuxt community to learn it, especially like me who was first touch it.

I build projects from scratch and follow your code line by line. The backend references the project Conduit_NodeJS.

Conduit_NodeJS The project was written very simply and did the basics, but it had a lot of problems and didn't implement the API as it was supposed to, so I was mostly working on the original issues of the various projects. The Nuxt project taught me a lot about TypeScript and how to use Composition Api to encapsulate business logic.

In the current learning process, I also found some small problems, by the way, feedback:

1. An internal request is sent each time useProfileList() is called, which causes the list of articles to be repeatedly requested on the profile page.
2. The currently active tab does not display correctly based on the route change. If you are currently in the Favorited Posts tab, when you refresh the page, My Posts is selected, but the interface request is api/articles?favorited=xx&limit =20&offset=0. Also, if you click the user name on the profile page, the new profile page will not display correctly.
3. Normal logic if the user is logged in to see their favorite articles are highlighted. However, since it is rendered by the server, there is no authorization information at the request of the server, so the user cannot see it.

Here are my solutions for your reference:

Profile page problems

path: /compositions/useProfileList.ts

export default function useProfileList(triggerFetch?: boolean) {
  // omit some code ...
  const { fetchState } = useFetch(async () => {
    const postTypeBy: { [P: string]: PostType } = {
      'profile-userName': 'AUTHOR',
      'profile-userName-favorites': 'FAVORITED'
    }

    if (route.value.name) {
      const postType = postTypeBy[route.value.name]

      if (triggerFetch) {
        await getArticleListByPost({ userName, postType })
      }
    }
  })
}

path: /pages/profile/_userName.vue add code:

watch(() => route.value, val => {
  if (val.name === 'profile-userName') {
    setPostType(postTypes[0].type)
  } else if (val.name === 'profile-userName-favorites') {
    setPostType(postTypes[1].type)
  }
}, {
  immediate: true
}

last, in file /pages/profile/_userName/index.vue and /pages/profile/_userName/favorites.vue, when call method useProfileList we pass parameter true.

The home page problems, I add some delay to wait till the auth token got, and the next request will take auth token in request headers so the server response the right payload.

path: /layout/default.vue

<template>
  <div id="main">
    <app-header />
      <template v-if="showRoute">
        <Nuxt />
      </template>
    <app-footer />
  </div>
</template>

<script lang="ts">
import { defineComponent, useAsync, ref, watch } from '@nuxtjs/composition-api'
import appFooter from './appFooter.vue'
import appHeader from './appHeader.vue'
import useUser from '@/compositions/useUser'

export default defineComponent({
  name: 'Default',
  components: {
    appHeader,
    appFooter,
  },
  setup() {
    const { user, retryLogin } = useUser()
    const showRoute = ref(false)

    useAsync(() => {
      if (process.server) {
        return false
      }

      const token = window.localStorage.getItem('token')

      if (token) {
        retryLogin(token)
      }
    })

    const cancelWatch = watch(user, (val) => {
      if (val.token) {
        clearTimeout(timeout)
        showRoute.value = true
      }
    })

    const timeout = setTimeout(() => {
      if (!showRoute.value) {
        cancelWatch()
        showRoute.value = true
      }
    }, 300)

    return {
      user,
      showRoute
    }
  },
})
</script>

[pocojang]

@xjxl520303 thanks for the bug tracking 👍

[pocojang]

this issue will close until November.