Merge pull request #5 from PilotConway/feature/crud

Added CI

Author: PilotConway

.eslintrc.js

@@ -0,0 +1,22 @@
+module.exports = {
+  parser: 'babel-eslint',
+  env: {
+    browser: true,
+    es6: true,
+    jest: true,
+  },
+  extends: 'eslint:recommended',
+  globals: {
+    Atomics: 'readonly',
+    SharedArrayBuffer: 'readonly',
+  },
+  parserOptions: {
+    ecmaFeatures: {
+      jsx: true,
+    },
+    ecmaVersion: 2018,
+    sourceType: 'module',
+  },
+  plugins: ['react'],
+  rules: {},
+};

.github/main.workflow

@@ -4,5 +4,5 @@ workflow "Link on Push" {
 }
 
 action "eslint" {
-  uses = "gimenete/eslint-action@1.0"
+  uses = "stefanoeb/eslint-action@master"
 }

.prettierrc

@@ -1,5 +1,5 @@
 {
-  "printWidth": 80,
+  "printWidth": 100,
   "tabWidth": 2,
   "useTabs": false,
   "semi": true,
@@ -8,4 +8,4 @@
   "bracketSpacing": true,
   "jsxBracketSameLine": false,
   "fluid": false
-}
+}

.travis.yml

@@ -0,0 +1,5 @@
+language: node_js
+node_js:
+  - '10'
+after_success:
+  - yarn codecov

README.md

@@ -1,3 +1,5 @@
+[![Build Status](https://travis-ci.com/PilotConway/rxjs-api-client-prototype.svg?branch=master)](https://travis-ci.com/PilotConway/rxjs-api-client-prototype) [![codecov](https://codecov.io/gh/PilotConway/rxjs-api-client-prototype/branch/master/graph/badge.svg)](https://codecov.io/gh/PilotConway/rxjs-api-client-prototype)
+
 # rxjs-api-client-prototype
 
 This is a prototype project to feel out ways I can use RxJS to replace the apps current server.js
@@ -24,7 +26,7 @@ import ClientProvider from 'src/ClientProvider';
 function Root() {
   const client = createClient('https://localhost:3000/api/v1');
   return (
-    <ClientProvider client={client}>
+    <ClientProvider value={client}>
       <App />
     </ClientProvider>
   );
@@ -42,6 +44,8 @@ the url as provided to make the call.
 </Request>
 ```
 
+By default, if you do not provide a client using the `ClientProvider` and use a realtive endpoint in `Request` or `useEndpointData` then a default client using `window.location.origin` as the base url will be used.
+
 ### Render Prop Method
 
 The `<Request>` component provides a render prop method of performing a GET Request to retrieve
@@ -71,7 +75,7 @@ import React from 'react';
 import useEndpointData from 'src/useEndpointData`;
 
 export default function MyComponent() {
-  const [ data, loading, error, links, client ] = useEndpointHooks('/users');
+  const [ data, loading, error, links, client ] = useEndpointHooks('/users', { params: { per_page: 5 }});
   return (
     ... your component jsx
   )
@@ -82,12 +86,51 @@ See [`useEndpointData`](#useEndpointData) for details on the hook parameters and
 
 ## API
 
-### `Client`
+### `client`
+
+This is base object that is used to make requests to the server. It is recommended that you do not create this object but instead use `createClient` to create a new client.
+
+Both `Request` and `useEndpointData` will also provide the client object so you can use it to make other requests to the server such as a put/post/delete.
+
+#### Functions
+
+The `client` object contains 4 functions that can be used to communicate with the server.
+
+- get
+- put
+- post
+- delete
+
+##### get()
+
+Performs a get request to the server.
 
 ### `createClient`
 
+This function creates a new client. It's preferred over using `client` itself as you can set the base URL and headers using `createClient` where with `client` you will have to pass full URLs to every request.
+
 ### `<ClientProvider>`
 
+The ClientProvider allows for a client to be set as the default client for all requests in the component tree below the provider. You can use [`createClient`](#createClient) to create a client with a specific base url then use relative endpoints in all `Request` or `useEndpointData` calls to get information from the server.
+
+In addition to being able to set the base url, you can also set headers and other information for every request to use.
+
+```js
+...
+import { createClient } from 'src/client';
+import ClientProvider from 'src/ClientProvider';
+...
+
+function Root() {
+  const client = createClient('https://localhost:3000/api/v1');
+  return (
+    <ClientProvider value={client}>
+      <App />
+    </ClientProvider>
+  );
+}
+```
+
 ### `useEndpointData`
 
 This is a hook to perform a GET request to retrieve data.
@@ -145,6 +188,8 @@ The render function is called with a single parameter object that has the follow
 
 ### Request Error
 
+TODO: define request error and ensure all errors follow this format.
+
 ### Pagination
 
 When an endpoint supports Pagination, the response will contain a link object. This is passed

codecov.yml

@@ -0,0 +1,32 @@
+codecov:
+  notify:
+    require_ci_to_pass: yes
+
+coverage:
+  precision: 2
+  round: down
+  range: '50...90'
+  status:
+    patch: off
+    project:
+      default:
+        target: auto
+        threshold: null
+        base: pr
+ignore:
+  - '**/*.spec.*'
+  - '**/*.stories.*'
+  - 'src/components/**/*'
+
+parsers:
+  gcov:
+    branch_detection:
+      conditional: yes
+      loop: yes
+      method: no
+      macro: no
+
+comment:
+  layout: 'header, diff'
+  behavior: default
+  require_changes: no

package.json

@@ -15,6 +15,7 @@
     "rxjs": "6.5.2"
   },
   "devDependencies": {
+    "codecov": "^3.5.0",
     "typescript": "3.3.3"
   },
   "scripts": {

src/client/client.spec.js

@@ -1,4 +1,6 @@
 import client from './client';
+// Require get request import for mocks to work
+// eslint-disable-next-line no-unused-vars
 import getRequest from './getRequest';
 
 // SEE __mocks__/getRequest for which endpoint paths result in what types of

src/client/createClient.spec.js

@@ -1,4 +1,6 @@
 import createClient from './createClient';
+// Require get request import for mocks to work
+// eslint-disable-next-line no-unused-vars
 import getRequest from './getRequest';
 
 // SEE __mocks__/getRequest for which endpoint paths result in what types of

src/client/getRequest.js

@@ -8,12 +8,9 @@ const getRequest = path =>
       if (response === null) {
         return throwError('API Timed out', response);
       }
-      console.log('api response: ', response);
       return response;
     }),
     catchError(error => {
-      console.log(error);
-      console.error('api error: ', error.response);
       return of(error);
     }),
   );