withResources

src/components/resources/index.js

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

src/components/resources/withResource.md

@@ -4,7 +4,7 @@ import ReactJson from 'react-json-view';
 import {withResource} from 'scripture-resources-rcl';
 
 function Component ({resource}) {
-  const [file, setFile] = React.useState(<></>);
+  const [file, setFile] = React.useState();
 
   React.useEffect(() => {
     if (resource && resource.project) {

src/components/resources/withResources.js

@@ -0,0 +1,48 @@
+import React, { useState, useEffect } from "react";
+import PropTypes from 'prop-types';
+import deepFreeze from 'deep-freeze';
+
+import {resourcesFromResourceLinks} from '../../core';
+
+function WithResources(Component){
+  function ResourcesComponent({
+    resourceLinks,
+    config,
+    ...props
+  }) {
+    const [resources, setResources] = useState([]);
+
+    useEffect(() => {
+      resourcesFromResourceLinks({resourceLinks, config})
+      .then(_resources => {
+        setResources(deepFreeze(_resources));
+      });
+    }, [resourceLinks, config]);
+
+    return (
+      <Component resources={resources} {...props} />
+    );
+  }
+
+  ResourcesComponent.propTypes = WithResources.propTypes;
+
+  return ResourcesComponent;
+}
+
+WithResources.propTypes = {
+  /** The link to parse and fetch the resource manifest */
+  resourceLinks: PropTypes.arrayOf(
+    PropTypes.string.isRequired
+  ).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 WithResources;

src/components/resources/withResources.md

@@ -0,0 +1,45 @@
+```js
+import {Paper} from '@material-ui/core';
+import ReactJson from 'react-json-view';
+import {withResources} from 'scripture-resources-rcl';
+
+function Component ({resources}) {
+  const [files, setFiles] = React.useState([]);
+
+  React.useEffect(() => {
+    const promises = resources.map((resource, index) => resource.project.file() );
+    Promise.all(promises).then(_files => setFiles(_files));
+  }, [resources]);
+
+  const component = resources.map((resource, index) => (
+    <>
+      <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>
+          {files[index]}
+        </pre>
+      </Paper>
+    </>
+  ));
+
+  return component;
+};
+const ResourcesComponent = withResources(Component);
+
+const resourceLinks = [
+  'unfoldingWord/el-x-koine/ugnt/v0.8/tit',
+  'unfoldingWord/en/ult/v5/tit',
+  'unfoldingWord/en/ust/v5/tit',
+];
+
+const config = {
+  server: 'https://git.door43.org',
+  cache: {
+    maxAge: 1 * 1 * 1 * 60 * 1000, // override cache to 1 minute
+  },
+};
+
+<ResourcesComponent resourceLinks={resourceLinks} config={config} />
+```

src/core/resources.js

@@ -2,14 +2,22 @@ import Path from 'path';
 import YAML from 'js-yaml-parser';
 import {get} from 'gitea-react-toolkit';
 
+export const resourcesFromResourceLinks = async ({resourceLinks, config}) => {
+  const promises = resourceLinks.map(resourceLink => {
+    return resourceFromResourceLink({resourceLink, config});
+  });
+  const resources = await Promise.all(promises);
+  return resources;
+};
+
 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);

styleguide.config.js

@@ -15,6 +15,7 @@ let sections = [
     components: () => {
       const componentNames = [
         'withResource',
+        'withResources',
       ];
       return componentNames.map(componentName => {
         return Path.resolve(__dirname, `src/components/resources`, `${componentName}.js`)