feat setup: Setup Redux, Immutable.js and React

feat FileList: Implement File List + changedir action

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;