synapse-react-client
Version:
[](https://travis-ci.com/Sage-Bionetworks/Synapse-React-Client) [](https://badge.fury.io/js/synaps
247 lines • 12.6 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
// EntityForm:
// Will generate a Form (based on your schema files).
// Gathers user input (including files)
// Will give you the Synapse ID of the FileEntity that contains the user form data.
var React = (0, tslib_1.__importStar)(require("react"));
var core_1 = (0, tslib_1.__importDefault)(require("@rjsf/core"));
var utils_1 = require("../utils");
var SynapseClient_1 = require("../utils/SynapseClient");
var SynapseContext_1 = require("../utils/SynapseContext");
var EntityForm = /** @class */ (function (_super) {
(0, tslib_1.__extends)(EntityForm, _super);
function EntityForm(props) {
var _this = _super.call(this, props) || this;
_this.submitForm = function () {
_this.formRef.current.submit();
};
_this.refresh = function () {
if (_this.context.accessToken) {
var promises = [
utils_1.SynapseClient.getUserProfile(_this.context.accessToken),
utils_1.SynapseClient.getEntity(_this.context.accessToken, _this.props.formSchemaEntityId),
utils_1.SynapseClient.getEntity(_this.context.accessToken, _this.props.formUiSchemaEntityId),
];
Promise.all(promises)
.then(function (values) {
var userprofile = values[0];
_this.getTargetContainer(userprofile, _this.context.accessToken).then(
// @ts-ignore
function (targetContainerId) {
var formSchemaFileEntity = values[1];
var formUiSchemaFileEntity = values[2];
_this.getSchemaFileContent(targetContainerId, formSchemaFileEntity, formUiSchemaFileEntity);
});
})
.catch(function (error) {
_this.onError(error);
});
}
};
_this.getSchemaFileContent = function (targetFolderId, formSchemaFileEntity, formUiSchemaFileEntity) {
var promises = [
utils_1.SynapseClient.getFileResult(formSchemaFileEntity, _this.context.accessToken, true, true),
utils_1.SynapseClient.getFileResult(formUiSchemaFileEntity, _this.context.accessToken, true, true),
];
Promise.all(promises)
.then(function (values) {
try {
var fileContent = values.map(function (el) {
return (0, SynapseClient_1.getFileHandleContent)(el.fileHandle, el.preSignedURL);
});
Promise.all(fileContent)
.then(function (el) {
var formSchemaContent = JSON.parse(el[0]);
var formUiSchemaContent = JSON.parse(el[1]);
_this.getExistingFileData(targetFolderId, formSchemaContent, formUiSchemaContent);
})
.catch(function (e) {
console.log('getSchemaFileContent: Error getting form content', e);
});
}
catch (e) {
console.log('getSchemaFileContent: Error getting schema content', e);
}
})
.catch(function (error) {
_this.onError(error);
});
};
_this.getExistingFileData = function (targetFolderId, formSchemaContent, formUiSchemaContent) {
// if data already exists, save a reference to the existing entity and prefill the form
var fileName = formSchemaContent.title + ".json";
var entityLookupRequest = {
entityName: fileName,
parentId: targetFolderId,
};
var formData;
var currentFileEntity;
utils_1.SynapseClient.lookupChildEntity(entityLookupRequest, _this.context.accessToken)
.then(function (entityId) {
// ok, found the existing file
return utils_1.SynapseClient.getEntity(_this.context.accessToken, entityId.id).then(function (entity) {
currentFileEntity = entity;
if (_this.props.initFormData) {
return utils_1.SynapseClient.getFileResult(currentFileEntity, _this.context.accessToken, true, true).then(function (existingFileData) { return (0, tslib_1.__awaiter)(_this, void 0, void 0, function () {
var fileContent, e_1;
return (0, tslib_1.__generator)(this, function (_a) {
switch (_a.label) {
case 0:
_a.trys.push([0, 2, , 3]);
return [4 /*yield*/, (0, SynapseClient_1.getFileHandleContent)(existingFileData.fileHandle, existingFileData.preSignedURL)];
case 1:
fileContent = _a.sent();
formData = JSON.parse(fileContent);
return [3 /*break*/, 3];
case 2:
e_1 = _a.sent();
console.log('getExistingFileData: Error setting form data', e_1);
return [3 /*break*/, 3];
case 3: return [2 /*return*/];
}
});
}); });
}
// else we're done
return Promise.resolve();
});
})
.finally(function () {
_this.setState({
formData: formData,
currentFileEntity: currentFileEntity,
formSchema: formSchemaContent,
formUiSchema: formUiSchemaContent,
});
});
};
_this.getTargetContainer = function (userprofile, token) { return (0, tslib_1.__awaiter)(_this, void 0, void 0, function () {
var entityLookupRequest, entityId, error_1;
return (0, tslib_1.__generator)(this, function (_a) {
switch (_a.label) {
case 0:
entityLookupRequest = {
entityName: userprofile.ownerId,
parentId: this.props.parentContainerId,
};
_a.label = 1;
case 1:
_a.trys.push([1, 3, , 4]);
return [4 /*yield*/, utils_1.SynapseClient.lookupChildEntity(entityLookupRequest, token)
// ok, found an entity of the same name.
];
case 2:
entityId = _a.sent();
// ok, found an entity of the same name.
console.log("EntityForm uploading to https://www.synapse.org/#!Synapse:" + entityId.id);
this.setState({
userprofile: userprofile,
containerId: entityId.id,
isLoading: false,
});
return [2 /*return*/, entityId.id];
case 3:
error_1 = _a.sent();
if (error_1.status === 404) {
return [2 /*return*/, this.onError(new Error('Your folder has not yet been set up, please retry in a few minutes.'))];
}
// else
return [2 /*return*/, this.onError(error_1)];
case 4: return [2 /*return*/];
}
});
}); };
_this.finishedProcessing = function () {
_this.setState({
isLoading: false,
successfullyUploaded: true,
});
};
_this.onError = function (error) {
_this.setState({
error: error,
isLoading: false,
successfullyUploaded: false,
});
};
_this.onSubmit = function (_a) {
var formData = _a.formData;
_this.setState({
isLoading: true,
successfullyUploaded: false,
});
var submissionFileAndForm = new Blob([JSON.stringify(formData)], {
type: 'text/json',
});
_this.createEntityFile(submissionFileAndForm);
};
_this.createEntityFile = function (fileContentsBlob) {
var fileName = _this.state.formSchema.title + ".json";
utils_1.SynapseClient.uploadFile(_this.context.accessToken, fileName, fileContentsBlob)
.then(function (fileUploadComplete) {
// do we need to create a new file entity, or update an existing file entity?
var newFileHandleId = fileUploadComplete.fileHandleId;
if (_this.state.currentFileEntity) {
_this.state.currentFileEntity.dataFileHandleId = newFileHandleId;
return utils_1.SynapseClient.updateEntity(_this.state.currentFileEntity, _this.context.accessToken);
}
// else, it's a new file entity
var newFileEntity = {
parentId: _this.state.containerId,
name: fileName,
concreteType: 'org.sagebionetworks.repo.model.FileEntity',
dataFileHandleId: newFileHandleId,
};
return utils_1.SynapseClient.createEntity(newFileEntity, _this.context.accessToken);
})
.then(function (fileEntity) {
// by this point we've either found and updated the existing file entity, or created a new one.
_this.finishedProcessing();
if (_this.props.synIdCallback) {
_this.props.synIdCallback(fileEntity.id);
}
})
.catch(function (error) {
_this.onError(error);
});
};
_this.formRef = React.createRef();
_this.state = {
isLoading: true,
successfullyUploaded: false,
};
return _this;
}
EntityForm.prototype.componentDidMount = function () {
this.refresh();
};
EntityForm.prototype.render = function () {
return (React.createElement("div", null,
this.state.error && (React.createElement("div", { className: "panel panel-danger errors" },
React.createElement("div", { className: "panel-heading" },
React.createElement("h3", { className: "panel-title" }, "Error")),
React.createElement("ul", { className: "list-group" },
React.createElement("li", { className: "list-group-item text-danger" },
this.state.error.name,
" ",
this.state.error.reason,
this.state.error.message)))),
this.context.accessToken &&
!this.state.isLoading &&
!this.state.successfullyUploaded &&
this.state.formSchema &&
this.state.formUiSchema &&
!this.state.error && (React.createElement(core_1.default, { formData: this.state.formData, schema: this.state.formSchema, uiSchema: this.state.formUiSchema, onSubmit: this.onSubmit, showErrorList: true, ref: this.formRef },
React.createElement("div", { style: { display: 'none' } },
React.createElement("button", { type: "submit", className: "btn btn-info" }, "Submit")))),
!this.state.error && this.context.accessToken && this.state.isLoading && (React.createElement(React.Fragment, null,
React.createElement("span", null, "Saving\u2026"),
React.createElement("span", { style: { marginLeft: '2px' }, className: 'spinner' })))));
};
EntityForm.contextType = SynapseContext_1.SynapseContext;
return EntityForm;
}(React.Component));
exports.default = EntityForm;
//# sourceMappingURL=EntityForm.js.map