Skip to content

Commit

Permalink
Merge 61ed90d into be7b1a1
Browse files Browse the repository at this point in the history
  • Loading branch information
ricokahler committed Aug 24, 2019
2 parents be7b1a1 + 61ed90d commit 2502b45
Show file tree
Hide file tree
Showing 36 changed files with 17,302 additions and 0 deletions.
2 changes: 2 additions & 0 deletions .dockerignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
*/node_modules
*.log
1 change: 1 addition & 0 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -2,3 +2,4 @@ node_modules
build
coverage
.DS_Store
website/build
3 changes: 3 additions & 0 deletions .vscode/settings.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
{
"workbench.colorCustomizations": {}
}
10 changes: 10 additions & 0 deletions Dockerfile
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
FROM node:8.11.4

WORKDIR /app/website

EXPOSE 3000 35729
COPY ./docs /app/docs
COPY ./website /app/website
RUN yarn install

CMD ["yarn", "start"]
18 changes: 18 additions & 0 deletions docker-compose.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
version: "3"

services:
docusaurus:
build: .
ports:
- 3000:3000
- 35729:35729
volumes:
- ./docs:/app/docs
- ./website/blog:/app/website/blog
- ./website/core:/app/website/core
- ./website/i18n:/app/website/i18n
- ./website/pages:/app/website/pages
- ./website/static:/app/website/static
- ./website/sidebars.json:/app/website/sidebars.json
- ./website/siteConfig.js:/app/website/siteConfig.js
working_dir: /app/website
6 changes: 6 additions & 0 deletions docs/TODO.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
---
id: todo
title: TODO
---

This doc has not been created yet.
29 changes: 29 additions & 0 deletions docs/doc1.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
---
id: doc1
title: Latin-ish
sidebar_label: Example Page
---

Check the [documentation](https://docusaurus.io) for how to use Docusaurus.

## Lorem

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus elementum massa eget nulla aliquet sagittis. Proin odio tortor, vulputate ut odio in, ultrices ultricies augue. Cras ornare ultrices lorem malesuada iaculis. Etiam sit amet libero tempor, pulvinar mauris sed, sollicitudin sapien.

## Mauris In Code

```
Mauris vestibulum ullamcorper nibh, ut semper purus pulvinar ut. Donec volutpat orci sit amet mauris malesuada, non pulvinar augue aliquam. Vestibulum ultricies at urna ut suscipit. Morbi iaculis, erat at imperdiet semper, ipsum nulla sodales erat, eget tincidunt justo dui quis justo. Pellentesque dictum bibendum diam at aliquet. Sed pulvinar, dolor quis finibus ornare, eros odio facilisis erat, eu rhoncus nunc dui sed ex. Nunc gravida dui massa, sed ornare arcu tincidunt sit amet. Maecenas efficitur sapien neque, a laoreet libero feugiat ut.
```

## Nulla

Nulla facilisi. Maecenas sodales nec purus eget posuere. Sed sapien quam, pretium a risus in, porttitor dapibus erat. Sed sit amet fringilla ipsum, eget iaculis augue. Integer sollicitudin tortor quis ultricies aliquam. Suspendisse fringilla nunc in tellus cursus, at placerat tellus scelerisque. Sed tempus elit a sollicitudin rhoncus. Nulla facilisi. Morbi nec dolor dolor. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras et aliquet lectus. Pellentesque sit amet eros nisi. Quisque ac sapien in sapien congue accumsan. Nullam in posuere ante. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin lacinia leo a nibh fringilla pharetra.

## Orci

Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin venenatis lectus dui, vel ultrices ante bibendum hendrerit. Aenean egestas feugiat dui id hendrerit. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur in tellus laoreet, eleifend nunc id, viverra leo. Proin vulputate non dolor vel vulputate. Curabitur pretium lobortis felis, sit amet finibus lorem suscipit ut. Sed non mollis risus. Duis sagittis, mi in euismod tincidunt, nunc mauris vestibulum urna, at euismod est elit quis erat. Phasellus accumsan vitae neque eu placerat. In elementum arcu nec tellus imperdiet, eget maximus nulla sodales. Curabitur eu sapien eget nisl sodales fermentum.

## Phasellus

Phasellus pulvinar ex id commodo imperdiet. Praesent odio nibh, sollicitudin sit amet faucibus id, placerat at metus. Donec vitae eros vitae tortor hendrerit finibus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Quisque vitae purus dolor. Duis suscipit ac nulla et finibus. Phasellus ac sem sed dui dictum gravida. Phasellus eleifend vestibulum facilisis. Integer pharetra nec enim vitae mattis. Duis auctor, lectus quis condimentum bibendum, nunc dolor aliquam massa, id bibendum orci velit quis magna. Ut volutpat nulla nunc, sed interdum magna condimentum non. Sed urna metus, scelerisque vitae consectetur a, feugiat quis magna. Donec dignissim ornare nisl, eget tempor risus malesuada quis.
7 changes: 7 additions & 0 deletions docs/doc2.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
---
id: doc2
title: document number 2
---

This is a link to [another document.](doc3.md)
This is a link to an [external page.](http://www.example.com)
13 changes: 13 additions & 0 deletions docs/doc3.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
---
id: doc3
title: This is document number 3
---
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ac euismod odio, eu consequat dui. Nullam molestie consectetur risus id imperdiet. Proin sodales ornare turpis, non mollis massa ultricies id. Nam at nibh scelerisque, feugiat ante non, dapibus tortor. Vivamus volutpat diam quis tellus elementum bibendum. Praesent semper gravida velit quis aliquam. Etiam in cursus neque. Nam lectus ligula, malesuada et mauris a, bibendum faucibus mi. Phasellus ut interdum felis. Phasellus in odio pulvinar, porttitor urna eget, fringilla lectus. Aliquam sollicitudin est eros. Mauris consectetur quam vitae mauris interdum hendrerit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Duis et egestas libero, imperdiet faucibus ipsum. Sed posuere eget urna vel feugiat. Vivamus a arcu sagittis, fermentum urna dapibus, congue lectus. Fusce vulputate porttitor nisl, ac cursus elit volutpat vitae. Nullam vitae ipsum egestas, convallis quam non, porta nibh. Morbi gravida erat nec neque bibendum, eu pellentesque velit posuere. Fusce aliquam erat eu massa eleifend tristique.

Sed consequat sollicitudin ipsum eget tempus. Integer a aliquet velit. In justo nibh, pellentesque non suscipit eget, gravida vel lacus. Donec odio ante, malesuada in massa quis, pharetra tristique ligula. Donec eros est, tristique eget finibus quis, semper non nisl. Vivamus et elit nec enim ornare placerat. Sed posuere odio a elit cursus sagittis.

Phasellus feugiat purus eu tortor ultrices finibus. Ut libero nibh, lobortis et libero nec, dapibus posuere eros. Sed sagittis euismod justo at consectetur. Nulla finibus libero placerat, cursus sapien at, eleifend ligula. Vivamus elit nisl, hendrerit ac nibh eu, ultrices tempus dui. Nam tellus neque, commodo non rhoncus eu, gravida in risus. Nullam id iaculis tortor.

Nullam at odio in sem varius tempor sit amet vel lorem. Etiam eu hendrerit nisl. Fusce nibh mauris, vulputate sit amet ex vitae, congue rhoncus nisl. Sed eget tellus purus. Nullam tempus commodo erat ut tristique. Cras accumsan massa sit amet justo consequat eleifend. Integer scelerisque vitae tellus id consectetur.
6 changes: 6 additions & 0 deletions docs/exampledoc4.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
---
id: doc4
title: Other Document
---

this is another document
6 changes: 6 additions & 0 deletions docs/exampledoc5.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
---
id: doc5
title: Fifth Document
---

Another one
7 changes: 7 additions & 0 deletions docs/guides/fetch-services.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
---
id: fetch-services
title: Fetch services
sidebar_label: Fetch services
---

this is a thing
62 changes: 62 additions & 0 deletions docs/introduction/installation.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,62 @@
---
id: installation
title: Installation
sidebar_label: Installation
---

## Installation

```
npm i -s resift redux react-redux
```

> Redux 4 and React-Redux >= 7.1 are required peer dependencies to ReSift
## Creating the data service and HTTP service

`dataService.js`

```js
import { createHttpService, createDataService } from 'resift';

const http = createHttpService({
prefix: '/api',
getHeaders: () => {
const token = localStorage.getItem('auth_token'); // or however you get your authentication token

return {
Authorization: `Bearer ${token}`,
};
},
});

const services = { http };

const dataService = createDataService({
services,
onError: e => {
throw e;
},
});

export default dataService;
```

## Adding the `<ResiftProvider />`

`App.js`

```js
import React from 'react';
import { ResiftProvider } from 'resift';
import RestOfYourApplication from '...';
import dataService from './dataService';

function App() {
return (
<ResiftProvider dataService={dataService}>
<RestOfYourApplication />
</ResiftProvider>
);
}
```
98 changes: 98 additions & 0 deletions docs/introduction/quick-glance.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,98 @@
---
id: quick-glance
title: Quick glance
sidebar_label: Quick glance
---

After a lot of feedback on these docs, we realized the first thing you all wanted to see was some code.

This quick glance is just that. Without too many words, here are some quick code examples that _show_ how ReSift dispatches requests, gives status updates, and pulls data from memory.

> These examples makes use of [React Hooks](https://reactjs.org/docs/hooks-intro.html). If you're not familiar with React Hooks, these examples may look a bit foreign as they are hooks idiomatic.
>
> We recommend using our hooks API, but if you're not comfortable, we do offer a way to use this library with [React-Redux's `connect`](../TODO.md) for more compatibility.
`Person.js`

```js
import React, { useEffect } from 'react';
import PropTypes from 'prop-types';
import { useDispatch, useFetch, isLoading } from 'resift';
import SpinnerOverlay from './SpinnerOverlay';

// import a pre-defined fetch factory
import makePersonFetch from './makePersonFetch';

function Person({ personId, expand }) {
const dispatch = useDispatch();

// make a fetch from a fetch factory
const personFetch = makePersonFetch(personId);
// fetches 👆 are nouns
// this is a 👆 fetch factory

// use an effect to re-dispatch requests when the fetch itself
// or any of the request arguments change (e.g. `expand`)
useEffect(() => {
dispatch(personFetch(expand));
}, [dispatch, personFetch, expand]);

// get the data and the status associated with your fetch
const [person, status] = useFetch(personFetch);
// 👆
// this hook causes re-renders when the status or the response changes

return (
<div>
{/* show a spinner overlay during the initial fetch or any re-fetches */}
{isLoading(status) && <SpinnerOverlay />}

{/* when the response comes back, the person will no longer be null */}
{person && <div>Hello, {person.name}!</div>}
</div>
);
}

Person.propTypes = {
personId: PropTypes.string.isRequired,
expand: PropTypes.string,
};

export default Person;
```

---

`makePersonFetch.js`

```js
import { defineFetch } from 'resift';

// `makePersonFetch` is a "fetch factory" which defines what this fetch does and
// how it gets data
const makePersonFetch = defineFetch({
displayName: 'Get Person',

// These 👇 are the arguments to `makePersonFetch`
make: personId => ({
key: [personId], // 👈 This tells resift where to save the response

// The `request` which is responsible for sending off the request
// These 👇 are the arguments when dispatching
request: expand => ({ http }) =>
// The http 👆 service is being "picked off" and used
// to send off the request
http({
method: 'GET',
route: `/people/${personId}`,
// This will add the query param `expand` to the request
// e.g. `/people/person123?expand=blah
query: { expand },
}),
}),
});

export default makePersonFetch;
```

Intrigued? Continue to the [Main Concepts]() to learn more.
35 changes: 35 additions & 0 deletions docs/introduction/what-is-resift.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
---
id: what-is-resift
title: What is ReSift?
sidebar_label: What is ReSift?
---

Simply put, **ReSift is a state management library for fetches** with the goal of giving your team a capable standard for fetching, storing, and reacting to data.

## Motivation

When you start to develop a React application, you soon realize that there is a lot more than meets the eye regarding data fetching.

With every fetch we need to know:

- If the data request is inflight (so we can show a loading indicator)
- Where the resulting data will be stored, and how to later retrieve it
- If it's related to other fetches so they update consistently
- If the response was an error so we can try to recover

These tasks themselves aren't overly complicated, but doing them over and over and over again _will_ take time away from your product.

To make matters worse, there are an infinite number of ways to accomplish said tasks, and managing these differences while working on a team can be confusing and hard to manage.

## Introducing ReSift

ReSift is a capable and versatile library for data fetches. ReSift is opinionated where it matters but also pluggable to suit your different data fetching needs.

**Features:**

- 💾 Framework for storing and retrieving responses from data requests
- 📬 Monitoring and updating the status of inflight requests
- 🔌 Pluggable via custom "fetch services"
- 🌐 Universal — Share code amongst your apps. Works with React Native!
- 🎣 Hooks API
- ⚛️ Optional Redux integration with Redux dev tools support

0 comments on commit 2502b45

Please sign in to comment.