Question and answer input + preview

npm-debug.log

@@ -0,0 +1,48 @@
+0 info it worked if it ends with ok
+1 verbose cli [ '/Users/krissalvador/.nvm/versions/node/v5.10.1/bin/node',
+1 verbose cli   '/Users/krissalvador/.nvm/versions/node/v5.10.1/bin/npm',
+1 verbose cli   'run',
+1 verbose cli   'start' ]
+2 info using npm@3.8.3
+3 info using node@v5.10.1
+4 verbose run-script [ 'prestart', 'start', 'poststart' ]
+5 info lifecycle react-flashcards@1.0.0~prestart: react-flashcards@1.0.0
+6 silly lifecycle react-flashcards@1.0.0~prestart: no script for prestart, continuing
+7 info lifecycle react-flashcards@1.0.0~start: react-flashcards@1.0.0
+8 verbose lifecycle react-flashcards@1.0.0~start: unsafe-perm in lifecycle true
+9 verbose lifecycle react-flashcards@1.0.0~start: PATH: /Users/krissalvador/.nvm/versions/node/v5.10.1/lib/node_modules/npm/bin/node-gyp-bin:/Users/krissalvador/Personal Projects/react-flashcards/node_modules/.bin:/Users/krissalvador/.nvm/versions/node/v5.10.1/bin:/Users/krissalvador/.rvm/gems/ruby-2.1.2/bin:/Users/krissalvador/.rvm/gems/ruby-2.1.2@global/bin:/Users/krissalvador/.rvm/rubies/ruby-2.1.2/bin:/Users/krissalvador/.nvm/versions/node/v5.10.1/bin:/usr/local/bin:/usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin:/Applications/Postgres.app/Contents/Versions/9.3/bin:/Users/krissalvador/.rvm/bin
+10 verbose lifecycle react-flashcards@1.0.0~start: CWD: /Users/krissalvador/Personal Projects/react-flashcards
+11 silly lifecycle react-flashcards@1.0.0~start: Args: [ '-c', 'node src/server/server.js' ]
+12 silly lifecycle react-flashcards@1.0.0~start: Returned: code: 1  signal: null
+13 info lifecycle react-flashcards@1.0.0~start: Failed to exec start script
+14 verbose stack Error: react-flashcards@1.0.0 start: `node src/server/server.js`
+14 verbose stack Exit status 1
+14 verbose stack     at EventEmitter.<anonymous> (/Users/krissalvador/.nvm/versions/node/v5.10.1/lib/node_modules/npm/lib/utils/lifecycle.js:239:16)
+14 verbose stack     at emitTwo (events.js:100:13)
+14 verbose stack     at EventEmitter.emit (events.js:185:7)
+14 verbose stack     at ChildProcess.<anonymous> (/Users/krissalvador/.nvm/versions/node/v5.10.1/lib/node_modules/npm/lib/utils/spawn.js:24:14)
+14 verbose stack     at emitTwo (events.js:100:13)
+14 verbose stack     at ChildProcess.emit (events.js:185:7)
+14 verbose stack     at maybeClose (internal/child_process.js:850:16)
+14 verbose stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:215:5)
+15 verbose pkgid react-flashcards@1.0.0
+16 verbose cwd /Users/krissalvador/Personal Projects/react-flashcards
+17 error Darwin 15.5.0
+18 error argv "/Users/krissalvador/.nvm/versions/node/v5.10.1/bin/node" "/Users/krissalvador/.nvm/versions/node/v5.10.1/bin/npm" "run" "start"
+19 error node v5.10.1
+20 error npm  v3.8.3
+21 error code ELIFECYCLE
+22 error react-flashcards@1.0.0 start: `node src/server/server.js`
+22 error Exit status 1
+23 error Failed at the react-flashcards@1.0.0 start script 'node src/server/server.js'.
+23 error Make sure you have the latest version of node.js and npm installed.
+23 error If you do, this is most likely a problem with the react-flashcards package,
+23 error not with npm itself.
+23 error Tell the author that this fails on your system:
+23 error     node src/server/server.js
+23 error You can get information on how to open an issue for this project with:
+23 error     npm bugs react-flashcards
+23 error Or if that isn't available, you can get their info via:
+23 error     npm owner ls react-flashcards
+23 error There is likely additional logging output above.
+24 verbose exit [ 1, true ]

src/js/components/flashcard/front/front.js

@@ -5,6 +5,7 @@ export default function Front(props) {
 		<div>
 			Question: { buildFlashcardTags(props.question) }
 			Source: { props.source }
+			<br />
 			Tags: { props.tags }
 		</div>
 	);

src/js/components/question-input/preview.js

@@ -0,0 +1,9 @@
+import { buildFlashcardTags } from "../../../lib/helpers/questions-helpers";
+
+export default function Preview(props) {
+	return (
+		<div>
+			{ buildFlashcardTags(props.content) }
+		</div>
+	);
+}

src/js/components/question-input/question-input.js

@@ -0,0 +1,175 @@
+import Preview from "./preview";
+import "./question-input.scss";
+
+import { SimpleSelect } from "react-selectize";
+import { buildOptions } from "../../../lib/helpers/questions-helpers";
+
+export const TEXTAREA_PLACEHOLDER = "Enter your line here.";
+export const TYPE_OPTIONS = buildOptions(['Code', 'Text']);
+export const VIEW_OPTIONS = buildOptions(['Normal', 'Italics', 'Bolded']);
+
+export default class QuestionInput extends React.Component {
+	constructor(props) {
+	    super(props);
+	    this.typeOptions = TYPE_OPTIONS;
+	    this.viewOptions = VIEW_OPTIONS;
+	    this.textareaPlaceholder = TEXTAREA_PLACEHOLDER;
+
+	    this.state = {
+	    	questionText: "",
+	    	questionType: "Code",
+	    	questionStyle: null,
+	    	answerText: "",
+	    	answerType: "Code",
+	    	answerStyle: null,
+	    	questionArray: [],
+	    	answerArray: []
+	    }
+	}
+
+	setQuestionState(e) {
+		this.setState({ questionText: e.target.value });
+	}
+
+	setAnswerState(e) {
+		this.setState({ answerText: e.target.value });
+	}
+
+	updateQuestionType(value) {
+		this.setState({ questionType: value })
+	}
+
+	addQuestionLine() {
+		let questionType = this.state.questionType === "Code" ? "pre" : "div";
+		let newQuestion = {
+			tag: questionType,
+			class: questionType === "div" ? "text-question" : "code-question",
+			content: (this.state.questionText)
+		};
+
+		this.setState({ questionArray: this.state.questionArray.concat([newQuestion])})
+		this.setState({ questionText: "" })
+		document.getElementsByName("question-textarea").value = "";
+	}
+
+	addAnswerLine() {
+		let answerType = this.state.questionType === "Code" ? "pre" : "div";
+		let newAnswer = {
+			tag: answerType,
+			class: answerType === "div" ? "text-answer" : "code-answer",
+			content: (this.state.answerText)
+		};
+
+		this.setState({ answerArray: this.state.answerArray.concat([newAnswer])})
+		this.setState({ answerText: "" })
+		document.getElementsByName("answer-textarea").value = "";
+	}
+
+	handleTextAreaKeydown(e) {
+		if (e.keyCode === 9) {
+			e.preventDefault();
+
+			let textarea = e.target;
+			let start    = textarea.selectionStart;
+			let end      = textarea.selectionEnd;
+			let value    = textarea.value;
+
+			textarea.value = value.substring(0, start) + "\t" + value.substring(end);
+
+			textarea.selectionEnd = start + 1;
+		}
+	}
+
+	render() {
+		return (
+		<div>
+			<div className="question-input__container">
+
+				 <div>
+				  	<h1>Question Info</h1>
+				  	{this.questionText}
+					<div class="question">
+						<textarea
+							name="question-textarea"
+							placeholder={ this.textareaPlaceholder }
+							onKeyDown={ this.handleTextAreaKeydown }
+							defaultValue={ this.state.questionText }
+							onChange={ this.setQuestionState.bind(this) }
+							 />
+						<br />
+					    <span>Element Type</span>
+					    <SimpleSelect
+					    	theme="default"
+					    	placeholder="Select Element Type"
+					    	options={ this.typeOptions }
+					    	defaultValue={ this.typeOptions[0] }
+					    	onValueChange={ value => this.updateQuestionType(value) } />
+						<br/>
+						<span>Element Style</span>
+						<SimpleSelect
+							theme="default"
+							placeholder="Select Element Style"
+							options={ this.viewOptions }
+							defaultValue={ this.viewOptions[0] } />
+						<br/>
+						<br/>
+					</div>
+
+					<button
+						id="question"
+						onClick={ this.addQuestionLine.bind(this) }>
+						Add Line
+					</button>
+				</div>
+
+				<div>
+					<h1>Answer Info</h1>
+					<div class="answer">
+					  	<textarea
+							name="answer-textarea"
+							placeholder={ this.textareaPlaceholder }
+							onKeyDown={ this.handleTextAreaKeydown }
+							defaultValue={ this.state.answerText }
+							onChange={ this.setAnswerState.bind(this) }
+							 />
+						<br />
+					    <span>Element Type</span>
+					    <SimpleSelect
+					    	theme="default"
+					    	placeholder="Select Element Type"
+					    	options={ this.typeOptions }
+					    	defaultValue={ this.typeOptions[0] } />
+						<br/>
+						<span>Element Style</span>
+						<SimpleSelect
+							theme="default"
+							placeholder="Select Element Style"
+							options={ this.viewOptions }
+							defaultValue={ this.viewOptions[0] } />
+						<br/>
+						<br/>
+					</div>
+					<button
+						id="answer"
+						onClick={ this.addAnswerLine.bind(this) }>
+						Add Line
+					</button>
+				</div>
+
+			</div>
+
+			<div className="question-input__preview">
+				<Preview
+					content={ this.state.questionArray }
+				/>
+			</div>
+
+			<div className="question-input__preview">
+				<Preview
+					content={ this.state.answerArray }
+				/>
+			</div>
+		</div>
+		)
+	}
+}

src/js/components/question-input/question-input.scss

@@ -0,0 +1,10 @@
+.question-input__container {
+	display: flex;
+	justify-content: space-around;
+}
+
+.question-input__preview {
+	display: flex;
+	justify-content: space-around;
+	width: 50%;
+}

src/js/components/react-flashcards.js

@@ -1,10 +1,16 @@
+// Libs
+import keydown from "react-keydown";
 import "./react-flashcards.scss";
 import { connect } from 'react-redux';
+import questions from "../../lib/questions";
+
+// Components
 import FlashcardOptions from "./flashcard-options/flashcard-options";
 import FlashcardView from "./flashcard-view/flashcard-view";
-import questions from "../../lib/questions";
+import QuestionInput from "./question-input/question-input";
+
+// Helpers
 import { getFilteredFlashcards } from "../../lib/helpers/questions-helpers";
-import keydown from "react-keydown";
 import {
 	updateCardSide,
 	getNextCard,
@@ -13,17 +19,20 @@ import {
 
 export default class ReactFlashcards extends React.Component {
 	@keydown(32)
-	flipCard() {
+	flipCard(e) {
+		e.preventDefault();
 		this.props.dispatch(updateCardSide());
 	}
 
 	@keydown([39, 40])
-	nextCard() {
+	nextCard(e) {
+		e.preventDefault();
 		this.props.dispatch(getNextCard(getFilteredFlashcards(this.props.options, questions).length));
 	}
 
 	@keydown([37, 38])
-	previousCard() {
+	previousCard(e) {
+		e.preventDefault();
 		this.props.dispatch(getPreviousCard());
 	}
 
@@ -42,6 +51,10 @@ export default class ReactFlashcards extends React.Component {
 					options={ this.props.options }
 					cardSide={ this.props.ui.cardSide }
 					currentCardIndex={ this.props.ui.currentCardIndex }/>
+				<QuestionInput
+					dispatch={ this.props.dispatch }
+					options={ this.props.options }
+				/>
 			</div>
 		);
 	}

src/lib/questions/index.js

@@ -1,4 +1,4 @@
 import crackingTheCode from "./cracking-the-code/index";
 import frontendInterview from "./frontend-interview";
 
-module.exports = [...crackingTheCode ];
+module.exports = [...crackingTheCode];