feat: contextual page title

client/src/hooks/use-title.ts

@@ -0,0 +1,7 @@
+import { useEffect } from "react"
+
+export const useTitle = (title: string) => {
+  useEffect(() => {
+    window.document.title = `⏱️ | ${title}`
+  }, [title])
+}

client/src/routes/home/index.tsx

@@ -1,12 +1,15 @@
-import React, { FunctionComponent, MouseEvent, useCallback, useState } from "react";
+import React, { FunctionComponent, MouseEvent, useCallback, useEffect, useState } from "react";
 import style from "./style.module.css";
 import { useHistory } from 'react-router';
 import { base58UUID } from '../../util/uuid';
 import { useStoredProjectList } from "../../hooks/use-stored-project-list";
 import { formatDate } from "../../util/date";
 import { Direction, useSort } from "../../hooks/useSort";
+import { useTitle } from "../../hooks/use-title";
 
 const Home: FunctionComponent = () => {
+  useTitle('Accueil')
+
   const [projects] = useStoredProjectList()
   const [sortingKey, setSortingKey] = useState('updatedAt')
   const [sortingDirection, setSortingDirection] = useState<Direction>(Direction.DESC)
@@ -33,7 +36,6 @@ const Home: FunctionComponent = () => {
     }
 
     setSortingDirection(sortingDirection => -sortingDirection)
-
   }, [sortingKey, sortingDirection])
 
   return (

client/src/routes/notfound/index.tsx

@@ -1,15 +1,18 @@
 import React, { FunctionComponent } from "react";
 import { Link } from 'react-router-dom';
 import style from "./style.module.css";
+import { useTitle } from "../../hooks/use-title";
 
 const NotFound: FunctionComponent = () => {
-    return (
+  useTitle("Page non trouvée")
-        <div className={style.notFound}>
+
-            <h1>Error 404</h1>
+  return (
-            <p>That page doesn't exist.</p>
+    <div className={style.notFound}>
-            <Link to="/"><h4>Back to Home</h4></Link>
+      <h1>Erreur 404</h1>
-        </div>
+      <p>Cette page n'existe pas</p>
-    );
+      <Link to="/"><h4>Retour à la page d'accueil</h4></Link>
+    </div>
+  );
 };
 
 export default NotFound;

client/src/routes/project/index.tsx

@@ -11,13 +11,14 @@ import ParamsTab from "./params-tab";
 import ExportTab from "./export-tab";
 import { useServerSync } from "../../hooks/use-server-sync";
 import { RouteChildrenProps, RouteProps, useParams } from "react-router";
+import { useTitle } from "../../hooks/use-title";
 
 export interface ProjectProps {
   projectId: string
 }
 
 const Project: FunctionComponent<ProjectProps> = () => {
-  const { projectId } = useParams();
+  const { projectId } = useParams<{ projectId: string }>();
   const projectStorageKey = getProjectStorageKey(projectId);
   const [ storedProject, storeProject ] = useLocalStorage(projectStorageKey, newProject(projectId));
   const [ project, dispatch ] = useProjectReducer(storedProject);
@@ -34,6 +35,8 @@ const Project: FunctionComponent<ProjectProps> = () => {
   useEffect(()=> {
     storeProject(project);
   }, [project]);
+
+  useTitle(project.label ? project.label : "Projet sans nom")
   
   return (
     <div className={`container ${style.estimation}`}>

client/webpack.config.js

@@ -63,7 +63,7 @@ module.exports = {
   plugins: [
     new ForkTsCheckerWebpackPlugin(),
     new HtmlWebpackPlugin({
-      title: 'Guesstimate',
+      title: '⏱️ Guesstimate',
       scriptLoading: 'defer',
 
       template: path.join(__dirname, 'src/index.html')    
@@ -87,7 +87,7 @@ module.exports = {
 function getCurrentVersion() {
   let version 
   try {
-    version = exec("git describe --abbrev=0 2>/dev/null")
+    version = exec("git describe --always 2>/dev/null")
   } catch(err) {}
   return version ? version : "0.0.0";
 }