Reply to thread

Message

<blockquote data-quote="MayoMayn" data-source="post: 404694" data-attributes="member: 71840">Thanks man![doublepost=1490318187,1490303034][/doublepost]After going through some simplicity with ReactJS, I must say I really enjoy this library, it especially makes Electron development 100 times easier.Just gone through in my head what I want to do with the TMDb API, and decided to code some simple parts of it.The current component is mostly just for trying out React, so it will most likely be improved a lot before production.[PHP]import React from 'react'import axios from 'axios'export default class TMDb extends React.Component {&nbsp; constructor(props) {&nbsp; &nbsp; //super(props)&nbsp; &nbsp; this.tmdb = require(__dirname + '/../config.json').tmdb&nbsp; &nbsp; this.state = {&nbsp; &nbsp; &nbsp; api: `${this.tmdb.api}/${props.type}/${props.id}`,&nbsp; &nbsp; &nbsp; add: `?api_key=${this.tmdb.key}&amp;language=${props.lang}`&nbsp; &nbsp; }&nbsp; }&nbsp; setApi(type, id) {&nbsp; &nbsp; this.setState({api: `${this.tmdb.api}/${type}/${id}`})&nbsp; }&nbsp; setAdd(lang) {&nbsp; &nbsp; this.setState({add: `?api_key=${this.tmdb.key}&amp;language=${lang}`})&nbsp; }&nbsp; getSimilarMovies() {&nbsp; &nbsp; return this.tmdbGet(`/similar${this.state.add}&amp;page=1`).data&nbsp; }&nbsp; getDetails() {&nbsp; &nbsp; let details = this.tmdbGet(`${this.state.add}`).data&nbsp; &nbsp; return details&nbsp; }&nbsp; tmdbGet(extra = '') {&nbsp; &nbsp; axios.get(`${this.state.api}${extra}`)&nbsp; &nbsp; &nbsp; .then((response) =&gt; {&nbsp; &nbsp; &nbsp; &nbsp; return response&nbsp; &nbsp; &nbsp; })&nbsp; }}[/PHP][doublepost=1490362419][/doublepost]Just a preview of the Window Component for all the curious folks[PHP]import React from 'react'const win = window.require('electron').remote.getCurrentWindow()export default class Window extends React.Component {&nbsp; constructor(props) {&nbsp; &nbsp; super(props)&nbsp; &nbsp; this.handleClose = this.handleClose.bind(this)&nbsp; &nbsp; this.handleMinimize = this.handleMinimize.bind(this)&nbsp; &nbsp; this.handleMaximize = this.handleMaximize.bind(this)&nbsp; }&nbsp; handleClose() {&nbsp; &nbsp; win.close()&nbsp; }&nbsp; handleMinimize() {&nbsp; &nbsp; win.minimize()&nbsp; }&nbsp; handleMaximize() {&nbsp; &nbsp; if(!win.isMaximized()) {&nbsp; &nbsp; &nbsp; &nbsp; win.maximize()&nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; &nbsp; win.unmaximize()&nbsp; &nbsp; }&nbsp; }&nbsp; render() {&nbsp; &nbsp; return (&nbsp; &nbsp; &nbsp; &lt;div className=&quot;menu-window&quot;&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;span className=&quot;menu-button close&quot; onClick={this.handleClose}&gt;&lt;/span&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;span className=&quot;menu-button minimize&quot; onClick={this.handleMinimize}&gt;&lt;/span&gt;&nbsp; &nbsp; &nbsp; &nbsp; {this.props.maximize ? (&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;span className=&quot;menu-button maximize&quot; onClick={this.handleMaximize}&gt;&lt;/span&gt;&nbsp; &nbsp; &nbsp; &nbsp; ) : (&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;span className=&quot;menu-button inactive&quot;&gt;&lt;/span&gt;&nbsp; &nbsp; &nbsp; &nbsp; )}&nbsp; &nbsp; &nbsp; &lt;/div&gt;&nbsp; &nbsp; )&nbsp; }}[/PHP]There's sadly this thing with renders in ReactJS, that it can only return a single element. So let's say you got five different divs in the renderer, then you'd have to wrap them inside a div so that it only returns a single element. Possibly ruin of CSS styles[doublepost=1490388640][/doublepost]#UPDATESAdded the below components to the app<a href="https://devbest.com/threads/es6-js-secure-session-management.82200/" target="_blank">https://devbest.com/threads/es6-js-secure-session-management.82200/</a>[doublepost=1490560289][/doublepost]I've created a git repo for this project:<a href="https://github.com/marcus-sa/Primely" target="_blank">https://github.com/marcus-sa/Primely</a></blockquote>

[QUOTE="MayoMayn, post: 404694, member: 71840"] Thanks man! [doublepost=1490318187,1490303034][/doublepost]After going through some simplicity with ReactJS, I must say I really enjoy this library, it especially makes Electron development 100 times easier. Just gone through in my head what I want to do with the TMDb API, and decided to code some simple parts of it. The current component is mostly just for trying out React, so it will most likely be improved a lot before production. [PHP] import React from 'react' import axios from 'axios' export default class TMDb extends React.Component { constructor(props) { //super(props) this.tmdb = require(__dirname + '/../config.json').tmdb this.state = { api: `${this.tmdb.api}/${props.type}/${props.id}`, add: `?api_key=${this.tmdb.key}&language=${props.lang}` } } setApi(type, id) { this.setState({api: `${this.tmdb.api}/${type}/${id}`}) } setAdd(lang) { this.setState({add: `?api_key=${this.tmdb.key}&language=${lang}`}) } getSimilarMovies() { return this.tmdbGet(`/similar${this.state.add}&page=1`).data } getDetails() { let details = this.tmdbGet(`${this.state.add}`).data return details } tmdbGet(extra = '') { axios.get(`${this.state.api}${extra}`) .then((response) => { return response }) } } [/PHP] [doublepost=1490362419][/doublepost]Just a preview of the Window Component for all the curious folks [PHP] import React from 'react' const win = window.require('electron').remote.getCurrentWindow() export default class Window extends React.Component { constructor(props) { super(props) this.handleClose = this.handleClose.bind(this) this.handleMinimize = this.handleMinimize.bind(this) this.handleMaximize = this.handleMaximize.bind(this) } handleClose() { win.close() } handleMinimize() { win.minimize() } handleMaximize() { if(!win.isMaximized()) { win.maximize() } else { win.unmaximize() } } render() { return ( <div className="menu-window"> {this.props.maximize ? ( ) : ( )} </div> ) } } [/PHP] There's sadly this thing with renders in ReactJS, that it can only return a single element. So let's say you got five different divs in the renderer, then you'd have to wrap them inside a div so that it only returns a single element. Possibly ruin of CSS styles [doublepost=1490388640][/doublepost][B]#UPDATES[/B] Added the below components to the app [URL]https://devbest.com/threads/es6-js-secure-session-management.82200/[/URL] [doublepost=1490560289][/doublepost]I've created a git repo for this project: [URL]https://github.com/marcus-sa/Primely[/URL] [/QUOTE]

Verification

Reply to thread

Connect with us

Newest members