GIPHY searches working

force-app/main/default/aura/PostGIFToChatter/PostGIFToChatter.cmp

@@ -1,3 +1,5 @@
-<aura:component implements="force:appHostable">
+<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes">
+
+  Post GIF to Chatter
 
 </aura:component>	

force-app/main/default/aura/SearchGIPHY/SearchGIPHY.cmp

@@ -1,3 +1,45 @@
-<aura:component implements="force:appHostable">
+<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes">
 
-</aura:component>	
+  <aura:attribute name="searchTerms" type="String" />
+  <aura:attribute name="results" type="Map" />
+
+  <aura:handler name="init" value="{!this}" action="{!c.doInit}" />
+
+  <ltng:require scripts="{!join(',', 
+      $Resource.jquery331, 
+      $Resource.GIPHY)}" afterScriptsLoaded="{!c.afterScriptsLoaded}" />
+
+  <lightning:card>
+
+    <lightning:layout verticalAlign="end" class="path-to-zip slds-m-around--small">
+      <lightning:layoutitem flexibility="grow">
+        <span onkeypress="{!c.keyCheck}">
+          <lightning:input aura:id="searchTerms" type="text" label="Search Terms" value="{!v.searchTerms}" />
+        </span>
+      </lightning:layoutitem>
+      <lightning:layoutitem>
+        <lightning:button onclick="{!c.search}">Search</lightning:button>
+      </lightning:layoutitem>
+    </lightning:layout>
+
+  </lightning:card>
+
+  <lightning:card>
+    <lightning:layout horizontalAlign="center" multipleRows="true">
+
+      <aura:iteration items="{!v.results}" var="result">
+        <lightning:layoutItem padding="around-small" size="8" smallDeviceSize="6" mediumDeviceSize="4" largeDeviceSize="3">
+
+          <div class="gif-image">
+            <a onclick="{!c.gifSelected}">
+              <img src="{!result.images.fixed_height.url}"></img>
+            </a>
+          </div>
+
+        </lightning:layoutItem>
+      </aura:iteration>
+
+    </lightning:layout>
+  </lightning:card>
+
+</aura:component>

force-app/main/default/aura/SearchGIPHY/SearchGIPHY.css

@@ -1,2 +1,16 @@
-.THIS {
+.THIS .gif-image {
+  position:relative;
+  width: 100%;
+  text-align: center;
+  display: block;
+  margin-left: auto;
+  margin-right: auto;
 }
+
+.THIS .path-to-zip {
+  margin-bottom: 12px;
+}
+
+.THIS .path-to-zip .slds-button {
+  margin-left: 8px;
+}

force-app/main/default/aura/SearchGIPHY/SearchGIPHYController.js

@@ -1,5 +1,42 @@
 ({
-    myAction : function(component, event, helper) {
+
+  afterScriptsLoaded: function (component, event, helper) {
+    console.log('afterScriptsLoaded called successfully');
+  },
+
+  doInit: function (component, event, helper) {
+    console.log('doInit called successfully');
+  },
+
+  keyCheck: function (component, event, helper) {
+    if (event.which == 13) {
+      console.log('keyCheck detected enter')
+
+      var searchTerms = component.get("v.searchTerms");
+      helper.search(searchTerms, function (results) {
+        console.log('keyCheck enter returned from helper')
+        component.set("v.results", results.data);
+      });
 
     }
-})
+  },
+
+  search: function (component, event, helper) {
+
+    console.log('search called successfully');
+
+    var searchTerms = component.get("v.searchTerms");
+    helper.search(searchTerms, function (results) {
+      console.log('search returned from helper')
+      component.set("v.results", results.data);
+    });
+
+  },
+
+  gifSelected: function (component) {
+    var property = component.get("v.property");
+
+    console.log('gifSelected called successfully');
+  }
+
+})

force-app/main/default/aura/SearchGIPHY/SearchGIPHYHelper.js

@@ -1,5 +1,20 @@
 ({
-    helperMethod : function() {
+  search: function (searchTerms, data) {
 
-    }
-})
+    console.log('search called successfully');
+    console.log(searchTerms);
+
+    var apiKey = _GIPHY.getApiKey();
+    console.log(apiKey);
+
+    $.getJSON("https://api.giphy.com/v1/gifs/search?api_key=" + apiKey + "&q=" + searchTerms + "&limit=8&offset=0&rating=G&lang=en", function (results) {
+
+      console.log('called api');
+      console.log(results);
+      console.log(results.data.length);
+
+      data(results);
+
+    });
+  }
+})

force-app/main/default/flexipages/GIFter.flexipage-meta.xml

@@ -2,15 +2,7 @@
 <FlexiPage xmlns="http://soap.sforce.com/2006/04/metadata">
     <flexiPageRegions>
         <componentInstances>
-            <componentInstanceProperties>
-                <name>decorate</name>
-                <value>true</value>
-            </componentInstanceProperties>
-            <componentInstanceProperties>
-                <name>richTextValue</name>
-                <value>Please work</value>
-            </componentInstanceProperties>
-            <componentName>flexipage:richText</componentName>
+            <componentName>SearchGIPHY</componentName>
         </componentInstances>
         <name>main</name>
         <type>Region</type>

force-app/main/default/staticresources/GIPHY.resource

@@ -1,8 +1,8 @@
 window._GIPHY = (function() {
-    var apiKey = "YOURGIPHYAPIKEY";
+    var apiKey = "YOUR_GIPHY_API_KEY";
 
     return { //public API
-        getValue: function() {
+        getApiKey: function() {
             return apiKey;
         }
     };

force-app/main/default/staticresources/jquery331.resource-meta.xml

@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<StaticResource xmlns="http://soap.sforce.com/2006/04/metadata">
+    <cacheControl>Private</cacheControl>
+    <contentType>text/javascript</contentType>
+</StaticResource>

sfdx-project.json

@@ -1,12 +1,12 @@
 {
-  "packageDirectories": [
-    {
-      "path": "force-app",
-      "default": true,
-      "id": "",
-      "versionNumber": "1.0.0.NEXT",
-      "versionName": ""
-    }
+"packageDirectories": [
+  {
+    "path": "force-app",
+    "default": true,
+    "id": "YOUR_PACKAGE_ID",
+    "versionNumber": "1.0.0.NEXT",
+    "versionName": "Spring ‘18"
+  }
   ],
   "namespace": "",
   "sfdcLoginUrl": "https://login.salesforce.com",