withResource

package.json

@@ -11,6 +11,8 @@
   "license": "MIT",
   "dependencies": {
     "deep-freeze": "^0.0.1",
+    "gitea-react-toolkit": "^0.3.5",
+    "js-yaml-parser": "^1.0.0",
     "react-waypoint": "^9.0.2",
     "usfm-js": "^2.0.2"
   },
@@ -60,6 +62,7 @@
     "prop-types": "^15.7.2",
     "react": "^16.9.0",
     "react-dom": "^16.9.0",
+    "react-json-view": "^1.19.1",
     "react-scripts": "^3.1.1",
     "react-styleguidist": "^9.1.16"
   }

src/components/index.js

@@ -3,4 +3,5 @@ export * from './chapters';
 export * from './verse-objects';
 export * from './verses';
 export * from './parallel-scripture';
-export * from './usfm';
+export * from './usfm';
+export * from './resources';

src/components/resources/index.js

@@ -0,0 +1 @@
+export {default as withResource} from './withResource';

src/components/resources/withResource.js

@@ -0,0 +1,46 @@
+import React, { useState, useEffect } from "react";
+import PropTypes from 'prop-types';
+import deepFreeze from 'deep-freeze';
+
+import {resourceFromResourceLink} from '../../core';
+
+function WithResource(Component){
+  function ResourceComponent({
+    resourceLink,
+    config,
+    ...props
+  }) {
+    const [resource, setResource] = useState();
+
+    useEffect(() => {
+      resourceFromResourceLink({resourceLink, config})
+      .then(_resource => {
+        setResource(deepFreeze(_resource));
+      });
+    }, [resourceLink, config]);
+
+    return (
+      <Component resource={resource} {...props} />
+    );
+  }
+
+  ResourceComponent.propTypes = WithResource.propTypes;
+
+  return ResourceComponent;
+}
+
+WithResource.propTypes = {
+  /** The link to parse and fetch the resource manifest */
+  resourceLink: PropTypes.string.isRequired,
+  /** The configuration of the server, and fetching */
+  config: PropTypes.shape({
+    server: PropTypes.string.isRequired,
+    /** the overriding cache settings */
+    cache: PropTypes.shape({
+      /** cache age in ms */
+      maxAge: PropTypes.number
+    })
+  }),
+};
+
+export default WithResource;

src/components/resources/withResource.md

@@ -0,0 +1,44 @@
+```js
+import {Paper} from '@material-ui/core';
+import ReactJson from 'react-json-view';
+import {withResource} from 'scripture-resources-rcl';
+
+function Component ({resource}) {
+  const [file, setFile] = React.useState(<></>);
+
+  React.useEffect(() => {
+    if (resource && resource.project) {
+      resource.project.file().then(_file => {
+        setFile(_file);
+      });
+    }
+  }, [resource]);
+
+  return (
+    <>
+      <Paper style={{maxHeight: '250px', margin: '1em', padding: '1em',  overflow: 'scroll'}}>
+        <ReactJson src={resource} />
+      </Paper>
+      <Paper style={{maxHeight: '250px', margin: '1em', padding: '1em', overflow: 'scroll'}}>
+        <pre>
+          {file}
+        </pre>
+      </Paper>
+    </>
+  );
+};
+const ResourceComponent = withResource(Component);
+
+// const resourceLink = 'unfoldingWord/en/ust/v5/tit';
+// const resourceLink = 'unfoldingWord/en/ult/v5/tit';
+const resourceLink = 'unfoldingWord/el-x-koine/ugnt/v0.8/tit';
+
+const config = {
+  server: 'https://git.door43.org',
+  cache: {
+    maxAge: 1 * 1 * 1 * 60 * 1000, // override cache to 1 minute
+  },
+};
+
+<ResourceComponent resourceLink={resourceLink} config={config} />
+```

src/components/usfm/withUsfm.js

@@ -20,14 +20,16 @@ function withUsfm(Component){
     );
   }
 
-  UsfmComponent.propTypes = {
-    /** The usfm string to parse */
-    usfm: PropTypes.string.isRequired,
-    /** The url of the usfm string to parse */
-    onParse: PropTypes.func,
-  };
+  UsfmComponent.propTypes = withUsfm.propTypes;
 
   return UsfmComponent;
 }
 
+withUsfm.propTypes = {
+  /** The usfm string to parse */
+  usfm: PropTypes.string.isRequired,
+  /** The url of the usfm string to parse */
+  onParse: PropTypes.func,
+};
+
 export default withUsfm;

src/core/index.js

@@ -1,2 +1,3 @@
 export * from './langnames';
-export * from './language-detection';
+export * from './language-detection';
+export * from './resources';

src/core/resources.js

@@ -0,0 +1,58 @@
+import Path from 'path';
+import YAML from 'js-yaml-parser';
+import {get} from 'gitea-react-toolkit';
+
+export const resourceFromResourceLink = async ({resourceLink, config}) => {
+  let resource = parseResourceLink({resourceLink, config});
+  resource.manifest = await getResourceManifest(resource);
+  if (resource.projectId && resource.manifest.projects) {
+    resource.project = projectFromProjects(resource);
+  }
+  return resource;
+}
+
+export const parseResourceLink = ({resourceLink, config}) => {
+  const parsed = resourceLink.split('/').filter(string => string.length > 0);
+  const [username, languageId, resourceId, tag, projectId] = parsed;
+  const resource = {username, languageId, resourceId, tag, projectId, config};
+  return resource;
+};
+
+export const getResourceManifest = async ({username, languageId, resourceId, tag, config}) => {
+  const repository = `${languageId}_${resourceId}`;
+  const path = 'manifest.yaml';
+  const yaml = await getFile({username, repository, path, tag, config});
+  const json = (yaml) ? YAML.safeLoad(yaml) : null;
+  return json;
+};
+
+export const getResourceProjectFile = async (
+  {username, languageId, resourceId, tag, project: {path}, config}
+) => {
+  const repository = `${languageId}_${resourceId}`;
+  const file = await getFile({username, repository, path, tag, config});
+  return file;
+};
+
+export const projectFromProjects = (resource) => {
+  const {projectId, manifest: {projects}} = resource;
+  let project = projects.filter(project => project.identifier === projectId)[0];
+  project.file = async () => getResourceProjectFile(resource);
+  return project;
+};
+
+// https://git.door43.org/unfoldingword/en_ult/raw/branch/master/manifest.yaml
+export const getFile = async ({username, repository, path, tag, config}) => {
+  let url;
+  if (tag) url = Path.join(username, repository, 'raw/tag', tag, path);
+  else url = Path.join(username, repository, 'raw/branch/master', path);
+  try {
+    const _config = {...config}; // prevents gitea-react-toolkit from modifying object
+    const data = await get({url, config: _config});
+    return data;
+  }
+  catch(error) {
+    console.error(error);
+    return null;
+  }
+};

styleguide.config.js

@@ -9,6 +9,18 @@ let sections = [
     name: 'README',
     content: 'README.md',
   },
+  {
+    name: 'Resources ',
+    content: 'src/components/resources/_readme.md',
+    components: () => {
+      const componentNames = [
+        'withResource',
+      ];
+      return componentNames.map(componentName => {
+        return Path.resolve(__dirname, `src/components/resources`, `${componentName}.js`)
+      });
+    }
+  },
   {
     name: 'USFM ',
     content: 'src/components/usfm/_readme.md',