studiokit-scaffolding-js 7.0.3 → 7.0.5-alpha.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/lib/components/HOC/CollectionComponent.js +1 -1
  2. package/lib/components/HOC/CollectionItemComponent.js +1 -1
  3. package/lib/components/UserRoles/index.d.ts +1 -1
  4. package/lib/hooks/useCollectionConfiguration.js +30 -14
  5. package/lib/startup.js +8 -2
  6. package/lib/types/Collection.d.ts +1 -1
  7. package/lib/utils/collection.js +4 -4
  8. package/package.json +8 -28
package/lib/components/HOC/CollectionComponent.js CHANGED
@@ -89,7 +89,7 @@ function configureCollectionComponent(WrappedComponent, LoaderComponent) {
89
89
  queryParams: queryParams,
90
90
  disableAutoLoad: disableAutoLoad,
91
91
  guid: guid,
92
- modelStatus: modelStatus,
92
+ isInitialized: modelStatus !== modelStatus_1.MODEL_STATUS.UNINITIALIZED,
93
93
  changeModelStatus: _this.changeModelStatus
94
94
  };
95
95
  return collectionMethodConfig;
package/lib/components/HOC/CollectionItemComponent.js CHANGED
@@ -88,7 +88,7 @@ function configureCollectionItemComponent(WrappedComponent, LoaderComponent) {
88
88
  queryParams: queryParams,
89
89
  disableAutoLoad: disableAutoLoad,
90
90
  guid: guid,
91
- modelStatus: modelStatus,
91
+ isInitialized: modelStatus !== modelStatus_1.MODEL_STATUS.UNINITIALIZED,
92
92
  changeModelStatus: _this.setModelStatus
93
93
  };
94
94
  return collectionMethodConfig;
package/lib/components/UserRoles/index.d.ts CHANGED
@@ -107,5 +107,5 @@ export declare class UserRoles extends Component<UserRolesProps, UserRolesState>
107
107
  render(): React.JSX.Element;
108
108
  }
109
109
  export declare const mapStateToProps: (state: BaseReduxState, ownProps: UserRolesOwnProps) => UserRolesReduxProps;
110
- declare const _default: import("react-redux").ConnectedComponent<typeof UserRoles, Pick<React.ClassAttributes<UserRoles> & UserRolesProps, "guid" | "ref" | "modelName" | "pathParams" | "queryParams" | "externalProviders" | "model" | "key" | "readOnly" | "entityName" | "load" | "modelStatus" | "disableAutoLoad" | "disableAutoLoadOnParamsChange" | "modelArray" | "stopPeriodicLoad" | "create" | "update" | "delete" | "previousModelStatus" | "fetchingId" | "textForRole" | "defaultRole" | "roleDescriptions" | "renderAddDescription" | "isUpdateDisabled" | "isDeleteDisabled" | "allowMultipleRoles" | "requiredRole" | "isAddDisabled" | "modifyUserRoleActivityName" | "deleteOwnUserRoleActivityName" | "addRoleExcludeList" | "entity" | "filterUsers" | "onAdd" | "onUpdate" | "onRemove" | "renderTableDescription" | "lowercaseTextForRole" | "singularArticleForRole"> & UserRolesOwnProps>;
110
+ declare const _default: import("react-redux").ConnectedComponent<typeof UserRoles, Pick<React.ClassAttributes<UserRoles> & UserRolesProps, "guid" | "ref" | "modelName" | "pathParams" | "queryParams" | "externalProviders" | "model" | "key" | "readOnly" | "entityName" | "load" | "disableAutoLoad" | "disableAutoLoadOnParamsChange" | "modelArray" | "stopPeriodicLoad" | "create" | "update" | "delete" | "modelStatus" | "previousModelStatus" | "fetchingId" | "textForRole" | "defaultRole" | "roleDescriptions" | "renderAddDescription" | "isUpdateDisabled" | "isDeleteDisabled" | "allowMultipleRoles" | "requiredRole" | "isAddDisabled" | "modifyUserRoleActivityName" | "deleteOwnUserRoleActivityName" | "addRoleExcludeList" | "entity" | "filterUsers" | "onAdd" | "onUpdate" | "onRemove" | "renderTableDescription" | "lowercaseTextForRole" | "singularArticleForRole"> & UserRolesOwnProps>;
111
111
  export default _default;
package/lib/hooks/useCollectionConfiguration.js CHANGED
@@ -1,6 +1,7 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
3
  exports.useCollectionConfiguration = void 0;
4
+ var lodash_1 = require("lodash");
4
5
  var react_1 = require("react");
5
6
  var react_redux_1 = require("react-redux");
6
7
  var react_router_1 = require("react-router");
@@ -17,44 +18,59 @@ var usePrevious_1 = require("./usePrevious");
17
18
  * @param selectorFunction The function that will be used to select the `model` from redux.
18
19
  */
19
20
  function useCollectionConfiguration(props, selectorFunction) {
20
- var modelName = props.modelName, propPathParams = props.pathParams, queryParams = props.queryParams, disableAutoLoad = props.disableAutoLoad;
21
+ var modelName = props.modelName, propPathParams = props.pathParams, incomingQueryParams = props.queryParams, disableAutoLoad = props.disableAutoLoad;
21
22
  var guid = useGuid_1.useGuid();
22
23
  var routeMatchParams = react_router_1.useParams();
23
24
  var _a = react_1.useState(false), isInitialized = _a[0], setIsInitialized = _a[1];
24
25
  var _b = react_1.useState(modelStatus_1.MODEL_STATUS.UNINITIALIZED), modelStatus = _b[0], setModelStatus = _b[1];
25
26
  var previousModelStatus = usePrevious_1.usePrevious(modelStatus);
26
27
  var _c = react_1.useState(), fetchingId = _c[0], setFetchingId = _c[1];
27
- var pathParams = react_1.useMemo(function () { return propPathParams || route_1.getPathParamsFromRouteMatchParams(routeMatchParams, modelName); }, [
28
- modelName,
29
- propPathParams,
30
- routeMatchParams
31
- ]);
32
- var _d = react_redux_1.useSelector(function (state) {
28
+ var incomingPathParams = react_1.useMemo(function () { return propPathParams || route_1.getPathParamsFromRouteMatchParams(routeMatchParams, modelName); }, [propPathParams, modelName, routeMatchParams]);
29
+ // keep track of pathParams and queryParams values in state
30
+ // the prop/calculated values will almost always be a new array or object, which causes issues for hook deps
31
+ var _d = react_1.useState(incomingPathParams), persistedPathParams = _d[0], setPersistedPathParams = _d[1];
32
+ var _e = react_1.useState(incomingQueryParams), persistedQueryParams = _e[0], setPersistedQueryParams = _e[1];
33
+ // immediately use the incoming value if it is different than the persisted value
34
+ // this allows components using this hook to avoid waiting for another state update before using the new values
35
+ var pathParams = react_1.useMemo(function () { return (lodash_1.isEqual(incomingPathParams, persistedPathParams) ? persistedPathParams : incomingPathParams); }, [incomingPathParams, persistedPathParams]);
36
+ var queryParams = react_1.useMemo(function () { return (lodash_1.isEqual(incomingQueryParams, persistedQueryParams) ? persistedQueryParams : incomingQueryParams); }, [incomingQueryParams, persistedQueryParams]);
37
+ // update the persisted pathParams and queryParams if they have changed for later comparisons with incoming values
38
+ react_1.useEffect(function () {
39
+ if (!lodash_1.isEqual(persistedPathParams, pathParams)) {
40
+ setPersistedPathParams(pathParams);
41
+ }
42
+ }, [persistedPathParams, pathParams]);
43
+ react_1.useEffect(function () {
44
+ if (!lodash_1.isEqual(persistedQueryParams, queryParams)) {
45
+ setPersistedQueryParams(queryParams);
46
+ }
47
+ }, [persistedQueryParams, queryParams]);
48
+ var _f = react_redux_1.useSelector(function (state) {
33
49
  return selectorFunction({ guid: guid, modelName: modelName, pathParams: pathParams, routeMatchParams: routeMatchParams, state: state });
34
- }), model = _d.model, isCollectionItem = _d.isCollectionItem;
50
+ }), model = _f.model, isCollectionItem = _f.isCollectionItem;
35
51
  var previousModelName = usePrevious_1.usePrevious(modelName);
36
52
  var previousModel = usePrevious_1.usePrevious(model);
37
53
  var previousPathParams = usePrevious_1.usePrevious(pathParams);
38
54
  var previousQueryParams = usePrevious_1.usePrevious(queryParams);
39
55
  var modelArray = react_1.useMemo(function () { return (!isCollectionItem ? model_1.getModelArray(model, guid) : undefined); }, [guid, isCollectionItem, model]);
40
56
  var modelMinusRelations = react_1.useMemo(function () { return (isCollectionItem ? model_1.getModelMinusRelations(model) : undefined); }, [isCollectionItem, model]);
41
- var changeModelStatus = function (newModelStatus, newFetchingId) {
57
+ var changeModelStatus = react_1.useCallback(function (newModelStatus, newFetchingId) {
42
58
  setFetchingId(newFetchingId);
43
59
  setModelStatus(newModelStatus);
44
- };
45
- var methodConfig = {
60
+ }, []);
61
+ var methodConfig = react_1.useMemo(function () { return ({
46
62
  modelName: modelName,
47
63
  pathParams: pathParams,
48
64
  queryParams: queryParams,
49
65
  guid: guid,
50
- modelStatus: modelStatus,
66
+ isInitialized: isInitialized,
51
67
  changeModelStatus: changeModelStatus,
52
68
  disableAutoLoad: disableAutoLoad
53
- };
69
+ }); }, [modelName, pathParams, queryParams, guid, isInitialized, changeModelStatus, disableAutoLoad]);
54
70
  // update `modelStatus` when `model` fetch finishes
55
71
  react_1.useEffect(function () {
56
72
  model_1.handleModelFetchFinish(model, previousModel, fetchingId, changeModelStatus);
57
- }, [fetchingId, model, previousModel]);
73
+ }, [fetchingId, model, previousModel, changeModelStatus]);
58
74
  return {
59
75
  previousModelName: previousModelName,
60
76
  guid: guid,
package/lib/startup.js CHANGED
@@ -118,8 +118,14 @@ var startup = function (appConfig, endpointMappings) {
118
118
  }
119
119
  // Unhandled Errors
120
120
  window.onunhandledrejection = function (evt) {
121
- var _a, _b;
122
- if (((_a = evt === null || evt === void 0 ? void 0 : evt.reason) === null || _a === void 0 ? void 0 : _a.name) === 'ChunkLoadError' || ((_b = evt === null || evt === void 0 ? void 0 : evt.reason) === null || _b === void 0 ? void 0 : _b.code) === 'CSS_CHUNK_LOAD_FAILED') {
121
+ var _a;
122
+ var message = (_a = evt === null || evt === void 0 ? void 0 : evt.reason) === null || _a === void 0 ? void 0 : _a.message;
123
+ if (message &&
124
+ [
125
+ 'Failed to fetch dynamically imported module',
126
+ 'error loading dynamically imported module',
127
+ 'Importing a module script failed'
128
+ ].some(message.contains)) {
123
129
  if (!window.navigator.onLine) {
124
130
  window.alert("Your network connection appears to be having issues. Please check your connection and refresh your browser.");
125
131
  }
package/lib/types/Collection.d.ts CHANGED
@@ -40,7 +40,7 @@ export declare type CollectionSelectorMethod = <TModel extends Model>(params: Co
40
40
  * to encapsulate logic and state from the calling collection HOC or hook. */
41
41
  export interface CollectionMethodConfiguration extends CollectionCommonProps {
42
42
  guid: string;
43
- modelStatus: MODEL_STATUS;
43
+ isInitialized: boolean;
44
44
  changeModelStatus: (modelStatus: MODEL_STATUS, fetchingId?: string | number) => void;
45
45
  }
46
46
  export interface CollectionItemLoadParams {
package/lib/utils/collection.js CHANGED
@@ -68,13 +68,13 @@ function stopCollectionPeriodicLoad(taskId) {
68
68
  exports.stopCollectionPeriodicLoad = stopCollectionPeriodicLoad;
69
69
  function loadCollection(config, params) {
70
70
  if (params === void 0) { params = {}; }
71
- var modelName = config.modelName, modelStatus = config.modelStatus, configPathParams = config.pathParams, configQueryParams = config.queryParams, changeModelStatus = config.changeModelStatus;
71
+ var modelName = config.modelName, isInitialized = config.isInitialized, configPathParams = config.pathParams, configQueryParams = config.queryParams, changeModelStatus = config.changeModelStatus;
72
72
  var id = params.id, pathParams = params.pathParams, queryParams = params.queryParams, period = params.period, taskId = params.taskId, replaceValue = params.replaceValue;
73
73
  var p = lodash_1.concat([], pathParams || configPathParams, id ? [id] : []);
74
74
  if (p.length !== route_1.getMinRequiredPathParamsCount(modelName) + (id ? 1 : 0)) {
75
75
  throw new Error('pathParams length does not match length of path components');
76
76
  }
77
- if (modelStatus !== constants_1.MODEL_STATUS.UNINITIALIZED) {
77
+ if (isInitialized) {
78
78
  changeModelStatus(constants_1.MODEL_STATUS.LOADING, id);
79
79
  }
80
80
  if (!period) {
@@ -103,13 +103,13 @@ function loadCollection(config, params) {
103
103
  exports.loadCollection = loadCollection;
104
104
  function loadCollectionItem(config, params) {
105
105
  if (params === void 0) { params = {}; }
106
- var modelName = config.modelName, modelStatus = config.modelStatus, configPathParams = config.pathParams, configQueryParams = config.queryParams, changeModelStatus = config.changeModelStatus;
106
+ var modelName = config.modelName, isInitialized = config.isInitialized, configPathParams = config.pathParams, configQueryParams = config.queryParams, changeModelStatus = config.changeModelStatus;
107
107
  var pathParams = params.pathParams, queryParams = params.queryParams, period = params.period, taskId = params.taskId, replaceValue = params.replaceValue;
108
108
  var p = pathParams || configPathParams;
109
109
  if (p && p.length < route_1.getMinRequiredPathParamsCount(modelName) + 1) {
110
110
  throw new Error('pathParams length does not match length of path components');
111
111
  }
112
- if (modelStatus !== constants_1.MODEL_STATUS.UNINITIALIZED) {
112
+ if (isInitialized) {
113
113
  changeModelStatus(constants_1.MODEL_STATUS.LOADING);
114
114
  }
115
115
  if (!period) {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "studiokit-scaffolding-js",
3
- "version": "7.0.3",
3
+ "version": "7.0.5-alpha.1",
4
4
  "description": "Common scaffolding for Studio apps at Purdue",
5
5
  "repository": "https://gitlab.com/purdue-informatics/studiokit/studiokit-scaffolding-js",
6
6
  "license": "MIT",
@@ -44,26 +44,6 @@
44
44
  "sort-package-json"
45
45
  ]
46
46
  },
47
- "eslintConfig": {
48
- "extends": [
49
- "./src/config/eslint/react.cjs"
50
- ],
51
- "overrides": [
52
- {
53
- "files": [
54
- "**/*.ts?(x)"
55
- ],
56
- "parser": "@typescript-eslint/parser",
57
- "parserOptions": {
58
- "project": "tsconfig.json"
59
- }
60
- }
61
- ],
62
- "ignorePatterns": [
63
- "coverage/",
64
- "lib/"
65
- ]
66
- },
67
47
  "stylelint": {
68
48
  "extends": "stylelint-config-standard",
69
49
  "rules": {
@@ -180,16 +160,16 @@
180
160
  "copyfiles": "^2.4.1",
181
161
  "cross-env": "^7.0.3",
182
162
  "enzyme": "^3.11.0",
183
- "eslint": "^7.11.0",
163
+ "eslint": "^7.32.0",
184
164
  "eslint-config-prettier": "^7.2.0",
185
165
  "eslint-config-react-app": "^6.0.0",
186
166
  "eslint-import-resolver-node": "^0.3.9",
187
- "eslint-plugin-flowtype": "^5.2.0",
167
+ "eslint-plugin-flowtype": "^5.10.0",
188
168
  "eslint-plugin-import": "~2.22.1",
189
- "eslint-plugin-jsx-a11y": "^6.4.1",
190
- "eslint-plugin-prettier": "^3.3.1",
191
- "eslint-plugin-react": "^7.22.0",
192
- "eslint-plugin-react-hooks": "^4.2.0",
169
+ "eslint-plugin-jsx-a11y": "^6.9.0",
170
+ "eslint-plugin-prettier": "^3.4.1",
171
+ "eslint-plugin-react": "^7.35.0",
172
+ "eslint-plugin-react-hooks": "^4.6.2",
193
173
  "husky": "^4.3.8",
194
174
  "identity-obj-proxy": "^3.0.0",
195
175
  "jest": "^26.6.0",
@@ -223,5 +203,5 @@
223
203
  "optional": true
224
204
  }
225
205
  },
226
- "packageManager": "yarn@4.2.2"
206
+ "packageManager": "yarn@4.4.0"
227
207
  }