normal commit

src/components/FollowBtn.vue

@@ -1,48 +1,56 @@
 <template>
-    <button class="btn btn-sm" :disabled="(localViewerIsFollowing === undefined && accessToken) || loading || !viewerCanFollow" @click="network_changeStarStatus">
-        {{loading ? 'Updating...' : (localViewerIsFollowing ? 'Unfollow' : 'Follow')}}
+    <button class="btn btn-sm" :disabled="!viewerFollowInfo.viewerCanFollow || viewerFollowInfo.viewerIsFollowing === undefined" @click="network_changeStarStatus">
+        {{loading ? 'Updating...' : (viewerFollowInfo.viewerIsFollowing ? 'Unfollow' : 'Follow')}}
     </button>
 </template>
 <script>
 import styled from 'vue-styled-components'
+import * as api from '@/network/api'
+import {authRequiredPut, authRequiredDelete} from '@/network'
+import {mapState} from 'vuex'
 export default {
     props: {
         userLogin: String,
-        viewerCanFollow: Boolean,
-        viewerIsFollowing: Boolean
     },
     data() {
         return {
-            loading: false,
-            localViewerIsFollowing: undefined,
+            loading: false
         }
     },
-    creatd() {
-        this.localViewerIsFollowing = this.viewerIsFollowing
+    computed: {
+        ...mapState({
+            viewerFollowInfo(state) {
+                return state.graphqlData.nodes.filter(i => i.login == this.userLogin)[0] || {}
+            }             
+        })
     },
     methods: {
          async network_changeStarStatus() {
-            if(this.viewerIsFollowing === undefined  && this.accessToken) return
             if(!this.accessToken) {
                 this.signIn()
                 return 
             }
             try {
                 this.loading = true
-                await this.github_changeUserFollowShip(this.userLogin, this.localViewerIsFollowing)
-                this.localViewerIsFollowing = !this.localViewerIsFollowing
+                let url = api.API_FOLLOW_USER_OR_NOT(this.userLogin)
+                if(this.viewerFollowInfo.viewerIsFollowing) {
+                    await authRequiredDelete(url)
+                }else{
+                    await authRequiredPut(url)
+                }
+                this.mutation_resolveGraphqlData({
+                    data: [{
+                        ...this.viewerFollowInfo,
+                        viewerIsFollowing: !this.viewerFollowInfo.viewerIsFollowing
+                    }]
+                })
             } catch (e) {
                 this.handleError(e)
             }finally{
                 this.loading = false
             }
         }
     },
-    watch: {
-        viewerIsFollowing(newOne,oldOne) {
-            this.localViewerIsFollowing = newOne
-        },
-    },
     components: {
         Container: styled.div``
     }

src/components/SimpleLoadingMore.vue

@@ -1,5 +1,5 @@
 <template>
-    <button @click="getData" class="btn mt-4 mb-3 py-2 btn-outline border-gray-dark f6 width-full">{{loading ? 'Loadding more…' : 'Load more…'}}</button>
+    <button @click="getData" class="btn mt-4 mb-3 py-2 btn-outline border-gray-dark f6 width-full">{{loading ? 'Loading more…' : 'Load more…'}}</button>
 </template>
 
 <script>

src/components/StarBtn.vue

@@ -1,11 +1,11 @@
 <template>
-    <button class="btn btn-sm" :disabled="(localViewerHasStarred === undefined && accessToken) || loading" @click="network_changeStarStatus">
+    <button class="btn btn-sm" :disabled="(viewerHasStarred === undefined && accessToken) || loading" @click="network_changeStarStatus">
         <span v-if="accessToken" >  
             <span v-if="!loading">
-                <svg v-if="localViewerHasStarred" class="octicon octicon-star" viewBox="0 0 14 16" version="1.1" width="14" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M14 6l-4.9-.64L7 1 4.9 5.36 0 6l3.6 3.26L2.67 14 7 11.67 11.33 14l-.93-4.74L14 6z"></path></svg>
+                <svg v-if="viewerHasStarred" class="octicon octicon-star" viewBox="0 0 14 16" version="1.1" width="14" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M14 6l-4.9-.64L7 1 4.9 5.36 0 6l3.6 3.26L2.67 14 7 11.67 11.33 14l-.93-4.74L14 6z"></path></svg>
                 <svg v-else class="octicon octicon-star mr-1" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M8 .25a.75.75 0 01.673.418l1.882 3.815 4.21.612a.75.75 0 01.416 1.279l-3.046 2.97.719 4.192a.75.75 0 01-1.088.791L8 12.347l-3.766 1.98a.75.75 0 01-1.088-.79l.72-4.194L.818 6.374a.75.75 0 01.416-1.28l4.21-.611L7.327.668A.75.75 0 018 .25zm0 2.445L6.615 5.5a.75.75 0 01-.564.41l-3.097.45 2.24 2.184a.75.75 0 01.216.664l-.528 3.084 2.769-1.456a.75.75 0 01.698 0l2.77 1.456-.53-3.084a.75.75 0 01.216-.664l2.24-2.183-3.096-.45a.75.75 0 01-.564-.41L8 2.694v.001z"></path></svg>
             </span> 
-            {{loading ? 'Updating...' : (localViewerHasStarred ? 'Unstar' : 'Star')}}
+            {{loading ? 'Updating...' : (viewerHasStarred ? 'Unstar' : 'Star')}}
         </span>
 
         <span v-else>
@@ -16,20 +16,28 @@
 </template>
 <script>
 import styled from 'vue-styled-components'
+import {mapState} from 'vuex'
+import { authRequiredDelete,authRequiredPut} from '@/network'
+import * as api from '@/network/api'
 export default {
     props: {
         ownerProp: String,
         repoProp: String,
-        viewerHasStarred: Boolean
     },
     data() {
         return {
             loading: false,
-            localViewerHasStarred: undefined,
         }
     },
-    created() {
-        this.localViewerHasStarred = this.viewerHasStarred
+    computed: {
+        ...mapState({
+            graphqlData(state) {
+                return state.graphqlData.nodes.filter(i => i.name == this.repoProp && i.owner.login == this.ownerProp)[0] || {}
+            }
+        }),
+        viewerHasStarred() {
+            return this.graphqlData.viewerHasStarred
+        }
     },
     methods: {
          async network_changeStarStatus() {
@@ -40,18 +48,33 @@ export default {
             }
             try {
                 this.loading = true
-                await this.github_changeStarStatus(this.ownerProp, this.repoProp, this.localViewerHasStarred)
-                this.localViewerHasStarred = !this.localViewerHasStarred
+                let url  = api.API_STAR_OR_NOT_REPOSITORY({
+                        owner: this.ownerProp,
+                        repo: this.repoProp
+                    })
+                console.log(url)
+                if(this.viewerHasStarred) {
+                    await authRequiredDelete(
+                        url,
+                        {},
+                    )
+                }else{
+                    await authRequiredPut(
+                        url
+                    )
+                }
+
+                this.mutation_resolveGraphqlData({
+                    data: [{
+                        ...this.graphqlData,
+                        viewerHasStarred: !this.viewerHasStarred
+                    }]
+                })
             } catch (e) {
                 this.handleError(e)
             }finally{
                 this.loading = false
             }
-        }
-    },
-    watch: {
-        viewerHasStarred(newOne,oldOne) {
-            this.localViewerHasStarred = newOne
         },
     },
     components: {

src/network/api.js

@@ -421,7 +421,7 @@ export const API_PROXY_PULSE_DIFF_STATUS_SUMMARY = payload => {
 }
 
 
-export const API_STAR_OR_NOT_REPOSITORY = payload => `${GITHUB_REST_API_BASE}/user/starred/${payload.owner}   ${payload.repo}`
+export const API_STAR_OR_NOT_REPOSITORY = payload => `${GITHUB_REST_API_BASE}/user/starred/${payload.owner}/${payload.repo}`
 
 export const API_BLOCK_USER_OR_NOT = payload => `${GITHUB_REST_API_BASE}/user/blocks/${payload}`