Fix issues related to last names like for those having special characters.

Add logics to not scroll systematically to the top of the page when changing from about page to portrait ones and reciprocally.

Author: HaudinFlorence

src/components/about/LargePortraitCardPage.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import Layout from '@theme/Layout';
-import { useHistory, useLocation} from '@docusaurus/router';
+import { useHistory, useLocation } from '@docusaurus/router';
+import { useEffect } from 'react';
 import { Route } from 'react-router-dom';
 import { About } from '@site/src/components/about'
 import LargePortraitCard from '@site/src/components/about/LargePortraitCard';
@@ -11,9 +12,32 @@ export default function LargePortraitCardPage() {
   const location = useLocation();
   const history = useHistory();
 
-  function handleClose() {
+  useEffect(() => {
     if (location.state?.fromAbout) {
-      history.push('/about');
+      window.scrollTo({ top: location.state.scrollY ?? 0, behavior: 'auto' });
+    }
+  }, []);
+
+  const handleOverlayClick = () => {
+    const scrollY = location.state?.scrollY;
+    setTimeout(() => {
+      if (scrollY !== undefined) {
+        window.scrollTo({ top: scrollY, behavior: 'auto' });
+      }
+    }, 0);
+      history.replace('/about');
+  };
+
+  const handleClose = () => {
+    const scrollY = location.state?.scrollY;
+    if (location.state?.fromAbout) {
+      history.replace('/about');
+
+      setTimeout(() => {
+        if (scrollY !== undefined) {
+          window.scrollTo({ top: scrollY, behavior: 'auto' });
+        }
+      }, 0);
     } else {
       history.goBack();
     }
@@ -24,13 +48,13 @@ export default function LargePortraitCardPage() {
       <Route
         path="/about/:completeName"
         render={({ history, match }) => {
-          const { completeName } = match.params;
+          const { completeName } = match.params; /* extract the dynamic part from the url i.e. the completeName*/
           const teamMembers = getTeamByPersonName(completeName);
-          const person = teamMembers.find(person => person.completeName.replace(/\s+/g, '') === completeName);
+          const person = teamMembers.find((person) => person.completeName.replace(/\s+/g, '').normalize("NFD").replace(/[\u0300-\u036f]/g, '') === completeName);
           if (!person) return null;
 
           return (
-            <div className={styles.modal_overlay} onClick={() => history.push('/about')}>
+            <div className={styles.modal_overlay} onClick={handleOverlayClick}>
               <div
                 className={styles.modal_content}
                 onClick={(e) => e.stopPropagation()}

src/components/about/SmallPortraitCard.tsx

@@ -2,13 +2,17 @@ import styles from "./styles.module.css";
 import { useHistory } from "@docusaurus/router";
 import Avatar from "./Avatar";
 
-export function SmallPortraitCard({ person}) {
+export function SmallPortraitCard({ person }) {
   const history = useHistory();
 
   function openDialog() {
+    let completeName = person.completeName.replace(/\s+/g, '');
+    const completeNameWithoutAccents = completeName
+      .normalize("NFD")
+      .replace(/[\u0300-\u036f]/g, '');
     history.push({
-      pathname: `/about/${person.completeName.replace(/\s+/g, '')}`,
-      state: { fromAbout: true },
+      pathname: `/about/${completeNameWithoutAccents}`,
+      state: { fromAbout: true, scrollY: window.scrollY, },
     });
   }
 

src/components/about/index.tsx

@@ -6,7 +6,7 @@ import LinkToContact from "../home/LinkToContact";
 
 export function getTeamByPersonName(name: string) {
   for (const [teamName, members] of Object.entries(teams)) {
-    const person = members.find((person) => person.completeName.replace(/\s+/g, '') === name);
+    const person = members.find((person) => person.completeName.replace(/\s+/g, '').replace(/\s+/g, '').normalize("NFD").replace(/[\u0300-\u036f]/g, '') === name);
     if (person) {
       return members;
     }

src/pages/about/TrungLeDuc.tsx renamed to src/pages/about/LeDucTrung.tsx

@@ -1,6 +1,3 @@
-import React from 'react';
-import Layout from '@theme/Layout';
-import { useHistory, useLocation} from '@docusaurus/router';
 import LargePortraitCardPage from "@site/src/components/about/LargePortraitCardPage";
 
 export default function AboutPage() {