[KnackSteem] - New Contributions Page, Login/Logout

New PR for Knacksteem.org, this time I finished login/logout handling and added the possibily to post new contributions to the blockchain.

Repository & Pull Request

https://github.com/knacksteem/knacksteem.org
https://github.com/knacksteem/knacksteem.org/pull/7

Changes / New Features

• Persist user login with cookies.
• Logout function.
• Refactor category handling for sidebar.
• Remove draft-js and implement react-rte editor for new contributions - including title, content and tags.
• Implement tag handling with ant design tags, making the first tag knacksteem.
• Second tag must be one of the categories. Last 3 tags are custom. Second tag includes an AutoComplete input.
• Post with SteemConnect, with posting loader and redirection to contributions page.
• Quick Preview below the Editor

...and that is what the new contributions page looks like, the first tag cannot be removed and is red:

Details

Some important or interesting parts of the PR:

components/Sidebar/index.js

The categories are now loaded dynamically from the articles reducer, using template strings to map them:

{articles.categories.map((elem) => {
    return (
        <Menu.Item key={`/categories/${elem.key}`}>
            <Link to={`/categories/${elem.key}`}>{elem.name}</Link>
        </Menu.Item>
    );
})}

containers/NewContribution/index.js

This is where most of the magic for this PR happened, you can now add a new article with title, content and tags and it will be posted by SteemConnect. The first tag cannot be removed and is "knacksteem", the second tag can only be one of the predefined categories, three other tags are custom. I have used the "react-rte" editor, which is based on draft-js but comes with a nice UI already. Btw, Steemit uses react-rte too :)

I am using Ant Design tags for the tag selection, it handles the graphical part and you just have to use some callbacks to react on user interaction. For example, to close/remove a tag:

//callbcack for removing a tag
handleCloseTag = (removedTag) => {
    const tags = this.state.tags.filter(tag => tag !== removedTag);
    this.setState({tags});
};

There is a predefined attribute called closablethat specifies if you are allowed to remove the tag, which is great for making the first one static:

{tags.map((tag, index) => {
    return (
        <Tag key={tag} closable={index !== 0} color={(index > 0 ? 'blue' : 'magenta')} afterClose={() => this.handleCloseTag(tag)}>{tag}</Tag>
    );
})}

Tag handling with the second tag which is supposed to be the category is a bit tricky, because the AutoComplete input works a bit different than the default input of Ant Design. The default input always uses events as parameter, the AutoComplete input just sends the current/new value. Talk about consistency...Anyway, Ant Design is still great and this code checks if the second tag is one of the categories and adds it as new tag if that is the case - or if it´s just a third, fourth or fifth tag:

//callback for confirming a new tag, will get called on enter, mouse click (autocomplete input) and on blur
handleInputConfirm = (value) => {
    const {inputTagsValue, tags} = this.state;
    const {categories} = this.props.articles;
    let newTags = tags;
    const categoriesFlat = categories.map(elem => elem.key);
    const newTagValue = this.inputTags ? inputTagsValue : value;

    //check if second tag is one of the categories and do not allow to add tag if it is not
    if (tags.length === 1 && categoriesFlat.indexOf(newTagValue) === -1) {
        this.setState({
            tags: newTags,
            inputTagsVisible: false,
            inputTagsValue: ''
        });
        return;
    }

    if (newTagValue && tags.indexOf(newTagValue) === -1) {
        newTags = [...newTags, newTagValue];
    }
    this.setState({
        tags: newTags,
        inputTagsVisible: false,
        inputTagsValue: ''
    });
};

actions/articles.js

Posting articles with SteemConnect is easy - if you know what to do with all the parameters, because the official docs tell you how to post comments instead of articles. Internally, everything is a comment though. You just have to leave the parent author empty, use the first tag as parent link and generate a unique permalink:

let response = await api.comment('', tags[0], store.user.username, getUniquePermalink(title), title, body, {tags: tags.join(' ')});

About knacksteem.org

"Do you have any talent? If yes! then KnackSteem is for you."
"Rewards people with talents, it can be any talent, anything you know how to do best is highly welcome on the platform."

Technology Stack

• JavaScript ES6+ with Babel
• React + Redux

Roadmap (most likely in that order)

• The next thing to do is implement an API handler that connects the frontend to the backend.
• Push new contributions not only to the blockchain, but to the backend too.
• Load all contributions (by category and user) from the backend and replace mock data with real data.
• View for moderators and mod functionality (review, ban, approve, ...).
• Refactor stuff - i am always happy for suggestions if there is something you would improve in the code!
• ...

How to contribute?

Talk to @knowledges :)

---

My GitHub Account: https://github.com/ateufel