client

www/pages/me.jsx

@@ -0,0 +1,65 @@
+import React from 'react'
+
+import Layout from '../components/layout'
+import { callAPI } from '../utils/api'
+import { capitalize, getAvatarOfFallback } from '../utils/misc'
+import { withAuthSync } from '../utils/auth'
+
+
+const avatars = ['anteater', 'bear', 'beaver', 'boar', 'buffalo-1', 'buffalo', 'cat', 'chicken', 'cow', 'crow', 'dog-1', 'dog', 'donkey', 'elephant', 'fox', 'giraffe', 'hedgehog', 'hen', 'hippopotamus', 'horse', 'kangaroo', 'koala', 'leopard', 'lion', 'marten', 'monkey-1', 'monkey', 'mouse', 'octopus', 'ostrich', 'owl', 'panda', 'parrot', 'penguin-1', 'penguin', 'pig', 'polar-bear', 'rabbit', 'racoon', 'rhinoceros', 'rooster', 'seagull', 'seal', 'sheep-1', 'sheep', 'sloth', 'snake', 'tiger', 'whale', 'zebra']
+
+const selectAvatar = avatar => callAPI(null, {
+    url: `/api/users/me/avatar`,
+    method: 'post',
+    data: { avatar },
+}).then(() => location.reload()).catch(() => alert('There was a problem deleting the purchase'))
+
+const Me = me => {
+
+    const { name, debts, purchases, avatar } = me
+
+    return <Layout>
+        <h1>{capitalize(name)}</h1>
+
+        <h5>Current Avatar</h5>
+        <img alt="avatar-icon" src={`/static/icons/animals/${getAvatarOfFallback(avatar)}.svg`}
+             className="avatar avatar-xl"/>
+
+        <br/><br/>
+
+        <h5>Select Avatar</h5>
+        <div className={'selector'}>
+            {avatars.map((avatar, i) => <img
+                onClick={() => selectAvatar(avatar)}
+                key={i} alt="avatar-icon"
+                src={`/static/icons/animals/${avatar}.svg`}
+                className="avatar avatar-md m-1"
+            />)}
+        </div>
+
+        {/*<br/><br/>*/}
+        {/*<h2>Purchases</h2>*/}
+        {/*{purchases.map((purchase, i) => <Purchase key={i} {...{ purchase, me }} />)}*/}
+
+        {/*<br/><br/>*/}
+        {/*<h2>Debts</h2>*/}
+        {/*{debts.map((purchase, i) => <Purchase key={i} {...{ purchase, me }} />)}*/}
+
+        {/* language=CSS */}
+        <style jsx>{`
+            .selector img {
+                cursor: pointer;
+                transition: var(--animation);
+            }
+
+            .selector img:hover {
+                transform: scale(1.1);
+            }
+        `}</style>
+
+    </Layout>
+}
+
+Me.getInitialProps = async ctx => await callAPI(ctx, { url: `/api/users/me` })
+
+export default withAuthSync(Me)