fk axios

2019-08-14 15:23:15 +10:00
parent f68a12eab8
commit 6fe9b52d00
17 changed files with 487 additions and 260 deletions
@@ -0,0 +1,38 @@
+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 {
+            games,
+        } = state;
+
+        return {
+            games
+        };
+    },
+);
+
+function AcpGameList(args) {
+    const {
+        games,
+    } = args;
+
+    if (!games) return false;
+
+    return (
+        <table>
+            <tbody>
+            {games.map((g, i) => <tr key={i}><td>{JSON.stringify(g)}</td></tr>)}
+            </tbody>
+        </table>
+    )
+}
+
+module.exports = addState(AcpGameList);
@@ -7,7 +7,7 @@ const { createStore, combineReducers } = require('redux');
 const reducers = require('./reducers');
 const actions = require('./actions');

-const Users = require('./acp.users');
+const Main = require('./acp.main');

 // Redux Store
 const store = createStore(
@@ -22,9 +22,8 @@ document.fonts.load('16pt "Jura"').then(() => {
                <nav>
                    <h1>acp</h1>
                    <hr/>
-                    <button>users</button>
                </nav>
-                <Users />
+                <Main />
                <aside></aside>
            </div>
        </Provider>
@@ -0,0 +1,162 @@
+const preact = require('preact');
+const { Component } = require('preact');
+const { connect } = require('preact-redux');
+const linkState = require('linkstate').default;
+
+const actions = require('./actions');
+const { postData, errorToast } = require('./../../client/src/utils');
+
+const AcpGameList = require('./acp.game.list');
+const AcpUser = require('./acp.user');
+
+const addState = connect(
+    function receiveState(state) {
+        const {
+            account,
+            user,
+        } = state;
+
+        return {
+            account, user,
+        };
+    },
+
+    function receiveDispatch(dispatch) {
+        function setUser(user) {
+            dispatch(actions.setUser(user));
+        }
+
+        function setGames(list) {
+            dispatch(actions.setGames(list));
+        }
+
+        return {
+            setUser,
+            setGames,
+        };
+    }
+);
+
+
+class AcpMain extends Component {
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            account: {},
+            name: null,
+            id: null,
+            msg: '',
+            user: null,
+            games: [],
+        };
+    }
+
+    render(args, state) {
+        const {
+            setGames,
+            setUser,
+        } = args;
+
+        const {
+            msg,
+            name,
+            id,
+        } = state;
+
+        const getUser = () => {
+            this.setState({ msg: null });
+            postData('/acp/user', { id, name })
+                .then(res => res.json())
+                .then(data => {
+                    if (data.error) return this.setState({ msg: data.error });
+                    setUser(data);
+                })
+                .catch(error => errorToast(error));
+        };
+
+        const gameList = () => {
+            this.setState({ msg: null });
+            postData('/acp/game/list', { number: 20 })
+                .then(res => res.json())
+                .then(data => {
+                    if (data.error) return this.setState({ msg: data.error });
+                    console.log(data);
+                    setGames(data.data);
+                })
+                .catch(error => errorToast(error));
+        };
+
+        const gameOpen = () => {
+            this.setState({ msg: null });
+            postData('/acp/game/open')
+                .then(res => res.json())
+                .then(data => {
+                    if (data.error) return this.setState({ msg: data.error });
+                    console.log(data);
+                    setGames(data);
+                })
+                .catch(error => errorToast(error));
+        };
+
+        return (
+            <main class='menu'>
+                <div class="top">
+                    <div>{msg}</div>
+                    <AcpUser />
+                    <AcpGameList />
+                </div>
+                <div class="bottom acp list">
+                    <div>
+                        <label for="current">Username:</label>
+                        <input
+                            class="login-input"
+                            type="text"
+                            name="name"
+                            value={this.state.name}
+                            onInput={linkState(this, 'name')}
+                            placeholder="name"
+                        />
+                        <input
+                            class="login-input"
+                            type="text"
+                            name="userid"
+                            value={this.state.id}
+                            onInput={linkState(this, 'id')}
+                            placeholder="id"
+                        />
+                        <button
+                            onClick={getUser}>
+                            Search
+                        </button>
+                    </div>
+                    <div>
+                        <label for="current">Game:</label>
+                        <input
+                            class="login-input"
+                            type="text"
+                            name="userid"
+                            value={this.state.id}
+                            onInput={linkState(this, 'id')}
+                            placeholder="id"
+                        />
+                        <button
+                            onClick={getUser}>
+                            Search
+                        </button>
+                        <button
+                            onClick={gameList}>
+                            Last 20
+                        </button>
+                        <button
+                            onClick={gameOpen}>
+                            Open
+                        </button>
+                    </div>
+                </div>
+            </main>
+        );
+    }
+}
+
+module.exports = addState(AcpMain);
@@ -0,0 +1,44 @@
+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 {
+            user,
+        } = state;
+
+        return {
+            user
+        };
+    },
+);
+
+function AcpGameList(args) {
+    const {
+        user,
+    } = args;
+
+    if (!user) return false;
+
+    return (
+        <div>
+            <h1>{user.name}</h1>
+            <dl>
+                <dt>Id</dt>
+                <dd>{user.id}</dd>
+                <dt>Credits</dt>
+                <dd>{user.balance}</dd>
+                <dt>Subscribed</dt>
+                <dd>{user.subscribed.toString()}</dd>
+            </dl>
+        </div>
+    )
+}
+
+module.exports = addState(AcpGameList);
@@ -1,119 +0,0 @@
-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: {},
-            name: null,
-            id: null,
-            msg: '',
-            user: null,
-        };
-    }
-
-    render(args, state) {
-        const {
-            msg,
-            name,
-            id,
-            user,
-        } = state;
-
-        console.log(user);
-
-        const getUser = () => {
-            this.setState({ msg: null });
-            axios.post('/api/acp/user', { id, name })
-                .then(response => {
-                    console.log(response);
-                    this.setState({ user: JSON.parse(response.data.response) });
-                })
-                .catch(error => {
-                    console.error(error);
-                    this.setState({ msg: error.message });
-                });
-        };
-
-        const userEl = user
-            ? (
-                <div>
-                    <h1>{user.name}</h1>
-                    <dl>
-                        <dt>Id</dt>
-                        <dd>{user.id}</dd>
-                        <dt>Credits</dt>
-                        <dd>{user.balance}</dd>
-                        <dt>Subscribed</dt>
-                        <dd>{user.subscribed.toString()}</dd>
-                    </dl>
-                </div>
-            ) : null;
-
-        return (
-            <main class='menu'>
-                <div class="top">
-                    <div>{msg}</div>
-                    {userEl}
-                </div>
-                <div class="bottom acp">
-                    <div>
-                        <label for="current">Username:</label>
-                        <input
-                            class="login-input"
-                            type="text"
-                            name="name"
-                            value={this.state.name}
-                            onInput={linkState(this, 'name')}
-                            placeholder="name"
-                        />
-                        <input
-                            class="login-input"
-                            type="text"
-                            name="userid"
-                            value={this.state.id}
-                            onInput={linkState(this, 'id')}
-                            placeholder="id"
-                        />
-                        <button
-                            onClick={getUser}>
-                            Search
-                        </button>
-                    </div>
-                </div>
-            </main>
-        );
-    }
-}
-
-module.exports = addState(AccountStatus);
@@ -1,2 +1,3 @@
 export const setAccount = value => ({ type: 'SET_ACCOUNT', value });
 export const setUser = value => ({ type: 'SET_USER', value });
+export const setGames = value => ({ type: 'SET_GAMES', value });
@@ -13,4 +13,5 @@ function createReducer(defaultState, actionType) {
 module.exports = {
    account:            createReducer(null, 'SET_ACCOUNT'),
    user:               createReducer(null, 'SET_USER'),
+    games:              createReducer([], 'SET_GAMES'),
 };