sizeight / redux-scaffolding Goto Github PK

e.g. the following elems can be sorted on their author's first_name by providing sortKey = 'author__first_name' to the getSortedElems(elems, sortKey, sortDirection) selector.
Use a double underscore to indicate nesting.

// ...
elems = [
  {
    id: 1,
    author: {
      first_name: 'Charlie',
    },
  },
  {
    id: 2,
    author: {
      first_name: 'Alpha',
    },
  },
  {
    id: 3,
    author: {
      first_name: 'Bravo',
    },
  },
  {
    id: 4,
    author: {
      first_name: 'Delta',
    },
  },
];
// ...

The csrftoken cookie is only applicable for logged in views. For instance, if a form is available on a public view, then the csrftoken will not be available in the browser cookies to send along with the POST request.

https://docs.djangoproject.com/en/2.2/ref/csrf/

The API path cannot be deduced from the nameSpace because we might want to have two separate state objects with th same API path but different name spaces.

While a delete call is busy we should keep track of the id on which delete is performed so that we can do things like disable the elements delete link. Same with updating.

// ...
pagination: {
  count: 115,
  next: 'http://www.xyz.com/api/v1/search/?q=gold&limit=10&offset=10',
  previous: null,
  pageSize: 10, // derived
  pageCount: 12, // derived
  pageNumber: 1, // derived
  pages: [ // derived
    {
      pageNumber: 0,
      active: false,
      params: '?q=gold&limit=10&offset=0',
    },
    // ...
}
// ...

becomes

// ...
pagination: {
  count: 115,
  next: 'http://www.xyz.com/api/v1/search/?q=gold&limit=10&offset=10',
  nextQueryParamsString: '?q=gold&limit=10&offset=10', // useful for react-router
  nextQueryParams: {
    q: 'gold',
    limit: 10,
    offset: 10,
  }, // useful for API fetch calls
  previous: null,
  previousQueryParamsString:
  previousQueryParams:
  pageSize: 10, // derived
  pageCount: 12, // derived
  pageNumber: 1, // derived
  pages: [ // derived
    {
      pageNumber: 0,
      active: false,
      queryParamsString: '?q=gold&limit=10&offset=0',
      queryParams: {
        q: 'gold',
        limit: 10,
        offset, 0,
      },
    },
    // ...
}
// ...

Instead this should be passed with apiURL as argument to actions

Uploading a filewith the Fetch API
https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch#Uploading_a_file

The FormData interface
https://developer.mozilla.org/en-US/docs/Web/API/FormData

What does enctype='multipart/form-data' mean? <-Goos Stack Overflow answers
https://stackoverflow.com/questions/4526273/what-does-enctype-multipart-form-data-mean

Sometimes a fetch needs to be performed within a component, but using Redux is overkill because the fetch results do not need to be saved to store for later use. We need a fetch utility function that can perform the fetch and also do the necessary status checking and json parsing and return the response data or error.

Even if fetching is true we should stil return the elem count in state for selector getTotalElemCount

Default response contains object list in an array like this:

[
  { "id": 1 },
  { "id": 2 },
]

But a response could also be an array iside an object like this:

{
  "facets": [
    { "id": 1 },
    { "id": 2 },
  ],
}

We need to be able to indicate to the reduce on setup where to look for response array.

// in reducer.js
// ...

const initialWidgetsState = Object.assign({} initialState, {
  responseElemsKey: 'facets',
});

const widgets = (state = initialWidgetsState, action) => {
  // ...
};

// ...

Use only CSS to make this is a more versatile component than the current loading component that requires Font awesome. Good to place it here in redux-scaffolding as it usually is used with API calls.

If an API cal fails, allow the dispatching of a custom action.

Pass an optional named argument onErrorAction to the action creators

All other data should be passed as application/json data.

Most responses are shaped as follows:

[
  { "id": 1 },
  { "id": 2 }
]

But a response can also be inside an object with additional information is attached. In the example 'total_cout` is attached and also needs to be stored in state

{
  "total_count": 205, 
  "results": [
    { "id": 1 },
    { "id": 2 }
  ],
}

Solution: If an optional responseElemsKey is provided to reducer, we should save all siblings to this field in an extraInfo field in state similar to the way pagination info is stored in the pagination field.

react-redux hooks enables us to pass on the sortKey and sortDirection values instead of storing these values in Redux store.

e.g.

const [sortKey, setSortKey] = useState(null);
const [sortDirection, setSortDirection] = useState(null);

function onSetSubscriptionSortKey(newSortKey) {
  if (newSortKey !== sortKey) {
    setSortDirection('asc');
  } else {
    setSortDirection('desc');
  }
  setSortKey2(newSortKey);
}
const subscriptions = useSelector(getSubscriptions, sortKey, sortDirection);

See the docs for Request.credentials

The credentials read-only property of the Request interface indicates whether the user agent should send cookies from the other domain in the case of cross-origin requests.

Then see the docs for Access-Control-Allow-Credentials

The Access-Control-Allow-Credentials response header tells browsers whether to expose the response to frontend JavaScript code when the request's credentials mode (Request.credentials) is include.

Using this library for cross-origin requests causes the browser to not have access to returned response data if 'credentials': 'include' property is set for requests.

elems: {
  count: 115,
  next: 'http://www.xyz.com/api/v1/search/?q=gold&limit=10&offset=10',
  previous: null,
  results: [
    // ...
  ],
},

becomes

// ...
pagination: {
  count: 115,
  next: 'http://www.xyz.com/api/v1/search/?q=gold&limit=10&offset=10',
  previous: null,
  pageSize: 10, // derived
  pageCount: 12, // derived
  pageNumber: 1, // derived
  pages: [ // derived
    {
      pageNumber: 0,
      active: false,
      params: '?q=gold&limit=10&offset=0',
    },
    // ...
}
// ...

queryParams = {
  limit: 10,
  offset: 2,
}

instead of

queryParams = ?limit=10&offset=2

then convert the object to the queryString in fetchElems.