Skip to content

Instantly share code, notes, and snippets.

View ilyamkin's full-sized avatar
🚀
Shipping

Ilya Lyamkin ilyamkin

🚀
Shipping
23 followers · 6 following
View GitHub Profile
@ilyamkin
ilyamkin / test.ts
Created April 28, 2020 10:36
testing
describe('Article resource', () => {
test('getArticles returns a list of articles', async () => {
// Set up the mock request
const scope = nock('https://dev.to/api/')
.get('/articles')
.reply(200, [{ title: 'Article' }])
// Make the request
const DevToClient = new DevTo({ apiKey: 'XYZ' })
await DevToClient.getArticles()
// Assert that the expected request was made.
@ilyamkin
ilyamkin / base.ts
Created April 28, 2020 10:34
request function
function request<T> (endpoint: string, options?: RequestInit): Promise<T> {
const url = this.basePath + endpoint
const headers = {
'api-key': this.apiKey,
'Content-type': 'application/json'
}
const config = {
...options,
headers,
}
@ilyamkin
ilyamkin / index.ts
Created April 28, 2020 10:33
applyMixins
function applyMixins(derivedCtor: any, baseCtors: any[]) {
baseCtors.forEach(baseCtor => {
Object.getOwnPropertyNames(baseCtor.prototype).forEach(name => {
Object.defineProperty(
derivedCtor.prototype,
name,
Object.getOwnPropertyDescriptor(baseCtor.prototype, name)
);
});
});
@ilyamkin
ilyamkin / index.html
Created December 25, 2019 10:26
Fetch Button Showcase
<!DOCTYPE html>
<html dir="ltr" lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0">
<title>Fetch Button Demo</title>
<script type="module" src="/build/designsystem.esm.js"></script>
<script nomodule src="/build/designsystem.js"></script>
@ilyamkin
ilyamkin / fetch-button.tsx
Created December 25, 2019 10:10
Fetch Button Component
import { Component, Prop, h, Listen, State, Event, EventEmitter } from '@stencil/core';
@Component({
tag: 'fetch-button',
styleUrl: 'fetch-button.css',
shadow: true
})
export class MyComponent {
/**
* URL to fetch
@ilyamkin
ilyamkin / fetch-button.css
Created December 25, 2019 10:08
Fetch Button Styles
button {
color: #24292e;
background-image: linear-gradient(-180deg, #fafbfc 0%, #eff3f6 90%);
padding: 6px 12px;
font-size: 14px;
font-weight: 600;
line-height: 20px;
cursor: pointer;
border-radius: 0.25em;
@ilyamkin
ilyamkin / prefetch-query.js
Created November 1, 2019 17:42
prefetch-query
function wrapPromise(promise) {
let status = "pending";
let result;
let suspender = promise.then(
r => {
status = "success";
result = r;
},
e => {
status = "error";
@ilyamkin
ilyamkin / render-with-suspense.js
Created November 1, 2019 17:30
Render with Suspense
const IndexList = ({ prefetchedIndexes }) => {
const data = usePrefetchedQuery(prefetchedIndexes);
return data.majorIndexesList.map(index => (
<div key={index.ticker}>
Show {index.ticker}
</div>
));
};
@ilyamkin
ilyamkin / load-on-click.js
Created November 1, 2019 17:09
Load on click
const App = () => {
const [prefetchedIndexes, setPrefetchedIndexes] = useState();
return (
<>
<button
onClick={() => {
setPrefetchedIndexes(prefetchQuery(`${API}/majors-indexes`));
}}
>
@ilyamkin
ilyamkin / UseIncrementWithCallback.js
Created October 14, 2019 17:42
Embrace useCallback and useMemo
const useIncrement = (defaultValue = 0) => {
const [value, setValue] = useState(defaultValue);
const increment = useCallback(() => setValue(value => value + 1), []);
return [value, increment];
};
const ExampleWithCustomHook = () => {
const [a, incrementA] = useIncrement();