import React from "react";
import { Query } from "react-apollo";
import gql from "graphql-tag";
import App from "../components/App";
import ErrorMessage from "../components/ErrorMessage";

interface Props {
  user_id: object;
  data: {
    loading: boolean;
    error: string;
  };
}

const GET_USER = gql`
  query getUser($user_id: String!) {
    user(id: $user_id)
  }
`;

const UserProfile: React.SFC<Props> = ({ user_id }) => {
  console.log("GET_USER", GET_USER);
  return (
    <Query query={GET_USER} variables={{ user_id }}>
      {({ loading, error, data: { user } }) => {
        if (loading) return <App>Loading...</App>;
        if (error) return <ErrorMessage message={error} />;

        return <App>{user.name}</App>;
      }}
    </Query>
  );
};

UserProfile.getInitialProps = async ({ query }) => {
  return { user_id: query.id };
};

export default UserProfile;