implement multiple files gist publish

libs/remix-ui/workspace/src/lib/actions/index.ts

@@ -328,6 +328,8 @@ export const publishToGist = async (path?: string) => {
           handleGistResponse(error, result)
         })
       }
+      // fire event for cleanup of temp folder
+      plugin.emit('FinishedGistPublish', folder)
     }
   } catch (error) {
     console.log(error)

libs/remix-ui/workspace/src/lib/components/file-explorer-context-menu.tsx

@@ -40,6 +40,7 @@ export const FileExplorerContextMenu = (props: FileExplorerContextMenuProps) =>
     focus,
     downloadPath,
     uploadFile,
+    publishManyFilesToGist,
     ...otherProps
   } = props
   const contextMenuRef = useRef(null)
@@ -197,6 +198,10 @@ export const FileExplorerContextMenu = (props: FileExplorerContextMenuProps) =>
                 _paq.push(['trackEvent', 'fileExplorer', 'contextMenu', 'publishFileToGist'])
                 publishFileToGist(path)
                 break
+              case 'Publish files to gist':
+                _paq.push(['trackEvent', 'fileExplorer', 'contextMenu', 'publishFilesToGist'])
+                publishManyFilesToGist()
+                break
               case 'Run':
                 _paq.push(['trackEvent', 'fileExplorer', 'contextMenu', 'runScript'])
                 runScript(path)

libs/remix-ui/workspace/src/lib/components/file-explorer.tsx

@@ -9,7 +9,7 @@ import '../css/file-explorer.css'
 import { checkSpecialChars, extractNameFromKey, extractParentFromKey, getPathIcon, joinPath } from '@remix-ui/helper'
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 import { ROOT_PATH } from '../utils/constants'
-import { moveFileIsAllowed, moveFilesIsAllowed, moveFolderIsAllowed, moveFoldersIsAllowed } from '../actions'
+import { copyFile, moveFileIsAllowed, moveFilesIsAllowed, moveFolderIsAllowed, moveFoldersIsAllowed } from '../actions'
 import { FlatTree } from './flat-tree'
 import { FileSystemContext } from '../contexts'
 
@@ -35,7 +35,9 @@ export const FileExplorer = (props: FileExplorerProps) => {
     uploadFile,
     uploadFolder,
     fileState,
-    canPaste
+    canPaste,
+    feTarget,
+    setFeTarget
   } = props
   const [state, setState] = useState<WorkSpaceState>(workspaceState)
   // const [isPending, startTransition] = useTransition();
@@ -43,7 +45,6 @@ export const FileExplorer = (props: FileExplorerProps) => {
   const [cutActivated, setCutActivated] = useState(false)
 
   const { plugin } = useContext(FileSystemContext)
-  const [feTarget, setFeTarget] = useState<{ key: string, type: 'file' | 'folder' }[]>({} as { key: string, type: 'file' | 'folder' }[])
   const [filesSelected, setFilesSelected] = useState<string[]>([])
   const feWindow = (window as any)
 
@@ -589,7 +590,6 @@ export const FileExplorer = (props: FileExplorerProps) => {
               <div onClick={handleFileExplorerMenuClick}>
                 <FileExplorerMenu
                   title={''}
-
                   menuItems={props.menuItems}
                   createNewFile={handleNewFileInput}
                   createNewFolder={handleNewFolderInput}

libs/remix-ui/workspace/src/lib/remix-ui-workspace.tsx

@@ -129,6 +129,7 @@ export function Workspace() {
   })
 
   const [validationResult, setValidationResult] = useState<ValidationResult>({ valid: true, message: '' })
+  const [feTarget, setFeTarget] = useState<{ key: string, type: 'file' | 'folder' }[]>({} as { key: string, type: 'file' | 'folder' }[])
 
   const loadingInitialState = {
     tooltip: '',
@@ -154,6 +155,31 @@ export function Workspace() {
     })
   }
 
+  /**
+   * Void action to ensure multiselected files are published
+   * folders are not handled
+   */
+  const handlePublishingMultiSelectedFilesToGist = async () => {
+    const tempFolderName = '.gistTemp'
+    // first create a temporary folder to populate selected files
+    try {
+      await global.dispatchCreateNewFolder(tempFolderName, ROOT_PATH)
+      feTarget.filter(feObject => feObject.type !== 'folder')
+        .forEach(async feFile => {
+          await copyFile(feFile.key, tempFolderName)
+        })
+      await global.dispatchPublishToGist(tempFolderName)
+      global.plugin.on('finishedGistPublish', async (folderName) => {
+        console.log('name of folder', folderName)
+        if (folderName === tempFolderName)
+          await global.dispatchDeletePath(folderName)
+      })
+    } catch (error) {
+      await global.plugin.call('notification', 'toast', 'Could not publish files to gist. There was an error')
+      await global.plugin.call('notification', 'toast', typeof(error) === 'string' ? error : `${console.log(error)} check the console for more details`)
+    }
+  }
+
   const showFullMessage = async (title: string, loadItem: string, examples: Array<string>, prefix = '') => {
     setModalState((prevState) => {
       return {
@@ -1023,6 +1049,9 @@ export function Workspace() {
                   files={global.fs.browser.files}
                   flatTree={global.fs.browser.flatTree}
                   workspaceState={state}
+                  feTarget={feTarget}
+                  setFeTarget={setFeTarget}
+                  publishManyFilesToGist={handlePublishingMultiSelectedFilesToGist}
                   expandPath={global.fs.browser.expandPath}
                   focusEdit={global.fs.focusEdit}
                   focusElement={global.fs.focusElement}
@@ -1094,6 +1123,9 @@ export function Workspace() {
                   fileState={[]}
                   canPaste={canPaste}
                   workspaceState={state}
+                  feTarget={feTarget}
+                  setFeTarget={setFeTarget}
+                  publishManyFilesToGist={handlePublishingMultiSelectedFilesToGist}
                   expandPath={global.fs.localhost.expandPath}
                   focusEdit={global.fs.focusEdit}
                   focusElement={global.fs.focusElement}
@@ -1269,7 +1301,7 @@ export function Workspace() {
       )}
       {state.showContextMenu && (
         <FileExplorerContextMenu
-          actions={global.fs.focusElement.length > 1 ? state.actions.filter((item) => item.multiselect) : state.actions.filter((item) => !item.multiselect)}
+          actions={(global.fs.focusElement.length > 1 || feTarget.length > 1) ? state.actions.filter((item) => item.multiselect) : state.actions.filter((item) => !item.multiselect)}
           hideContextMenu={hideContextMenu}
           createNewFile={handleNewFileInput}
           createNewFolder={handleNewFolderInput}
@@ -1292,6 +1324,7 @@ export function Workspace() {
           publishFileToGist={publishFileToGist}
           uploadFile={uploadFile}
           downloadPath={downloadPath}
+          publishManyFilesToGist={handlePublishingMultiSelectedFilesToGist}
         />
       )}
 

libs/remix-ui/workspace/src/lib/types/index.ts

@@ -160,6 +160,12 @@ export interface FileExplorerProps {
     importFromIpfs: any
     importFromHttps: any
     handleMultiCopies: any
+    feTarget: { key: string, type: 'file' | 'folder' }[]
+    setFeTarget: Dispatch<React.SetStateAction<{
+      key: string;
+      type: "file" | "folder";
+  }[]>>
+    publishManyFilesToGist: () => Promise<void>
 }
 
 export interface FileExplorerMenuProps {
@@ -201,6 +207,7 @@ export interface FileExplorerContextMenuProps {
   copyPath?: (path: string, type: string) => void
   generateUml?: (path: string) => Promise<void>
   uploadFile?: (target: EventTarget & HTMLInputElement) => void
+  publishManyFilesToGist: () => Promise<void>
 }
 
 export interface WorkSpaceState {

libs/remix-ui/workspace/src/lib/utils/index.ts

@@ -97,6 +97,15 @@ export const contextMenuActions: MenuItems = [{
   group: 4,
   platform: appPlatformTypes.web
 }, {
+  id: 'publishFilesToGist',
+  name: 'Publish files to gist',
+  type: ['file'],
+  multiselect: true,
+  label: '',
+  group: 4,
+  platform: appPlatformTypes.web
+}
+, {
   id: 'uploadFile',
   name: 'Load a Local File',
   type: ['folder', 'workspace'],