p5.js-web-editor/client/modules/IDE/reducers/files.js

import * as ActionTypes from '../../../constants';

const defaultSketch = `function setup() { 
  createCanvas(400, 400);
} 

function draw() { 
  background(220);
}`;

const defaultHTML =
`<!DOCTYPE html>
<html>
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.2/p5.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.2/addons/p5.dom.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.2/addons/p5.sound.min.js"></script>
    <link rel="stylesheet" type="text/css" href="style.css">
  </head>
  <body>
    <script src="sketch.js"></script>
  </body>
</html>
`;

const defaultCSS =
`html, body {
  overflow: hidden;
  margin: 0;
  padding: 0;
}
`;

// if the project has never been saved,
const initialState = [
  {
    name: 'root',
    id: '0',
    children: ['1', '2', '3']
  },
  {
    name: 'sketch.js',
    content: defaultSketch,
    id: '1'
  },
  {
    name: 'index.html',
    content: defaultHTML,
    id: '2'
  },
  {
    name: 'style.css',
    content: defaultCSS,
    id: '3'
  }];


const files = (state = initialState, action) => {
  switch (action.type) {
    case ActionTypes.UPDATE_FILE_CONTENT:
      return state.map(file => {
        if (file.name !== action.name) {
          return file;
        }

        return Object.assign({}, file, { content: action.content });
      });
    case ActionTypes.SET_BLOB_URL:
      return state.map(file => {
        if (file.name !== action.name) {
          return file;
        }
        return Object.assign({}, file, { blobURL: action.blobURL });
      });
    case ActionTypes.NEW_PROJECT:
      return [...action.files];
    case ActionTypes.SET_PROJECT:
      return [...action.files];
    case ActionTypes.RESET_PROJECT:
      return initialState;
    case ActionTypes.CREATE_FILE:
      return [...state, { name: action.name, id: action.id, content: action.content, url: action.url }];
    case ActionTypes.SHOW_FILE_OPTIONS:
      return state.map(file => {
        if (file.id !== action.id) {
          return file;
        }

        return Object.assign({}, file, { isOptionsOpen: true });
      });
    case ActionTypes.HIDE_FILE_OPTIONS:
      return state.map(file => {
        if (file.id !== action.id) {
          return file;
        }

        return Object.assign({}, file, { isOptionsOpen: false });
      });
    case ActionTypes.UPDATE_FILE_NAME:
      return state.map(file => {
        if (file.id !== action.id) {
          return file;
        }

        return Object.assign({}, file, { name: action.name });
      });
    case ActionTypes.DELETE_FILE:
      return state.filter(file => file.id !== action.id);
    case ActionTypes.SHOW_EDIT_FILE_NAME:
      return state.map(file => {
        if (file.id !== action.id) {
          return file;
        }

        return Object.assign({}, file, { isEditingName: true });
      });
    case ActionTypes.HIDE_EDIT_FILE_NAME:
      return state.map(file => {
        if (file.id !== action.id) {
          return file;
        }

        return Object.assign({}, file, { isEditingName: false });
      });
    default:
      return state;
  }
};

export const setSelectedFile = (state, id) =>
  state.map(file => {
    if (file.id === id) {
      return Object.assign({}, file, { isSelected: true });
    }
    return file;
  });

export const getFile = (state, id) => state.filter(file => file.id === id)[0];
export const getHTMLFile = (state) => state.filter(file => file.name.match(/.*\.html$/i))[0];
export const getJSFiles = (state) => state.filter(file => file.name.match(/.*\.js$/i));
export const getCSSFiles = (state) => state.filter(file => file.name.match(/.*\.css$/i));
export const getLinkedFiles = (state) => state.filter(file => file.url);

export default files;
restructure redux files 2016-06-22 21:58:23 +02:00			`import * as ActionTypes from '../../../constants';`
add full redux/react flow to editor 2016-05-05 23:48:26 +02:00
start to add multiple file functionality 2016-07-06 21:09:05 +02:00			const defaultSketch = `function setup() {
fix a ton of eslint errors 2016-06-24 00:29:55 +02:00			`createCanvas(400, 400);`
render p5 sketch, live, simplest case 2016-05-10 00:28:38 +02:00			`}`

			`function draw() {`
fix a ton of eslint errors 2016-06-24 00:29:55 +02:00			`background(220);`
start to add multiple file functionality 2016-07-06 21:09:05 +02:00			}`;

			`const defaultHTML =`
add css files to sketch 2016-07-12 03:54:08 +02:00			`<!DOCTYPE html>
start to add multiple file functionality 2016-07-06 21:09:05 +02:00			`<html>`
			`<head>`
add sound and dom by default 2016-07-12 17:13:09 +02:00			`<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.2/p5.min.js"></script>`
			`<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.2/addons/p5.dom.min.js"></script>`
			`<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.2/addons/p5.sound.min.js"></script>`
add css files to sketch 2016-07-12 03:54:08 +02:00			`<link rel="stylesheet" type="text/css" href="style.css">`
start to add multiple file functionality 2016-07-06 21:09:05 +02:00			`</head>`
			`<body>`
			`<script src="sketch.js"></script>`
			`</body>`
			`</html>`
			`;

add css files to sketch 2016-07-12 03:54:08 +02:00			`const defaultCSS =`
			`html, body {
			`overflow: hidden;`
			`margin: 0;`
			`padding: 0;`
			`}`
			`;
start to add selected file stuff 2016-07-08 20:57:22 +02:00
			`// if the project has never been saved,`
start to add multiple file functionality 2016-07-06 21:09:05 +02:00			`const initialState = [`
file tree renders, select file works and editor changes content, rename works 2016-08-23 19:52:31 +02:00			`{`
			`name: 'root',`
			`id: '0',`
			`children: ['1', '2', '3']`
			`},`
start to add multiple file functionality 2016-07-06 21:09:05 +02:00			`{`
			`name: 'sketch.js',`
start to add selected file stuff 2016-07-08 20:57:22 +02:00			`content: defaultSketch,`
			`id: '1'`
start to add multiple file functionality 2016-07-06 21:09:05 +02:00			`},`
			`{`
			`name: 'index.html',`
start to add selected file stuff 2016-07-08 20:57:22 +02:00			`content: defaultHTML,`
			`id: '2'`
add css files to sketch 2016-07-12 03:54:08 +02:00			`},`
			`{`
			`name: 'style.css',`
			`content: defaultCSS,`
			`id: '3'`
start to add multiple file functionality 2016-07-06 21:09:05 +02:00			`}];`
add full redux/react flow to editor 2016-05-05 23:48:26 +02:00
start to add multiple file functionality 2016-07-06 21:09:05 +02:00
			`const files = (state = initialState, action) => {`
fix a ton of eslint errors 2016-06-24 00:29:55 +02:00			`switch (action.type) {`
fix updating file to return all file keys 2016-07-07 19:50:52 +02:00			`case ActionTypes.UPDATE_FILE_CONTENT:`
start to add multiple file functionality 2016-07-06 21:09:05 +02:00			`return state.map(file => {`
			`if (file.name !== action.name) {`
			`return file;`
			`}`

fix updating file to return all file keys 2016-07-07 19:50:52 +02:00			`return Object.assign({}, file, { content: action.content });`
start to add multiple file functionality 2016-07-06 21:09:05 +02:00			`});`
add function to create all blob urls 2016-07-20 00:26:46 +02:00			`case ActionTypes.SET_BLOB_URL:`
			`return state.map(file => {`
			`if (file.name !== action.name) {`
			`return file;`
			`}`
			`return Object.assign({}, file, { blobURL: action.blobURL });`
			`});`
fix a ton of eslint errors 2016-06-24 00:29:55 +02:00			`case ActionTypes.NEW_PROJECT:`
fix default file on server, change file to files in lots of places 2016-07-06 23:29:07 +02:00			`return [...action.files];`
fix bugs with saving/fetching projects 2016-06-29 18:52:16 +02:00			`case ActionTypes.SET_PROJECT:`
fix default file on server, change file to files in lots of places 2016-07-06 23:29:07 +02:00			`return [...action.files];`
when clicking new project, don't save new project 2016-08-12 18:45:26 +02:00			`case ActionTypes.RESET_PROJECT:`
			`return initialState;`
add files, server side, only css and js files 2016-07-14 00:53:56 +02:00			`case ActionTypes.CREATE_FILE:`
upload text files locally 2016-08-25 06:18:28 +02:00			`return [...state, { name: action.name, id: action.id, content: action.content, url: action.url }];`
add file deletion 2016-08-03 21:11:59 +02:00			`case ActionTypes.SHOW_FILE_OPTIONS:`
			`return state.map(file => {`
			`if (file.id !== action.id) {`
			`return file;`
			`}`

			`return Object.assign({}, file, { isOptionsOpen: true });`
			`});`
			`case ActionTypes.HIDE_FILE_OPTIONS:`
			`return state.map(file => {`
			`if (file.id !== action.id) {`
			`return file;`
			`}`

			`return Object.assign({}, file, { isOptionsOpen: false });`
			`});`
			`case ActionTypes.UPDATE_FILE_NAME:`
			`return state.map(file => {`
			`if (file.id !== action.id) {`
			`return file;`
			`}`

			`return Object.assign({}, file, { name: action.name });`
			`});`
			`case ActionTypes.DELETE_FILE:`
			`return state.filter(file => file.id !== action.id);`
add file renaming 2016-08-03 23:10:03 +02:00			`case ActionTypes.SHOW_EDIT_FILE_NAME:`
			`return state.map(file => {`
			`if (file.id !== action.id) {`
			`return file;`
			`}`

			`return Object.assign({}, file, { isEditingName: true });`
			`});`
			`case ActionTypes.HIDE_EDIT_FILE_NAME:`
			`return state.map(file => {`
			`if (file.id !== action.id) {`
			`return file;`
			`}`

			`return Object.assign({}, file, { isEditingName: false });`
			`});`
fix a ton of eslint errors 2016-06-24 00:29:55 +02:00			`default:`
			`return state;`
			`}`
			`};`
add full redux/react flow to editor 2016-05-05 23:48:26 +02:00
add file deletion 2016-08-03 21:11:59 +02:00			`export const setSelectedFile = (state, id) =>`
			`state.map(file => {`
			`if (file.id === id) {`
			`return Object.assign({}, file, { isSelected: true });`
			`}`
			`return file;`
			`});`

start to add selected file stuff 2016-07-08 20:57:22 +02:00			`export const getFile = (state, id) => state.filter(file => file.id === id)[0];`
fix a few regexes for preview frame 2016-08-25 18:39:36 +02:00			`export const getHTMLFile = (state) => state.filter(file => file.name.match(/.*\.html$/i))[0];`
			`export const getJSFiles = (state) => state.filter(file => file.name.match(/.*\.js$/i));`
			`export const getCSSFiles = (state) => state.filter(file => file.name.match(/.*\.css$/i));`
fix file state changing bug 2016-07-20 03:36:21 +02:00			`export const getLinkedFiles = (state) => state.filter(file => file.url);`
start to add selected file stuff 2016-07-08 20:57:22 +02:00
start to add multiple file functionality 2016-07-06 21:09:05 +02:00			`export default files;`