added profile links editor

packages/app/constants/settings/components/profileLinks/index.jsx

@@ -0,0 +1,173 @@
+import React from "react"
+import { Icons, createIconRender } from "components/Icons"
+import { Button, Empty, Input, Select } from "antd"
+import userLinksDecorators from "schemas/userLinksDecorators"
+
+import "./index.less"
+
+export default class ProfileEditor extends React.Component {
+    state = {
+        fields: this.props.ctx.currentValue ?? []
+    }
+
+    onDebounceSave = (value) => {
+        this.setState({
+            fields: value
+        })
+    }
+
+    add = () => {
+        this.setState({
+            fields: [
+                ...this.state.fields,
+                {
+                    key: undefined,
+                    value: undefined
+                }
+            ]
+        }, () => {
+            this.props.ctx.onUpdateItem(this.state.fields)
+        })
+    }
+
+    remove = (index) => {
+        let fields = this.state.fields
+
+        fields.splice(index, 1)
+
+        this.setState({
+            fields
+        }, () => {
+            this.props.ctx.onUpdateItem(this.state.fields)
+        })
+    }
+
+    handleFieldChange = (index, key, value) => {
+        let fields = this.state.fields
+
+        fields[index][key] = value
+
+        this.setState({
+            fields
+        }, () => {
+            this.props.ctx.onUpdateItem(this.state.fields)
+        })
+    }
+
+    render() {
+        return <div className="profile_links_editor">
+            {
+                this.state.fields.length === 0 && <Empty
+                    image={Empty.PRESENTED_IMAGE_SIMPLE}
+                    description="No Links Added"
+                />
+            }
+            {
+                this.state.fields.length > 0 && this.state.fields.map((field, index) => {
+                    return <div
+                        key={index}
+                        className="profile_links_field"
+                    >
+                        <div className="profile_links_field_input">
+                            <p> <Icons.MdLabelOutline /> Key</p>
+
+                            <Select
+                                value={field.key}
+                                onChange={(value) => this.handleFieldChange(index, "key", value)}
+                                placeholder="Select a key"
+                            >
+                                {
+                                    Object.entries(userLinksDecorators).map(([key, value]) => {
+                                        return <Select.Option
+                                            key={key}
+                                            value={key}
+                                        >
+                                            {createIconRender(value.icon)}
+                                            {String(key).toTitleCase()}
+                                        </Select.Option>
+                                    })
+                                }
+                            </Select>
+                        </div>
+
+                        <div className="profile_links_field_input">
+                            <p> <Icons.MdLink /> Value</p>
+
+                            <Input
+                                value={field.value}
+                                onChange={(e) => this.handleFieldChange(index, "value", e.target.value)}
+                                placeholder="Link or Value e.g. https://twitter.com/username"
+                            />
+                        </div>
+
+                        <Button
+                            className="profile_links_field_removebtn"
+                            onClick={() => this.remove(index)}
+                            icon={<Icons.Trash />}
+                            shape="circle"
+                        />
+                    </div>
+                })
+            }
+
+            <Button
+                onClick={this.add}
+                icon={<Icons.Plus />}
+            >
+                Add
+            </Button>
+        </div>
+    }
+}
+
+const basura = (props) => {
+    const [fields, setFields] = React.useState([])
+
+    const handleAdd = () => {
+        setFields((prev) => {
+            const newFields = prev ?? []
+
+            newFields.push({
+                key: undefined,
+                value: undefined
+            })
+
+            //props.ctx.onUpdateItem(newFields)
+
+            return newFields
+        })
+    }
+
+    const handleRemove = (index) => {
+        setFields((prev) => {
+            const newFields = prev ?? []
+
+            newFields.splice(index, 1)
+
+            //props.ctx.onUpdateItem(newFields)
+
+            return newFields
+        })
+    }
+
+    const handleFieldChange = (index, key, value) => {
+        setFields((prev) => {
+            const newFields = prev ?? []
+
+            newFields[index][key] = value
+
+            //props.ctx.onUpdateItem(newFields)
+
+            return newFields
+        })
+    }
+
+    // React.useEffect(() => {
+
+    //     setFields(props.ctx.currentValue)
+    // }, [props.ctx.currentValue])
+
+    console.log(`Render ProfileLinksEditor with >`, fields)
+
+
+}

packages/app/constants/settings/components/profileLinks/index.less

@@ -0,0 +1,32 @@
+.profile_links_editor {
+    display: flex;
+    flex-direction: column;
+
+    gap: 10px;
+
+    .profile_links_field {
+        display: flex;
+        flex-direction: row;
+
+        align-items: center;
+
+        gap: 5px;
+
+        .profile_links_field_input {
+            display: flex;
+            flex-direction: column;
+
+            width: 100%;
+
+            gap: 5px;
+
+            p {
+                margin: 0;
+            }
+        }
+
+        .profile_links_field_removebtn {
+            align-self: flex-end;
+        }
+    }
+}

packages/app/constants/settings/profile/index.jsx

@@ -17,15 +17,15 @@ export default {
     },
     settings: [
         {
-            "id": "username",
-            "group": "account.basicInfo",
-            "component": "Button",
-            "icon": "AtSign",
-            "title": "Username",
-            "description": "Your username is the name you use to log in to your account.",
-            "props": {
-                "disabled": true,
-                "children": "Change username",
+            id: "username",
+            group: "account.basicInfo",
+            component: "Button",
+            icon: "AtSign",
+            title: "Username",
+            description: "Your username is the name you use to log in to your account.",
+            props: {
+                disabled: true,
+                children: "Change username",
             },
         },
         {
@@ -172,5 +172,32 @@ export default {
             "debounced": true,
             storaged: false,
         },
+        {
+            id: "Links",
+            group: "account.profile",
+            component: loadable(() => import("../components/profileLinks")),
+            icon: "MdLink",
+            title: "Links",
+            description: "Add links to your profile",
+            onUpdate: async (value) => {
+                // filter invalid links
+                value = value.filter((link) => {
+                    return link.key && link.value
+                })
+
+                const result = await UserModel.updateData({
+                    links: value
+                })
+
+                if (result) {
+                    return result.links
+                }
+            },
+            defaultValue: (ctx) => {
+                return ctx.userData.links ?? []
+            },
+            debounced: true,
+            storaged: false,
+        }
     ]
 }