refactor: change profile type

src/components/ArticleDetailCommentsForm.vue

@@ -42,7 +42,7 @@ import { useProfile } from '../composable/useProfile'
 
 import { postComment } from '../services/comment/postComment'
 
-import * as userStore from '../store/user'
+import { user, checkAuthorization } from '../store/user'
 
 export default defineComponent({
   name: 'ArticleDetailCommentsForm',
@@ -53,13 +53,8 @@ export default defineComponent({
     'add-comment': (comment: ArticleComment) => !!comment.id,
   },
   setup (props, { emit }) {
-    const { user, checkAuthorization } = userStore
-
-    let profile
-    if (checkAuthorization(user)) {
-      const username = computed(() => user.value.username)
-      profile = useProfile({ username }).profile
-    }
+    const username = computed(() => checkAuthorization(user) ? user.value.username : '')
+    const { profile } = useProfile({ username })
 
     const comment = ref('')
 

src/composable/useProfile.ts

@@ -1,4 +1,4 @@
-import { ComputedRef, reactive, watch } from 'vue'
+import { ComputedRef, ref, watch } from 'vue'
 
 import { getProfile } from '../services/profile/getProfile'
 
@@ -7,15 +7,16 @@ interface UseProfileProps {
 }
 
 export function useProfile ({ username }: UseProfileProps) {
-  const profile = reactive<Profile>({} as Profile)
+  const profile = ref<Profile | null>(null)
 
   async function fetchProfile () {
+    updateProfile(null)
     const profileData = await getProfile(username.value)
     updateProfile(profileData)
   }
 
-  async function updateProfile (profileData: Profile) {
-    Object.assign(profile, profileData)
+  async function updateProfile (profileData: Profile | null) {
+    profile.value = profileData
   }
 
   watch(username, fetchProfile, { immediate: true })

src/pages/Profile.vue

@@ -5,7 +5,7 @@
         <div class="row">
           <div class="col-xs-12 col-md-10 offset-md-1">
             <div
-              v-if="!profile.username"
+              v-if="!profile"
               class="align-left"
             >
               Profile is downloading...
@@ -89,7 +89,7 @@ export default defineComponent({
     const { profile, updateProfile } = useProfile({ username })
 
     const { followProcessGoing, toggleFollow } = useFollow({
-      following: computed<boolean>(() => profile.following),
+      following: computed<boolean>(() => profile.value?.following ?? false),
       username,
       onUpdate: (newProfileData: Profile) => updateProfile(newProfileData),
     })