From cf28a0bacf6388fca6ac4c4b9997d9935b9919d0 Mon Sep 17 00:00:00 2001
From: Pierre-Jean CHANCELLIER <paidge_cs@hotmail.com>
Date: Tue, 1 Nov 2022 19:27:13 +0100
Subject: [PATCH] Multiple endpoints

---
 README.md                              |  2 +-
 assets/css/_bootstrap.scss             |  2 +-
 components/apollo/List.vue             | 38 +++++++++++++++++
 components/navigation/menu/Sidebar.vue |  4 ++
 graphql/cache.js                       |  5 +--
 graphql/clients/coindufeu.js           | 28 -------------
 graphql/clients/endpoints.js           |  4 --
 graphql/clients/otherclient.js         | 28 -------------
 graphql/config.js                      | 17 ++++++++
 graphql/endpoints.js                   |  4 ++
 graphql/schemaQuery.js                 | 57 +++++++++++++++-----------
 i18n/locales/de.json                   |  3 ++
 i18n/locales/en.json                   |  3 ++
 i18n/locales/es.json                   |  3 ++
 i18n/locales/fr.json                   |  3 ++
 i18n/locales/it.json                   |  3 ++
 nuxt.config.js                         | 28 +++++--------
 package.json                           |  4 +-
 pages/a-propos.vue                     |  4 +-
 pages/favoris.vue                      |  3 ++
 pages/index.vue                        |  3 ++
 pages/membre.vue                       |  3 ++
 pages/membres/index.vue                |  3 ++
 pages/parametres.vue                   |  3 ++
 pages/previsions/futures_entrees.vue   |  3 ++
 pages/previsions/futures_sorties.vue   |  3 ++
 plugins/getApolloClient.js             |  8 ++++
 web-ext/manifest.json                  |  8 ++--
 28 files changed, 162 insertions(+), 115 deletions(-)
 create mode 100644 components/apollo/List.vue
 delete mode 100644 graphql/clients/coindufeu.js
 delete mode 100644 graphql/clients/endpoints.js
 delete mode 100644 graphql/clients/otherclient.js
 create mode 100644 graphql/config.js
 create mode 100644 graphql/endpoints.js
 create mode 100644 plugins/getApolloClient.js

diff --git a/README.md b/README.md
index 99e6082..5f4ef49 100644
--- a/README.md
+++ b/README.md
@@ -50,7 +50,7 @@ The schema documentation is stored in the `./graphql/doc/graphQLschema.txt` file
 
 In `queries.js` you'll find all queries.
 
-If you want to add a 2nd graphQL server, edit `./graphql/clients/endpoints.js` to put your URL and uncomment the line concerning the `apollo.clientConfigs.myotherclient` option in `nuxt.config.js`. I have not tested this functionnality.
+If you want to add a 2nd graphQL server, edit `./graphql/endpoints.js` to put your URL.
 
 ### Special Directories
 
diff --git a/assets/css/_bootstrap.scss b/assets/css/_bootstrap.scss
index 46f8b76..826ad60 100644
--- a/assets/css/_bootstrap.scss
+++ b/assets/css/_bootstrap.scss
@@ -28,7 +28,7 @@
 @import "~bootstrap/scss/forms/form-select";
 @import "~bootstrap/scss/forms/form-check";
 // @import "~bootstrap/scss/forms/form-range";
-// @import "~bootstrap/scss/forms/floating-labels";
+@import "~bootstrap/scss/forms/floating-labels";
 @import "~bootstrap/scss/forms/input-group";
 // @import "~bootstrap/scss/forms/validation";
 
diff --git a/components/apollo/List.vue b/components/apollo/List.vue
new file mode 100644
index 0000000..40c5003
--- /dev/null
+++ b/components/apollo/List.vue
@@ -0,0 +1,38 @@
+<template>
+	<div class="form-floating">
+		<select
+			class="form-select"
+			id="selectClient"
+			@change="setClient($event)"
+			v-model="currentClient">
+			<option
+				:value="clientName"
+				v-for="(clientObject, clientName) in $nuxt.$apolloProvider.clients"
+				:key="clientName">
+				{{
+					clientName
+						.split(/(?=[A-Z])/)
+						.map((s) => s.toLowerCase())
+						.join(".")
+				}}
+			</option>
+		</select>
+		<label for="selectClient">{{ $t("wotwizard.nodeselect") }}</label>
+	</div>
+</template>
+
+<script>
+export default {
+	data() {
+		return {
+			currentClient: this.$getApolloClient()
+		}
+	},
+	methods: {
+		setClient(e) {
+			localStorage.setItem("apollo-client", e.target.value)
+			location.reload()
+		}
+	}
+}
+</script>
diff --git a/components/navigation/menu/Sidebar.vue b/components/navigation/menu/Sidebar.vue
index 90b3117..df54c05 100644
--- a/components/navigation/menu/Sidebar.vue
+++ b/components/navigation/menu/Sidebar.vue
@@ -16,6 +16,7 @@
 				</div>
 			</nuxt-link>
 			<div class="p-3 border-bottom border-2 text-muted">
+				<ApolloList />
 				<div class="small mt-2">API graphQL v{{ version }}</div>
 				<div class="small" v-if="countMax">
 					{{ $t("bloc.title") }} n°<span class="font-weight-bold">{{
@@ -78,6 +79,9 @@ export default {
 		}
 	},
 	apollo: {
+		$client() {
+			return this.$getApolloClient()
+		},
 		countMax: {
 			query: LAST_BLOCK
 		},
diff --git a/graphql/cache.js b/graphql/cache.js
index 435b892..80866f3 100644
--- a/graphql/cache.js
+++ b/graphql/cache.js
@@ -1,5 +1,4 @@
 import {
-	InMemoryCache,
 	IntrospectionFragmentMatcher,
 	defaultDataIdFromObject
 } from "apollo-cache-inmemory"
@@ -10,7 +9,7 @@ const fragmentMatcher = new IntrospectionFragmentMatcher({
 })
 
 // Apparemment il faut utiliser la syntaxe Apollo v2
-export const cache = new InMemoryCache({
+export const cache = {
 	addTypename: false,
 	fragmentMatcher,
 	dataIdFromObject: (object) => {
@@ -35,4 +34,4 @@ export const cache = new InMemoryCache({
 				return defaultDataIdFromObject(object) // fall back to default handling
 		}
 	}
-})
+}
diff --git a/graphql/clients/coindufeu.js b/graphql/clients/coindufeu.js
deleted file mode 100644
index defa902..0000000
--- a/graphql/clients/coindufeu.js
+++ /dev/null
@@ -1,28 +0,0 @@
-import { HttpLink } from 'apollo-link-http'
-import { setContext } from 'apollo-link-context'
-import { from } from 'apollo-link'
-
-import { ENDPOINT1 } from './endpoints'
-import { cache } from '../cache'
-
-export default ctx => {
-  const ssrMiddleware = setContext((_, { headers }) => {
-    if (process.client) return headers
-    return {
-      headers
-    }
-  })
-
-  const httpLink = new HttpLink({
-    uri: ENDPOINT1
-  })
-
-  const link = from([ssrMiddleware, httpLink])
-
-  return {
-    link,
-    cache,
-    // https://github.com/nuxt-community/apollo-module/issues/306#issuecomment-607225431
-    defaultHttpLink: false
-  }
-}
\ No newline at end of file
diff --git a/graphql/clients/endpoints.js b/graphql/clients/endpoints.js
deleted file mode 100644
index c3fb96a..0000000
--- a/graphql/clients/endpoints.js
+++ /dev/null
@@ -1,4 +0,0 @@
-module.exports = {
-  ENDPOINT1: 'https://wwgql.coinduf.eu',
-  ENDPOINT2: 'https://myserver.com'
-}
\ No newline at end of file
diff --git a/graphql/clients/otherclient.js b/graphql/clients/otherclient.js
deleted file mode 100644
index a2b2016..0000000
--- a/graphql/clients/otherclient.js
+++ /dev/null
@@ -1,28 +0,0 @@
-import { HttpLink } from 'apollo-link-http'
-import { setContext } from 'apollo-link-context'
-import { from } from 'apollo-link'
-
-import { ENDPOINT2 } from './endpoints'
-import { cache } from '../cache'
-
-export default ctx => {
-  const ssrMiddleware = setContext((_, { headers }) => {
-    if (process.client) return headers
-    return {
-      headers
-    }
-  })
-
-  const httpLink = new HttpLink({
-    uri: ENDPOINT2
-  })
-
-  const link = from([ssrMiddleware, httpLink])
-
-  return {
-    link,
-    cache,
-    // https://github.com/nuxt-community/apollo-module/issues/306#issuecomment-607225431
-    defaultHttpLink: false
-  }
-}
\ No newline at end of file
diff --git a/graphql/config.js b/graphql/config.js
new file mode 100644
index 0000000..db4b788
--- /dev/null
+++ b/graphql/config.js
@@ -0,0 +1,17 @@
+import { cache } from "./cache"
+import * as endpoints from "./endpoints"
+
+let clientConfigs = {}
+
+for (const key in endpoints) {
+	if (key != "default")
+		clientConfigs[key] = {
+			httpEndpoint: endpoints[key],
+			inMemoryCacheOptions: cache,
+			httpLinkOptions: {
+				credentials: "same-origin"
+			}
+		}
+}
+
+export default { clientConfigs }
diff --git a/graphql/endpoints.js b/graphql/endpoints.js
new file mode 100644
index 0000000..959aeb9
--- /dev/null
+++ b/graphql/endpoints.js
@@ -0,0 +1,4 @@
+module.exports = {
+	coindufEu: "https://wwgql.coinduf.eu",
+	trentesauxFr: "https://gql.wotwizard.trentesaux.fr/"
+}
diff --git a/graphql/schemaQuery.js b/graphql/schemaQuery.js
index da45416..31c2bba 100644
--- a/graphql/schemaQuery.js
+++ b/graphql/schemaQuery.js
@@ -1,13 +1,13 @@
-const { ENDPOINT1 } = require('./clients/endpoints');
-const fetch = require('node-fetch');
-const fs = require('fs');
+const endpoints = require("./endpoints")
+const fetch = require("node-fetch")
+const fs = require("fs")
 
-fetch(ENDPOINT1, {
-  method: 'POST',
-  headers: { 'Content-Type': 'application/json' },
-  body: JSON.stringify({
-    variables: {},
-    query: `
+fetch(Object.values(endpoints)[0], {
+	method: "POST",
+	headers: { "Content-Type": "application/json" },
+	body: JSON.stringify({
+		variables: {},
+		query: `
       {
         __schema {
           types {
@@ -19,21 +19,28 @@ fetch(ENDPOINT1, {
           }
         }
       }
-    `,
-  }),
+    `
+	})
 })
-  .then(result => result.json())
-  .then(result => {
-    const filteredData = result.data.__schema.types.filter(
-      type => type.possibleTypes !== null
-    )
-    result.data.__schema.types = filteredData;
+	.then((result) => result.json())
+	.then((result) => {
+		const filteredData = result.data.__schema.types.filter(
+			(type) => type.possibleTypes !== null
+		)
+		result.data.__schema.types = filteredData
 
-    fs.writeFile('./graphql/fragmentTypes.json', JSON.stringify(result.data), err => {
-      if (err) {
-        console.error('Error writing fragmentTypes file', err);
-      } else {
-        console.log('Fragment types successfully extracted!');
-      }
-    });
-  });
\ No newline at end of file
+		fs.writeFile(
+			"./graphql/fragmentTypes.json",
+			JSON.stringify(result.data),
+			(err) => {
+				if (err) {
+					console.error("Error writing fragmentTypes file", err)
+				} else {
+					console.log("Fragment types successfully extracted!")
+				}
+			}
+		)
+	})
+	.catch(function (error) {
+		console.log(error.message)
+	})
diff --git a/i18n/locales/de.json b/i18n/locales/de.json
index 833dafe..33bfa6d 100644
--- a/i18n/locales/de.json
+++ b/i18n/locales/de.json
@@ -279,5 +279,8 @@
 	"wot": {
 		"desc": "Gesamtheit der Mitglieder und der Zertifizierungen, die sie miteinander verbinden",
 		"title": "Vertrauensnetz"
+	},
+	"wotwizard": {
+		"nodeselect": "Wählen Sie einen Server"
 	}
 }
diff --git a/i18n/locales/en.json b/i18n/locales/en.json
index aabe706..73cccc6 100644
--- a/i18n/locales/en.json
+++ b/i18n/locales/en.json
@@ -280,5 +280,8 @@
 	"wot": {
 		"desc": "Set of the individuals recognized as such by their peers including the links that bind them together through certifications",
 		"title": "Web of trust"
+	},
+	"wotwizard": {
+		"nodeselect": "Select a server"
 	}
 }
diff --git a/i18n/locales/es.json b/i18n/locales/es.json
index e272c2f..490dfc5 100644
--- a/i18n/locales/es.json
+++ b/i18n/locales/es.json
@@ -280,5 +280,8 @@
 	"wot": {
 		"desc": "Conjunto de los seres humanos reconocidos como tales por sus pares incluyendo los vínculos que las unen a través de certificaciones (Web of Trust en inglés WOT)",
 		"title": "Red De Confianza(RdC)"
+	},
+	"wotwizard": {
+		"nodeselect": "Seleccione un servidor"
 	}
 }
diff --git a/i18n/locales/fr.json b/i18n/locales/fr.json
index 4027492..d20ce91 100644
--- a/i18n/locales/fr.json
+++ b/i18n/locales/fr.json
@@ -280,5 +280,8 @@
 	"wot": {
 		"desc": "Ensemble des membres et des certifications qui les relient entre eux (<a href='https://www.youtube.com/watch?v=8GaTKfa-ADU' target='_blank'>en savoir plus</a>)",
 		"title": "Toile de confiance"
+	},
+	"wotwizard": {
+		"nodeselect": "Sélectionnez un serveur"
 	}
 }
diff --git a/i18n/locales/it.json b/i18n/locales/it.json
index 3de0144..1edfa4b 100644
--- a/i18n/locales/it.json
+++ b/i18n/locales/it.json
@@ -280,5 +280,8 @@
 	"wot": {
 		"desc": "Insieme di esseri umani riconosciuti come tali dai loro coetanei, compresi i collegamenti che li uniscono attraverso le certificazioni (Web of Trust in inglese WOT)",
 		"title": "Rete Di Fiducia(RdF)"
+	},
+	"wotwizard": {
+		"nodeselect": "Seleziona un server"
 	}
 }
diff --git a/nuxt.config.js b/nuxt.config.js
index e962a02..114d7b8 100644
--- a/nuxt.config.js
+++ b/nuxt.config.js
@@ -1,5 +1,6 @@
 import i18n from "./i18n"
 import pkg from "./package.json"
+import APOLLO_CONFIG from "./graphql/config"
 
 export default {
 	// Disable server-side rendering: https://go.nuxtjs.dev/ssr-mode
@@ -33,7 +34,8 @@ export default {
 	plugins: [
 		"~plugins/favourites.js",
 		"~plugins/filters.js",
-		"~plugins/bootstrap.js"
+		"~plugins/bootstrap.js",
+		"~plugins/getApolloClient.js"
 	],
 
 	// Auto import components: https://go.nuxtjs.dev/config-components
@@ -67,10 +69,10 @@ export default {
 				file: "en.json"
 			},
 			{
-                                code: "it",
-                                name: "Italiano",
-                                file: "it.json"
-                        },
+				code: "it",
+				name: "Italiano",
+				file: "it.json"
+			},
 
 			{
 				code: "fr",
@@ -87,11 +89,9 @@ export default {
 				name: "Deutsch",
 				file: "de.json"
 			}
-		]
-		,
+		],
 		detectBrowserLanguage: {
-			alwaysRedirect: true
-			,
+			alwaysRedirect: true,
 			fallbackLocale: "en"
 		},
 		vueI18n: i18n
@@ -130,13 +130,7 @@ export default {
 		}
 	},
 
-	apollo: {
-		clientConfigs: {
-			default: "~/graphql/clients/coindufeu"
-			//you can setup multiple clients with arbitrary names
-			//, myotherclient : '~/graphql/clients/otherclient'
-		}
-	},
+	apollo: APOLLO_CONFIG,
 
 	router: {
 		linkExactActiveClass: "active"
@@ -151,5 +145,3 @@ export default {
 		}
 	}
 }
-
-
diff --git a/package.json b/package.json
index 9c8a8a7..50ddf8e 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "wotwizard-ui",
-	"version": "2.3.1",
+	"version": "2.4.0",
 	"private": true,
 	"scripts": {
 		"dev": "nuxt",
@@ -21,7 +21,7 @@
 		"@nuxtjs/pwa": "^3.3.5",
 		"apollo-link-context": "^1.0.20",
 		"apollo-link-http": "^1.5.17",
-		"bootstrap": "^5.1.3",
+		"bootstrap": "5.1.3",
 		"core-js": "^3.15.1",
 		"graphql-tag": "^2.12.6",
 		"nuxt": "^2.15.8",
diff --git a/pages/a-propos.vue b/pages/a-propos.vue
index aba2fde..930f3ba 100644
--- a/pages/a-propos.vue
+++ b/pages/a-propos.vue
@@ -72,7 +72,7 @@ export default {
 				},
 				{
 					title: "traducteurs",
-					contrib: ["paidge", "kapis", "Trayeur"]
+					contrib: ["paidge", "kapis", "Trayeur", "wellno1"]
 				},
 				{
 					title: "graphql",
@@ -119,6 +119,8 @@ export default {
 				cgeek:
 					"E35D142DBC3B967FED049B6CCF48782440AC2F5230352D194BFB0DA62A80259C",
 				poka: "D01102D1D649EE65A027BC47FD1FB5BB6FECE7B6230414DB66EC490B51DBED7A",
+				wellno1:
+					"751F817B36AAE403EC4BAE95D15B55132D8CED7ED05F58E791189B0348AE6FE2",
 				Trayeur: "",
 				Spiranne13: "",
 				philmarg1: ""
diff --git a/pages/favoris.vue b/pages/favoris.vue
index 24c68bb..18a1e12 100644
--- a/pages/favoris.vue
+++ b/pages/favoris.vue
@@ -74,6 +74,9 @@ export default {
 		}
 	},
 	apollo: {
+		$client() {
+			return this.$getApolloClient()
+		},
 		favoris: {
 			query: FAVORIS,
 			variables() {
diff --git a/pages/index.vue b/pages/index.vue
index 4923ffd..66febf5 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -77,6 +77,9 @@ export default {
 		}
 	},
 	apollo: {
+		$client() {
+			return this.$getApolloClient()
+		},
 		newMembers: {
 			query: LAST_EVENTS,
 			variables() {
diff --git a/pages/membre.vue b/pages/membre.vue
index 9f2f7be..4cd4918 100644
--- a/pages/membre.vue
+++ b/pages/membre.vue
@@ -44,6 +44,9 @@ export default {
 		}
 	},
 	apollo: {
+		$client() {
+			return this.$getApolloClient()
+		},
 		idFromHash: {
 			query: SEARCH_MEMBER,
 			variables() {
diff --git a/pages/membres/index.vue b/pages/membres/index.vue
index 8b985cc..6fc26c0 100644
--- a/pages/membres/index.vue
+++ b/pages/membres/index.vue
@@ -58,6 +58,9 @@ export default {
 		}
 	},
 	apollo: {
+		$client() {
+			return this.$getApolloClient()
+		},
 		idSearch: {
 			query: SEARCH_MEMBERS,
 			variables() {
diff --git a/pages/parametres.vue b/pages/parametres.vue
index 4cd3d64..8e17fba 100644
--- a/pages/parametres.vue
+++ b/pages/parametres.vue
@@ -87,6 +87,9 @@ export default {
 		}
 	},
 	apollo: {
+		$client() {
+			return this.$getApolloClient()
+		},
 		allParameters: {
 			query: PARAMS,
 			update(data) {
diff --git a/pages/previsions/futures_entrees.vue b/pages/previsions/futures_entrees.vue
index 0bfac33..927726b 100644
--- a/pages/previsions/futures_entrees.vue
+++ b/pages/previsions/futures_entrees.vue
@@ -198,6 +198,9 @@ export default {
 		}
 	},
 	apollo: {
+		$client() {
+			return this.$getApolloClient()
+		},
 		wwResult: {
 			query: NEWCOMERS,
 			update(data) {
diff --git a/pages/previsions/futures_sorties.vue b/pages/previsions/futures_sorties.vue
index 2bb31b8..3786db6 100644
--- a/pages/previsions/futures_sorties.vue
+++ b/pages/previsions/futures_sorties.vue
@@ -88,6 +88,9 @@ export default {
 		}
 	},
 	apollo: {
+		$client() {
+			return this.$getApolloClient()
+		},
 		memEnds: {
 			query: NEXT_EXITS,
 			variables() {
diff --git a/plugins/getApolloClient.js b/plugins/getApolloClient.js
new file mode 100644
index 0000000..6eb01de
--- /dev/null
+++ b/plugins/getApolloClient.js
@@ -0,0 +1,8 @@
+import * as endpoints from "../graphql/endpoints"
+
+export default ({ app }, inject) => {
+	inject(
+		"getApolloClient",
+		() => localStorage.getItem("apollo-client") || Object.keys(endpoints)[0]
+	)
+}
diff --git a/web-ext/manifest.json b/web-ext/manifest.json
index 536c69c..9174b16 100644
--- a/web-ext/manifest.json
+++ b/web-ext/manifest.json
@@ -2,16 +2,16 @@
 	"manifest_version": 2,
 	"name": "Wotwizard UI",
 	"description": "Le magicien de la toile de confiance",
-	"version": "1.0.0",
+	"version": "2.4.0",
 	"homepage_url": "https://wotwizard.axiom-team.fr",
 	"browser_action": {
 		"browser_style": true,
 		"default_icon": "/_nuxt/icons/icon_64x64.0424c5.png",
 		"default_title": "Wotwizard UI"
 	},
-	"background" : {
-        "scripts": ["/launch-web-ext.js"]
-    },
+	"background": {
+		"scripts": ["/launch-web-ext.js"]
+	},
 	"icons": {
 		"64": "/_nuxt/icons/icon_64x64.0424c5.png",
 		"120": "/_nuxt/icons/icon_120x120.0424c5.png"
-- 
GitLab