Adding new LWC Version called SearchGiphyLwc

force-app/main/default/lwc/searchGiphyLwc/searchGiphyLwc.css

@@ -0,0 +1,35 @@
+.backgroundInverse {
+    position: relative;
+    background-color: #16325c;
+}
+
+.loading {  
+    position: fixed;
+    z-index: 9999999999;
+    height: 2em;
+    width: 2em;
+    overflow: show;
+    margin: auto;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+}
+/* Transparent Overlay */
+.loading:before {
+    content: '';
+    display: block;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0,0,0,0.3);
+  }
+  .preview-image {
+    text-align: center;
+  }
+  .path-to-zip {
+    margin-bottom: 12px;
+  }
+

force-app/main/default/lwc/searchGiphyLwc/searchGiphyLwc.html

@@ -0,0 +1,75 @@
+<template>
+        <lightning-card title="GIPHY Search Terms" icon-name="utility:search"  >
+                <lightning-layout vertical-align="end" class="path-to-zip slds-m-around--small">
+                <span onkeypress={keyCheck}>
+                    <lightning-layout-item>
+                        <lightning-input class="inputClass" label="Search Terms" type="text" min="0" max="100"></lightning-input>
+                    </lightning-layout-item>
+                </span>
+                <lightning-layout-item>
+                    <lightning-button
+                    label="Search"
+                    onclick={handleGiphySearch}
+                    class="slds-m-around--small"
+                    ></lightning-button>
+                </lightning-layout-item>
+            </lightning-layout>
+        </lightning-card>
+        <lightning-card icon-name="utility:photo">
+                <h3 slot="title">
+                        GIPHY Search Results: {searchTerms}
+                </h3>
+            <lightning-layout horizontal-align="center" multiple-rows="true">    
+                <template for:each={results} for:item="result">
+                <lightning-layout-item key={result.id} padding="around-small" size="8" small-device-size="6" medium-device-size="4" large-device-size="3">
+
+                    <div class="gif-image">
+                    <a onclick={gifSelect}>
+                        <img id={result.id} src={result.images.fixed_height.url} data-index={result.id} data-mylink={result.images.fixed_height.url}></img>
+                    </a>
+                    </div>
+
+                </lightning-layout-item>
+                </template>
+
+            </lightning-layout>
+        </lightning-card>
+
+            <template if:true={showPopup}>
+                <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">
+                            <img src={selectedGif.images.fixed_height.url}></img>
+                          </div>
+                          <br />
+                          <p>
+                            <lightning-textarea class="chatterText" label="Anything you want to say to go with this GIF?" value={chatterText}></lightning-textarea>
+                          </p>
+
+                        </div>
+                        <footer class="slds-modal__footer">
+                            <button onclick={togglePopup} class="slds-button slds-button_neutral">Cancel</button>
+                            <button onclick={postToChatter} class="slds-button slds-button_brand">Post</button>
+                        </footer>
+                      </div>
+                    </section>
+                    <div class="slds-backdrop slds-backdrop_open"></div>
+                </div>
+            </template>
+
+            <template if:true={showSpinner}>
+                <div class="loading">
+                        <div>
+                            <lightning-spinner class="backgroundInverse" alternative-text="Loading" size="large" variant="inverse"></lightning-spinner>
+                        </div>
+                </div>  
+            </template>
+
+</template>

force-app/main/default/lwc/searchGiphyLwc/searchGiphyLwc.js

@@ -0,0 +1,113 @@
+import { LightningElement, track } from 'lwc';
+import { NavigationMixin } from 'lightning/navigation';
+import { ShowToastEvent } from 'lightning/platformShowToastEvent'
+import { loadScript } from 'lightning/platformResourceLoader';
+import _GIPHY from '@salesforce/resourceUrl/GIPHY';
+import chatterPostWithImage from '@salesforce/apex/ChatterHelper.getChatterGroups';
+
+export default class SearchGiphyLwc extends NavigationMixin(LightningElement) {
+    @track searchTerms = '';
+    @track results;
+
+    @track showPopup = false;
+    @track showSpinner = false;
+    chatterText = '';
+    selectedGif;
+    selectedGifUrl;
+    feedItemId;
+    apiKey;
+
+    connectedCallback() {
+        loadScript(this, _GIPHY)
+        .then(() => {
+            this.apiKey = window._GIPHY.getApiKey();
+        })
+        .catch(error => {
+            this.dispatchEvent(
+                new ShowToastEvent({
+                    title: 'Error reading Api Key',
+                    message: error.message,
+                    variant: 'error'
+                })
+            );
+        })
+    }
+
+    navigateToChatterPost() {
+        this[NavigationMixin.Navigate]({
+            type: 'standard__recordPage',
+            attributes: {
+                recordId: this.feedItemId,
+                objectApiName: 'FeedItem',
+                actionName: 'view'
+            }
+        });
+    }
+
+    createChatterPost() {
+        this.showSpinner = true;
+        chatterPostWithImage({ imageUrl:this.selectedGifUrl, chatterText:this.chatterText})
+        .then(result => {
+            this.feedItemId = result;
+            this.chatterText = '';
+            this.selectedGif = '';
+            this.selectedGifUrl = '';
+            this.showSpinner = false;
+            this.showPopup = false;
+            this.navigateToChatterPost();
+        })
+        .catch(error => {
+            this.dispatchEvent(
+                new ShowToastEvent({
+                    title: 'Error Creating Post',
+                    message: error.message,
+                    variant: 'error'
+                })
+            );
+            this.showSpinner = false;
+        })
+    }
+
+    togglePopup() {
+        this.showPopup = !this.showPopup;
+    }
+
+    handleGiphySearch(event) {
+        this.searchTerms = this.template.querySelector(".inputClass").value;
+        let searchTerms = encodeURI(this.searchTerms);
+        let url = "https://api.giphy.com/v1/gifs/search?api_key=" + this.apiKey + "&q=" + searchTerms + "&limit=8&offset=0&rating=G&lang=en";
+        fetch(url)
+        .then(response => {
+            return response.json(); 
+        })
+        .then(resp => {
+            // Here we get the data array from the response object
+            this.results = resp.data;
+        })
+        .catch(error => {
+            this.dispatchEvent(
+                new ShowToastEvent({
+                    title: 'Error Searching Giphy',
+                    message: error.message,
+                    variant: 'error'
+                })
+            );
+        })
+    }
+    keyCheck(event) {
+        if (event.which == 13) { this.handleGiphySearch(); }
+      }
+    gifSelect(event){
+        let id = event.target.dataset.index;
+        this.selectedGif = this.results.find(item => item.id === id);
+        const regex = /media[0-9].giphy/gi;
+        let imageUrl =  this.selectedGif.images.fixed_height.url;
+        this.selectedGifUrl = imageUrl.replace(regex, 'media0.giphy');
+        this.togglePopup();
+    }
+    postToChatter(event){
+        this.chatterText = this.template.querySelector(".chatterText").value;
+        this.createChatterPost();
+    }
+
+}

force-app/main/default/lwc/searchGiphyLwc/searchGiphyLwc.js-meta.xml

@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata" fqn="SearchGiphyLwc">
+    <apiVersion>45.0</apiVersion>
+    <isExposed>true</isExposed>
+    <targets>
+        <target>lightning__AppPage</target>
+        <target>lightning__RecordPage</target>
+        <target>lightning__HomePage</target>
+    </targets>
+</LightningComponentBundle>

sfdx-project.json

@@ -3,12 +3,12 @@
   {
     "path": "force-app",
     "default": true,
-    "id": "YOUR_PACKAGE_ID",
-    "versionNumber": "1.0.0.NEXT",
-    "versionName": "Spring ‘18"
+    "package": "GIFter",
+    "versionNumber": "2.0.0.NEXT",
+    "versionName": "Spring '19"
   }
   ],
   "namespace": "",
   "sfdcLoginUrl": "https://login.salesforce.com",
-  "sourceApiVersion": "42.0"
+  "sourceApiVersion": "45.0"
 }