Group Finder Beta!

1 files changed, 77 insertions, 0 deletions

diff --git a/src/SearchResults.js b/src/SearchResults.js
new file mode 100644
index 0000000..030c448
--- /dev/null
+++ b/src/SearchResults.js
@@ -0,0 +1,77 @@
+import React, { Component } from 'react';
+import './SearchResults.css';
+
+class SearchResult extends Component {
+
+  badge(f) {
+    if (this.props.data.udf[f]) {
+      return (
+        <span className="badge">
+          {this.props.data.udf[f].label}{' '}
+        </span>
+      );
+    } else {
+      return null;
+    }
+  }
+
+  image() {
+    const src = this.props.data['image-url'];
+    if (src) {
+      return (<img src={src} alt="" />);
+    } else {
+      return null;
+    }
+  }
+
+  render() {
+
+    return (
+      <div className="Result">
+        <h3>{this.props.data.name}</h3>
+
+        <div className="image">
+          {this.image()}
+        </div>
+
+        <div className="details">
+          {this.badge('udf_3')}
+          {this.badge('udf_2')}
+          {this.badge('udf_1')}
+          {this.props.data.childcare ? (<span className="badge">Childcare</span>) : null}
+
+          <p>{this.props.data.description}</p>
+
+          <p>
+            <span className="label">Day</span>: {this.props.data.meetingDay.label}{" "}
+            <span className="label">Time</span>: {this.props.data.meetingTime.label}{" "}
+            <span className="label">Location</span>: {this.props.data.area.label}
+          </p>
+        </div>
+      </div>
+    );
+  }
+
+}
+
+class SearchResults extends Component {
+
+  render() {
+    let results = this.props.results.map((result) => {
+      return (
+        <SearchResult key={result.id} data={result}></SearchResult>
+      );
+    });
+
+    return (
+      <div className="SearchResults">
+        <p className="result-count">Found {results.length} groups</p>
+        {results}
+      </div>
+    );
+  }
+
+}
+
+export default SearchResults;
+