Adding incomplete SearchForm

Author: JBris

client/src/App.vue

@@ -1,25 +1,36 @@
 <template>
-    <div id="app">
-        <nav class="navbar is-primary" role="navigation" aria-label="main navigation">
-            <div class="container">
-                <div class="navbar-brand">
-                    <router-link class="navbar-item" to="/signup">Blog App</router-link>
-
-                    <button class="button navbar-burger">
-                        <span></span>
-                        <span></span>
-                        <span></span>
-                    </button>
-                </div>
-            </div>
-        </nav>
-        <router-view/>
-    </div>
-
+  <div id="app">
+    <Header/>
+    <SearchForm/>
+  </div>
 </template>
 
 <script>
+import Header from './components/layout/Header';
+import SearchForm from './components/SearchForm';
+// import SearchResults from './components/SearchResults';
+// import Pagination from './components/Pagination';
+
+    //   <SearchResults
+    //   v-if="videos.length > 0"
+    //   v-bind:videos="videos"
+    //   v-bind:reformattedSearchString="reformattedSearchString"
+    // />
+    // <Pagination
+    //   v-if="videos.length > 0"
+    //   v-bind:prevPageToken="api.prevPageToken"
+    //   v-bind:nextPageToken="api.nextPageToken"
+    //   v-on:prev-page="prevPage"
+    //   v-on:next-page="nextPage"
+    // />
+
 export default {
-    name: 'app'
+  name: 'app',
+  components: {
+    Header,
+    SearchForm,
+    // SearchResults,
+    // Pagination
+  },
 }
 </script>

client/src/components/SearchForm.vue

@@ -0,0 +1,49 @@
+<template>
+  <div>
+    <div>
+        Search
+        <!-- 1 -->
+        <input type="text" v-model="project" class="form-control" placeholder="search...">
+        <div v-if="error">{{ error }}</div>
+    </div>
+  </div>
+  
+</template>
+
+<script>
+
+  // 2
+  import { SEARCH_QUERY } from '@/graphql'
+
+  export default {
+    name: 'Search',
+    data () {
+      return {
+        provider: 'GITHUB',
+        project: '',
+        error: null,
+      }
+    },
+    apollo: {
+      gitRepos: {
+        query: SEARCH_QUERY,
+        variables () {
+          return {
+            provider: this.provider,
+            project: this.project,
+            quantity: 100,
+          }
+        },
+        options: () => ({ errorPolicy: 'all' }),
+        skip () {
+          return !this.project
+        },
+        error(error) {
+            this.error = error.message;
+        },
+        debounce: 500, 
+        errorPolicy: 'all',
+      }
+    }
+  }
+</script>

client/src/components/layout/Header.vue

@@ -0,0 +1,14 @@
+<template>
+    <div class="pad-15-hor pad-15-ver header"> 
+            <div> <img src="@/assets/logo.png" width="25px"> Git Search </div>
+            <div> <i class="fas fa-bars"></i> </div>
+    </div>
+</template>
+<script>
+export default {
+    name:"Header"
+}
+</script>
+<style>
+</style>
+

client/src/graphql.js

@@ -1,13 +1,17 @@
 import gql from 'graphql-tag'
 
-export const SIGNUP_MUTATION = gql`mutation SignupMutation($username: String!, $email: String!, $password: String!) {
-        createUser(
-            username: $username,
-            email: $email,
-            password: $password
-        ) {
-            id
-            username
-            email
-        }
-    }`
+export const SEARCH_QUERY = gql`query gitRepos($provider: Providers!, $project: String!, $quantity: Int!) {
+   gitRepos(provider: $provider, project: $project, quantity: $quantity) {
+      items {
+         id
+         repo 
+         author  
+         host 
+         htmlUrl 
+         tagsUrl  
+         cloneUrl 
+         description  
+      }
+   }
+}`
+    

client/src/main.js

@@ -1,28 +1,33 @@
 import { ApolloClient } from 'apollo-client'
+import { ApolloLink } from 'apollo-link'
 import { HttpLink } from 'apollo-link-http'
+import { onError } from "apollo-link-error";
 import { InMemoryCache } from 'apollo-cache-inmemory'
 import VueApollo from 'vue-apollo'
 import Vue from 'vue'
 import App from './App.vue'
 import router from './router'
+import store from './store'
 import config from './config/config'
 
+const errorLink = onError(e => console.log(e));
+
 const httpLink = new HttpLink({
   // URL to graphql server, you should use an absolute URL here
-  uri: `${config.HOST}/graphql`
+  uri: `${config.HOST}/graphql`,
 })
 
 // create the apollo client
 const apolloClient = new ApolloClient({
-  link: httpLink,
-  cache: new InMemoryCache()
+  link: ApolloLink.from([errorLink, httpLink]),
+  cache: new InMemoryCache(),
 })
 
 // install the vue plugin
 Vue.use(VueApollo)
 
 const apolloProvider = new VueApollo({
-  defaultClient: apolloClient
+  defaultClient: apolloClient,
 })
 
 Vue.config.productionTip = false
@@ -31,6 +36,7 @@ Vue.config.productionTip = false
 new Vue({
   el: '#app',
   router,
+  store,
   apolloProvider,
   template: '<App/>',
   components: { App },

client/src/router/index.js

@@ -1,18 +1,12 @@
 import Vue from 'vue'
 import VueRouter from 'vue-router'
-import SignUp from '@/components/SignUp.vue'
 
 Vue.use(VueRouter)
 
-  const routes = [
-    {
-        path: '/signup',
-        name: 'SignUp',
-        component: SignUp
-    },
-]
+  const routes = []
 
 const router = new VueRouter({
+  mode: 'history',
   routes
 })