Skip to content

Commit e4567c9

Browse files
tshaddixtshaddix
committed
Basic formatting
1 parent 663133a commit e4567c9

File tree

11 files changed

+176
-57
lines changed

11 files changed

+176
-57
lines changed

‎example/bundle.js‎

Lines changed: 44 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -18776,7 +18776,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
1877618776
var React = __webpack_require__(1);
1877718777
var types_1 = __webpack_require__(16);
1877818778
var GiphyClient_1 = __webpack_require__(17);
18779-
var SearchInput_1 = __webpack_require__(33);
18779+
var QueryForm_1 = __webpack_require__(33);
1878018780
var Suggestions_1 = __webpack_require__(34);
1878118781
var SearchResults_1 = __webpack_require__(36);
1878218782
var Selector = /** @class */ (function (_super) {
@@ -18801,6 +18801,7 @@ var Selector = /** @class */ (function (_super) {
1880118801
* Fired when the query value changes for the
1880218802
* search
1880318803
* @param q string
18804+
* @param cb func optional callback for when state is done updating
1880418805
*/
1880518806
Selector.prototype.onQueryChange = function (q, cb) {
1880618807
// Update the query
@@ -18843,16 +18844,18 @@ var Selector = /** @class */ (function (_super) {
1884318844
*/
1884418845
Selector.prototype.onSuggestionSelected = function (q) {
1884518846
var _this = this;
18847+
// Update query and wait for state change to finish
18848+
// before executing query
1884618849
this.onQueryChange(q, function () {
1884718850
_this.onQueryExecute();
1884818851
});
1884918852
};
1885018853
Selector.prototype.render = function () {
1885118854
var _a = this.state, query = _a.query, searchResult = _a.searchResult, isPending = _a.isPending, searchError = _a.searchError;
18852-
var _b = this.props, suggestions = _b.suggestions, onGifSelected = _b.onGifSelected;
18855+
var _b = this.props, suggestions = _b.suggestions, onGifSelected = _b.onGifSelected, queryInputPlaceholder = _b.queryInputPlaceholder;
1885318856
var showSuggestions = !!suggestions.length && !searchResult && !isPending && !searchError;
1885418857
return (React.createElement("div", null,
18855-
React.createElement(SearchInput_1.SearchInput, { onQueryChange: this.onQueryChange, onQueryExecute: this.onQueryExecute, queryValue: query }),
18858+
React.createElement(QueryForm_1.QueryForm, { queryInputPlaceholder: queryInputPlaceholder, onQueryChange: this.onQueryChange, onQueryExecute: this.onQueryExecute, queryValue: query }),
1885618859
showSuggestions && (React.createElement(Suggestions_1.Suggestions, { suggestions: suggestions, onSuggestionSelected: this.onSuggestionSelected })),
1885718860
isPending && React.createElement("div", null, "Loading"),
1885818861
!isPending && !!searchError && React.createElement("div", null,
@@ -18865,6 +18868,7 @@ var Selector = /** @class */ (function (_super) {
1886518868
rating: types_1.Rating.G,
1886618869
sort: types_1.ResultSort.Relevant,
1886718870
limit: 20,
18871+
queryInputPlaceholder: 'Search for gifs (e.g. "dogs")',
1886818872
suggestions: []
1886918873
};
1887018874
return Selector;
@@ -22866,9 +22870,9 @@ var __extends = (this && this.__extends) || (function () {
2286622870
})();
2286722871
Object.defineProperty(exports, "__esModule", { value: true });
2286822872
var React = __webpack_require__(1);
22869-
var SearchInput = /** @class */ (function (_super) {
22870-
__extends(SearchInput, _super);
22871-
function SearchInput(props) {
22873+
var QueryForm = /** @class */ (function (_super) {
22874+
__extends(QueryForm, _super);
22875+
function QueryForm(props) {
2287222876
var _this = _super.call(this, props) || this;
2287322877
_this.onValueChange = _this.onValueChange.bind(_this);
2287422878
_this.onSubmit = _this.onSubmit.bind(_this);
@@ -22878,27 +22882,27 @@ var SearchInput = /** @class */ (function (_super) {
2287822882
* Fires when the search input box has changed value
2287922883
* @param event
2288022884
*/
22881-
SearchInput.prototype.onValueChange = function (event) {
22885+
QueryForm.prototype.onValueChange = function (event) {
2288222886
this.props.onQueryChange(event.target.value || "");
2288322887
};
2288422888
/**
2288522889
* Fires when the form has been submitted (via "enter" or button)
2288622890
* @param event
2288722891
*/
22888-
SearchInput.prototype.onSubmit = function (event) {
22892+
QueryForm.prototype.onSubmit = function (event) {
2288922893
event.preventDefault();
2289022894
this.props.onQueryExecute();
2289122895
};
22892-
SearchInput.prototype.render = function () {
22893-
var queryValue = this.props.queryValue;
22896+
QueryForm.prototype.render = function () {
22897+
var _a = this.props, queryValue = _a.queryValue, queryInputPlaceholder = _a.queryInputPlaceholder;
2289422898
return (React.createElement("div", null,
2289522899
React.createElement("form", { onSubmit: this.onSubmit },
22896-
React.createElement("input", { value: queryValue, type: "text", onChange: this.onValueChange }),
22900+
React.createElement("input", { value: queryValue, type: "text", onChange: this.onValueChange, placeholder: queryInputPlaceholder }),
2289722901
React.createElement("button", { type: "submit" }, "Search"))));
2289822902
};
22899-
return SearchInput;
22903+
return QueryForm;
2290022904
}(React.Component));
22901-
exports.SearchInput = SearchInput;
22905+
exports.QueryForm = QueryForm;
2290222906

2290322907

2290422908
/***/ }),
@@ -22996,9 +23000,32 @@ var SearchResults = /** @class */ (function (_super) {
2299623000
function SearchResults(props) {
2299723001
return _super.call(this, props) || this;
2299823002
}
23003+
SearchResults.prototype.getColumnGifs = function (gifObjects) {
23004+
// todo: Potentially make this an argument/prop
23005+
var numColumns = 3;
23006+
var columnsGifs = [];
23007+
var c = 0;
23008+
// fill column array with arrays representing column contents
23009+
while (c < numColumns) {
23010+
columnsGifs.push([]);
23011+
c++;
23012+
}
23013+
var j = 0;
23014+
// sort gifs into columns
23015+
gifObjects.forEach(function (gifObject) {
23016+
columnsGifs[j].push(gifObject);
23017+
j++;
23018+
if (j === numColumns) {
23019+
j = 0;
23020+
}
23021+
});
23022+
return columnsGifs;
23023+
};
2299923024
SearchResults.prototype.render = function () {
2300023025
var _a = this.props, gifObjects = _a.gifObjects, onGifSelected = _a.onGifSelected;
23001-
return (React.createElement("div", null, gifObjects.map(function (gifObject) { return (React.createElement(SearchResult_1.SearchResult, { key: gifObject.id, gifObject: gifObject, onSelected: onGifSelected })); })));
23026+
var columnGifs = this.getColumnGifs(gifObjects);
23027+
return (React.createElement("ul", null, columnGifs.map(function (column, c) { return (React.createElement("li", { key: "column-" + c },
23028+
React.createElement("ul", null, column.map(function (gifObject) { return (React.createElement(SearchResult_1.SearchResult, { key: gifObject.id, gifObject: gifObject, onSelected: onGifSelected })); })))); })));
2300223029
};
2300323030
return SearchResults;
2300423031
}(React.Component));
@@ -23036,15 +23063,15 @@ var SearchResult = /** @class */ (function (_super) {
2303623063
};
2303723064
SearchResult.prototype.render = function () {
2303823065
var gifObject = this.props.gifObject;
23039-
console.dir(gifObject);
23040-
var sourceImage = gifObject.images.fixed_height_small;
23066+
var sourceImage = gifObject.images.fixed_width;
2304123067
var style = {
2304223068
width: sourceImage.width + "px",
2304323069
height: sourceImage.height + "px",
2304423070
background: "url(" + sourceImage.gif_url + ")",
2304523071
display: "block"
2304623072
};
23047-
return React.createElement("a", { href: "javascript:void(0)", onClick: this.onClick, style: style });
23073+
return (React.createElement("li", null,
23074+
React.createElement("a", { href: "javascript:void(0)", onClick: this.onClick, style: style })));
2304823075
};
2304923076
return SearchResult;
2305023077
}(React.Component));

‎example/bundle.js.map‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎lib/index.js‎

Lines changed: 44 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -17774,7 +17774,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
1777417774
var React = __webpack_require__(1);
1777517775
var types_1 = __webpack_require__(16);
1777617776
var GiphyClient_1 = __webpack_require__(17);
17777-
var SearchInput_1 = __webpack_require__(33);
17777+
var QueryForm_1 = __webpack_require__(33);
1777817778
var Suggestions_1 = __webpack_require__(34);
1777917779
var SearchResults_1 = __webpack_require__(36);
1778017780
var Selector = /** @class */ (function (_super) {
@@ -17799,6 +17799,7 @@ var Selector = /** @class */ (function (_super) {
1779917799
* Fired when the query value changes for the
1780017800
* search
1780117801
* @param q string
17802+
* @param cb func optional callback for when state is done updating
1780217803
*/
1780317804
Selector.prototype.onQueryChange = function (q, cb) {
1780417805
// Update the query
@@ -17841,16 +17842,18 @@ var Selector = /** @class */ (function (_super) {
1784117842
*/
1784217843
Selector.prototype.onSuggestionSelected = function (q) {
1784317844
var _this = this;
17845+
// Update query and wait for state change to finish
17846+
// before executing query
1784417847
this.onQueryChange(q, function () {
1784517848
_this.onQueryExecute();
1784617849
});
1784717850
};
1784817851
Selector.prototype.render = function () {
1784917852
var _a = this.state, query = _a.query, searchResult = _a.searchResult, isPending = _a.isPending, searchError = _a.searchError;
17850-
var _b = this.props, suggestions = _b.suggestions, onGifSelected = _b.onGifSelected;
17853+
var _b = this.props, suggestions = _b.suggestions, onGifSelected = _b.onGifSelected, queryInputPlaceholder = _b.queryInputPlaceholder;
1785117854
var showSuggestions = !!suggestions.length && !searchResult && !isPending && !searchError;
1785217855
return (React.createElement("div", null,
17853-
React.createElement(SearchInput_1.SearchInput, { onQueryChange: this.onQueryChange, onQueryExecute: this.onQueryExecute, queryValue: query }),
17856+
React.createElement(QueryForm_1.QueryForm, { queryInputPlaceholder: queryInputPlaceholder, onQueryChange: this.onQueryChange, onQueryExecute: this.onQueryExecute, queryValue: query }),
1785417857
showSuggestions && (React.createElement(Suggestions_1.Suggestions, { suggestions: suggestions, onSuggestionSelected: this.onSuggestionSelected })),
1785517858
isPending && React.createElement("div", null, "Loading"),
1785617859
!isPending && !!searchError && React.createElement("div", null,
@@ -17863,6 +17866,7 @@ var Selector = /** @class */ (function (_super) {
1786317866
rating: types_1.Rating.G,
1786417867
sort: types_1.ResultSort.Relevant,
1786517868
limit: 20,
17869+
queryInputPlaceholder: 'Search for gifs (e.g. "dogs")',
1786617870
suggestions: []
1786717871
};
1786817872
return Selector;
@@ -21864,9 +21868,9 @@ var __extends = (this && this.__extends) || (function () {
2186421868
})();
2186521869
Object.defineProperty(exports, "__esModule", { value: true });
2186621870
var React = __webpack_require__(1);
21867-
var SearchInput = /** @class */ (function (_super) {
21868-
__extends(SearchInput, _super);
21869-
function SearchInput(props) {
21871+
var QueryForm = /** @class */ (function (_super) {
21872+
__extends(QueryForm, _super);
21873+
function QueryForm(props) {
2187021874
var _this = _super.call(this, props) || this;
2187121875
_this.onValueChange = _this.onValueChange.bind(_this);
2187221876
_this.onSubmit = _this.onSubmit.bind(_this);
@@ -21876,27 +21880,27 @@ var SearchInput = /** @class */ (function (_super) {
2187621880
* Fires when the search input box has changed value
2187721881
* @param event
2187821882
*/
21879-
SearchInput.prototype.onValueChange = function (event) {
21883+
QueryForm.prototype.onValueChange = function (event) {
2188021884
this.props.onQueryChange(event.target.value || "");
2188121885
};
2188221886
/**
2188321887
* Fires when the form has been submitted (via "enter" or button)
2188421888
* @param event
2188521889
*/
21886-
SearchInput.prototype.onSubmit = function (event) {
21890+
QueryForm.prototype.onSubmit = function (event) {
2188721891
event.preventDefault();
2188821892
this.props.onQueryExecute();
2188921893
};
21890-
SearchInput.prototype.render = function () {
21891-
var queryValue = this.props.queryValue;
21894+
QueryForm.prototype.render = function () {
21895+
var _a = this.props, queryValue = _a.queryValue, queryInputPlaceholder = _a.queryInputPlaceholder;
2189221896
return (React.createElement("div", null,
2189321897
React.createElement("form", { onSubmit: this.onSubmit },
21894-
React.createElement("input", { value: queryValue, type: "text", onChange: this.onValueChange }),
21898+
React.createElement("input", { value: queryValue, type: "text", onChange: this.onValueChange, placeholder: queryInputPlaceholder }),
2189521899
React.createElement("button", { type: "submit" }, "Search"))));
2189621900
};
21897-
return SearchInput;
21901+
return QueryForm;
2189821902
}(React.Component));
21899-
exports.SearchInput = SearchInput;
21903+
exports.QueryForm = QueryForm;
2190021904

2190121905

2190221906
/***/ }),
@@ -21994,9 +21998,32 @@ var SearchResults = /** @class */ (function (_super) {
2199421998
function SearchResults(props) {
2199521999
return _super.call(this, props) || this;
2199622000
}
22001+
SearchResults.prototype.getColumnGifs = function (gifObjects) {
22002+
// todo: Potentially make this an argument/prop
22003+
var numColumns = 3;
22004+
var columnsGifs = [];
22005+
var c = 0;
22006+
// fill column array with arrays representing column contents
22007+
while (c < numColumns) {
22008+
columnsGifs.push([]);
22009+
c++;
22010+
}
22011+
var j = 0;
22012+
// sort gifs into columns
22013+
gifObjects.forEach(function (gifObject) {
22014+
columnsGifs[j].push(gifObject);
22015+
j++;
22016+
if (j === numColumns) {
22017+
j = 0;
22018+
}
22019+
});
22020+
return columnsGifs;
22021+
};
2199722022
SearchResults.prototype.render = function () {
2199822023
var _a = this.props, gifObjects = _a.gifObjects, onGifSelected = _a.onGifSelected;
21999-
return (React.createElement("div", null, gifObjects.map(function (gifObject) { return (React.createElement(SearchResult_1.SearchResult, { key: gifObject.id, gifObject: gifObject, onSelected: onGifSelected })); })));
22024+
var columnGifs = this.getColumnGifs(gifObjects);
22025+
return (React.createElement("ul", null, columnGifs.map(function (column, c) { return (React.createElement("li", { key: "column-" + c },
22026+
React.createElement("ul", null, column.map(function (gifObject) { return (React.createElement(SearchResult_1.SearchResult, { key: gifObject.id, gifObject: gifObject, onSelected: onGifSelected })); })))); })));
2200022027
};
2200122028
return SearchResults;
2200222029
}(React.Component));
@@ -22034,15 +22061,15 @@ var SearchResult = /** @class */ (function (_super) {
2203422061
};
2203522062
SearchResult.prototype.render = function () {
2203622063
var gifObject = this.props.gifObject;
22037-
console.dir(gifObject);
22038-
var sourceImage = gifObject.images.fixed_height_small;
22064+
var sourceImage = gifObject.images.fixed_width;
2203922065
var style = {
2204022066
width: sourceImage.width + "px",
2204122067
height: sourceImage.height + "px",
2204222068
background: "url(" + sourceImage.gif_url + ")",
2204322069
display: "block"
2204422070
};
22045-
return React.createElement("a", { href: "javascript:void(0)", onClick: this.onClick, style: style });
22071+
return (React.createElement("li", null,
22072+
React.createElement("a", { href: "javascript:void(0)", onClick: this.onClick, style: style })));
2204622073
};
2204722074
return SearchResult;
2204822075
}(React.Component));

‎lib/index.js.map‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,9 +22,11 @@
2222
"devDependencies": {
2323
"@types/react-dom": "^16.0.3",
2424
"awesome-typescript-loader": "^3.4.1",
25+
"css-loader": "^0.28.7",
2526
"prettier": "^1.9.2",
2627
"react-dom": "^16.2.0",
2728
"source-map-loader": "^0.2.3",
29+
"style-loader": "^0.19.1",
2830
"typescript": "^2.6.2",
2931
"webpack": "^3.10.0"
3032
},

‎src/components/SearchInput.tsx‎ renamed to ‎src/components/QueryForm.tsx‎

Lines changed: 11 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,14 @@
11
import * as React from "react";
22

3-
export interface ISearchInputProps {
3+
export interface IQueryFormProps {
44
onQueryChange: (q: string) => void;
55
onQueryExecute: () => void;
6+
queryInputPlaceholder: string;
67
queryValue: string;
78
}
89

9-
export class SearchInput extends React.Component<ISearchInputProps, {}> {
10-
constructor(props: ISearchInputProps) {
10+
export class QueryForm extends React.Component<IQueryFormProps, {}> {
11+
constructor(props: IQueryFormProps) {
1112
super(props);
1213

1314
this.onValueChange = this.onValueChange.bind(this);
@@ -32,12 +33,17 @@ export class SearchInput extends React.Component<ISearchInputProps, {}> {
3233
}
3334

3435
public render(): JSX.Element {
35-
const { queryValue } = this.props;
36+
const { queryValue, queryInputPlaceholder } = this.props;
3637

3738
return (
3839
<div>
3940
<form onSubmit={this.onSubmit}>
40-
<input value={queryValue} type="text" onChange={this.onValueChange} />
41+
<input
42+
value={queryValue}
43+
type="text"
44+
onChange={this.onValueChange}
45+
placeholder={queryInputPlaceholder}
46+
/>
4147
<button type="submit">Search</button>
4248
</form>
4349
</div>

‎src/components/SearchResult.tsx‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ export class SearchResult extends React.Component<ISearchResultProps, {}> {
2323
public render(): JSX.Element {
2424
const { gifObject } = this.props;
2525

26-
const sourceImage: IGifImage = gifObject.images.fixed_height_small;
26+
const sourceImage: IGifImage = gifObject.images.fixed_width;
2727

2828
const style = {
2929
width: `${sourceImage.width}px`,
@@ -32,6 +32,10 @@ export class SearchResult extends React.Component<ISearchResultProps, {}> {
3232
display: "block"
3333
};
3434

35-
return <a href="javascript:void(0)" onClick={this.onClick} style={style} />;
35+
return (
36+
<li>
37+
<a href="javascript:void(0)" onClick={this.onClick} style={style} />
38+
</li>
39+
);
3640
}
3741
}

0 commit comments

Comments
 (0)