About menu

src/js/components/about/About.tsx

@@ -0,0 +1,56 @@
+import React, { useState, useEffect } from 'react';
+import Typography from '@material-ui/core/Typography';
+import { Tooltip } from '@material-ui/core';
+import dayjs from 'dayjs';
+import GitInfo from 'react-git-info/macro';
+import { Configuration, getConfiguration } from 'js/api/configuration';
+import FilDAriane, { fil } from 'js/components/commons/fil-d-ariane';
+
+const EnTete = () => (
+	<div className="en-tete">
+		<Typography variant="h2" align="center" color="textPrimary" gutterBottom>
+			A propos d'Onyxia
+		</Typography>
+	</div>
+);
+
+const About = () => {
+	const [configuration, setConfiguration] = useState<Configuration>();
+
+	useEffect(() => {
+		getConfiguration().then((resp) => setConfiguration(resp));
+	}, []);
+
+	const gitInfo = GitInfo();
+	return (
+		<>
+			<EnTete />
+			<FilDAriane fil={fil.about} />
+			<div className="contenu accueil">
+				<Typography gutterBottom noWrap>
+					<Tooltip title={gitInfo.commit.message}>
+						<>
+							Interface :
+							{gitInfo.tags.length > 0 ? gitInfo.tags[0] : gitInfo.branch}(
+							{gitInfo.commit.date})
+							<br />
+							Serveur :
+							{configuration
+								? `${configuration.build.version} (
+							  ${dayjs(configuration.build.timestamp * 1000).format()} 
+							  )`
+								: ' introuvable'}
+							<br />
+							Region :{' '}
+							{configuration?.regions?.length > 0
+								? configuration.regions[0].regionId
+								: ' introuvable'}
+						</>
+					</Tooltip>
+				</Typography>
+			</div>
+		</>
+	);
+};
+
+export default About;

src/js/components/about/index.ts

@@ -0,0 +1 @@
+export { default } from './About';

src/js/components/app.js

@@ -32,6 +32,7 @@ import Favicon from 'js/components/commons/favicon';
 import MesSecretsHome from 'js/components/mes-secrets/home';
 import MesSecrets from 'js/components/mes-secrets';
 import Notifications from 'js/components/notifications';
+import About from 'js/components/about';
 import 'typeface-roboto';
 import './app.scss';
 
@@ -99,6 +100,7 @@ const AppFeelGood = ({ waiting, applicationResize, idep }) => (
 					<main role="main">
 						<Switch>
 							<Route path="/accueil" component={Accueil} />
+							<Route path="/about" component={About} />
 							<Route exact path="/services" component={Services} />
 							<Route path="/services/*" component={ServiceDetails} />
 							<Route exact path="/trainings" component={Trainings} />

src/js/components/commons/fil-d-ariane/fil-d-ariane.js

@@ -8,6 +8,13 @@ export const fil = {
 	accueil: [
 		{ pathname: '/home', component: <Icon className="home-icone">home</Icon> },
 	],
+	about: [
+		{ pathname: '/home', component: <Icon className="home-icone">home</Icon> },
+		{
+			pathname: '/about',
+			component: <span>A propos</span>,
+		},
+	],
 	catalogues: [
 		{ pathname: '/home', component: <Icon className="home-icone">home</Icon> },
 		{

src/js/components/commons/footer/footer.tsx

@@ -1,6 +1,6 @@
-import React, { useState, useEffect } from 'react';
+import React from 'react';
 import Typography from '@material-ui/core/Typography';
-import { Button, Icon, Tooltip } from '@material-ui/core';
+import { Button, Icon } from '@material-ui/core';
 import Divider from '@material-ui/core/Divider';
 import {
 	RocketChatIcon,
@@ -10,18 +10,7 @@ import {
 import './footer.scss';
 import conf from '../../../configuration';
 
-import GitInfo from 'react-git-info/macro';
-import { getConfiguration, Configuration } from 'js/api/configuration';
-import dayjs from 'dayjs';
-
 const Footer = () => {
-	const [configuration, setConfiguration] = useState<Configuration>();
-
-	useEffect(() => {
-		getConfiguration().then((resp) => setConfiguration(resp));
-	}, []);
-
-	const gitInfo = GitInfo();
 	return (
 		<footer className="footer">
 			<Divider light />
@@ -54,28 +43,6 @@ const Footer = () => {
 				<LienSimple href={conf.FOOTER.ONYXIA.GIT}>contribuer</LienSimple>
 				<LienSimple href={conf.FOOTER.SWAGGER_API}>notre api</LienSimple>
 			</Typography>
-
-			<Typography gutterBottom noWrap>
-				<Tooltip title={gitInfo.commit.message}>
-					<>
-						Interface :
-						{gitInfo.tags.length > 0 ? gitInfo.tags[0] : gitInfo.branch}(
-						{gitInfo.commit.date})
-						<br />
-						Serveur :
-						{configuration
-							? `${configuration.build.version} (
-							  ${dayjs(configuration.build.timestamp * 1000).format()} 
-							  )`
-							: ' introuvable'}
-						<br />
-						Region :{' '}
-						{configuration?.regions?.length > 0
-							? configuration.regions[0].regionId
-							: ' introuvable'}
-					</>
-				</Tooltip>
-			</Typography>
 		</footer>
 	);
 };

src/js/components/commons/nav-bar/app-menu.js → src/js/components/commons/nav-bar/app-menu.tsx

@@ -31,17 +31,6 @@ const ItemLogin = ({ login }) => (
 	</ListItem>
 );
 
-/*const ItemLogout = ({ logout }) => (
-  <ListItem button onClick={logout}>
-    <ListItemIcon>
-      <Icon className="login" style={{ color: "crimson" }}>
-        power_settings_new_icon
-      </Icon>
-    </ListItemIcon>
-    <ListItemText primary="logout" />
-  </ListItem>
-);*/
-
 export default ({
 	open,
 	handleClose,
@@ -121,6 +110,15 @@ export default ({
 						<ListItemText primary={D.mySecretsTitle} />
 					</ListItem>
 				) : null}
+				<ListItem>
+					<ListItemText primary="Informations" />
+				</ListItem>
+				<ListItem button component={Link} to="/about">
+					<ListItemIcon>
+						<Icon>infoIcon</Icon>
+					</ListItemIcon>
+					<ListItemText primary={D.about} />
+				</ListItem>
 			</List>
 		</div>
 	</Drawer>

src/js/i18n/build-dictionary.js → src/js/i18n/build-dictionary.ts

@@ -25,11 +25,7 @@ export const createDictionary = (lang) => (dict) =>
  * If the lang is not fr, will return en
  * @param {string} lang the lang of the user
  */
-export const getLang = (defaultLang) =>
-	(defaultLang || navigator.language || navigator.browserLanguage).split(
-		'-'
-	)[0] === 'fr'
-		? 'fr'
-		: 'en';
+export const getLang = (defaultLang?: string) =>
+	(defaultLang || navigator.language)?.split('-')[0] === 'fr' ? 'fr' : 'en';
 
 export default createDictionary(getLang());

src/js/i18n/dictionary/about.ts

@@ -0,0 +1,8 @@
+const dictionary = {
+	about: {
+		fr: 'A propos',
+		en: 'About',
+	},
+};
+
+export default dictionary;

src/js/i18n/dictionary/index.js → src/js/i18n/dictionary/index.ts

@@ -7,4 +7,5 @@ export { default as trainings } from './trainings';
 export { default as guidedtour } from './visiteguidee';
 export { default as messecrets } from './messecrets';
 export { default as mesfichiers } from './mesfichiers';
+export { default as about } from './about';
 export * from './commons';