Download collection as a zip

client/modules/IDE/actions/project.js

@@ -262,6 +262,14 @@ export function exportProjectAsZip(projectId) {
   win.focus();
 }
 
+export function exportCollectionAsZip(collectionId) {
+  const win = window.open(
+    `${ROOT_URL}/downloadCollection/${collectionId}`,
+    '_blank'
+  );
+  win.focus();
+}
+
 export function resetProject() {
   return {
     type: ActionTypes.RESET_PROJECT

client/modules/User/components/CollectionShareButton.jsx

@@ -6,13 +6,18 @@ import Button from '../../../common/Button';
 import { DropdownArrowIcon } from '../../../common/icons';
 import useModalClose from '../../../common/useModalClose';
 import CopyableInput from '../../IDE/components/CopyableInput';
+import { exportCollectionAsZip } from '../../IDE/actions/project';
 
 const ShareURL = ({ value }) => {
   const [showURL, setShowURL] = useState(false);
   const { t } = useTranslation();
   const close = useCallback(() => setShowURL(false), [setShowURL]);
   const ref = useModalClose(close);
-
+  function downloadCollection() {
+    const urlArray = value.split('/');
+    const collectionId = urlArray[urlArray.length - 1];
+    exportCollectionAsZip(collectionId);
+  }
   return (
     <div className="collection-share" ref={ref}>
       <Button
@@ -24,6 +29,9 @@ const ShareURL = ({ value }) => {
       {showURL && (
         <div className="collection__share-dropdown">
           <CopyableInput value={value} label={t('Collection.URLLink')} />
+          <Button onClick={downloadCollection}>
+            {t('Collection.Download')}
+          </Button>
         </div>
       )}
     </div>

client/styles/components/_collection.scss

@@ -104,6 +104,7 @@
   @extend %dropdown-open-right;
   padding: #{20 / $base-font-size}rem;
   width: #{350 / $base-font-size}rem;
+  gap: 1rem;
 }
 
 .collection-content {

server/controllers/collection.controller/downloadCollection.js

@@ -0,0 +1,104 @@
+import JSZip from 'jszip';
+import format from 'date-fns/format';
+import isUrl from 'is-url';
+import { JSDOM } from 'jsdom';
+import slugify from 'slugify';
+import { addFileToZip } from '../project.controller';
+import Collection from '../../models/collection';
+import generateFileSystemSafeName from '../../utils/generateFileSystemSafeName';
+
+function formatCollection(collection) {
+  const { items, name, owner } = collection;
+  const folder = {
+    name: 'root',
+    fileType: 'folder',
+    children: []
+  };
+
+  const formattedCollection = {
+    name,
+    owner: owner.username,
+    files: [folder]
+  };
+
+  items.forEach((item) => {
+    const { project } = item;
+    const rootFile = project.files.find((file) => file.name === 'root');
+    rootFile.name = project.name;
+    formattedCollection.files.push(...project.files);
+    folder.children.push(rootFile.id);
+  });
+
+  return formattedCollection;
+}
+
+function bundleExternalLibsForCollection(collection) {
+  const { files } = collection;
+  const htmlFiles = [];
+  const projectFolders = [];
+  files.forEach((file) => {
+    if (file.name === 'index.html') htmlFiles.push(file);
+    else if (file.fileType === 'folder' && file.name !== 'root')
+      projectFolders.push(file);
+  });
+  htmlFiles.forEach((indexHtml) => {
+    const { window } = new JSDOM(indexHtml.content);
+    const scriptTags = window.document.getElementsByTagName('script');
+
+    const parentFolder = projectFolders.filter((folder) =>
+      folder.children.includes(indexHtml.id)
+    );
+
+    Object.values(scriptTags).forEach(async ({ src }, i) => {
+      if (!isUrl(src)) return;
+
+      const path = src.split('/');
+      const filename = path[path.length - 1];
+      const libId = `${filename}-${parentFolder[0].name}`;
+
+      collection.files.push({
+        name: filename,
+        url: src,
+        id: libId
+      });
+
+      parentFolder[0].children.push(libId);
+    });
+  });
+}
+
+async function buildCollectionZip(collection, req, res) {
+  try {
+    const zip = new JSZip();
+    const currentTime = format(new Date(), 'yyyy_MM_dd_HH_mm_ss');
+    collection.slug = slugify(`${collection.name} by ${collection.owner}`, '_');
+    const zipFileName = `${generateFileSystemSafeName(
+      collection.slug
+    )}_${currentTime}.zip`;
+    const { files } = collection;
+    const root = files.find((file) => file.name === 'root');
+
+    bundleExternalLibsForCollection(collection);
+    await addFileToZip(root, files, zip);
+
+    const base64 = await zip.generateAsync({ type: 'base64' });
+    const buff = Buffer.from(base64, 'base64');
+    res.writeHead(200, {
+      'Content-Type': 'application/zip',
+      'Content-disposition': `attachment; filename=${zipFileName}`
+    });
+    res.end(buff);
+  } catch (err) {
+    console.error(err);
+    res.status(500).send(err);
+  }
+}
+
+export default async function downloadCollection(req, res) {
+  const { id } = req.params;
+  const collection = await Collection.findById(id)
+    .populate('items.project')
+    .populate('owner');
+  const formattedCollection = formatCollection(collection);
+  buildCollectionZip(formattedCollection, req, res);
+}

server/controllers/collection.controller/index.js

@@ -5,3 +5,4 @@ export { default as listCollections } from './listCollections';
 export { default as removeCollection } from './removeCollection';
 export { default as removeProjectFromCollection } from './removeProjectFromCollection';
 export { default as updateCollection } from './updateCollection';
+export { default as downloadCollection } from './downloadCollection';

server/controllers/project.controller.js

@@ -215,7 +215,7 @@ function bundleExternalLibs(project) {
   });
 }
 
-function addFileToZip(file, files, zip, path = '') {
+export function addFileToZip(file, files, zip, path = '') {
   return new Promise((resolve, reject) => {
     if (file.fileType === 'folder') {
       const newPath = file.name === 'root' ? path : `${path}${file.name}/`;

server/routes/collection.routes.js

@@ -40,5 +40,5 @@ router.delete(
   isAuthenticated,
   CollectionController.removeProjectFromCollection
 );
-
+router.get('/downloadCollection/:id', CollectionController.downloadCollection);
 export default router;

translations/locales/en-US/translations.json

@@ -434,6 +434,7 @@
     "AnothersTitle": "p5.js Web Editor | {{anotheruser}}'s collections",
     "Share": "Share",
     "URLLink": "Link to Collection",
+    "Download": "Download Collection",
     "AddSketch": "Add Sketch",
     "DeleteFromCollection": "Are you sure you want to remove {{name_sketch}} from this collection?",
     "SketchDeleted": "Sketch deleted",