Skip to content

Instantly share code, notes, and snippets.

Avatar
🎯
Focusing

Xiaoyun Yang xiaoyunyang

🎯
Focusing
View GitHub Profile
@xiaoyunyang
xiaoyunyang / PostDisplay.js
Last active Jan 26, 2021
Use Draft.js to display rich text created using the Draft.js editor.
View PostDisplay.js
import React from 'react';
import PropTypes from 'prop-types';
import { CompositeDecorator, convertFromRaw, Editor, EditorState } from 'draft-js';
// Following code based on:
// https://github.com/facebook/draft-js/blob/master/examples/draft-0-10-0/link/link.html
const Link = (props) => {
const {url} = props.contentState.getEntity(props.entityKey).getData();
return (
<a rel="nofollow noreferrer" href={url} target="_blank">
@xiaoyunyang
xiaoyunyang / PostEditor.js
Last active Aug 15, 2018
Draftjs Component With A Few Plugins
View PostEditor.js
import React from 'react';
import PropTypes from 'prop-types';
import {
convertToRaw,
EditorState,
RichUtils
} from 'draft-js';
import Editor from 'draft-js-plugins-editor';
import createMarkdownPlugin from 'draft-js-markdown-plugin';
import createInlineToolbarPlugin, { Separator } from 'draft-js-inline-toolbar-plugin';
View matchParenTest.js
const test = (fun testCases) => {
testCases.map(t => {
const shouldBe = t.shouldBe;
const is = fun(t.test);
const res = (shouldBe === is) ? 'passed' : 'failed';
const moreInfo = (res === 'failed') ? `testing ${t.test}. Should be ${shouldBe} but got ${is}` : ''
console.log(`${res} ${moreInfo}`);
})
}
View matchParenTestCases.js
let testCases = [
{test: '(', shouldBe: false},
{test: '())', shouldBe: false},
{test: null, shouldBe: false},
{test: undefined, shouldBe: false},
{test: 22, shouldBe: false},
{test: ')(', shouldBe: false},
{test: '', shouldBe: true},
{test: '()', shouldBe: true},
{test: '()()', shouldBe: true},
View hasBalancedParen.js
// Parentheses Tally
const newOpenCnt = (c, openCnt) => {
if (c === '(') return openCnt + 1
if (c === ')') return openCnt - 1
return openCnt
}
function isBalanced(str, openCnt) {
// Continue or Stop?
if (typeof str !== 'string') return false
@xiaoyunyang
xiaoyunyang / HTML.js
Created Mar 8, 2018
isomorphic-router-demo/shared/components/HTML.js
View HTML.js
// shared/components/HTML.js
import React from 'react';
const HTML = (props) => (
<html lang="en">
<head>
<title>Isomorphic Router Demo</title>
<link
rel="stylesheet"
@xiaoyunyang
xiaoyunyang / renderRoutes.js
Last active Mar 8, 2018
isomorphic-router-demo/iso-middleware/renderRoutes.js
View renderRoutes.js
// iso-middleware/renderRoutes.js
import React from 'react';
import { renderToString } from 'react-dom/server';
import { StaticRouter } from 'react-router-dom';
import { matchRoutes } from 'react-router-config';
import routes from '../shared/routes';
import HTML from '../shared/components/HTML';
import App from '../shared/App';
View more-testable-code.js
// BETTER - more testable
const incrementedVal = (val) => val + 1
function substituteVal(val, low, high) {
if(val >= high) return high
else if(val <= low) return low
else return val
}
function shouldIncrement(val, disabled) {
return val >= 0 && val < 10 && !disabled
View test-untestable-code.js
let vals = Array.from({length: 13}, (v,i) => i)
//> (13) [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]
vals = vals.map(v => v-1)
//> (13) [-1, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]
let res = vals.map(v => (
{val: v, notDisabled: valIncrementer(v, false), disabled: valIncrementer(v, true) }
))
View hard-to-test-code.js
// BAD
function valIncrementer(val, disabled) {
var nextVal = val + 1
function firstStageSetter1() {
if(val >= 10) {
nextVal = 10 //clip it to high limit value
secondStageSetter()
}
}