Skip to content

Instantly share code, notes, and snippets.

View arackaf's full-sized avatar
🏠
Working from home

Adam Rackis arackaf

🏠
Working from home
View GitHub Profile
@arackaf
arackaf / gist:06243a662c6db27ea2af
Last active December 2, 2015 17:57
Mobile/Expandable React Example With State
class BookViewListMobileItem extends React.Component{
constructor(){
super();
this.state = { expanded: false };
}
toggle(){
this.setState({ expanded: !this.state.expanded });
}
render(){
return (
@arackaf
arackaf / gist:424caaf1d3af5a75b393
Last active December 2, 2015 17:57
Desktop React component with state-based modal
const editSubjects = Symbol('editSubjectStateCollection');
class BookViewListDesktop extends React.Component{
constructor(){
super();
this.state = {
booksSubjectsModalShown: false,
editSubjectsFor: [],
subjectsAdding: [],
subjectsRemoving: []
function stackAndGetTopLevelSubjects(subjects){
subjects.forEach(s => {
s.children = [];
s.children.push(...subjects.filter(sc => new RegExp(`,${s._id},$`).test(sc.path)));
});
return subjects.filter(s => s.path == null);
}
function subjectsReducer(state = initialSubjectsState(), action = {}) {
switch (action.type) {
case LOAD_SUBJECTS_RESULTS:
return Object.assign({}, state, {list: stackAndGetTopLevelSubjects(action.subjects)});
}
}
function subjectsReducer(state = initialSubjectsState(), action = {}){
switch(action.type){
case LOAD_SUBJECTS_RESULTS:
return Object.assign({}, state, { list: stackAndGetTopLevelSubjects(action.subjects) });
case EDIT_SUBJECT:
var editingSubject = Object.assign({}, [...flattenedSubjects(state.list)].find(s => s._id == action._id)),
newSubjectParent;
var eligibleParents = [...flattenedSubjects(state.list)]
.filter(s => s._id !== action._id && (!new RegExp(`,${action._id},`).test(s.path)));
function subjectsReducer(state = initialSubjectsState(), action = {}){
switch(action.type){
case LOAD_SUBJECTS_RESULTS:
return Object.assign({}, state, { list: subjectsToHash(action.subjects) });
}
return state;
}
function subjectsToHash(subjects){
let hash = {};
function subjectsReducer(state = initialSubjectsState(), action = {}){
switch(action.type){
case LOAD_SUBJECTS_RESULTS:
return Object.assign({}, state, { list: subjectsToHash(action.subjects) });
case EDIT_SUBJECT:
var editingSubject = state.list[action._id],
newSubjectParent,
eligibleParents = flattenedSubjects(state.list).filter(s => s._id !== action._id && (!new RegExp(`,${action._id},`).test(s.path)));
if (editingSubject.path == null){
const bookListSelector = state => ({
subjects: Object.assign({}, state.bookList.subjects, {list: stackAndGetTopLevelSubjects(state.bookList.subjects.list)}),
books: Object.assign({}, state.bookList.books, {list: booksWithSubjectsSelector(state.bookList)})
});
function stackAndGetTopLevelSubjects(subjectsHash){
let subjects = Object.keys(subjectsHash).map(_id => subjectsHash[_id]);
subjects.forEach(s => {
s.children = [];
s.children.push(...subjects.filter(sc => new RegExp(`,${s._id},$`).test(sc.path)));
const stackedSubjectsSelector = createSelector(
[state => state.list],
list => stackAndGetTopLevelSubjects(list)
);
const bookListSelector = state => ({
subjects: Object.assign({}, state.bookList.subjects, {list: stackedSubjectsSelector(state.bookList.subjects)}),
books: Object.assign({}, state.bookList.books, {list: booksWithSubjectsSelector(state.bookList)}),
filters: state.bookList.filters
});
const booksWithSubjectsSelector = createSelector(
[state => state.books.list, state => state.subjects.list],
setBookResultsSubjects
);
const stackedSubjectsSelector = createSelector(
[state => state.list],
stackAndGetTopLevelSubjects
);