JSFiddle - React, Tailwind, and code Playground

Find record by email with an index

by Kato Richardson

HTML

<script src="http://static.firebase.com/v0/firebase.js"></script>
<h3>Find record by email with an index</h3>


<h5>Search by email</h5>
<form>
<input type="text" placeholder="[email protected]..." />
<button>search</button>
</form>
<p></p>

<h5>Record</h5>

<pre></pre>

CSS

pre {
    padding: 20px;
    font-size: 20px;
    border-radius: 15px;
    background-color: #fafafa;
    border: 1px solid #999;
    font-family:'Courier New', 'Courier', monospaced;
}
button, input, select {
    font-size: 28px;
}
.hide {
    display: none;
}

p a { margin-right: 5px; display: inline-block; }

p a:after {
    content:", ";
}

p a:last-child:after {
    content:"";
}

JavaScript

var fb = new Firebase('https://examples-sql-queries.firebaseio.com/');

function loadRecord(email) {
    fb.child('index/' + escapeEmail(email)).once('value', function (snap) {
        if (snap.val() === null) {
            show(snap);
        } else {
            fb.child('user/' + snap.val()).once('value', show);
        }
    });
}

function show(snap) {
    var obj = snap.val();
    $('pre').text(obj ? JSON.stringify(obj, null, 2) : 'not found');
}

function listEmails() {
    var $p = $('p');
    fb.child('index').once('value', function (snap) {
        console.log('fetched ', snap.val());
        var emails = snap.val() || {};
        for (k in emails) {
            var email = unescapeEmail(k);
            $p.append($('<a href="#' + email + '"></a>').text(email));
        }
    });
}

function escapeEmail(email) {
    return (email || '').replace('.', ',');
}

function unescapeEmail(email) {
    return (email || '').replace(',', '.');
}

$('button').on('click', function() {
    var email = $('input').val();
    if( email ) { loadRecord(email);  }
    else { $('pre').text('not found'); }
});

$('p').on('click', 'a', function (e) {
    e.preventDefault();
    var email = unescapeEmail($(this).text());
    $('input').val(email);
    $('button').click();
});

$('form').on('submit', function(e) { 
    e.preventDefault(); 
    return false; 
});

listEmails();