initial commit

todorpr · todorpr · commit e9e428d40c5a · 2015-12-11T00:01:51.000+02:00
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,4 @@
+node_modules/
+main.js
+style.css
+.idea
diff --git a/README.md b/README.md
@@ -0,0 +1,4 @@
+Gallery App
+====
+
+Image Gallery utilizing Imgur API, built with React
diff --git a/gulpfile.js b/gulpfile.js
@@ -0,0 +1,86 @@
+var gulp = require('gulp');
+var gutil = require('gulp-util');
+var source = require('vinyl-source-stream');
+var browserify = require('browserify');
+var watchify = require('watchify');
+var reactify = require('reactify');
+var notifier = require('node-notifier');
+var server = require('gulp-server-livereload');
+var concat = require('gulp-concat');
+var sass = require('gulp-sass');
+var watch = require('gulp-watch');
+
+var notify = function(error) {
+  var message = 'In: ';
+  var title = 'Error: ';
+
+  if(error.description) {
+    title += error.description;
+  } else if (error.message) {
+    title += error.message;
+  }
+
+  if(error.filename) {
+    var file = error.filename.split('/');
+    message += file[file.length-1];
+  }
+
+  if(error.lineNumber) {
+    message += '\nOn Line: ' + error.lineNumber;
+  }
+
+  notifier.notify({title: title, message: message});
+};
+
+var bundler = watchify(browserify({
+  entries: ['./src/app.jsx'],
+  transform: [reactify],
+  extensions: ['.jsx'],
+  debug: true,
+  cache: {},
+  packageCache: {},
+  fullPaths: true
+}));
+
+function bundle() {
+  return bundler
+    .bundle()
+    .on('error', notify)
+    .pipe(source('main.js'))
+    .pipe(gulp.dest('./'))
+}
+bundler.on('update', bundle)
+
+gulp.task('build', function() {
+  bundle()
+});
+
+gulp.task('serve', function(done) {
+  gulp.src('')
+    .pipe(server({
+      livereload: {
+        enable: true,
+        filter: function(filePath, cb) {
+          if(/main.js/.test(filePath)) {
+            cb(true)
+          } else if(/style.css/.test(filePath)){
+            cb(true)
+          }
+        }
+      },
+      open: true
+    }));
+});
+
+gulp.task('sass', function () {
+  gulp.src('./sass/**/*.scss')
+    .pipe(sass().on('error', sass.logError))
+    .pipe(concat('style.css'))
+    .pipe(gulp.dest('./'));
+});
+
+gulp.task('default', ['build', 'serve', 'sass', 'watch']);
+
+gulp.task('watch', function () {
+  gulp.watch('./sass/**/*.scss', ['sass']);
+});
diff --git a/index.html b/index.html
@@ -0,0 +1,9 @@
+<head>
+  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
+  <link rel="stylesheet" href="style.css">
+</head>
+<body>
+  <div class="container">
+  </div>
+</body>
+<script src="main.js"></script>
diff --git a/package.json b/package.json
@@ -0,0 +1,29 @@
+{
+  "name": "react-starter",
+  "version": "1.0.0",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "browserify": "^9.0.3",
+    "gulp": "^3.8.11",
+    "gulp-concat": "^2.5.2",
+    "gulp-react": "^3.0.1",
+    "gulp-sass": "^2.0.1",
+    "gulp-server-livereload": "^1.3.0",
+    "gulp-util": "^3.0.4",
+    "gulp-watch": "^4.2.4",
+    "node-notifier": "^4.2.1",
+    "react": "^0.13.1",
+    "react-router": "^1.0.0-beta2",
+    "reactify": "^1.1.0",
+    "reflux": "^0.3.0",
+    "vinyl-source-stream": "^1.1.0",
+    "watchify": "^2.4.0",
+    "whatwg-fetch": "^0.10.1"
+  },
+  "devDependencies": {}
+}
diff --git a/sass/style.scss b/sass/style.scss
@@ -0,0 +1,3 @@
+.black {
+  color: black
+}
diff --git a/src/app.jsx b/src/app.jsx
@@ -0,0 +1,5 @@
+var React = require('react');
+var Routes = require('./routes');
+var Api = require('./utils/api');
+
+React.render(Routes, document.querySelector('.container'));
diff --git a/src/components/header.jsx b/src/components/header.jsx
@@ -0,0 +1,21 @@
+var React = require('react');
+var Router = require('react-router');
+var Link = Router.Link;
+
+module.exports = React.createClass({
+    render: function() {
+        return (
+            <nav className="navbar navbar-default header">
+                <div className="container-fluid">
+                    <Link to="/" className="navbar-brand">
+                        Gallery App
+                    </Link>
+                    <ul className="nav navbar-nav navbar-right">
+                        <li><a>Topic #1</a></li>
+                        <li><a>Topic #2</a></li>
+                    </ul>
+                </div>
+            </nav>
+        )
+    }
+});
diff --git a/src/components/main.jsx b/src/components/main.jsx
@@ -0,0 +1,19 @@
+var React = require('react');
+var Header = require('./header');
+var TopicList = require('./topic-list');
+
+module.exports = React.createClass({
+    render: function() {
+        return <div>
+            <Header />
+            {this.content()}
+        </div>
+    },
+    content: function () {
+        if(this.props.children){
+            return this.props.children
+        } else {
+            return <TopicList />
+        }
+    }
+});
diff --git a/src/components/topic-list.jsx b/src/components/topic-list.jsx
@@ -0,0 +1,31 @@
+var React = require('react');
+var TopicStore = require('../stores/topic-store');
+
+module.exports = React.createClass({
+    getInitialState: function () {
+        return {
+            topics: []
+        }
+    },
+    componentWillMount: function () {
+        TopicStore.getTopics()
+            .then(function () {
+                this.setState({
+                    topics: TopicStore.topics
+                })
+            }.bind(this));
+    },
+    render: function() {
+        return <div className="list-group">
+        Topic list
+            {this.renderTopics()}
+        </div>
+    },
+    renderTopics: function () {
+        return this.state.topics.map(function (topic) {
+            return <li>
+                {topic}
+            </li>
+        })
+    }
+});
diff --git a/src/routes.jsx b/src/routes.jsx
@@ -0,0 +1,15 @@
+var React = require('react');
+var ReactRouter = require('react-router');
+var HashHistory = require('react-router/lib/hashhistory');
+var Router = ReactRouter.Router;
+var Route = ReactRouter.Route;
+
+var Main = require("./components/main");
+
+module.exports = (
+    <Router history={new HashHistory}>
+        <Route path="/" component={Main} >
+
+        </Route>
+    </Router>
+);
diff --git a/src/stores/topic-store.jsx b/src/stores/topic-store.jsx
@@ -0,0 +1,11 @@
+var Api = require('../utils/api');
+var Reflux = require('reflux');
+
+module.exports = Reflux.createStore({
+    getTopics: function () {
+        return Api.get('topics/defaults')
+            .then(function (json) {
+                this.topics = json.data;
+        }.bind(this));
+    }
+});
diff --git a/src/utils/api.jsx b/src/utils/api.jsx
@@ -0,0 +1,17 @@
+var Fetch = require('whatwg-fetch');
+var rootUrl = 'https://api.imgur.com/3/';
+var apiKey = '430d6820d865788';
+
+module.exports = {
+    get: function (url) {
+        return fetch(rootUrl + url, {
+            headers: {
+                'Authorization': 'Client-ID ' + apiKey
+            }
+        })
+        .then(function (res) {
+            return res.json();
+        })
+    }
+};
+

-Original file line number
+Diff line change
@@ @@ -0,0 +1,4 @@ @@
 +node_modules/
 +main.js
 +style.css
 +.idea