Results and Result

Author: JasonStoltz

src/components/Result.css

@@ -6,3 +6,17 @@
 .Result + .Result {
  margin-top: 10px;
 }
+
+.Result dl {
+ display: flex;
+ flex-wrap: wrap;
+}
+
+.Result dl dt {
+ width: 20%;
+}
+
+.Result dl dd {
+ width: 80%;
+ margin: 0;
+}

src/components/Result.js

@@ -3,12 +3,27 @@ import React from "react";
 
 import "./Result.css";
 
-function Result({ result }) {
- return <div className="Result">Hi I'm result</div>;
+function Result({ fields, title }) {
+ return (
+ <div className="Result">
+ <h3>{title}</h3>
+ <dl>
+ {Object.keys(fields).map(key => {
+ return (
+ <React.Fragment key={key}>
+ <dt>{`${key}:`}</dt>
+ <dd>{fields[key]}</dd>
+ </React.Fragment>
+ );
+ })}
+ </dl>
+ </div>
+ );
 }
 
 Result.propTypes = {
- result: PropTypes.object.isRequired
+ fields: PropTypes.object.isRequired,
+ title: PropTypes.string.isRequired
 };
 
 export default Result;

src/components/Results.js

@@ -3,20 +3,12 @@ import React from "react";
 
 import "./Results.css";
 
-import Result from "./Result";
-
-function Results({ results }) {
- return (
- <div className="Results">
- {results.map(result => (
- <Result key={result.getRaw("id")} result={result} />
- ))}
- </div>
- );
+function Results({ children }) {
+ return <div className="Results">{children}</div>;
 }
 
 Results.propTypes = {
- results: PropTypes.array.isRequired
+ children: PropTypes.arrayOf(PropTypes.element).isRequired
 };
 
 export default Results;

src/containers/Results.js

@@ -3,6 +3,11 @@ import React, { Component } from "react";
 
 import withAppSearch from "../app-search/withAppSearch";
 import Results from "../components/Results";
+import Result from "../components/Result";
+
+function capitalizeFirstLetter(string) {
+ return string.charAt(0).toUpperCase() + string.slice(1);
+}
 
 class ResultsContainer extends Component {
  static propTypes = {
@@ -12,7 +17,23 @@ class ResultsContainer extends Component {
  render() {
  const { results } = this.props;
 
- return <Results results={results} />;
+ return (
+ <Results>
+ {results.map(result => (
+ <Result
+ fields={{
+ [`${capitalizeFirstLetter("description")}`]: result.getRaw(
+ "description"
+ ),
+ [`${capitalizeFirstLetter("version")}`]: result.getRaw("version")
+ }}
+ key={`result-${result.getRaw("id")}`}
+ result={result}
+ title={result.getRaw("name")}
+ />
+ ))}
+ </Results>
+ );
  }
 }