Github/movies-for-hackers
1
0
Fork 0
mirror of https://github.com/k4m4/movies-for-hackers.git synced 2024-11-01 04:05:26 +00:00
Code Issues Releases Wiki Activity

Basic concept up and running! ajax + parse + react

Browse Source
This commit is contained in:
MichaelCook 2017-02-24 15:53:08 +00:00
parent ebad554127
commit f177a45a92
10 changed files with 4552 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.gitignore vendored Normal file
View File

@ -0,0 +1 @@
node_modules

1
dist/css/app.css vendored Normal file
View File

@ -0,0 +1 @@
.container-fluid{max-width:1440px}th{text-transform:capitalize}

1
dist/js/app.js vendored Normal file
View File

@ -0,0 +1 @@
"use strict";function _classCallCheck(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function _possibleConstructorReturn(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function _inherits(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}var _createClass=function(){function e(e,t){for(var o=0;o<t.length;o++){var n=t[o];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(e,n.key,n)}}return function(t,o,n){return o&&e(t.prototype,o),n&&e(t,n),t}}(),client=new XMLHttpRequest,objectifyMarkdownNotWomen=new marked.Renderer,moviesCollection,movies,cellCounter=0,lastHeading="",headers=["movie","genre","year","rating"],Table=function(e){function t(e){_classCallCheck(this,t);var o=_possibleConstructorReturn(this,(t.__proto__||Object.getPrototypeOf(t)).call(this,e));return o.movies=e.movies,o.columns=[],headers.map(function(e,t){var n=0==t;o.columns.push(React.createElement(TableHeaderColumn,{key:t,isKey:n,dataField:e,dataSort:!0},e))}),o}return _inherits(t,e),_createClass(t,[{key:"render",value:function(){return React.createElement(BootstrapTable,{data:this.movies,hover:!0},this.columns)}}]),t}(React.Component);objectifyMarkdownNotWomen.heading=function(e,t){lastHeading=e},objectifyMarkdownNotWomen.tablerow=function(e){cellCounter=0,movies.push({})},objectifyMarkdownNotWomen.tablecell=function(e,t){movies[movies.length-1][headers[cellCounter]]=e,cellCounter++},objectifyMarkdownNotWomen.table=function(e,t){movies[0][headers[0]].toLowerCase()==headers[0]&&movies.splice(0,1),null==movies[movies.length-1][headers[0]]&&movies.pop(),moviesCollection.push({heading:lastHeading,movies:movies}),movies=[{}]},client.open("GET",window.location.href+"README.md"),client.onreadystatechange=function(e){moviesCollection=[],movies=[{}],marked(client.responseText,{renderer:objectifyMarkdownNotWomen},function(){if(null!=moviesCollection[0]){var e=[];moviesCollection.map(function(t,o){e.push(React.createElement("div",{key:o},React.createElement("h1",null,t.heading),React.createElement(Table,{movies:t.movies})))}),ReactDOM.render(React.createElement("div",null,e),document.getElementById("root"))}})},client.send();

14
index.html
View File

@ -3,11 +3,21 @@
<head>
<meta charset="utf-8">
<title>Movies for Hackers</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/marked/0.3.6/marked.min.js"></script>
<script src="webapp/js/app.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/react-bootstrap-table/3.0.0/react-bootstrap-table-all.min.css"/>
<link rel="stylesheet" type="text/css" href="dist/css/app.css"/>
</head>
<body>
<div class="container-fluid">
<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-bootstrap-table/3.0.0/react-bootstrap-table.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/marked/0.3.6/marked.min.js"></script>
<script src="dist/js/app.js"></script>
</div>
</body>
</html>

22
lapisconfig.json Normal file
View File

@ -0,0 +1,22 @@
{
"css": [
{
"watch": [
"src/scss/**/*.scss"
],
"src": "src/scss/app.scss",
"dest": "./dist/css",
"filename": "app.css"
}
],
"js": [
{
"watch": [
"src/js/**/*.js"
],
"src": "src/js/app.js",
"dest": "dist/js",
"filename": "app.js"
}
]
}

6
package.json Normal file
View File

@ -0,0 +1,6 @@
{
"dependencies": {
"babel-preset-react": "^6.23.0",
"lapis-compiler": "^1.5.7"
}
}

68
webapp/js/app.js → src/js/app.js
View File

@ -1,3 +1,6 @@
/**
* Vars
*/
var client = new XMLHttpRequest(),
objectifyMarkdownNotWomen = new marked.Renderer(),
moviesCollection,
@ -6,7 +9,43 @@ var client = new XMLHttpRequest(),
lastHeading = '',
headers = ['movie', 'genre', 'year', 'rating'];
/**
* React Table Component
* Using https://github.com/AllenFang/react-bootstrap-table
*/
class Table extends React.Component {
// Runs on init
constructor(props) {
// pass props to the base constructor:
super(props);
this.movies = props.movies;
this.columns = [];
// Create table headers (the rest is all handled by the plugin)
headers.map((header, i) => {
let isFirstItem = (i == 0);
this.columns.push(
<TableHeaderColumn key={i} isKey={isFirstItem} dataField={header} dataSort={true}>{header}</TableHeaderColumn>
);
});
}
// Runs on render
render() {
return (
<BootstrapTable data={this.movies} hover={true}>
{this.columns}
</BootstrapTable>
);
}
}
/**
* Custom renderer for Marked plugin
* Turning the parsed markdown into an array of objects
*/
objectifyMarkdownNotWomen.heading = function(heading, level) {
lastHeading = heading;
};
@ -38,9 +77,10 @@ objectifyMarkdownNotWomen.table = function(header, body) {
movies = [{}];
};
// Ajax the markdown file with all movie data
client.open('GET', window.location.href + 'README.md');
client.onreadystatechange = function(e) {
// Whipe movies and collections as this'll run a bunch of times
// Wipe movies and collections as this'll run a bunch of times
moviesCollection = [];
movies = [{}];
@ -48,11 +88,33 @@ client.onreadystatechange = function(e) {
// Test markdown:
marked("## Thrillers / Drama\n\n| MOVIE | GENRE | YEAR | RATING |\n|--------------------------------------------------------------------------------------------|---------------------------|------|--------|\n| [WarGames: The Dead Code](http://www.imdb.com/title/tt0865957/) | Thriller/Drama | 2008 | 4.5/10 |\n| [WarGames](http://www.imdb.com/title/tt0086567/) | Thriller/Drama | 1983 | 7.1/10 |\n| [Hackers](http://www.imdb.com/title/tt0113243/) | Crime/Drama | 1995 | 6.2/10 |\n\n## Science Fiction / Fantasy\n\n| MOVIE | GENRE | YEAR | RATING |\n|--------------------------------------------------------------------------------------------|---------------------------|------|--------|\n| [The Matrix](http://www.imdb.com/title/tt0133093/) | Fantasy/Action | 1999 | 8.7/10 |\n| [The Lawnmower Man](http://www.imdb.com/title/tt0104692/) | Fantasy/Action | 1992 | 5.4/10 |", {
*/
marked(client.responseText, {
renderer: objectifyMarkdownNotWomen
}, function() {
console.log(moviesCollection);
document.body.innerHTML = JSON.stringify(moviesCollection);
if (moviesCollection[0] == null) {
return;
}
//console.log(moviesCollection);
//document.body.innerHTML = JSON.stringify(moviesCollection);
// Create JSX for tables of each set of movies in moviesCollection
var moviesCollectionJSX = [];
moviesCollection.map((movies, i) => {
moviesCollectionJSX.push(
<div key={i}>
<h1>{movies.heading}</h1>
<Table movies={movies.movies} />
</div>
)
});
ReactDOM.render(
<div>
{moviesCollectionJSX}
</div>,
document.getElementById("root")
);
});
};
client.send();

6
src/scss/app.scss Normal file
View File

@ -0,0 +1,6 @@
.container-fluid {
max-width: 1440px;
}
th {
text-transform: capitalize;
}

6
update-movies.bat Normal file
View File

@ -0,0 +1,6 @@
@echo off
echo.
echo Pull from master - as it has the remote set by git remote add upstream https://github.com/k4m4/movies-for-hackers.git
echo.
git pull upstream master
pause

4432
yarn.lock Normal file
View File

File diff suppressed because it is too large Load Diff