peterj

import React, { Component } from 'react';
import Link from './Link';

import gql from 'graphql-tag';
import { graphql } from 'react-apollo';

const ALL_LINKS_QUERY = gql`
    query AllLinksQuery {
        allLinks {
            id

peterj

createHash = (itemCount) => {
    let hashDigits = [];
    // dividend is a unique integer (in our case, number of links)
    let dividend = itemCount + 1;
    let remainder = 0;
    while (dividend > 0) {
        remainder = dividend % 62;
        dividend = Math.floor(dividend / 62);
        hashDigits.unshift(remainder);
    }

peterj

import React, { Component } from 'react';

class CreateShortLink extends Component {
    constructor(props) {
        super(props);
        this.state = {
            description: '',
            url: '',
        };
    }

peterj

import gql from 'graphql-tag';
import { graphql } from 'react-apollo';

const CREATE_SHORT_LINK_MUTATION = gql`
    mutation CreateLinkMutation($url: String!, $description: String!, $hash: String!) {
        createLink(url: $url, description: $description, hash: $hash) {
            id
        }
    }
`;

peterj

import React, { Component } from 'react';

import gql from 'graphql-tag';
import { graphql, withApollo } from 'react-apollo';

const CREATE_SHORT_LINK_MUTATION = gql`
    mutation CreateLinkMutation($url: String!, $description: String!) {
        createLink(url: $url, description: $description) {
            id
        }

peterj

createShortLink = async () => {
    const linkCountQuery = await this.props.client.query({
        query: GET_LINK_COUNT_QUERY,
    });

    const linkCount = linkCountQuery.data.links.count;
    const hash = createHash(linkCount);

    const { url, description } = this.state;
    await this.props.createShortLinkMutation({

peterj

import React, { Component } from 'react';
import LinkList from './components/LinkList';
import CreateShortLink from './components/CreateShortLink';

class App extends Component {
    render() {
        return (
            <div>
                <div>
                    <h2>All links</h2>

peterj

const LINKS_SUBSCRIPTION = gql`
    subscription NewLinkCreatedSubscription {
        Link(filter: { mutation_in: [CREATED] }) {
            node {
                id
                url
                description
                hash
            }
        }

peterj

componentDidMount() {
    this.props.allLinksQuery.subscribeToMore({
        document: LINKS_SUBSCRIPTION,
        updateQuery: (prev, { subscriptionData }) => {
            const newLinks = [
                ...prev.allLinks,
                subscriptionData.data.Link.node,
            ];
            const result = {
                ...prev,

peterj

import React, { Component } from 'react';

import gql from 'graphql-tag';
import { graphql, withApollo } from 'react-apollo';

const CREATE_SHORT_LINK_MUTATION = gql`
    mutation CreateLinkMutation($url: String!, $description: String!) {
        createLink(url: $url, description: $description) {
            id
        }