LanguageSelection

frontend/codegen/generates.ts

@@ -269,6 +269,11 @@ export type LoginQueryVariables = Exact<{
 
 export type LoginQuery = { __typename?: 'QueryType', login: { __typename?: 'login', jwt?: string | null | undefined } };
 
+export type LanguagesQueryVariables = Exact<{ [key: string]: never; }>;
+
+
+export type LanguagesQuery = { __typename?: 'QueryType', languages: Array<{ __typename?: 'languages', id: string, name: string, flag_url: string }> };
+
 export type LookupQueryVariables = Exact<{
   token?: InputMaybe<Scalars['String']>;
 }>;
@@ -310,6 +315,27 @@ export const useLoginQuery = <
       fetcher<LoginQuery, LoginQueryVariables>(LoginDocument, variables),
       options
     );
+export const LanguagesDocument = `
+    query Languages {
+  languages {
+    id
+    name
+    flag_url
+  }
+}
+    `;
+export const useLanguagesQuery = <
+      TData = LanguagesQuery,
+      TError = unknown
+    >(
+      variables?: LanguagesQueryVariables,
+      options?: UseQueryOptions<LanguagesQuery, TError, TData>
+    ) =>
+    useQuery<LanguagesQuery, TError, TData>(
+      variables === undefined ? ['Languages'] : ['Languages', variables],
+      fetcher<LanguagesQuery, LanguagesQueryVariables>(LanguagesDocument, variables),
+      options
+    );
 export const LookupDocument = `
     query Lookup($token: String = "R4nd0m") {
   lookup(token: $token) {

frontend/codegen/queries.ts

@@ -5,6 +5,15 @@ export const login = gql`
     login(auth: $auth) {jwt}
   }`
 
+export const languages = gql`
+  query Languages {
+    languages {
+      id
+      name
+      flag_url
+    }
+  }`
+
 export const lookup = gql`
   query Lookup($token: String="R4nd0m") {
     lookup(token: $token) {

frontend/components/LanguageSelection.tsx

@@ -0,0 +1,21 @@
+import { useLanguagesQuery } from '../codegen/generates'
+import i18next from 'i18next'
+
+export default function LanguageSelection() {
+  const {data, remove, refetch} = useLanguagesQuery()
+  const {languages} = data || {}
+
+  return languages && (
+    <div>
+     { languages.map( lang => (
+         <span key={lang.id}>
+           <img src={lang.flag_url} title={lang.name} style={{height: "15px"}}
+	        onClick={() => i18next.changeLanguage(lang.id)}
+	   />
+	   &nbsp;
+         </span>
+       ))
+     }
+    </div>
+  ) || ''
+}

frontend/components/Layout.js

@@ -1,6 +1,7 @@
 import styles from '../styles/Layout.module.css'
 import Head from 'next/head'
 import QueryClientProvider from '../components/QueryClientProvider'
+import LanguageSelection from './LanguageSelection';
 import { useTranslation, Trans } from 'react-i18next';
 import constants from '../i18n/const.json'
 
@@ -17,7 +18,7 @@ export default function Layout({children}) {
         </Head>
 
         <div className={styles.header}>
-          <div>LangSelection</div>
+          <div><LanguageSelection/></div>
           <div className={styles.slogan}>
             <h1>psych<img src="/favicon.ico" className={styles.favicon}/>logical.<wbr/>contact</h1>
             { t('Find support from the SAR Network') }

frontend/styles/Layout.module.css

@@ -38,7 +38,7 @@
 }
 
 .header div {
-  min-width: 100px;  /** keep LangSelection and Login symetric **/
+  min-width: 200px;  /** keep LangSelection and Login symetric **/
 }
 
 .footer {