Skip to content

Instantly share code, notes, and snippets.

const getComments = () => {
return onSnapshot(collection(db, 'comments'), (value) => {
const comments = value.docs.reduce((acc, item) => {
if (id.id === item.data().coinId) {
acc.push({ ...item.data(), id: item.id })
}
return acc;
}, [])
setComments(comments);
});
const FONT_FACES = `@font-face {
font-display: auto;
font-family: "Elections-Publico";
font-style: normal;
font-weight: 800;
src: url("https://some-url.com/fonts/Publico-Bold.woff") format("woff");
}
@font-face {
font-display: auto;
font-family: "Elections-Akkurat-Mono";
@sbatson5
sbatson5 / component.js
Last active February 25, 2020 18:16
Step 6
class CandidateImage extends HTMLElement {
connectedCallback() {
this.shadow = this.attachShadow({ mode: 'open' });
this.setupImage();
this.addWinnerText();
// Add our styles
this.createStyles();
}
@sbatson5
sbatson5 / component.js
Last active February 25, 2020 18:16
Step 5
class CandidateImage extends HTMLElement {
connectedCallback() {
this.shadow = this.attachShadow({ mode: 'open' });
// Create an image
const image = new Image();
// Find the right image for the provided name
if (this.getAttribute('name') === 'pete') {
image.src = 'https://cdn-candidates.com/pete.jpg';
@sbatson5
sbatson5 / component.js
Last active February 25, 2020 15:17
Step 4
class CandidateImage extends HTMLElement {
connectedCallback() {
this.shadow = this.attachShadow({ mode: 'open' });
// Create an image
const image = new Image();
// Find the right image for the provided name
if (this.getAttribute('name') === 'pete') {
image.src = 'https://cdn-candidates.com/pete.jpg';
@sbatson5
sbatson5 / component.js
Last active February 24, 2020 21:39
Step 3
class CandidateImage extends HTMLElement {
connectedCallback() {
this.shadow = this.attachShadow({ mode: 'open' });
// Create an image
const image = new Image();
image.src = 'https://cdn-candidates.com/bernie.jpg';
// We can use appendChild just like we do the normal document
this.shadow.appendChild(image);
@sbatson5
sbatson5 / component.js
Last active February 24, 2020 21:22
Step 2
class CandidateImage extends HTMLElement {
connectedCallback() {
console.log('Adding a candidate!');
this.innerHTML = '<img src="https://cdn-candidates.com/bernie.jpg" />';
}
}
/**
* Register our custom element
*/
@sbatson5
sbatson5 / component.js
Last active February 24, 2020 21:22
Initial setup
class CandidateImage extends HTMLElement {
connectedCallback() {
console.log('Adding a candidate!');
this.innerHTML = '<img src="https://cdn-candidates.com/bernie.jpg" />';
}
}
@sbatson5
sbatson5 / query-example.js
Last active November 4, 2019 19:35
Testing firestore queries
// These are the mocked version of some firestore methods
// And we want to assert they are called correctly
const {
mockCollection,
mockGet,
mockWhere,
} = require('firestore-jest-mock/mocks/firestore');
const { mockFirebase } = require('firestore-jest-mock');
@sbatson5
sbatson5 / simple-state-firebase.js
Last active November 4, 2019 19:32
Simple firebase example of conditional query
const firebase = require('firebase');
function maybeGetEventsByState(state) {
const db = firebase.firestore();
const query = db.collection('events');
if (state) {
query = query.where('state', '==', state);
}