acp init

acp/src/acp.jsx

@@ -0,0 +1,35 @@
+const preact = require('preact');
+// const logger = require('redux-diff-logger');
+
+const { Provider, connect } = require('preact-redux');
+const { createStore, combineReducers } = require('redux');
+
+const reducers = require('./reducers');
+const actions = require('./actions');
+
+const Users = require('./acp.users');
+
+// Redux Store
+const store = createStore(
+    combineReducers(reducers),
+    window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__(),
+);
+
+document.fonts.load('16pt "Jura"').then(() => {
+    const Acp = () => (
+        <Provider store={store}>
+            <div id="mnml">
+                <nav>
+                    <h1>acp</h1>
+                    <hr/>
+                    <button>users</button>
+                </nav>
+                <Users />
+                <aside></aside>
+            </div>
+        </Provider>
+    );
+
+    // eslint-disable-next-line
+    preact.render(<Acp />, document.body);
+});

acp/src/acp.users.jsx

@@ -0,0 +1,91 @@
+const preact = require('preact');
+const { Component } = require('preact');
+const { connect } = require('preact-redux');
+const linkState = require('linkstate').default;
+
+const axios = require('axios');
+
+const actions = require('./actions');
+
+const addState = connect(
+    function receiveState(state) {
+        const {
+            account,
+            user,
+        } = state;
+
+        return {
+            account, user,
+        };
+    },
+
+    function receiveDispatch(dispatch) {
+        function setUser(user) {
+            dispatch(actions.setUser(user));
+        }
+
+        return { setUser };
+    }
+);
+
+
+class AccountStatus extends Component {
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            account: {},
+            search: '',
+            msg: '-',
+        };
+    }
+
+    render(args, state) {
+        const {
+            user,
+        } = args;
+
+        const {
+            msg,
+            search,
+        } = state;
+
+        const getUser = () =>
+            axios.get(`/api/acp/user/${search}`)
+                .then(response => {
+                    this.setState({ msg: response });
+                })
+                .catch(error => {
+                    this.setState({ msg: error });
+                });
+
+        if (!user) {
+            return (
+                <main>
+                    <div>{msg.message}</div>
+                    <label for="current">Username:</label>
+                    <input
+                        class="login-input"
+                        type="text"
+                        name="username"
+                        value={this.state.search}
+                        onInput={linkState(this, 'search')}
+                        placeholder="username"
+                    />
+                    <button
+                        onClick={getUser}>
+                        Search
+                    </button>
+                </main>
+            );
+        }
+
+        return (
+            <main>
+                {JSON.stringify(user)}
+            </main>
+        );
+    }
+}
+
+module.exports = addState(AccountStatus);

acp/src/actions.jsx

@@ -0,0 +1,2 @@
+export const setAccount = value => ({ type: 'SET_ACCOUNT', value });
+export const setUser = value => ({ type: 'SET_USER', value });

acp/src/reducers.jsx

@@ -0,0 +1,16 @@
+function createReducer(defaultState, actionType) {
+    return function reducer(state = defaultState, action) {
+        switch (action.type) {
+            case actionType:
+                return action.value;
+            default:
+                return state;
+        }
+    };
+}
+
+/* eslint-disable key-spacing */
+module.exports = {
+    account:            createReducer(null, 'SET_ACCOUNT'),
+    user:               createReducer(null, 'SET_USER'),
+};