100 src/components/Search.js
View file
@@ -0,0 +1,100 @@
import React from "react";

import SearchInput from "./children/SearchInput";
import SearchButton from "./children/SearchButton";
import nytApi from "./utils/nytAPI";

class Search extends React.Component {

constructor(props) {
super(props);

var date = new Date();
var dateDay = String(date.getDate());
var dateMonth = String(date.getMonth() + 1);
var dateYear = String(date.getFullYear());

console.log(date);

dateDay = (dateDay.length === 1 )? "0" + dateDay : dateDay;
dateMonth = (dateMonth.length === 1 )? "0" + dateMonth : dateMonth;

var dateString = dateYear + dateMonth + dateDay;
var date_String = dateYear + "-" + dateMonth + "-" + dateDay;

console.log(date_String);

this.state = {
"topic" : "",
"startValue" : "2000-01-01",
"endValue" : date_String,
"start" : "20000101",
"end" : dateString
}
}

searchNYT(){
console.log(this.state);
nytApi.run(this.state.topic, this.state.start, this.state.end);
}

assembleDate(date){
console.log("Ran" + (date));
var dateArr = date.split("-");
var assembled = ""
assembled += dateArr[0] + dateArr[1] + dateArr[2];
return assembled;
}

updateFields(newState){
if(newState.keyTarget === "Topic"){
console.log(newState.newState);
this.setState({
"topic" : newState.newState
})
}
else if(newState.keyTarget === "Start Year"){
this.setState({
startValue : newState.newState
});
const START = this.assembleDate(newState.newState);
console.log(START);
this.setState({
"start" : START
});
}
else if(newState.keyTarget === "End Year"){
this.setState({
endValue : newState.newState
});

const END = this.assembleDate(newState.newState);
console.log(END);
this.setState({
"end" : END
});
}
}

render() {
return (
<div className="row">
<div className="offset-lg-2 col-lg-8 jumbotron">
<h2 id="search-header" className="text-primary text-center">Search</h2>
<hr />
<br />
<SearchInput updateFields={this.updateFields.bind(this)} inputType={"text"} searchLabel={"Topic"} />
<br />
<SearchInput updateFields={this.updateFields.bind(this)} inputType={"date"} searchLabel={"Start Year"} defaultValue={this.state.startValue}/>
<br />
<SearchInput updateFields={this.updateFields.bind(this)} inputType={"date"} searchLabel={"End Year"} defaultValue={this.state.endValue} />
<br />
<SearchButton searchNYT={this.searchNYT.bind(this)}/>
</div>
</div>
);
}
}

// Export the component back for use in other files
export default Search;
29 src/components/children/ResultOutput.js
View file
@@ -0,0 +1,29 @@
import React from "react";

class ResultOutput extends React.Component {

constructor(props) {
super(props);
}

handleClick(e){
console.log("Close " + e);
}

render() {
return (
<div>
<span>{this.props.articleTitle + " "}</span>
<a href={this.props.articleLink}>
<i className="fa fa-external-link" aria-hidden="true" />
</a>
<button onClick={this.handleClick} className="btn btn-success btn-sm float-right fancy">
<i className="fa fa-plus" aria-hidden="true" />
</button>
</div>
);
}
}

// Export the component back for use in other files
export default ResultOutput;
23 src/components/children/SearchButton.js
View file
@@ -0,0 +1,23 @@
import React from "react";

class SearchButton extends React.Component {

constructor(props) {
super(props);
}

handleClick(){
this.props.searchNYT();
}

render() {
return (
<button onClick={this.handleClick.bind(this)} className="btn-primary btn-lg center-block" classID="submit">
Search
</button>
);
}
}

// Export the component back for use in other files
export default SearchButton;
31 src/components/children/SearchInput.js
View file
@@ -0,0 +1,31 @@
import React from "react";

class SearchInput extends React.Component {

constructor(props) {
super(props);
}

handleChange(e){
const newProp = e.target.value;
const key = this.props.searchLabel;
console.log(key + " " + newProp);
const UPDATED = {
"newState" : newProp,
"keyTarget" : key
}
this.props.updateFields(UPDATED);
}

render() {
return (
<div>
<h3 className="text-center">{this.props.searchLabel}</h3>
<input value={this.props.defaultValue} onChange={this.handleChange.bind(this)} type={this.props.inputType} className="form-control text-center" classID={this.props.searchLabel} />
</div>
);
}
}

// Export the component back for use in other files
export default SearchInput;
54 src/components/utils/nytAPI.js
View file
@@ -0,0 +1,54 @@
// Include the axios package for performing HTTP requests (promise based alternative to request)
import axios from "axios";

const APIURL = "https://api.nytimes.com/svc/search/v2/articlesearch.json";
const APIKEY = "e2c1068e37f34f04b6aa4ea695e0c1a0";

// Helper Functions (in this case the only one is runQuery)
const nytApi = (function() {

var runQuery = function(topic, start, end) {

// Figure out the geolocation
const START = start || "20000101";
const END = end || "20170601";

console.log(topic, start, end);

var queryURL = APIURL + "?api-key=" + APIKEY + "&sort=newest";

//Checks each input field for value, if invalid assigns default values: history, limit 5, all years
if (topic === "" || undefined) {
queryURL += "&q=history";
} else {
queryURL += "&q=" + encodeURI(topic);
}

queryURL += "&begin_date=" + start + "&end_date=" + end;

return axios.get(queryURL)
.then((response)=>{
console.log(response.data.response.docs);
var num = 0;
var arrayString = response.data.response.docs.map((data)=>{
console.log(num);
sessionStorage.setItem("resultsTitle" + num, data.headline.main);
sessionStorage.setItem("resultsLink" + num, data.web_url);
num++;
});
setTimeout(() =>{
window.location = window.location.origin + "/result";
}, 1000);
})
.catch((error) =>{
console.log(error);
})
}

return {
run : runQuery
}
})();

// We export the helpers function (which contains getGithubInfo)
export default nytApi;