Merge pull request #5 from g3n1us/add-queries-to-model

add queries to ModelComponent

Author: g3n1us

src/assets/LaravelReactSync.js

@@ -1,19 +1,53 @@
 import React, { Component } from 'react';
 import ReactDOM from 'react-dom';
 import qs from 'qs';
+import Async from 'react-promise';
 
 const REACT_SYNC_DATA = window[window.ReactSyncGlobal];
-// This componenet maps specifically to a Laravel model. 
+// This componenet maps specifically to a Laravel model.
+
+Async.defaultPending = (
+  <span>loading...</span>
+)
 
 export class ModelComponent extends Component{
 	constructor(props){
 		super(props);
 		this.buttonData = {};
-    this.handleInputChange = this.handleInputChange.bind(this);	
-    
+    this.handleInputChange = this.handleInputChange.bind(this);
+
+	}
+
+	static find(id){
+  	let prom = axios.get(`/api/${this.name.toLowerCase()}/${id}`);
+    return <Async promise={prom} then={d => {
+        return React.createElement(this, {...d.data});
+      }} />
 	}
-	
-	
+
+  static where(a,b,c){
+    let query = [].slice.call(arguments);
+    let prom = axios.get('/api/countries', {params: {where: query}});
+    return <Async promise={prom} then={d => {
+        let els = d.data.map((e) => {
+          return React.createElement(this, {...e});
+        });
+        return <div>{els}</div>
+      }} />
+
+  }
+
+	static all(){
+  	let prom = axios.get(`/api/countries`);
+    return <Async promise={prom} then={d => {
+        let els = d.data.data.map((e) => {
+          return React.createElement(this, {...e});
+        });
+        return <div>{els}</div>
+      }} />
+	}
+
+
 	getComponentFormData(){
 		let $this = $(ReactDOM.findDOMNode(this));
 		if(!$this.is('form'))
@@ -22,39 +56,37 @@ export class ModelComponent extends Component{
 		if(!$this.length){
 			// This means that there isn't a form element in the component. This is OK!, we will find any inputs to determine the components data.
 			// Note!! To call different methods (eg. delete, save, create) within a rendered component, you have to use separate forms.
-			
+
 			formdata = $(ReactDOM.findDOMNode(this)).find(':input').serialize();
-			formdata = qs.parse(formdata);			
+			formdata = qs.parse(formdata);
 		}
 		else{
-			formdata = qs.parse($this.serialize());					
+			formdata = qs.parse($this.serialize());
 		}
 		formdata = g3n1us_helpers.array_merge(this.props, formdata);
 		formdata = g3n1us_helpers.array_merge(formdata, this.buttonData);
 		if(!formdata.model_classname)
 			formdata.model_classname = this._reactInternalInstance.getName();
 		return formdata;
 	}
-	
-	
+
+
 	getApp(){
-		// return this._reactInternalInstance._currentElement._owner._instance.app;
-		
 		return REACT_SYNC_DATA;
 	}
-	
-	
+
+
 	componentDidMount(){
 		let $this = $(ReactDOM.findDOMNode(this));
 		if(this.props.updateOnChange){
 		    $this.on('change', ':input', (e) => {
 			    this.handleInputChange(e);
-		    });			
+		    });
 		}
-		
+
 		if(!$this.is('form'))
 			$this = $this.find('form');
-			
+
 		// if this isn't a form and no child nodes are forms, then ignore the rest and return
 		if(!$this.length)
 			return;
@@ -71,8 +103,8 @@ export class ModelComponent extends Component{
 			this.updateRequest(formdata);
 		});
 	}
-	
-	
+
+
 	updateRequest(formdata){
 		let axios_method = window.g3n1us_helpers.array_get(formdata, '_method', 'post').toLowerCase();
 		axios({
@@ -82,34 +114,34 @@ export class ModelComponent extends Component{
 		})
 		.then((response) => {
 			REACT_SYNC_DATA.update();
-			
+
 			this.setState(response.data || {});
-			
+
 			let level = response.status < 400 ? 'success' : 'danger';
 
 			ReactDOM.render(
 				<Alert message="Saved" level={level} />,
 				document.getElementById('notification_outer'),
 			);
-			
+
 		});
 	}
-	
-		
+
+
 	handleInputChange(event) {
 
 		event.preventDefault();
-		
+
 		const target = event.target;
-		
+
 		const value = target.type === 'checkbox' ? target.checked : target.value;
-		
+
 		const name = target.name;
 
 		let formd = this.getComponentFormData();
 
 		let thiskey = _.keys(qs.parse(name))[0];
-		
+
 		let filtered_formdata = g3n1us_helpers.array_only(formd, [thiskey, 'model_classname', '_method', 'id']);
 		let final_filtered = {};
 		for(let i in filtered_formdata){
@@ -122,8 +154,8 @@ export class ModelComponent extends Component{
 
 		this.updateRequest(final_filtered);
 	}
-	
-	
+
+
 }
 
 
@@ -136,15 +168,15 @@ export class MasterComponent extends Component{
 		REACT_SYNC_DATA.components.push(this);
 	}
 
-	
-	
+
+
 	componentDidMount(){
 		$(this).on('refresh-state', (e) => {
 			console.log('refresh-state !!!', e);
 			this.setState(REACT_SYNC_DATA.page_data);
-		});		
+		});
 	}
-	
+
 }
 
 
@@ -162,27 +194,27 @@ export class Alert extends Component{
 		}, 3000);
 
 	}
-	
+
 	render() {
-		
+
 		return this.state.show ? <div style={{position: 'fixed', margin: 'auto', left: 0, right: 0, zIndex: '99999'}} className={`alert fade show alert-${this.props.level || 'success'}`}>{this.props.message} <a className="close text-muted" data-dismiss="alert">&times;</a></div> : null;
 
-	}	
-	
+	}
+
 }
 
 
 export class Pagination extends Component{
 	constructor(props){
 		super(props);
 	}
-	
+
 	render(){
 		let links = [];
 		let current_page = 1
-		if(current_page == this.props.last_page) 
+		if(current_page == this.props.last_page)
 			return null; // There is only one page, so return nothing
-		
+
 		while(current_page <= this.props.last_page){
 			if(current_page == this.props.current_page){
 				links.push(
@@ -196,7 +228,7 @@ export class Pagination extends Component{
 					<li className="page-item" key={g3n1us_helpers.str_rand(20)}>
 						<a className="page-link" href={`?${qs.stringify(req)}`}>{current_page}</a>
 					</li>
-				);					
+				);
 			}
 			current_page++;
 		}
@@ -217,13 +249,13 @@ export class Pagination extends Component{
 			}
 			else{
 				tmplinks.push(<li className="page-item disabled" key={g3n1us_helpers.str_rand(20)}><span className="page-link">...</span></li>);
-				tmplinks = tmplinks.concat(links.slice((this.props.last_page - 2)));				
+				tmplinks = tmplinks.concat(links.slice((this.props.last_page - 2)));
 			}
 
-			links = tmplinks;	
-							
+			links = tmplinks;
+
 		}
-		
+
 		let req = REACT_SYNC_DATA.request;
 		req.page = this.props.current_page - 1;
     let prev_page_url = `?${qs.stringify(req)}`;
@@ -232,22 +264,22 @@ export class Pagination extends Component{
 		return (
 			<div className="d-flex justify-content-center">
 				<ul className="pagination">
-					{this.props.prev_page_url 
-						? 
+					{this.props.prev_page_url
+						?
 					<li className="page-item"><a className="page-link" href={prev_page_url} rel="previous">«</a></li>
 						:
 			        <li className="page-item disabled"><span className="page-link">«</span></li>
-					}     
+					}
 			        {links}
-					{this.props.next_page_url 
-						? 
+					{this.props.next_page_url
+						?
 			        <li className="page-item"><a className="page-link" href={next_page_url} rel="next">»</a></li>
 						:
 					<li className="page-item disabled"><span className="page-link">»</span></li>
-					}     
+					}
 			    </ul>
-			</div>			
+			</div>
 		);
 	}
-	
+
 }

src/assets/package.json

@@ -12,6 +12,12 @@
   "dependencies": {
     "g3n1us_helpers": "^1.0.5",
     "on-change": "^0.1.0",
-    "qs": "^6.5.1"
+    "qs": "^6.5.1",
+    "react": "^15.4.2",
+    "react-dom": "^15.4.2",
+    "react-promise": "^2.0.3",
+    "lodash": "^4.17.5",
+    "jquery": "^3.2",
+    "axios": "^0.18"
   }
 }