Skip to content
Permalink
Browse files

04-React GraphQL Mutation

  • Loading branch information...
rwieruch committed Oct 26, 2018
1 parent 0606773 commit 3dcd95e32ef24d9e716a1e8ac144b62c0f41ca3c
Showing with 113 additions and 1 deletion.
  1. +113 −1 src/App.js
@@ -18,8 +18,13 @@ const GET_ISSUES_OF_REPOSITORY = `
name
url
repository(name: $repository) {
id
name
url
stargazers {
totalCount
}
viewerHasStarred
issues(first: 5, after: $cursor, states: [OPEN]) {
edges {
node {
@@ -47,6 +52,26 @@ const GET_ISSUES_OF_REPOSITORY = `
}
`;

const ADD_STAR = `
mutation ($repositoryId: ID!) {
addStar(input:{starrableId:$repositoryId}) {
starrable {
viewerHasStarred
}
}
}
`;

const REMOVE_STAR = `
mutation ($repositoryId: ID!) {
removeStar(input:{starrableId:$repositoryId}) {
starrable {
viewerHasStarred
}
}
}
`;

const getIssuesOfRepository = (path, cursor) => {
const [organization, repository] = path.split('/');

@@ -85,6 +110,64 @@ const resolveIssuesQuery = (queryResult, cursor) => state => {
};
};

const addStarToRepository = repositoryId => {
return axiosGitHubGraphQL.post('', {
query: ADD_STAR,
variables: { repositoryId },
});
};

const resolveAddStarMutation = mutationResult => state => {
const {
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 removeStarFromRepository = repositoryId => {
return axiosGitHubGraphQL.post('', {
query: REMOVE_STAR,
variables: { repositoryId },
});
};

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,
},
},
},
};
};

class App extends Component {
state = {
path: 'the-road-to-learn-react/the-road-to-learn-react',
@@ -120,6 +203,18 @@ class App extends Component {
this.onFetchFromGitHub(this.state.path, endCursor);
};

onStarRepository = (repositoryId, viewerHasStarred) => {
if (viewerHasStarred) {
removeStarFromRepository(repositoryId).then(mutationResult =>
this.setState(resolveRemoveStarMutation(mutationResult)),
);
} else {
addStarToRepository(repositoryId).then(mutationResult =>
this.setState(resolveAddStarMutation(mutationResult)),
);
}
};

render() {
const { path, organization, errors } = this.state;

@@ -148,6 +243,7 @@ class App extends Component {
organization={organization}
errors={errors}
onFetchMoreIssues={this.onFetchMoreIssues}
onStarRepository={this.onStarRepository}
/>
) : (
<p>No information yet ...</p>
@@ -161,6 +257,7 @@ const Organization = ({
organization,
errors,
onFetchMoreIssues,
onStarRepository,
}) => {
if (errors) {
return (
@@ -180,18 +277,33 @@ const Organization = ({
<Repository
repository={organization.repository}
onFetchMoreIssues={onFetchMoreIssues}
onStarRepository={onStarRepository}
/>
</div>
);
};

const Repository = ({ repository, onFetchMoreIssues }) => (
const Repository = ({
repository,
onFetchMoreIssues,
onStarRepository,
}) => (
<div>
<p>
<strong>In Repository:</strong>
<a href={repository.url}>{repository.name}</a>
</p>

<button
type="button"
onClick={() =>
onStarRepository(repository.id, repository.viewerHasStarred)
}
>
{repository.stargazers.totalCount}
{repository.viewerHasStarred ? ' Unstar' : ' Star'}
</button>

<ul>
{repository.issues.edges.map(issue => (
<li key={issue.node.id}>

0 comments on commit 3dcd95e

Please sign in to comment.
You can’t perform that action at this time.