import React from 'react';
import update from 'immutability-helper';
import * as firebase from 'firebase';
import { Field } from '../Field';
import { notifications } from '../../service/notifications';
import './socials.css';

class Socials extends React.Component {
    state = {
        socials: {}
    }

    constructor() {
        super();
        this.db = firebase.database().ref();
    }

    componentDidMount() {
        this.db.child('socials').on('value', (snapshot) => {
            snapshot.forEach((childSnap) => {
                this.setState({
                    socials: update(this.state.socials, {[childSnap.key]: {$set: childSnap.val()}})
                });
            } );
        } );
    }

    listSocialItems() {
        return Object.entries(this.state.socials).map( social => {
            return <li key={social[0]} className="social__item">
                        <div className="social__item-content">
                            {social[1].caption}, {social[1].link}, {social[1].icon}
                        </div>

                        <div className="social__item-delete" onClick={() => this.removeSocialItem(social[0])}>
                            delete
                        </div>
                   </li>
        });
    }

    removeSocialItem( key ) {
        this.db.child(`/socials/${key}`).remove();
    }

    handleAddSocial = ( evt ) => {
        this.db.child('socials').push({
            sort: 1,
            caption: 'new social connection',
            link: 'please set your connection link',
            icon: 'set link to icon to dislay'
        });
    }

    render() {
        return (
            <div className="socials-view limit-width">
                <ul className="socials__list">
                  { this.listSocialItems() }
                  <li className="socials__add" onClick={this.handleAddSocial}>+</li>
                </ul>
            </div>
        );
    }
}

export { Socials };

@@ -357,103 +357,239 @@
 s.db
- = firebase.database().ref();%0A    %7D%0A%0A    componentDidMount() %7B%0A        this.db.child('socials')
+ItemRef = this.getDBRef().child('socials');%0A    %7D%0A%0A    getDBRef() %7B%0A        return firebase.database().ref();%0A    %7D%0A%0A    componentDidMount() %7B%0A        this.listenForSocials();%0A    %7D%0A%0A%0A    listenForSocials() %7B%0A        this.dbItemRef
 .on(
@@ -599,23 +599,22 @@
 lue', (s
-napshot
+ocials
 ) =%3E %7B%0A 
@@ -629,15 +629,14 @@
    s
-napshot
+ocials
 .for
@@ -641,25 +641,28 @@
 orEach((
-childSnap
+socialRecord
 ) =%3E %7B%0A 
@@ -750,25 +750,28 @@
 ials, %7B%5B
-childSnap
+socialRecord
 .key%5D: %7B
@@ -780,17 +780,20 @@
 et: 
-childSnap
+socialRecord
 .val
@@ -1460,32 +1460,25 @@
 s.db
+ItemRef
 .child(
-%60/socials/$%7B
 key
-%7D%60
 ).re
@@ -1542,33 +1542,23 @@
  this.db
-.child('socials')
+ItemRef
 .push(%7B%0A

Update db handling