<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
import React from 'react';
import {getTabs} from '../lib/fetchHelpers';
class Tabs extends React.Component {
constructor() {
super();
this.state = {
tabs: [],
activeTab: 1
}
//this.handleClick = this.handleClick.bind(this);
}
// handleClick(current) {
// this.setState({
// activeTab: current
// })
// }
componentDidMount() {
getTabs().then(tabs => this.setState({ tabs: tabs }))
}
render() {
//let jtabs = JSON.stringify(this.state.tabs);
let currentTab = this.state.activeTab;
return (
<div>
<TabsHeader tabs={this.state.tabs} activeTab={this.state.activeTab} />
</div>
)
}
}
class TabsHeader extends React.Component {
// static propTypes = {
// tabs: React.PropTypes.object
// }
render() {
let tabs = this.props.tabs;
return (
<ul className="tabs-list">
{this.props.tabs.map(tab => <Tab key={tab.id} activeTab={tab.activeTab} title={tab.title} />)}
</ul>
)
}
}
class Tab extends React.Component {
constructor() {
super();
}
render() {
return (
<li className="tab { this.props.tab.activeTab === this.props.tab.id ?? active }"
>{this.props.title}</li>
)
}
}
class TabContent extends React.Component {
static propTypes = {
tabs: React.PropTypes.object
}
render() {
return (
<ul className="tabs-list">
{this.props.tabs.map(tab => <Tab key={tab.ID} {...tab} />)}
</ul>
)
}
}
export default Tabs;
console.clear();
// from https://toddmotto.com/creating-a-tabs-component-with-react/
const tabs = [{
name: 'Tab 1',
content: 'Content for 1'
}, {
name: 'Tab 2',
content: 'Content for 2'
}, {
name: 'Tab 3',
content: 'Content for 3'
}];
const App = (props) => {
return (
<Tabs selected={props.firstSelect || 0}>
{props.tabs.map(tab =>
<Pane label={tab.name}>{tab.content}</Pane>)
}
</Tabs>
);
}
const Pane = (props) => {
return <div>{props.children}</div>;
}
Pane.propTypes = {
label: React.PropTypes.string.isRequired,
children: React.PropTypes.element.isRequired
}
class Tabs extends React.Component {
constructor(props) {
super(props);
this.state = { selected: this.props.selected };
}
_renderTitles() {
function labels(child, idx) {
let activeClass = (this.state.selected === idx ? 'is-active' : '');
return (
<li role="tab" key={idx} aria-controls={`panel${idx}`}>
<a className={activeClass} onClick={this.onClick.bind(this, idx)} href="#">
{child.props.label}
</a>
</li>
);
}
return (
<ul className="tabs__labels" role="tablist">
{this.props.children.map(labels.bind(this))}
</ul>
);
}
onClick(index, event) {
event.preventDefault();
this.setState({
selected: index
});
}
render() {
console.log(this.props.children)
return (
<div className="tabs">
{this._renderTitles()}
<div className="tabs__content">
{this.props.children[this.state.selected]}
</div>
</div>);
}
}
ReactDOM.render(<App tabs={tabs} firstSelect={1} />, document.getElementById('app'));
// (x, y) => x + y can be expressed as a unary function like: x => y => x + y
append = s1 => s2 => s1 + s2
append('Hello, ')('world!')
var composeMixins = function () {
var mixins = [].slice.call(arguments);
return function (instance, mix) {
if (!instance) instance = {};
if (!mix) {
mix = function () {
var fns = [].slice.call(arguments);
return function (x) {
return fns.reduce(function (acc, fn) {
return fn(acc);
}, x);
};
};
}
return mix.apply(null, mixins)(instance);
};
};
const newsUrl = "";
class News extends React.Component {
constructor() {
super();
this.state = {
newsItems = []
}
}
componentDidMount() {
fetch(newsUrl)
.then(response => response.json())
.then(items => this.setState({
newsItems: items
}))
}
render() {
let items = this.state.newsItems;
}
}
class Tabs extends React.Component {
constructor() {
super();
this.state = {
tabs = [],
activeTab: ""
}
this.handleClick = this.handleClick.bind(this);
}
handleClick(current) {
this.setState({
activeTab: current
})
}
componentDidMount() {
fetch(tabsUrl).then(response => response.json())
.then(tabs => this.setState({ tabs }))
}
render() {
let tabs = this.state.tabs;
let currentTab =
return (
<TabsHeader {...tabs} />
<TabContent {...tabs} />
)
}
}
class TabsHeader extends React.Component {
static propTypes = {
tabs: React.PropTypes.object.isRequired
}
render() {
return (
<ul className="tabs-list">
{this.props.tabs.map(tab => <Tab key={tab.ID} {...tab} />)}
</ul>
)
}
}
const Tab => ( tab ) => (
return (
<li className="tab { tab.activeTab === tab.ID ?? active }" onClick={tab.handleClick(tab.ID)}>{tab.title}</tab>
)
)
class TabsContent extends React.Component {
static propTypes = {
tabs: React.PropTypes.object.isRequired
}
render() {
return (
<ul className="tabs-list">
{this.props.tabs.map(tab => <Tab key={tab.ID} {...tab} />)}
</ul>
)
}
}
const listUrl = "";
class News extends React.Component {
constructor() {
super();
this.state = {
items: []
}
}
render() {
return (
<List items={this.state.items} />
)
}
}
const List = ({ items }) => {
return (
<ul className="list">
{items.map(item => <ListItem key={item.ID} {...item} />)}
</ul>
)
}
const ListItem ({ item }) => {
return(
<li>{item.title}</li>
)
}
class List extends React.Component {
constructor() {
super();
this.state = {
items = [],
search = ""
}
this.handleChange = this.handleChange.bind(this);
}
componentDidMount() {
fetch(listUrl).
then(response => this.setState({
items = response
}))
}
handleChange(e) {
this.setState({
search: e.target.value,
// items: this.state.items.filter(item =>
// item.name.includes(search)
// ) why is this not good?
})
}
}
render() {
let items = this.state.items;
if (this.state.search) {
items.filter(item => item.toLowerCase().includes(this.state.search.toLowerCase()))
}
return (
<input type="text" value={this.state.search} onChange={this.handleChange}/>
<ul>
{items.map(item =>
<ListItem key={item.id} {...item}
)}
</ul>
)
}
}
class ListItem extends React.Component {
static propTypes = {
item: React.PropTypes.object
}
constructor() {
super();
this.state = {
active: "notactive"
}
}
return {
render(
<li className='list-item'>{this.props.name}</li>
)
}
}
class Search extends React.Component {
constructor() {
super();
this.state = {
search: "",
}
this.handleChange = this.handleChange.bind(this);
}
handleChange(e) {
this.setState({
search: e.target.value
})
}
return {
render(
<div>
<input type="text" value={this.state.search} onChange={this.handleChange}/>
</div>
)
}
}
const items = [
{ id: 1, name: lorem},
{ id: 2, name: ipsum},
{ id: 3, name: dolor},
{ id: 4, name: set},
]
var search
console.log(search);
// Write a function for reversing a linked list. Do it in-place
function LinkedListNode(value) {
this.value = value;
this.next = null;
}
var a = new LinkedListNode(5);
var b = new LinkedListNode(1);
var c = new LinkedListNode(9);
var d = new LinkedListNode(13);
var e = new LinkedListNode(2);
a.next = b;
b.next = c;
c.next = d;
d.next = e;
e.next = null;
let listDisplay = node => {
if (node.next != null) {
console.log(node.value + " with next " + node.next.value + "\t");
listDisplay(node.next)
}
}
function reverseList(node) {
var prev = null;
while(node) {
var save = node.next;
node.next = prev;
prev = node;
node = save;
}
}
const reverseList = function(node) {
var prev = null;
while(node) {
var nextNode = node.next;
node.next = prev;
prev = node;
node = nextNode;
}
return prev;
}
console.log(listDisplay(reverseList(a)))
a b c d e
5 1 9 13 2
1. n = a, n.next = b, n.value = 5, n.next.value = 1, n.next.next
console.log("Initial linked list")
console.log(listDisplay(a))
///reverseList(a)
console.log("Reversed linked list")
console.log(listDisplay(a))
const highpass = cutoff => n => n >= cutoff
const highpass = function highpass(cutoff) {
return function (n) {
return n >= cutoff;
};
};
const gt4 = highpass(4)
gt4(10) // true
const curry = (
f, arr = []
) => (...args) => (
a => a.length === f.length ?
f(...a) :
curry(f, a)
)([...arr, ...args]);
const ADD_VALUE = 'ADD_VALUE';
const summingReducer = (state = 0, action = {}) => {
const { type, payload } = action;
switch (type) {
case ADD_VALUE:
return state + payload.value;
default: return state;
}
};
const composeMixins = (...mixins) => (
instance = {},
mix = (...fns) => x => fns.reduce((acc, fn) => fn(acc), x)
) => mix(...mixins)(instance)
const Identity = value => ({
map: fn => Identity(fn(value))
});
/ trace() is a utility to let you easily inspect
// the contents.
const trace = x => {
console.log(x);
return x;
};
const u = Identity(2);
// Identity law
u.map(trace); // 2
u.map(x => x).map(trace); // 2
const f = n => n + 1;
const g = n => n * 2;
// Composition law
const r1 = u.map(x => f(g(x)));
const r2 = u.map(g).map(f);
r1.map(trace); // 5
r2.map(trace); // 5
// prototype
function A(x) {
this.x = x;
}
A.prototype.move = function() {
console.log(this.x);
}
function B(x, y) {
A.call(this, x);
this.y = y;
}
B.prototype = Object.create(A.prototype);
var oA = new A(5);
var oB = new B(7, 9);
oA.move();
oB.move();
function C(x,y,z) {
B.call(this, x, y);
this.z = z;
}
C.prototype = Object.create(B.prototype);
var oC = new C(2, 6, 10);
function D(x,y,z,i) {
C.call(this, x, y, x);
this.i = i;
}
D.prototype = Object.create(C.prototype);
oD = new D(13, 43, 46, 78);
Object.getPrototypeOf(oD);
class Input extends Component {
focus() {
this.el.focus();
}
render() {
return (
<input
ref={el=> { this.el = el; }}
/>
);
}
}
class SignInModal extends Component {
componentDidMount() {
// Note that when you use ref on a component, it’s a reference to
// the component (not the underlying element), so you have access to its methods.
this.InputComponent.focus();
}
render() {
return (
<div>
<label>User name:</label>
<Input
ref={comp => { this.InputComponent = comp; }}
/>
</div>
)
}
}
