Skip to content

Commit

Permalink
stuff :'/
Browse files Browse the repository at this point in the history
  • Loading branch information
namlook committed Jun 15, 2016
1 parent e2c3e4e commit 21b249b
Show file tree
Hide file tree
Showing 25 changed files with 635 additions and 119 deletions.
150 changes: 85 additions & 65 deletions src/components/contrib/CollectionListWidget/CollectionListWidget.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,79 +3,99 @@ import React, { PropTypes } from 'react';

import CardWidget from '../../widgets/CardWidget';

const CollectionListWidget = (props) => {
const {
ownStore,
linkedRouteQuery,
hideIfEmpty,
searchStore,
searchProperty,
properties,
unstackable,
onClickRedirectTo,
location,
history,
...other } = props;

const searchValue = linkedRouteQuery && location.query[linkedRouteQuery.search]
|| searchStore && searchStore.get('value');

const storeContent = ownStore.get('content');

const records = searchProperty && searchValue
? storeContent.filter((o) => o[searchProperty] === searchValue)
: storeContent;

const displayRecord = (record) => (
properties.map((property) => <td key={property}>{record[property]}</td>)
);

const recordClicked = (record) => {
// displayActions.update(record);
if (onClickRedirectTo) {
history.push(onClickRedirectTo.replace(':id', record._id));
}
};

const table = records.count() ? (
<table
style={{ border: 0 }}
className={`ui ${unstackable && 'unstackable' || ''} striped table`}
>
<thead>
<tr> {properties.map((propname) => <th key={propname}> {propname} </th>)} </tr>
</thead>
<tbody>
{records.map((record) => (
<tr
key={record._id}
onClick={() => recordClicked(record)}
>
{displayRecord(record)}
</tr>
))}
</tbody>
</table>
) : (
<div className="ui center aligned segment"> {"no records found"} </div>
);

if (hideIfEmpty && !ownStore.get('content').size) {
return null;
class CollectionListWidget extends React.Component {

componentWillMount() {
// this.initStore();
const { ownActions, params, location } = this.props;
console.log('loc>', params, location);
const paramFilter = Object.keys(params || {}).reduce((acc, name) => ({
...acc,
[`:${name}`]: params[name],
}), {});
const queryFilter = Object.keys(location.query || {}).reduce((acc, name) => ({
...acc,
[`&${name}`]: location.query[name],
}), {});

ownActions.fetchData({ ...paramFilter, ...queryFilter });
}

return (
<CardWidget _name="collection-list" {...other}>
{table}
</CardWidget>
);
};
render() {
const {
ownStore,
linkedRouteQuery,
hideIfEmpty,
searchStore,
searchProperty,
properties,
unstackable,
onClickRedirectTo,
location,
history,
...other } = this.props;

const searchValue = linkedRouteQuery && location.query[linkedRouteQuery.search]
|| searchStore && searchStore.get('value');

const storeContent = ownStore.get('content');

const records = searchProperty && searchValue
? storeContent.filter((o) => o[searchProperty] === searchValue)
: storeContent;

const displayRecord = (record) => (
properties.map((property) => <td key={property}>{record[property]}</td>)
);

const recordClicked = (record) => {
// displayActions.update(record);
if (onClickRedirectTo) {
history.push(onClickRedirectTo.replace(':id', record._id));
}
};

const table = records.count() ? (
<table
style={{ border: 0 }}
className={`ui ${unstackable && 'unstackable' || ''} striped table`}
>
<thead>
<tr> {properties.map((propname) => <th key={propname}> {propname} </th>)} </tr>
</thead>
<tbody>
{records.map((record) => (
<tr
key={record._id}
onClick={() => recordClicked(record)}
>
{displayRecord(record)}
</tr>
))}
</tbody>
</table>
) : (
<div className="ui center aligned segment"> {"no records found"} </div>
);

if (hideIfEmpty && !ownStore.get('content').size) {
return null;
}

return (
<CardWidget _name="collection-list" {...other}>
{table}
</CardWidget>
);
}
}

CollectionListWidget.propTypes = {
location: PropTypes.object.isRequired,
history: PropTypes.object.isRequired,
linkedRouteQuery: PropTypes.object,
ownStore: PropTypes.object.isRequired,
ownActions: PropTypes.object.isRequired,
searchStore: PropTypes.object,
hideIfEmpty: PropTypes.bool,
color: PropTypes.string,
Expand Down
59 changes: 33 additions & 26 deletions src/components/contrib/RecordFormWidget/RecordFormWidget.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import React, { PropTypes } from 'react';
import CardWidget from '../../widgets/CardWidget';
import FormField from '../FormField';

import { findRecordFromStore } from '../../../utils';
// import { findRecordFromStore } from '../../../utils';

const storeToQuery = (exposeStateToRouteQuery, store) => (
Object.keys(exposeStateToRouteQuery).reduce((acc, propertyName) => {
Expand All @@ -19,33 +19,40 @@ const storeToQuery = (exposeStateToRouteQuery, store) => (
class RecordFormWidget extends React.Component {

componentWillMount() {
this.initStore();
// this.initStore();
const { ownActions, params, linkedRouteParams } = this.props;
console.log('linkedRouteParams>', params, linkedRouteParams);
ownActions.fetchData(params.id);
}

initStore() {
const {
params,
collectionStore,
linkedRouteParams,
location,
exposeStateToRouteQuery,
ownActions,
} = this.props;

if (collectionStore && linkedRouteParams) { // fill form from url params
const requestedRecord = findRecordFromStore(collectionStore, linkedRouteParams, params);
if (requestedRecord) {
ownActions.update(requestedRecord);
} else if (linkedRouteParams) {
ownActions.clear();
}
} else if (exposeStateToRouteQuery) { // fill form from url query
Object.keys(exposeStateToRouteQuery).forEach((storePropertyName) => {
const queryFilterName = exposeStateToRouteQuery[storePropertyName];
ownActions.updateProperty(storePropertyName, location.query[queryFilterName]);
});
}
}
// initStore() {
// const {
// params,
// collectionStore,
// linkedRouteParams,
// location,
// exposeStateToRouteQuery,
// ownActions,
// } = this.props;
//
// if (collectionStore && linkedRouteParams) { // fill form from url params
// const requestedRecord = findRecordFromStore(collectionStore, linkedRouteParams, params);
// if (requestedRecord) {
// ownActions.update(requestedRecord);
// } else if (linkedRouteParams) {
// ownActions.clear();
// }
// } else if (exposeStateToRouteQuery) { // fill form from url query
// Object.keys(exposeStateToRouteQuery).forEach((storePropertyName) => {
// const queryFilterName = exposeStateToRouteQuery[storePropertyName];
// ownActions.updateProperty(storePropertyName, location.query[queryFilterName]);
// });
// }
// }

// save() {
//
// }

render() {
const {
Expand Down
4 changes: 2 additions & 2 deletions src/components/contrib/RecordFormWidget/index.js
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@

export Component from './RecordFormWidget';
export * as actions from '../../../stores/RecordStore/actions';
export * as constants from '../../../stores/RecordStore/constants';
export * as actions from '../../../stores/record-store/actions';
export * as constants from '../../../stores/record-store/constants';
export reducer from './reducer';
2 changes: 1 addition & 1 deletion src/components/contrib/RecordFormWidget/reducer.js
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@

export default from '../../../stores/RecordStore/reducer';
export default from '../../../stores/record-store/reducer';

// export default recordStoreReducer({
// schema: {
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
import React, { PropTypes } from 'react';

// import CardWidget from 'odyssee-client/lib/components/widgets/CardWidget';

class CollectionQueryWidget extends React.Component {

componentWillMount() {
// this.initStore();
const { ownActions } = this.props;
ownActions.fetchData();
}
//
// initStore() {
// const { params, collectionStore, linkedRouteParams, ownActions } = this.props;
// const requestedRecord = findRecordFromStore(collectionStore, linkedRouteParams, params);
// if (requestedRecord) {
// ownActions.update(requestedRecord);
// } else {
// ownActions.clear();
// }
// }

render() {
// const { collectionActions, ...other } = this.props;

return null;
// return (
// <CardWidget _name="collection-query" {...other}>
// <p><button onClick={() => collectionActions.fetchCollection()}>fetch</button> expense</p>
// </CardWidget>
// );
}
}

CollectionQueryWidget.propTypes = {
params: PropTypes.object.isRequired,
linkedRouteParams: PropTypes.object,
ownStore: PropTypes.object.isRequired,
ownActions: PropTypes.object.isRequired,
fields: PropTypes.array.isRequired,
};

export default CollectionQueryWidget;
60 changes: 60 additions & 0 deletions src/components/contrib/collection-query-widget/actions.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,60 @@

import { FETCH_REQUEST } from './constants';
// import { FETCH_REQUEST, FETCH_FAIL, FETCH_SUCCESS } from './constants';
import { createAction } from '../../../utils';

import { addBulkRecords } from '../../../stores/collection-store/actions';
import { pushMessage } from '../flash-messages-widget/actions';

const fetchRequested = createAction(FETCH_REQUEST);
// const fetchSucceed = createAction(FETCH_SUCCESS, 'payload');
// const fetchFailed = createAction(FETCH_FAIL, 'error');

// const fetchRequested = (_storeName) => () => ({ type: FETCH_REQUEST, _storeName, });
// const fetchSucceed = (_storeName) => (data) =>
// ({ type: FETCH_SUCCESS, payload: data, _storeName });
// const fetchFailed = (_storeName) => (error) => ({ type: FETCH_FAIL, error, _storeName });

const checkStatus = (response) => {
if (response.status >= 200 && response.status < 300) {
return response;
}
const error = new Error(response.statusText);
error.response = response;
throw error;
};

export const fetchData = (storeName, storeConfig) => {
const fetchRequestedAction = fetchRequested(storeName);

const addBulkRecordsAction = addBulkRecords(storeConfig.linkedStores.collection);
const pushMessageAction = pushMessage(storeConfig.linkedStores.message);

return () => (dispatch) => {
dispatch(fetchRequestedAction());

return window.fetch(storeConfig.remote.endpoint)
.then(checkStatus)
.then((response) => response.json())
.then((data) => {
dispatch(pushMessageAction({
title: 'ok',
body: 'heyad',
type: 'success',
}));
dispatch(pushMessageAction({
title: 'info',
body: 'skfjsklj',
type: 'info',
}));
dispatch(addBulkRecordsAction(data.data));
})
.catch((error) => {
dispatch(pushMessageAction({
title: 'An error occured',
body: `${error}`,
type: 'error',
}));
});
};
};
3 changes: 3 additions & 0 deletions src/components/contrib/collection-query-widget/constants.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
export const FETCH_REQUEST = 'CollectionQueryWidget.FETCH_REQUEST';
export const FETCH_SUCCESS = 'CollectionQueryWidget.FETCH_SUCCESS';
export const FETCH_FAIL = 'CollectionQueryWidget.FAIL';
6 changes: 6 additions & 0 deletions src/components/contrib/collection-query-widget/index.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@

export Component from './CollectionQueryWidget';

export * as actions from './actions';
export * as constants from './constants';
export reducer from './reducer';
21 changes: 21 additions & 0 deletions src/components/contrib/collection-query-widget/reducer.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@

import { FETCH_REQUEST, FETCH_SUCCESS, FETCH_FAIL } from './constants';
import { Map as iMap/* , List as iList, Record as iRecord*/ } from 'immutable';

export default (/* config */) => {
const initialState = iMap({
// query: iList(),
loading: false,
error: null,
});

const actions = {
[FETCH_REQUEST]: (state) => (state.set('loading', true)),
[FETCH_SUCCESS]: (state) => (state.set('loading', false)),
[FETCH_FAIL]: (state, { payload }) => (
state.set('loading', false).update('error', () => payload)
),
};

return { initialState, actions };
};
Loading

0 comments on commit 21b249b

Please sign in to comment.