arackaf

import React from 'react';
import 'jscolor';

let uniqueIdCounter = 0;

class CustomColorPicker extends React.Component {
    constructor(){
        super();
        this.uniqueId = `customColorPickerId${++uniqueIdCounter}`
    }

arackaf

import { observable, computed } from 'mobx';
import { observer } from "mobx-react";

class BookList {
    @observable books = []
    @computed get readBooks(){
        return this.books.filter(b => b.isRead);
    }
    loadBooks(){
        setTimeout(() => {

arackaf

class LineChart extends React.Component {
    render() {
        let margin = {top: 30, right: 20, bottom: 30, left: 50},
            width = 600 - margin.left - margin.right,
            height = 270 - margin.top - margin.bottom;

        let parseDate = d3.isoParse;

        let x = d3.scaleTime().range([0, width]),
            y = d3.scaleLinear().range([height, 0]);

arackaf

import { observable, computed, toJS } from 'mobx';
import { observer } from "mobx-react";

import BookSearch from './bookSearch';

class Book {
    @observable selected = false;
    toggle = () => this.selected = !this.selected;

    constructor(book){

arackaf

export default function rootReducer(state = initialState, action){
    switch(action.type){
        case LOAD_SUBJECTS:
            return Object.assign({}, state, { subjectsInitialQueryFired: true });
        case LOAD_SUBJECTS_RESULTS:
            return Object.assign({}, state, { subjectHash: subjectsToHash(action.subjects), subjectsLoaded: true });
        case LOAD_COLORS:
            return Object.assign({}, state, { colors: action.colors });
    }

arackaf

const unwindSubjects = subjects => {
    let result = [];
    subjects.concat().sort(subjectSortCompare).forEach(s => {
        result.push(s);
        result.push(...unwindSubjects(s.children));
    });
    return result;
};

const stackedSubjectsSelector = createSelector([state => state.app.subjectHash],

arackaf

const subjectsModuleSelector = createSelector([
    state => state.app.subjectHash,
    state => state.subjectsModule.draggingId,
    state => state.subjectsModule.currentDropCandidateId
], (subjectHash, draggingId, currentDropCandidateId) => {
    let subjects;
    if (currentDropCandidateId){
        subjectHash = {...subjectHash};
        let dropTarget = subjectHash[currentDropCandidateId],
            draggingSubject = subjectHash[`${draggingId}_dragging`] = {...subjectHash[draggingId], candidateMove: true};

arackaf

import {DragSource, DragDropContext, DropTarget, DragLayer} from 'react-dnd';

@connect((state, ownProps) => {
    let subjectsModule = state.subjectsModule,
        //...

    return {
        //........
    }
}, {...actionCreators})

arackaf

import {DragSource, DragDropContext, DropTarget, DragLayer} from 'react-dnd';

@connect((state, ownProps) => {
    return {
        isCurrentDropTarget: state.subjectsModule.currentDropCandidateId == ownProps.subject._id
    }
}, { ...actionCreators })
@DropTarget('subject', {
    canDrop(props, monitor){
        let sourceSubject = monitor.getItem(),

arackaf

import {DragSource, DragDropContext, DropTarget, DragLayer} from 'react-dnd';
import HTML5Backend from 'react-dnd-html5-backend';
import TouchBackend from 'react-dnd-touch-backend';

let isTouch = store.getState().app.isTouch

@DragDropContext(isTouch ? TouchBackend : HTML5Backend)
@connect(state => {
    return {
        topLevelSubjects: topLevelSubjectsSortedSelector(state),