add remove star

Author: rwieruch

src/App.js

@@ -58,19 +58,36 @@ const addStarToRepositoryMutation = `
   }
 `;
 
+const removeStarToRepositoryMutation = `
+  mutation ($repositoryId: ID!) {
+    removeStar(input:{starrableId:$repositoryId}) {
+      starrable {
+        viewerHasStarred
+      }
+    }
+  }
+`;
+
+const getIssuesOfRepository = path => {
+  const [organization, repository] = path.split('/');
+
+  return axiosGitHubGraphQL.post('', {
+    query: issuesOfRepositoryQuery,
+    variables: { organization, repository },
+  });
+};
+
 const addStarToRepository = repositoryId => {
   return axiosGitHubGraphQL.post('', {
     query: addStarToRepositoryMutation,
     variables: { repositoryId },
   });
 };
 
-const getIssuesOfRepository = path => {
-  const [organization, repository] = path.split('/');
-
+const removeStarFromRepository = repositoryId => {
   return axiosGitHubGraphQL.post('', {
-    query: issuesOfRepositoryQuery,
-    variables: { organization, repository },
+    query: removeStarToRepositoryMutation,
+    variables: { repositoryId },
   });
 };
 
@@ -79,13 +96,40 @@ const resolveAddStarMutation = mutationResult => state => {
     viewerHasStarred,
   } = mutationResult.data.data.addStar.starrable;
 
+  const { totalCount } = state.organization.repository.stargazers;
+
   return {
     ...state,
     organization: {
       ...state.organization,
       repository: {
         ...state.organization.repository,
         viewerHasStarred,
+        stargazers: {
+          totalCount: totalCount + 1,
+        },
+      },
+    },
+  };
+};
+
+const resolveRemoveStarMutation = mutationResult => state => {
+  const {
+    viewerHasStarred,
+  } = mutationResult.data.data.removeStar.starrable;
+
+  const { totalCount } = state.organization.repository.stargazers;
+
+  return {
+    ...state,
+    organization: {
+      ...state.organization,
+      repository: {
+        ...state.organization.repository,
+        viewerHasStarred,
+        stargazers: {
+          totalCount: totalCount - 1,
+        },
       },
     },
   };
@@ -121,10 +165,16 @@ class App extends Component {
     );
   };
 
-  onStarToRepository = repositoryId => {
-    addStarToRepository(repositoryId).then(mutationResult =>
-      this.setState(resolveAddStarMutation(mutationResult)),
-    );
+  onStarToRepository = (repositoryId, viewerHasStarred) => {
+    if (viewerHasStarred) {
+      removeStarFromRepository(repositoryId).then(mutationResult =>
+        this.setState(resolveRemoveStarMutation(mutationResult)),
+      );
+    } else {
+      addStarToRepository(repositoryId).then(mutationResult =>
+        this.setState(resolveAddStarMutation(mutationResult)),
+      );
+    }
   };
 
   render() {
@@ -201,9 +251,12 @@ const Repository = ({ repository, onStarToRepository }) => (
 
     <button
       type="button"
-      onClick={() => onStarToRepository(repository.id)}
+      onClick={() =>
+        onStarToRepository(repository.id, repository.viewerHasStarred)
+      }
     >
-      {repository.viewerHasStarred ? 'Unstar' : 'Star'}
+      {repository.stargazers.totalCount}
+      {repository.viewerHasStarred ? ' Unstar' : ' Star'}
     </button>
 
     <ul>