add new members and lost members on homepage

components/member/List.vue

+<template>
+    <div class="table-responsive">
+        <table class="table table-striped table-hover">
+          <thead v-if="displayHead">
+            <tr>
+              <th scope="col">UID</th>
+              <th scope="col" class="d-none d-xl-table-cell" v-if="displayPubkey">PUBKEY</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr v-for="member in members" :key="member.uid"
+              @click="redirect('/membres/' + member.hash)">
+              <th scope="row">
+                {{ member.uid }}
+                <BadgeCertifStatus :limitDate="member.received_certifications.limit" :memberStatus="member.status" />
+                <BadgeStatus :membre="member" />
+              </th>
+              <td class="d-none d-xl-table-cell" v-if="displayPubkey">{{ member.pubkey }}</td>
+            </tr>
+          </tbody>
+        </table>
+    </div>
+</template>
+
+<script>
+export default {
+  props: {
+      members: {
+          type: Array,
+          required: true
+      },
+      displayPubkey: {
+        type: Boolean,
+        default: true
+      },
+      displayHead: {
+        type: Boolean,
+        default: true
+      }
+  },
+  methods: {
+    redirect(path) {
+      this.$router.push({ path: path })
+    }
+  },
+}
+</script>
\ No newline at end of file

graphql/index.js

+import { HttpLink } from 'apollo-link-http'
+import { setContext } from 'apollo-link-context'
+import { from } from 'apollo-link'
+import { InMemoryCache } from 'apollo-cache-inmemory'
+
+export default ctx => {
+  const ssrMiddleware = setContext((_, { headers }) => {
+    if (process.client) return headers
+    return {
+      headers
+    }
+  })
+  
+  const httpLink = new HttpLink({
+    uri: 'https://wwgql.coinduf.eu'
+  })
+  
+  const link = from([ssrMiddleware, httpLink])
+  const cache = new InMemoryCache({addTypename:false})
+  
+  return {
+    link,
+    cache,
+    defaultHttpLink: false
+  }
+}
\ No newline at end of file

nuxt.config.js

@@ -54,9 +54,7 @@ export default {
 
   apollo: {
     clientConfigs: {
-      default: {
-        httpEndpoint: 'https://wwgql.coinduf.eu',
-      },
+      default: '~/graphql'
     },
   },
 

pages/index.vue

 <template>
-<main class="container-fluid">
+<main class="container">
   <h2 class="display-2 text-center mb-5">Page d'accueil</h2>
-  <div class="row">
-    <div class="col-6 m-auto text-center">
-      <p>Wotwizard-UI est une application web qui a pour but d'offrir une meilleure expérience utilisateur que celle actuellement disponible pour <a href="https://wot-wizard.duniter.org" target="_blank">Wotwizard</a>.</p>
-      <p>Le code source du projet est disponible sur <a href="https://git.duniter.org/clients/wotwizard-ui" target="_blank">le Gitlab des développeurs de la monnaie libre</a>.</p>
+  <NavigationLoader :isLoading="$apollo.queries.newMembers.loading" class="d-block mx-auto" />
+  <div class="row text-center" v-if="!$apollo.queries.newMembers.loading">
+    <div class="col-lg-6">
+      <div>
+        <h2 class="h4">Bienvenue à</h2>
+        <MemberList :members="newMembers['entrees']" :displayPubkey="false" :displayHead="false" />
+      </div>
+    </div>
+    <div class="col-lg-6">
+      <h2 class="h4">Au revoir à</h2>
+      <MemberList :members="newMembers['sorties']" :displayPubkey="false" :displayHead="false" />
     </div>
   </div>
 </main>
 </template>
 
 <script>
+import gql from 'graphql-tag'
+
 export default {
   data() {
     // Variables locales
@@ -22,13 +31,48 @@ export default {
           active: true
         }
       ],
-      hello: ''
+      today : Math.round(Date.now() /1000)
     }
   },
   // Fonctions locales
   methods: {
-    helloWorld(e) {
-      this.hello = e.target.dataset.response
+
+  },
+  apollo: {
+    newMembers : {
+      query: gql`query LastEvents($start: Int64, $end: Int64) {
+        membersCount(start: $start, end: $end) {
+          idList {
+            id {
+              pubkey
+              uid
+              status
+              hash
+              limitDate
+              received_certifications {
+                limit
+              }
+            }
+            inOut
+          }
+        }
+      } `,
+      variables(){return {start:this.today-86400*2,end:this.today}},
+      update (data) {
+        let result = {'entrees':[],'sorties':[]}
+
+        for (let i = 0; i < data.membersCount.length; i++) {
+          let member = data.membersCount[i].idList[0]
+          member.id.inOut = member.inOut
+          if (member.inOut) {
+            result['entrees'].push(member.id)
+          } else {
+            result['sorties'].push(member.id)
+          }
+        }
+        
+        return result
+      }
     }
   },
   mounted () {

pages/membres/index.vue

@@ -4,34 +4,14 @@
   <div class="row mb-4">
     <div class="col-6 m-auto text-center">
       <label for="rech" class="form-label">Votre recherche</label>
-      <input type="text" class="form-control" id="rech" aria-describedby="rechHelp" v-model="param" autocomplete="off">
+      <input type="text" class="form-control" id="rech" aria-describedby="rechHelp" v-model="param" autocomplete="off" @keyup="save">
       <small id="rechHelp" class="form-text text-muted">Saisissez le début d'un pseudo ou d'une clé publique</small>
     </div>
   </div>
   <NavigationLoader :isLoading="$apollo.queries.idSearch.loading" class="d-block mx-auto" />
   <div class="row" v-if="idSearch && !$apollo.queries.idSearch.loading && param.length > 2">
     <div class="col-8 m-auto">
-      <div class="table-responsive">
-        <table class="table table-striped table-hover">
-          <thead>
-            <tr>
-              <th scope="col">UID</th>
-              <th scope="col" class="d-none d-xl-table-cell">PUBKEY</th>
-            </tr>
-          </thead>
-          <tbody>
-            <tr v-for="member in idSearch.ids" :key="member.uid"
-              @click="redirect('/membres/' + member.hash)">
-              <th scope="row">
-                {{ member.uid }}
-                <BadgeCertifStatus :limitDate="member.received_certifications.limit" :memberStatus="member.status" />
-                <BadgeStatus :membre="member" />
-              </th>
-              <td class="d-none d-xl-table-cell">{{ member.pubkey }}</td>
-            </tr>
-          </tbody>
-        </table>
-      </div>
+      <MemberList :members="idSearch.ids"/>
     </div>
   </div>
 </main>
@@ -61,10 +41,9 @@ export default {
   },
   // Fonctions locales
   methods: {
-    redirect(path) {
-      localStorage.setItem('search', this.param)
-      this.$router.push({ path: path })
-    }
+      save() {
+        localStorage.setItem('search', this.param)
+      }
   },
   apollo: {
     idSearch : {