acp routing

acp/src/acp.jsx

@@ -18,7 +18,7 @@ const store = createStore(
 document.fonts.load('16pt "Jura"').then(() => {
     const Acp = () => (
         <Provider store={store}>
-            <div id="mnml">
+            <div id="mnml" class="acp">
                 <nav>
                     <h1>acp</h1>
                     <hr/>

acp/src/acp.users.jsx

@@ -35,54 +35,82 @@ class AccountStatus extends Component {
 
         this.state = {
             account: {},
-            search: '',
-            msg: '-',
+            name: null,
+            id: null,
+            msg: '',
+            user: null,
         };
     }
 
     render(args, state) {
-        const {
-            user,
-        } = args;
-
         const {
             msg,
-            search,
+            name,
+            id,
+            user,
         } = state;
 
-        const getUser = () =>
-            axios.get(`/api/acp/user/${search}`)
+        console.log(user);
+
+        const getUser = () => {
+            this.setState({ msg: null });
+            axios.post('/api/acp/user', { id, name })
                 .then(response => {
-                    this.setState({ msg: response });
+                    console.log(response);
+                    this.setState({ user: JSON.parse(response.data.response) });
                 })
                 .catch(error => {
-                    this.setState({ msg: error });
+                    console.error(error);
+                    this.setState({ msg: error.message });
                 });
+        };
 
-        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>
-            );
-        }
+        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>
-                {JSON.stringify(user)}
+            <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>
         );
     }