Reactification #24

Merged
merged 34 commits into from Nov 10, 2015

Projects

None yet

2 participants

@peric
Owner
peric commented May 10, 2015

No description provided.

@zigomir zigomir commented on an outdated diff May 10, 2015
-<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
-<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
-<link rel="stylesheet" type="text/css" href="css/style.css" />
-<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
-<script type="text/javascript">
+ <meta charset="utf-8">
+ <meta name="apple-mobile-web-app-capable" content="yes">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <meta name="description" content="Get countries list from geonames">
+ <meta name="author" content="Drazen Peric">
+ <meta name="keywords" content="countries, list, mysql, firebird, geonames, xml, csv, yaml">
+ <title>getCountries()</title>
+ <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
+ <link rel="stylesheet" type="text/css" href="css/style.css" />
+ <script src="https://fb.me/react-0.13.2.js"></script>
+ <script src="https://fb.me/JSXTransformer-0.13.2.js"></script>
@zigomir
zigomir May 10, 2015 Collaborator

you wan't to have build process done locally and not running transformer on other people's machines ;)

@zigomir zigomir commented on an outdated diff May 10, 2015
-<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
-<link rel="stylesheet" type="text/css" href="css/style.css" />
-<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
-<script type="text/javascript">
+ <meta charset="utf-8">
+ <meta name="apple-mobile-web-app-capable" content="yes">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <meta name="description" content="Get countries list from geonames">
+ <meta name="author" content="Drazen Peric">
+ <meta name="keywords" content="countries, list, mysql, firebird, geonames, xml, csv, yaml">
+ <title>getCountries()</title>
+ <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
+ <link rel="stylesheet" type="text/css" href="css/style.css" />
+ <script src="https://fb.me/react-0.13.2.js"></script>
+ <script src="https://fb.me/JSXTransformer-0.13.2.js"></script>
+ <script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
@zigomir
zigomir May 10, 2015 Collaborator

Not sure, but do you need jquery? I see you do. Since you have React now, I think we can solve problem without it...we'll talk :)

@zigomir zigomir commented on an outdated diff May 10, 2015
@@ -0,0 +1,548 @@
+var OUTPUT_MYSQL = 'MySQL',
@zigomir
zigomir May 10, 2015 Collaborator

This file can easily be split to few smaller files.

@zigomir zigomir commented on an outdated diff May 10, 2015
+ } else if (type === 'settings') {
+ if (data[objectKey].name === 'languagelookup' && !data[objectKey].checked) {
+ var columns = this.state.columns;
+
+ columns['languages'].checked = true;
+ }
+
+ data[objectKey].checked = !data[objectKey].checked;
+ } else {
+ data[objectKey].checked = !data[objectKey].checked;
+ }
+
+ this.forceUpdate();
+
+ // TODO: do I need this? How forceUpdate does updates based on references?
+// this.setState({type: data});
@zigomir
zigomir May 10, 2015 Collaborator

Use setState wherever you can. forceUpdate should be your last exit. setState will trigger re-render of component and this is usually what you want.

@zigomir zigomir commented on an outdated diff May 10, 2015
+ checked={column.checked}
+ onChange={self.toggleCheck} />
+ )
+ });
+ var settings = Object.keys(this.state.settings).map(function(key, index) {
+ var setting = self.state.settings[key];
+ return (
+ <Setting
+ key={index + key}
+ objectKey={key}
+ data={self.state.settings}
+ name={setting.name}
+ longName={setting.longName}
+ checked={setting.checked}
+ onChange={self.toggleCheck}
+ disabled={setting.disabled} />
@zigomir
zigomir May 10, 2015 Collaborator

props for using lots of props ๐Ÿ‘ :)

@zigomir zigomir commented on an outdated diff May 10, 2015
+ $.getJSON(source)
+ .done(function(data) {
+ var geonamesData = data.geonames;
+
+ this.setState({'output': generateOutput(selectedOutputType, columns, settings, geonamesData) });
+ }.bind(this));
+ },
+ render: function() {
+ var self = this;
+ var columns = Object.keys(this.state.columns).map(function(key, index) {
+ var column = self.state.columns[key];
+ return (
+ <Column
+ key={index + column.name}
+ objectKey={key}
+ data={self.state.columns}
@zigomir
zigomir May 10, 2015 Collaborator

data is really generic name. I believe you can think of something more specific ;)

@zigomir zigomir commented on an outdated diff May 10, 2015
+ <div className="checkbox">
+ <label>
+ <input
+ type="checkbox"
+ className="setting"
+ name="setting"
+ data-type="settings"
+ checked={this.props.checked}
+ onChange={this.handleChange}
+ disabled={this.props.disabled} />
+ {this.props.longName}
+ </label>
+ </div>
+ );
+ }
+});
@zigomir
zigomir May 10, 2015 Collaborator

Liking small components like Setting, OutputType and Column you did here ๐Ÿ‘

@zigomir zigomir commented on an outdated diff May 10, 2015
+ var lookupCountries = "";
+ var lookupColumnsDefinition = "";
+
+ output =
+ "CREATE TABLE IF NOT EXISTS `countries` (\n" +
+ " `id` int(5) NOT NULL AUTO_INCREMENT,\n" +
+ "{0}" +
+ " PRIMARY KEY (`id`)\n" +
+ ") ENGINE=MyISAM DEFAULT CHARSET=utf8 AUTO_INCREMENT=0;\n\n" +
+ "" +
+ "CREATE TABLE IF NOT EXISTS `country_lang_lnk` (\n" +
+ "{1}" +
+ " PRIMARY KEY (`countryCode`,`languages`)\n" +
+ ") ENGINE=MyISAM DEFAULT CHARSET=utf8;\n\n" +
+ "{2}\n" +
+ "{3}";
@zigomir
zigomir May 10, 2015 Collaborator

ohnoes, this hurts. We're gonna convert this project to ES6 so you can use template strings

@zigomir zigomir commented on an outdated diff May 10, 2015
@@ -0,0 +1,11 @@
+(function() {
+ var outputCode = document.getElementById('outputcode');
+
+ // select on focus
+ outputCode.onfocus = function() {
+ this.select();
+
+ // TODO: copy to clipboard
+ // https://github.com/zeroclipboard/zeroclipboard
@zigomir
zigomir May 10, 2015 Collaborator

๐Ÿ‘

@peric
Owner
peric commented May 10, 2015

@zigomir, thanks a lot for that useful review and commit!

@zigomir zigomir referenced this pull request Jul 16, 2015
Merged

Reactify tests #26

@peric peric merged commit 209b798 into master Nov 10, 2015
@peric peric deleted the reactify branch Nov 10, 2015
@zigomir
Collaborator
zigomir commented Nov 10, 2015

hhh ๐Ÿ‘

@peric peric referenced this pull request Nov 10, 2015
Closed

Rewrite app in react.js #21

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment