Skip to content

Commit

Permalink
complete recording
Browse files Browse the repository at this point in the history
  • Loading branch information
David Katz authored and David Katz committed Jun 18, 2017
1 parent 978022c commit 20f79c7
Show file tree
Hide file tree
Showing 5,011 changed files with 245,930 additions and 5 deletions.
The diff you're trying to view is too large. We only load the first 3000 changed files.
23 changes: 23 additions & 0 deletions generator/.gitignore
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
# See https://help.github.com/ignore-files/ for more about ignoring files.

# dependencies
/node_modules

# testing
/coverage

# production
/build

# misc
.DS_Store
.env.local
.env.development.local
.env.test.local
.env.production.local

npm-debug.log*
yarn-debug.log*
yarn-error.log*

./src/actions/secrets.js
1,901 changes: 1,901 additions & 0 deletions generator/README.md
View file

Large diffs are not rendered by default.

22 changes: 22 additions & 0 deletions generator/package.json
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
{
"name": "generator",
"version": "0.1.0",
"private": true,
"devDependencies": {
"react-scripts": "1.0.7"
},
"dependencies": {
"react": "^15.6.1",
"react-bootstrap": "^0.31.0",
"react-dom": "^15.6.1",
"react-redux": "^5.0.5",
"redux": "^3.7.0",
"redux-thunk": "^2.2.0"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
}
}
Binary file added generator/public/favicon.ico
View file
Binary file not shown.
42 changes: 42 additions & 0 deletions generator/public/index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="theme-color" content="#000000">
<!--
manifest.json provides metadata used when your web app is added to the
homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
<!--
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<title>React App</title>
</head>
<body>
<noscript>
You need to enable JavaScript to run this app.
</noscript>
<div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
</body>
</html>
15 changes: 15 additions & 0 deletions generator/public/manifest.json
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
{
"short_name": "React App",
"name": "Create React App Sample",
"icons": [
{
"src": "favicon.ico",
"sizes": "192x192",
"type": "image/png"
}
],
"start_url": "./index.html",
"display": "standalone",
"theme_color": "#000000",
"background_color": "#ffffff"
}
58 changes: 58 additions & 0 deletions generator/src/actions/index.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,58 @@
import { username, password } from './secrets';

export const RECEIVE_MEMES = 'RECEIVE_MEMES';
export const NEW_MEME = 'NEW_MEME';

function receiveMemes(json) {
const { memes } = json.data;

return {
type: RECEIVE_MEMES,
memes
}
}

function fetchMemesJson() {
return fetch('https://api.imgflip.com/get_memes')
.then(response => response.json())
}

export function fetchMemes() {
return function(dispatch) {
return fetchMemesJson()
.then(json => dispatch(receiveMemes(json)))
}
}

function newMeme(meme) {
return {
type: NEW_MEME,
meme
}
}

function postMemeJson(params) {
params["username"] = username;
params["password"] = password;

const bodyParams = Object.keys(params).map(key => {
return encodeURIComponent(key) + '=' + encodeURIComponent(params[key])
}).join('&');

console.log('bodyParams', bodyParams);

return fetch('https://api.imgflip.com/caption_image', {
method: "POST",
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
},
body: bodyParams
}).then(response => response.json());
}

export function createMeme(new_meme_object) {
return function(dispatch) {
return postMemeJson(new_meme_object)
.then(new_meme => dispatch(newMeme(new_meme)))
}
}
4 changes: 4 additions & 0 deletions generator/src/actions/secrets.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
const username = 'david_captioner';
const password = 'captioner_test';

export { username, password };
69 changes: 69 additions & 0 deletions generator/src/components/App.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,69 @@
import React, { Component } from 'react';
import { connect } from 'react-redux';
import '../styles/index.css';

import { Form, FormGroup, FormControl, ControlLabel } from 'react-bootstrap';
import MemeItem from './MemeItem';
import MyMemes from './MyMemes';

class App extends Component {
constructor() {
super();

this.state = {
memeLimit: 10,
text0: '',
text1: ''
}
}

render() {
return (
<div>
<h2><u>Welcome to the Meme Generator!</u></h2>
<MyMemes />
<h4><i>Write Some Text</i></h4>
<Form inline>
<FormGroup>
<ControlLabel>Top</ControlLabel>
{' '}
<FormControl
type="text"
onChange={event => this.setState({text0: event.target.value})}
></FormControl>
</FormGroup>
{' '}
<FormGroup>
<ControlLabel>Bottom</ControlLabel>
{' '}
<FormControl
type="text"
onChange={event => this.setState({text1: event.target.value})}
></FormControl>
</FormGroup>
</Form>
{
this.props.memes.slice(0, this.state.memeLimit).map((meme, index) => {
return (
<MemeItem
key={index}
meme={meme}
text0={this.state.text0}
text1={this.state.text1}
/>
)
})
}
<div className="meme-button" onClick={() => {
this.setState({memeLimit: this.state.memeLimit+10})
}}>Load 10 more memes...</div>
</div>
)
}
}

function mapStateToProps(state) {
return state;
}

export default connect(mapStateToProps, null)(App);
45 changes: 45 additions & 0 deletions generator/src/components/MemeItem.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,45 @@
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { createMeme } from '../actions';

class MemeItem extends Component {
constructor() {
super();

this.state = {
hovered: false
}
}

postMeme() {
const { text0, text1 } = this.props;
const memeObj = {
template_id: this.props.meme.id,
text0,
text1
}
this.props.createMeme(memeObj);
}

render() {
return (
<div
className="meme-item"
onMouseEnter={() => this.setState({ hovered: true })}
onMouseLeave={() => this.setState({ hovered: false })}
onClick={() => this.postMeme()}
>
<img
src={this.props.meme.url}
alt={this.props.meme.name}
className={ this.state.hovered ? "meme-img darken-img" : "meme-img"}
/>
<p className={ this.state.hovered ? "meme-txt" : "no-txt" }>
{this.props.meme.name}
</p>
</div>
)
}
};

export default connect(null, { createMeme })(MemeItem);
31 changes: 31 additions & 0 deletions generator/src/components/MyMemes.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
import React, { Component } from 'react';
import { connect } from 'react-redux';

class MyMemes extends Component {
render() {
return (
<div>
{
this.props.myMemes.map((meme, index) => {
return (
<img
key={index}
src={meme.data.url}
alt="my-meme"
className="my-meme-img"
/>
)
})
}
</div>
)
}
}

function mapStateToProps(state) {
return {
myMemes: state.myMemes
}
}

export default connect(mapStateToProps, null)(MyMemes);
19 changes: 19 additions & 0 deletions generator/src/index.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/App';

import { createStore, applyMiddleware } from 'redux';
import { Provider } from 'react-redux';
import rootReducer from './reducers';
import thunk from 'redux-thunk';

import { fetchMemes } from './actions';

const store = createStore(rootReducer, applyMiddleware(thunk));
store.subscribe(() => console.log('store', store.getState()));
store.dispatch(fetchMemes());

ReactDOM.render(
<Provider store={store}>
<App />
</Provider>, document.getElementById('root'));
25 changes: 25 additions & 0 deletions generator/src/reducers/index.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
import { combineReducers } from 'redux';
import { RECEIVE_MEMES, NEW_MEME } from '../actions';

function memes(state = [], action) {
switch(action.type) {
case RECEIVE_MEMES:
return action.memes;
default:
return state;
}
}

function myMemes(state = [], action) {
switch(action.type) {
case NEW_MEME:
state = [...state, action.meme];
return state;
default:
return state;
}
}

const rootReducer = combineReducers({ memes, myMemes });

export default rootReducer;
Loading

0 comments on commit 20f79c7

Please sign in to comment.