feat setup: Setup Redux, Immutable.js and React

feat FileList: Implement File List + changedir action

Gruntfile.js

@@ -5,10 +5,17 @@ module.exports = function(grunt) {
     browserify: {
       dev: {
         files: {
-          'build/main.js': 'src/js/**/*'
+          'build/main.js': ['src/js/**/*', '!src/js/libs/**']
         },
         options: {
-          transform: ['babelify'],
+          alias: {
+            store: './src/js/store.js'
+          },
+          transform: [['babelify', {
+            optional: ['es7.asyncFunctions', 'asyncToGenerator',
+                       'es7.decorators'],
+            blacklist: []
+          }]],
           plugin: [
             [
               'remapify', [
@@ -16,6 +23,21 @@ module.exports = function(grunt) {
                   src: '**/*.js',
                   expose: 'components',
                   cwd: __dirname + '/src/js/components/'
+                },
+                {
+                  src: '**/*.js',
+                  expose: 'actions',
+                  cwd: __dirname + '/src/js/actions'
+                },
+                {
+                  src: '**/*.js',
+                  expose: 'reducers',
+                  cwd: __dirname + '/src/js/reducers'
+                },
+                {
+                  src: '**/*.js',
+                  expose: 'api',
+                  cwd: __dirname + '/src/js/api'
                 }
               ]
             ]
@@ -48,14 +70,34 @@ module.exports = function(grunt) {
         }]
       }
     },
+    copy: {
+      assets: {
+        files: [{
+          expand: true,
+          cwd: 'src',
+          dest: 'build',
+          src: ['index.html', 'manifest.webapp',
+                'fonts/**', 'img/**', 'js/libs/**']
+        }]
+      }
+    },
     watch: {
       styles: {
-        files: ['less/**/*.less'],
-        tasks: ['less']
+        files: ['src/less/**/*.less'],
+        tasks: ['less:dev']
+      },
+      scripts: {
+        files: ['src/js/**/*'],
+        tasks: ['browserify:dev']
+      },
+      assets: {
+        files: ['src/index.html', 'src/manifest.webapp',
+                'src/fonts/**', 'src/img/**', 'src/data/**'],
+        tasks: ['copy']
       }
     }
   });
 
-  grunt.registerTask('default', ['browserify:dev', 'less:dev']);
-  grunt.registerTask('production', ['browserify:prod', 'less:prod']);
+  grunt.registerTask('default', ['browserify:dev', 'less:dev', 'copy']);
+  grunt.registerTask('production', ['browserify:prod', 'less:prod', 'copy']);
 };

build/img/icons/icon.svg

@@ -0,0 +1,106 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:sketch="http://www.bohemiancoding.com/sketch/ns"
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:xlink="http://www.w3.org/1999/xlink"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="128px"
+   height="128px"
+   viewBox="0 0 128 128"
+   version="1.1"
+   id="svg2"
+   inkscape:version="0.48.2 r9819"
+   sodipodi:docname="icon.svg">
+  <metadata
+     id="metadata14">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="1142"
+     inkscape:window-height="849"
+     id="namedview12"
+     showgrid="false"
+     inkscape:zoom="1.84375"
+     inkscape:cx="-32.542373"
+     inkscape:cy="64"
+     inkscape:window-x="672"
+     inkscape:window-y="146"
+     inkscape:window-maximized="0"
+     inkscape:current-layer="Page-1" />
+  <!-- Generator: Sketch 3.0.2 (7799) - http://www.bohemiancoding.com/sketch -->
+  <title
+     id="title4">empty</title>
+  <description
+     id="description6">Created with Sketch.</description>
+  <defs
+     id="defs8">
+    <linearGradient
+       id="linearGradient3761">
+      <stop
+         style="stop-color:#4e748b;stop-opacity:1;"
+         offset="0"
+         id="stop3763" />
+      <stop
+         style="stop-color:#393e3f;stop-opacity:1;"
+         offset="1"
+         id="stop3765" />
+    </linearGradient>
+    <linearGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient3761"
+       id="linearGradient3767"
+       x1="129.66949"
+       y1="65.8983"
+       x2="129.66949"
+       y2="188.59828"
+       gradientUnits="userSpaceOnUse" />
+  </defs>
+  <path
+     sodipodi:type="arc"
+     style="fill:url(#linearGradient3767);fill-opacity:1;fill-rule:evenodd;stroke:none"
+     id="path2991"
+     sodipodi:cx="129.35593"
+     sodipodi:cy="128.27118"
+     sodipodi:rx="63.18644"
+     sodipodi:ry="63.18644"
+     d="m 192.54237,128.27118 a 63.18644,63.18644 0 1 1 -126.372883,0 63.18644,63.18644 0 1 1 126.372883,0 z"
+     transform="translate(-65.355927,-64.271179)" />
+  <g
+     id="Page-1"
+     sketch:type="MSPage"
+     transform="matrix(0.9,0,0,0.9,6.4,6.4)"
+     style="fill:none;stroke:none">
+    <circle
+       id="empty"
+       sketch:type="MSShapeGroup"
+       cx="64"
+       cy="64"
+       r="58"
+       sodipodi:cx="64"
+       sodipodi:cy="64"
+       sodipodi:rx="58"
+       sodipodi:ry="58"
+       style="stroke:#bcc6c5;stroke-width:11;stroke-linecap:round;stroke-dasharray:20, 20;fill:none;fill-opacity:1"
+       d="M 122,64 C 122,96.032515 96.032515,122 64,122 31.967485,122 6,96.032515 6,64 6,31.967485 31.967485,6 64,6 c 32.032515,0 58,25.967485 58,58 z" />
+  </g>
+</svg>

build/index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>Hawk</title>
+  <meta name="viewport" content="width=device-width">
+</head>
+<body>
+  <div id='wrapper'></div>
+
+  <script src='main.js'></script>
+</body>
+</html>

build/locales/en-US.properties

@@ -1,3 +1,3 @@
-app_title = Privileged empty app
+appname = Hawk
 app_description.innerHTML = This app is empty. Fill it with your own stuff!
 message = Hello world

build/locales/locales.ini

@@ -0,0 +1 @@
+@import url(en-US.properties)

build/manifest.webapp

@@ -14,7 +14,14 @@
     "url": "http://dibaiee.ir"
   },
   "type": "privileged",
-  "permissions": {},
+  "permissions": {
+    "device-storage:videos": {"access": "readwrite"},
+    "device-storage:pictures": {"access": "readwrite"},
+    "device-storage:music": {"access": "readwrite"},
+    "device-storage:sdcard": {"access": "readwrite"},
+    "device-storage:apps": {"access": "readwrite"},
+    "webapps-manage": {}
+  },
   "installs_allowed_from": [
     "*"
   ],

package.json

@@ -34,6 +34,8 @@
     "browserify": "^11.0.1",
     "grunt": "^0.4.5",
     "grunt-browserify": "^4.0.0",
+    "grunt-contrib-clean": "^0.6.0",
+    "grunt-contrib-copy": "^0.8.1",
     "grunt-contrib-less": "^1.0.1",
     "grunt-contrib-watch": "^0.6.1",
     "grunt-fxos": "^0.1.2",

src/data/es.properties

@@ -1,3 +0,0 @@
-app_title = Aplicación vacía privilegiada
-app_description.innerHTML = Esta aplicación está vacía. ¡Lista para que añadas tu código!
-message = ¡Hola, mundo!

src/data/locales.ini

@@ -1,5 +0,0 @@
-@import url(en-US.properties)
-
-[es]
-@import url(es.properties)
-

src/index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>Hawk</title>
+  <meta name="viewport" content="width=device-width">
+</head>
+<body>
+  <div id='wrapper'></div>
+
+  <script src='main.js'></script>
+</body>
+</html>

src/js/actions/changedir.js

@@ -0,0 +1,8 @@
+import { CHANGE_DIRECTORY } from 'actions/types';
+
+export default function changedir(dir) {
+  return {
+    type: CHANGE_DIRECTORY,
+    dir
+  };
+}

src/js/actions/list-files.js

@@ -0,0 +1,8 @@
+import { LIST_FILES } from 'actions/types';
+
+export default function listFiles(files) {
+  return {
+    type: LIST_FILES,
+    files
+  };
+}

src/js/actions/types.js

@@ -0,0 +1,9 @@
+const TYPES = {
+  CHANGE_DIRECTORY: Symbol(),
+  LIST_FILES: Symbol(),
+  SORT: Symbol(),
+  SEARCH: Symbol(),
+  REFRESH: Symbol()
+};
+
+export default TYPES;

src/js/api/files.js

@@ -0,0 +1,13 @@
+export async function directory(dir = '/') {
+  let storage = navigator.getDeviceStorage('sdcard');
+  let root = await storage.getRoot();
+
+  if (dir === '/' || !dir) return root;
+
+  return await root.get(dir);
+}
+
+export async function children(dir) {
+  let parent = await directory(dir);
+  return await parent.getFilesAndDirectories();
+}

src/js/components/file-list.js

@@ -0,0 +1,38 @@
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import File from './file';
+
+@connect(props)
+export default class FileList extends Component {
+  constructor() {
+    super();
+  }
+
+  render() {
+    let { cwd, files } = this.props;
+
+    let els = files.map((file, index) => {
+      return <File key={index} index={index} name={file.name} />;
+    });
+
+    return (
+      <div><strong>cwd: {cwd}</strong>
+        {els}
+      </div>
+    );
+  }
+}
+
+function props(state) {
+  return {
+    cwd: state.get('cwd'),
+    files: state.get('files')
+  }
+}
+
+async function getFiles(dir) {
+  let storage = navigator.getDeviceStorage('sdcard');
+  let root = await storage.get(dir);
+
+  return await root.getFilesAndDirectories();
+}

src/js/components/file.js

@@ -0,0 +1,20 @@
+import React, { Component } from 'react';
+import store from 'store';
+import changedir from 'actions/changedir';
+
+export default class File extends Component {
+  render() {
+    return (
+      <div onClick={this.peekInside.bind(this)}>
+        <p>{this.props.index}. {this.props.name}</p>
+      </div>
+    );
+  }
+
+  peekInside() {
+    let file = store.getState().get('files')[this.props.index];
+
+    console.log(file);
+    store.dispatch(changedir(file.path.slice(1) + file.name));
+  }
+}

src/js/components/root.js

@@ -1,5 +1,18 @@
-export default React.createClass({
+import React, { Component } from 'react'
+import FileList from 'components/file-list';
+import changedir from 'actions/changedir';
+import store from 'store';
+
+window.store = store;
+window.changedir = changedir;
+
+export default class Root extends Component {
   render() {
-    return <div></div>;
+    return (
+      <div>
+        Hawk!
+        <FileList />
+      </div>
+    );
   }
-});
+}

src/js/main.js

@@ -1,2 +1,7 @@
-import Root  from 'components/root'
-let x = "I'm just testing";
+import React from 'react';
+import Root from 'components/root';
+import store from 'store';
+import { Provider } from 'react-redux';
+
+let wrapper = document.getElementById('wrapper');
+React.render(<Provider store={store}>{() => <Root />}</Provider>, wrapper);

src/js/reducers/all.js

@@ -0,0 +1,10 @@
+import Immutable from 'immutable';
+import cwd from './cwd';
+import files from './files';
+
+export default function(state = new Immutable.Map(), action) {
+  return new Immutable.Map({
+    cwd: cwd(state.get('cwd'), action),
+    files: files(state.get('files'), action)
+  });
+}

src/js/reducers/cwd.js

@@ -0,0 +1,16 @@
+import { CHANGE_DIRECTORY } from 'actions/types';
+import listFiles from 'actions/list-files';
+import { children } from 'api/files';
+import store from 'store';
+
+export default function(state = '/', action) {
+  switch (action.type) {
+    case CHANGE_DIRECTORY:
+      children(action.dir).then(files => {
+        store.dispatch(listFiles(files));
+      });
+      return action.dir;
+    default:
+      return state;
+  }
+}

src/js/reducers/files.js

@@ -0,0 +1,10 @@
+import { LIST_FILES } from 'actions/types';
+
+export default function(state = [], action) {
+  switch (action.type) {
+    case LIST_FILES:
+      return action.files;
+    default:
+      return state;
+  }
+}

src/js/store.js

@@ -0,0 +1,14 @@
+import { createStore } from 'redux';
+import reducers from 'reducers/all';
+import changedir from 'actions/changedir';
+import Immutable from 'immutable';
+
+const DEFAULT = new Immutable.Map({
+  dir: '/',
+  files: []
+});
+
+let store = createStore(reducers, DEFAULT);
+store.dispatch(changedir(DEFAULT.dir));
+
+export default store;

src/less/variables.less

@@ -0,0 +1 @@
+@

src/manifest.webapp

@@ -0,0 +1,31 @@
+{
+  "version": "0.1.0",
+  "name": "Hawk",
+  "description": "Keep an eye on your files with a full-featured file-manager",
+  "launch_path": "/index.html",
+  "icons": {
+    "16": "/img/icons/icon16x16.png",
+    "48": "/img/icons/icon48x48.png",
+    "60": "/img/icons/icon60x60.png",
+    "128": "/img/icons/icon128x128.png"
+  },
+  "developer": {
+    "name": "Mahdi Dibaiee",
+    "url": "http://dibaiee.ir"
+  },
+  "type": "privileged",
+  "permissions": {
+    "device-storage:videos": {"access": "readwrite"},
+    "device-storage:pictures": {"access": "readwrite"},
+    "device-storage:music": {"access": "readwrite"},
+    "device-storage:sdcard": {"access": "readwrite"},
+    "device-storage:apps": {"access": "readwrite"},
+    "webapps-manage": {}
+  },
+  "installs_allowed_from": [
+    "*"
+  ],
+  "locales": {
+  },
+  "default_locale": "en"
+}