added PostCreator

packages/app/src/components/PostCreator/index.jsx

@@ -0,0 +1,98 @@
+import React from "react"
+import * as antd from "antd"
+import { Icons } from "components/Icons"
+import { User } from "models"
+import classnames from "classnames"
+
+import "./index.less"
+
+const maxMessageLength = 512
+
+const PostCreatorInput = (props) => {
+    const [value, setValue] = React.useState("")
+
+    const canPublish = () => {
+        return value.length !== 0 && value.length < maxMessageLength
+    }
+
+    const onChange = (e) => {
+        setValue(e.target.value)
+    }
+
+    const handleSubmit = () => {
+        if (canPublish()) {
+            if (typeof props.onSubmit === "function") {
+                props.onSubmit(value)
+            }
+
+            setValue("")
+        }
+    }
+
+    return <div className="textInput">
+        <div className="avatar">
+            <img src={props.user?.avatar} />
+        </div>
+        <antd.Input.TextArea
+            //className={classnames("textArea", { ["active"]: canPublish() })}
+            disabled={props.loading}
+            value={value}
+            onPressEnter={handleSubmit}
+            autoSize={{ minRows: 3, maxRows: 6 }}
+            dragable="false"
+            placeholder="What are you thinking?"
+            onChange={onChange}
+            allowClear
+            rows={8}
+            maxLength={maxMessageLength}
+        />
+        <div>
+            <antd.Button
+                type="primary"
+                disabled={props.loading || !canPublish()}
+                onClick={handleSubmit}
+                icon={props.loading ? <Icons.LoadingOutlined spin /> : <Icons.Send />}
+            />
+        </div>
+    </div>
+}
+
+export default class PostCreator extends React.Component {
+    state = {
+        loading: false,
+    }
+    api = window.app.request
+
+    componentDidMount = async () => {
+        const userData = await User.data()
+
+        this.setState({
+            userData
+        })
+    }
+
+    onSubmit = async (value) => {
+        await this.setState({ loading: true })
+
+        const result = this.api.put.post({
+            message: value,
+        }).catch(error => {
+            console.error(error)
+            antd.message.error(error)
+
+            return false
+        })
+
+        this.setState({ loading: false })
+    }
+
+    render() {
+        return <div className="postCreator">
+            <PostCreatorInput
+                user={this.state.userData}
+                loading={this.state.loading}
+                onSubmit={this.onSubmit}
+            />
+        </div>
+    }
+}

packages/app/src/components/PostCreator/index.less

@@ -0,0 +1,77 @@
+.postCreator {
+    width           : fit-content;
+    min-width       : 35vw;
+    padding         : 15px;
+    background-color: var(--background-color-accent);
+
+    border-radius: 7px;
+
+    .textInput {
+        display         : flex;
+        width           : 100%;
+        transition      : height 150ms ease-in-out;
+        background-color: var(--background-color-accent);
+
+        svg {
+            margin: 0 !important;
+        }
+
+        .avatar {
+            width : fit-content;
+            height: 45px;
+
+            display: flex;
+
+            img {
+                width        : 45px;
+                height       : 45px;
+                border-radius: 12px;
+            }
+        }
+        
+        .textArea {
+            border-radius: 8px!important;
+            transition: all 150ms ease-in-out!important;
+
+            &.active {
+                background-color: var(--background-color-primary);
+            }
+        }
+
+        .ant-btn-primary {
+            z-index       : 10;
+            position      : relative;
+            border-radius : 0 10px 10px 0;
+            height        : 100%;
+            vertical-align: bottom;
+            border        : none;
+            box-shadow    : none;
+        }
+
+        .ant-input {
+            background-color: var(--background-color-accent);
+
+            z-index      : 10;
+            position     : relative;
+            border-color : transparent !important;
+            box-shadow   : none;
+            border-radius: 3px 0 0;
+            height       : 100%;
+            padding      : 5px 10px;
+            transition   : height 150ms linear;
+            width        : 100%;
+        }
+
+        .ant-btn-primary[disabled] {
+            background-color: var(--background-color-accent);
+        }
+
+        .ant-input:hover {
+            border-color: #1890ff;
+        }
+
+        .ant-input-affix-wrapper {
+            height: 100%;
+        }
+    }
+}