Everything I have left idk what's here

readme.txt

@@ -0,0 +1,7 @@
+Team Members:
+Braydon Kains
+
+I declare that all work is done by me, Braydon Kains.
+
+Link to project: http://134.209.48.143
+Github repo: https://github.com/BraydonKains/GameGab

resources/js/app.js

@@ -24,6 +24,7 @@ Vue.component('thread-collection', require('./components/ThreadComponent.vue').d
 Vue.component('thread-view', require('./components/ThreadViewComponent.vue').default);
 Vue.component('thread-create', require('./components/CreateThreadComponent.vue').default);
 Vue.component('post-create', require('./components/CreatePostComponent.vue').default);
+Vue.component('gif-select', require('./components/GifSelectComponent.vue').default);
 
 /**
  * Next, we will create a fresh Vue application instance and attach it to

resources/js/components/CreatePostComponent.vue

@@ -6,6 +6,9 @@
     <div class="form-group">
         <textarea type="text" class="form-control" placeholder="Add to your post..." v-model="content"></textarea>
     </div>
+    <div class="form-group">
+        <gif-select></gif-select>
+    </div>
     <div class="form-group">
         <button type="submit" class="btn btn-primary">Add</button>
     </div>

resources/js/components/GifSelectComponent.vue

@@ -0,0 +1,63 @@
+<style>
+.gif-container {
+    margin-top: 30px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+</style>
+<template>
+<div>
+    <input type="text" v-model="search">
+    <div >
+        <img v-for="gif in gifs" :src="gif" :key="gif.id">
+    </div>
+</div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            search: '',
+            gifs: [],
+            gif: {
+                id: ''
+            }
+        }
+    },
+
+    methods: {
+        buildGifs(json) {
+            this.gifs = json.data
+            .map(gif => gif.id)
+            .map(gifId => {
+            return `https://media.giphy.com/media/${gifId}/giphy.gif`;
+            });
+        }
+    },
+
+    watch: {
+        search: function() {
+            let apiKey = "nYQNPpAixuVqNPSYjOdhQAAS4oP1Q9rS";
+            let searchEndPoint = "https://api.giphy.com/v1/gifs/search?";
+            let limit = 5;
+
+            let url = `${searchEndPoint}&api_key=${apiKey}&q=${
+                this.search
+            }&limit=${limit}`;
+
+            fetch(url)
+            .then(response => {
+                return response.json();
+            })
+            .then(json => {
+                this.buildGifs(json);
+            })
+            .catch(err => {
+                console.log(err);
+            });
+        }
+    }
+}
+</script>

resources/js/components/ThreadComponent.vue

@@ -4,11 +4,17 @@
             <thread-create v-if="this.with === 'true'" :user_id="this.user_id" @submitted="fetchThreads"></thread-create>
         </div>
         <h2>Browse Threads</h2>
-        <div class="card card-body" v-for="thread in threads" v-bind:key="thread.id">
-            <p v-if="thread.creator != null">{{ thread.creator.name }}</p>
-            <p v-else>[deleted]</p>
-            <a v-bind:href="'./test/' + thread.id"><h3>{{ thread.thread_title }}</h3></a>
-            <button v-if="deleteCheck(thread)" v-on:click="destroyThread(thread.id)" class="btn btn-danger">Delete</button>
+        <div>
+            <label for="search-bar">Search:</label>
+            <input type="text" name="search-bar" v-model="filter">
+        </div>
+        <div v-for="thread in threads" v-bind:key="thread.id">
+            <div class="card card-body" v-show="!thread.filtered">
+                <p v-if="thread.creator != null">{{ thread.creator.name }}</p>
+                <p v-else>[deleted]</p>
+                <a v-bind:href="'./test/' + thread.id"><h3>{{ thread.thread_title }}</h3></a>
+                <button v-if="deleteCheck(thread)" v-on:click="destroyThread(thread.id)" class="btn btn-danger">Delete</button>
+            </div>
         </div>
     </div>
 </template>
@@ -28,8 +34,12 @@ export default {
                     id: '',
                     name: ''
                 },
+                filtered: false
             },
             thread_id: '',
+            filter: '',
+            filtered: [],
+            filter_flag: false,
             scroll_flag: true,
             edit: false
         }
@@ -50,16 +60,34 @@ export default {
                     } else this.scroll_flag = true;
                 });
         },
-        deleteCheck(thread) {
-            return thread.creator != null && this.user_id == thread.creator.id;   
-        },
+        
         destroyThread(thread_id) {
             fetch("api/thread/destroy/" + thread_id)
-            //.then(res => res.json())
             .then(res => {
                 this.scroll_flag = false;
                 this.fetchThreads();
             });
+        },
+
+        deleteCheck(thread) {
+            return thread.creator != null && this.user_id == thread.creator.id;   
+        },
+        
+        filteredCheck(thread) {
+            return !this.filtered.include(thread.id);
+        }
+    },
+
+    watch: {
+        filter: async function(filter) {
+            console.log(filter);
+            Object.keys(this.threads).forEach(thread => {
+                this.threads[thread].filtered = !this.threads[thread].thread_title.includes(filter);
+                console.log(this.threads[thread]);
+            });
+            await this.$nextTick(function() {
+                this.$forceUpdate();
+            });
         }
     }
 }