# User-defined Vivide Content

<span style="color: red; font-weight: bold;">CAUTION!</span>
Press the button to delete the corresponding file:

<script>
import { scriptFolder, stepFolder } from 'src/client/vivide/utils.js'
import { fileName, flatten } from 'utils';

(async () => {
  let autoGenerated = /[0-9abcdef]{8}-[0-9abcdef]{4}-[0-9abcdef]{4}-[0-9abcdef]{4}-[0-9abcdef]{12}\.js(on)?$/;
  let deleteFunctions = [];
  let folders = [scriptFolder, stepFolder];
  let fileNames = (await Promise.all(folders.map(async folderURL => {
    let folder = JSON.parse(await lively.files.statFile(folderURL));
    let fileNames = folder.contents
      .filter(({ type }) => type === 'file')
      .map(({ name }) => name)
      .filter(name => autoGenerated.test(name))
      .map(name => folderURL + name);
    return fileNames;
  })))::flatten();

  let buttonList = fileNames.map(urlString => {
    let del = async evt => {
      let delResponse = await fetch(urlString, { method: 'DELETE' });
      if (delResponse.status === 200) {
        lively.success(`deleted file ${urlString::fileName()}`);
        button.remove();
        deleteFunctions = deleteFunctions.filter(df => df !== del);
      } else {
        lively.notify("could not properly delete " + urlString, (await delResponse.text()));
      }
    }
    deleteFunctions.push(del);
    let button = <button click={del}>
      <span style="color: red; font-weight: bold;">Delete:</span> {urlString}
    </button>;

    return button;
  });
  
  let deleteAllScriptsButton = <button click={async evt => {
    await Promise.all(deleteFunctions.map(f => f()));
    lively.success('removed all scripts');
  }}><span style="color: red; font-weight: bold;">DELETE ALL SCRIPTS!</span></button>;

  return <div>
    {deleteAllScriptsButton}
    <div>{...buttonList}</div>
  </div>;
})();
</script>