App.js

import React from 'react';
import axios from 'axios';

import Organization from './Organization';

const axiosGitHubGraphQL = axios.create({
    baseURL: 'https://api.github.com/graphql',
    headers: {
        Authorization: `bearer ${process.env.REACT_APP_GITHUB_PERSONAL_ACCESS_TOKEN}`,
    },
});

const GET_REPOSITORY_ISSUES = `
    query GetRepositoryIssues(
        $organization: String!,
        $repository: String!,
        $cursor: String
    ) {
        organization(login: $organization) {
            name
            url
            repository(name: $repository) {
                id
                name
                url
                viewerHasStarred
                issues(first: 5, after: $cursor, states: [OPEN]) {
                    edges {
                        node {
                            id
                            title
                            url
                            reactions(last: 3) {
                                edges {
                                    node {
                                        id
                                        content
                                    }
                                }
                            }
                        }
                    }
                    totalCount
                    pageInfo {
                        endCursor
                        hasNextPage
                    }
                }
            }
        }
    }
`;

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

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

const App = () => {
    const [path, setPath] = React.useState(
        'the-road-to-graphql/the-road-to-graphql'
    );
    const [organization, setOrganization] = React.useState(null);
    const [errors, setErrors] = React.useState(null);
    const [fetching, setFetching] = React.useState(false);
    const [starring, setStarring] = React.useState(false);

    const starRepository = async (viewerHasStarred, repositoryId) => {
        setStarring(true);
        const result = await axiosGitHubGraphQL.post('', {
            query: viewerHasStarred ? REMOVE_STAR : ADD_STAR,
            variables: { repositoryId },
        });
        setStarring(false);

        // Modify organization on star
        setOrganization((initialValue) => {
            const newOrganization = { ...initialValue };
            newOrganization.repository.viewerHasStarred = viewerHasStarred
                ? result.data.data.removeStar.starrable.viewerHasStarred
                : result.data.data.addStar.starrable.viewerHasStarred;
            return { ...newOrganization };
        });
    };

    const fetchData = React.useCallback(
        async (cursor) => {
            setFetching(true);
            const [org, repository] = path.split('/');
            const { data } = await axiosGitHubGraphQL.post('', {
                query: GET_REPOSITORY_ISSUES,
                variables: { organization: org, repository, cursor },
            });
            setFetching(false);

            if (data.errors) return setErrors(data.errors);

            // Modify organization on more issues
            if (!cursor) {
                setOrganization(data.data.organization);
                return;
            }

            setOrganization((initialValue) => {
                const newOrganization = { ...initialValue };

                const oldIssues = [...newOrganization.repository.issues.edges];
                const newIssues = [...data.data.organization.repository.issues.edges];

                newOrganization.repository.issues.edges = [...newIssues, ...oldIssues];

                return newOrganization;
            });
        },
        [path]
    );

    const pathChange = (e) => setPath(e.target.value);
    const formSubmit = (e) => {
        e.preventDefault();
        fetchData();
    };

    const fetchMoreIssues = () => {
        const { endCursor } = organization.repository.issues.pageInfo;
        fetchData(endCursor);
    };

    React.useEffect(() => {
        fetchData();
    }, [fetchData]);

    return (
        <div className="App">
            <form onSubmit={formSubmit}>
                <label htmlFor="url">Show open issues for https://github.com/</label>
                <input id="url" type="text" value={path} onChange={pathChange} />
                <button disabled={fetching} type="submit">
                    Search
                </button>
            </form>

            {organization || errors ? (
                <Organization
                    organization={organization}
                    fetchMoreIssues={fetchMoreIssues}
                    errors={errors}
                    fetching={fetching}
                    starRepository={starRepository}
                    starring={starring}
                />
            ) : (
                <p>Fetching</p>
            )}
        </div>
    );
};

export default App;