GIFter code for Quick Start: Unlocked Packages project

.forceignore

@@ -0,0 +1,6 @@
+# List files or directories below to ignore them when running force:source:push, force:source:pull, and force:source:status
+# More information: https://developer.salesforce.com/docs/atlas.en-us.sfdx_dev.meta/sfdx_dev/sfdx_dev_exclude_source.htm
+#
+
+package.xml
+**profiles

.gitignore

@@ -0,0 +1,4 @@
+.sfdx
+.vscode
+.idea
+IlluminatedCloud

README.md

@@ -0,0 +1,9 @@
+# GIFter
+
+The GIF-to-Chatter app for Lightning Platform you didn't know you needed!
+
+This repo is developed and maintained for the [Quick Start: Unlocked Packages](https://trailhead.salesforce.com/content/learn/projects/quick-start-unlocked-packages) Trailhead project.
+
+It was originally created by [Wade Wegner](https://github.com/wadewegner).
+
+![image](images/gifter.png)

config/project-scratch-def.json

@@ -0,0 +1,9 @@
+{
+    "orgName": "GIFter",
+    "edition": "Developer",
+    "settings" : {
+        "orgPreferenceSettings" : {
+          "s1EncryptedStoragePref2" : false
+        }
+    }
+}

force-app/main/default/applications/GIFter.app-meta.xml

@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<CustomApplication xmlns="http://soap.sforce.com/2006/04/metadata">
+    <brand>
+        <headerColor>#0070D2</headerColor>
+        <shouldOverrideOrgTheme>false</shouldOverrideOrgTheme>
+    </brand>
+    <formFactors>Large</formFactors>
+    <label>GIFter: GIFs2Chatter</label>
+    <navType>Standard</navType>
+    <tabs>GIFter</tabs>
+    <uiType>Lightning</uiType>
+    <utilityBar>GIFter_UtilityBar</utilityBar>
+</CustomApplication>

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

@@ -0,0 +1,84 @@
+<aura:component 
+    implements="force:appHostable,flexipage:availableForAllPageTypes" 
+    controller="ChatterHelper">
+
+  <aura:attribute name="searchTerms" type="String" />
+  <aura:attribute name="results" type="Map" />
+  <aura:attribute name="showModal" type="Boolean" default="false" />
+  <aura:attribute name="selectedGif" type="String" default="http://placehold.it/480x276" />
+  <aura:attribute name="selectedGifWidth" type="String" default="480" />
+  <aura:attribute name="selectedGifHeight" type="String" default="360" />
+  <aura:attribute name="chatterText" type="String" />
+
+  <aura:handler name="init" value="{!this}" action="{!c.doInit}" />
+
+  <ltng:require scripts="{!join(',', 
+      $Resource.jquery331, 
+      $Resource.GIPHY)}" afterScriptsLoaded="{!c.afterScriptsLoaded}" />
+
+  <aura:if isTrue="{!v.showModal==true}">
+
+    <div class="post-modal">
+      <section role="dialog" tabindex="-1" aria-labelledby="modal-heading-01" aria-modal="true" aria-describedby="modal-content-id-1"
+        class="slds-modal slds-fade-in-open">
+        <div class="slds-modal__container">
+          <header class="slds-modal__header">
+            <h2 id="modal-heading-01" class="slds-text-heading_medium slds-hyphenate">Post to Chatter?</h2>
+          </header>
+          <div class="slds-modal__content slds-p-around_medium" id="modal-content-id-1">
+
+            <div class="preview-image">
+              <iframe src="{!v.selectedGif}" width="{!v.selectedGifWidth}" height="{!v.selectedGifHeight}" frameBorder="0" />
+            </div>
+            <br />
+            <p>
+              <lightning:textarea aura:id="chatterText" label="Anything you want to say to go with this GIF?" value="{!v.chatterText}" />
+            </p>
+
+          </div>
+          <footer class="slds-modal__footer">
+            <button class="slds-button slds-button_neutral" onclick="{!c.closeModal}">Cancel</button>
+            <button class="slds-button slds-button_brand" onclick="{!c.postToChatter}">Post</button>
+          </footer>
+        </div>
+      </section>
+      <div class="slds-backdrop slds-backdrop_open"></div>
+    </div>
+  </aura:if>
+
+  <lightning:card iconName="utility:search" title="GIPHY Search Terms">
+
+    <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 iconName="utility:photo" title="GIPHY Search Results">
+    <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 id="{!'img' + result.id}" src="{!result.images.fixed_height.url}" data-index="{!result.id}"></img>
+            </a>
+          </div>
+
+        </lightning:layoutItem>
+      </aura:iteration>
+
+    </lightning:layout>
+  </lightning:card>
+
+
+
+</aura:component>

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

@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<AuraDefinitionBundle xmlns="urn:metadata.tooling.soap.sforce.com" fqn="SearchGIPHY">
+    <apiVersion>44.0</apiVersion>
+    <description>A Lightning Component Bundle</description>
+</AuraDefinitionBundle>

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

@@ -0,0 +1,21 @@
+.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;
+}
+
+
+.THIS .preview-image {
+  text-align: center;
+}

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

@@ -0,0 +1,83 @@
+({
+
+  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) {
+
+      var searchTerms = component.get("v.searchTerms");
+      helper.search(searchTerms, function (results) {
+        _GIPHY.setResults(results);
+        component.set("v.results", results.data);
+      });
+
+    }
+  },
+
+  search: function (component, event, helper) {
+
+    var searchTerms = component.get("v.searchTerms");
+    helper.search(searchTerms, function (results) {
+      _GIPHY.setResults(results);
+      component.set("v.results", results.data);
+    });
+
+  },
+
+  gifSelected: function (component, event, helper) {
+
+    var property = component.get("v.property");
+
+    component.set("v.showModal", true);
+
+    var id = event.target.dataset.index;
+    var results = _GIPHY.getResults();
+    var selectedGif = results.data.find(item => item.id === id)
+    var width = selectedGif.images.original.width;
+    var height = selectedGif.images.original.height;
+
+    component.set("v.selectedGifWidth", width);
+    component.set("v.selectedGifHeight", height);
+    component.set("v.selectedGif", "https://media0.giphy.com/media/" + id + "/giphy.gif");
+
+  },
+
+  closeModal: function (component) {
+    component.set("v.showModal", false);
+  },
+
+  postToChatter: function (component, event, helper) {
+
+    var chatterText = component.get("v.chatterText");
+    var imageUrl = component.get("v.selectedGif");
+    var action = component.get("c.getChatterGroups");
+
+    action.setParams({
+      imageUrl : imageUrl,
+      chatterText : chatterText
+    });
+
+    $A.enqueueAction(action);
+
+    action.setCallback(this, function (response) {
+
+      var feedItemId = response.getReturnValue();
+
+      var urlEvent = $A.get("e.force:navigateToURL");
+      urlEvent.setParams({
+        "url": "one/one.app#/sObject/"+ feedItemId + "/view"
+      });
+
+      urlEvent.fire();
+
+    });
+  },
+
+})

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

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

force-app/main/default/classes/ChatterHelper.cls

@@ -0,0 +1,66 @@
+public with sharing class ChatterHelper {
+
+  @AuraEnabled
+  public static String getChatterGroups(String imageUrl, String chatterText) {
+
+    String fileName = 'giphy.gif';
+    String body = chatterText;
+
+    Blob imageData = getImageData(imageUrl);
+
+    ID fileId = saveFile(fileName, imageData);
+    ID postParentId = UserInfo.getUserId();
+
+    FeedItem post = new FeedItem(
+        ParentId = postParentId,
+        Body = body,
+        IsRichText = true
+    );
+
+    insert post;
+
+    String feedItemId = post.Id;
+
+    // Add image(s) to the chatter post
+    // Requires 'Allow users to edit posts and comments' in Setup | Chatter | Chatter Settings
+    // because adding the feed attachments edits the original post.
+    // http://salesforce.stackexchange.com/questions/156588/feedattachment-invalid-operation-cannot-create-update-or-delete-feed-attachme
+    List<FeedAttachment> feedAttachments = new List<FeedAttachment>();
+    feedAttachments.add( new FeedAttachment(
+      feedEntityId = feedItemId,
+      recordId = fileId,
+      type = 'Content'
+    ));
+
+    insert feedAttachments;
+
+    return feedItemId;
+  }
+
+  private static ID saveFile(String fileNameWithExt, Blob fileData) {
+
+    ContentVersion file = new ContentVersion(
+        versionData = fileData,
+        title = fileNameWithExt,
+        pathOnClient = '/' + fileNameWithExt
+    );
+
+    insert file;
+
+    return file.Id;
+  }
+
+  private static Blob getImageData(String url) {
+
+    HttpRequest req = new HttpRequest();
+    req.setEndpoint( url );
+    req.setHeader('accept', 'image/*');
+
+    req.setMethod('GET');
+    req.setCompressed( false );
+
+    HttpResponse res = new Http().send( req );
+    return res.getBodyAsBlob();
+  }
+
+}

force-app/main/default/classes/ChatterHelper.cls-meta.xml

@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<ApexClass xmlns="urn:metadata.tooling.soap.sforce.com" fqn="ChatterHelper">
+    <apiVersion>44.0</apiVersion>
+    <status>Active</status>
+</ApexClass>

force-app/main/default/cspTrustedSites/GIPHY.cspTrustedSite-meta.xml

@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<CspTrustedSite xmlns="http://soap.sforce.com/2006/04/metadata">
+    <endpointUrl>https://api.giphy.com</endpointUrl>
+    <isActive>true</isActive>
+</CspTrustedSite>

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

@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<FlexiPage xmlns="http://soap.sforce.com/2006/04/metadata">
+    <flexiPageRegions>
+        <componentInstances>
+            <componentName>SearchGIPHY</componentName>
+        </componentInstances>
+        <name>main</name>
+        <type>Region</type>
+    </flexiPageRegions>
+    <masterLabel>GIFter</masterLabel>
+    <template>
+        <name>flexipage:defaultAppHomeTemplate</name>
+    </template>
+    <type>AppPage</type>
+</FlexiPage>

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

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<FlexiPage xmlns="http://soap.sforce.com/2006/04/metadata">
+    <flexiPageRegions>
+        <name>utilityItems</name>
+        <type>Region</type>
+    </flexiPageRegions>
+    <masterLabel>GIFter UtilityBar</masterLabel>
+    <template>
+        <name>one:utilityBarTemplateDesktop</name>
+    </template>
+    <type>UtilityBar</type>
+</FlexiPage>

force-app/main/default/permissionsets/GIFter.permissionset-meta.xml

@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<PermissionSet xmlns="http://soap.sforce.com/2006/04/metadata">
+    <applicationVisibilities>
+        <application>GIFter</application>
+        <visible>true</visible>
+    </applicationVisibilities>
+    <hasActivationRequired>false</hasActivationRequired>
+    <label>GIFter</label>
+    <tabSettings>
+        <tab>GIFter</tab>
+        <visibility>Visible</visibility>
+    </tabSettings>
+</PermissionSet>

force-app/main/default/remoteSiteSettings/GiphyMedia0.remoteSite-meta.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<RemoteSiteSetting xmlns="http://soap.sforce.com/2006/04/metadata">
+    <disableProtocolSecurity>false</disableProtocolSecurity>
+    <isActive>true</isActive>
+    <url>https://media0.giphy.com</url>
+</RemoteSiteSetting>