Set up a demo GraphQL query and component (#5)

Fixes #4.

fitbit-challenges/.pre-commit-config.yaml

@@ -0,0 +1,27 @@
+# See https://pre-commit.com for more information
+# See https://pre-commit.com/hooks.html for more hooks
+repos:
+    -   repo: https://github.com/pre-commit/pre-commit-hooks
+        rev: v3.2.0
+        hooks:
+            -   id: trailing-whitespace
+            -   id: end-of-file-fixer
+            -   id: check-yaml
+    -   repo: https://github.com/psf/black
+        rev: 23.3.0
+        hooks:
+            -   id: black
+    -   repo: https://github.com/pre-commit/mirrors-eslint
+        rev: 'v7.15.0'  # Use the sha / tag you want to point at
+        hooks:
+            -   id: eslint
+                files: \.[jt]sx?$  # *.js, *.jsx, *.ts and *.tsx
+                types: [file]
+                args: ["--fix"]
+                additional_dependencies:
+                    -   eslint@7.15.0
+                    -   eslint-config-standard@16.0.2
+                    -   eslint-plugin-import@2.22.1
+                    -   eslint-plugin-node@11.1.0
+                    -   eslint-plugin-promise@4.2.1
+                    -   eslint-plugin-react@7.21.5

fitbit-challenges/README.md

@@ -1 +1 @@
-# fitbit-challenges
+# fitbit-challenges

fitbit-challenges/api/Dockerfile

@@ -3,7 +3,7 @@ FROM python:3-alpine
 EXPOSE 5000/tcp
 
 RUN apk update && \
-    apk add --virtual build-deps gcc python3-dev musl-dev && \
+    apk add --virtual build-deps gcc git python3-dev musl-dev && \
     apk add postgresql-dev
 
 WORKDIR /usr/src/app

fitbit-challenges/api/app.py

@@ -1,7 +1,7 @@
 import os
 
 from flask import Flask
-from flask_graphql import GraphQLView
+from graphql_server.flask import GraphQLView
 from flask_sqlalchemy import SQLAlchemy
 from flask_migrate import Migrate
 from flask_cors import CORS

fitbit-challenges/api/graphql/schema.py

@@ -1,10 +1,21 @@
-from graphql import GraphQLObjectType, GraphQLSchema
+from graphql import GraphQLObjectType, GraphQLSchema, GraphQLField, GraphQLString
+
+
+def get_test_field(*args, **kwargs) -> str:
+    return "hello world!"
 
 
 def Schema(models):
     return GraphQLSchema(
         query=GraphQLObjectType(
-            name="RootQueryType",
-            fields={},
+            name="Query",
+            fields={
+                "test": GraphQLField(
+                    GraphQLString,
+                    args={},
+                    resolve=get_test_field,
+                    description="Test field",
+                )
+            },
         )
     )

fitbit-challenges/api/migrations/README

@@ -1 +1 @@
-Generic single-database configuration.
+Generic single-database configuration.

fitbit-challenges/api/requirements.txt

@@ -1,9 +1,11 @@
-Flask
-Flask-Migrate
+Flask>=2.2
+Flask-Migrate>=4.0.4
 psycopg2
+pylint
 sqlalchemy
-Flask-SQLAlchemy
-graphql-core==2.2
-flask_graphql
+Flask-SQLAlchemy>=3.0.3
+graphql-core
+git+https://github.com/graphql-python/graphql-server@8b9639e1575a20c7322fb8f19459d743d7201410#egg=graphql-server[flask]
 flask-cors
-black
+pre-commit
+black

fitbit-challenges/docker-compose.yaml

@@ -16,7 +16,7 @@ services:
       - DB_USERNAME=admin
       - DB_PASSWORD=development
       - DATABASE_NAME=api_development
-      - FRONTEND_HOST=192.168.1.5
+      - FRONTEND_HOST=localhost
       - FRONTEND_PORT=5001
   migration:
     build:
@@ -56,5 +56,5 @@ services:
       - ./frontend/src:/usr/src/app/src
     environment:
       - PORT=5001
-      - REACT_APP_API_HOST=192.168.1.5
-      - REACT_APP_API_PORT=5000
+      - REACT_APP_API_HOST=127.0.0.1
+      - REACT_APP_API_PORT=5000

fitbit-challenges/frontend/package.json

@@ -4,6 +4,7 @@
   "private": true,
   "dependencies": {
     "@apollo/client": "^3.7.10",
+    "@apollo/react-testing": "^4.0.0",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",

fitbit-challenges/frontend/src/App.js

@@ -5,9 +5,23 @@ import {
   Route
 } from "react-router-dom";
 
+import { useQuery, gql } from '@apollo/client';
+
+const TEST_QUERY = gql`
+  query Test {
+    test
+  }
+`;
+
 function MyComponent() {
+  const { loading, error, data } = useQuery(TEST_QUERY);
+
+  if (loading) return <p>Loading...</p>;
+
+  if (error) return <p>Error : {error.message}</p>;
+
   return (
-    <div>Hello world!</div>
+    <div>{data.test}</div>
   )
 }
 

fitbit-challenges/frontend/src/App.test.js

@@ -1,8 +1,13 @@
 import { render, screen } from '@testing-library/react';
 import App from './App';
+import { MockedProvider } from '@apollo/react-testing';
 
-test('renders hello world', () => {
-  render(<App />);
-  const linkElement = screen.getByText(/Hello world/i);
+it('should render loading state initially', () => {
+  render(
+    <MockedProvider mocks={[]}>
+      <App />
+    </MockedProvider>,
+  );
+  const linkElement = screen.getByText(/Loading/i);
   expect(linkElement).toBeInTheDocument();
 });

fitbit-challenges/frontend/src/components/DatePicker.js

@@ -28,4 +28,4 @@ const DatePicker = (props) => {
     );
 }
 
-export default DatePicker;
+export default DatePicker;

fitbit-challenges/frontend/src/components/MultiSelect.js

@@ -39,4 +39,3 @@ const MultiSelect = (props) => {
     );
 }
 export default MultiSelect;
-

fitbit-challenges/frontend/src/components/TransactionFilters.js

@@ -109,4 +109,3 @@ const TransactionFilters = (props) => {
     )
 }
 export default TransactionFilters;
-

fitbit-challenges/frontend/src/components/TransactionList.js

@@ -89,4 +89,4 @@ const TransactionList = (props) => {
     );
 }
 
-export default TransactionList;
+export default TransactionList;

fitbit-challenges/frontend/tailwind.config.js

@@ -8,4 +8,3 @@ module.exports = {
   },
   plugins: [],
 }
-