Fix issues related to last names like for those having with 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,23 @@ export default function LargePortraitCardPage() {
   const location = useLocation();
   const history = useHistory();
 
+  useEffect(() => {
+  if (location.state?.fromAbout) {
+    window.scrollTo({ top: location.state.scrollY ?? 0, behavior: 'auto' });
+  }
+}, []);
+
   function handleClose() {
+    const scrollY = location.state?.scrollY;
+
     if (location.state?.fromAbout) {
       history.push('/about');
+
+      setTimeout(() => {
+        if (scrollY !== undefined) {
+          window.scrollTo({ top: scrollY, behavior: 'auto' });
+        }
+      }, 0);
     } else {
       history.goBack();
     }
@@ -25,8 +40,11 @@ export default function LargePortraitCardPage() {
         path="/about/:completeName"
         render={({ history, match }) => {
           const { completeName } = match.params;
+          console.log('name:', completeName)
           const teamMembers = getTeamByPersonName(completeName);
-          const person = teamMembers.find(person => person.completeName.replace(/\s+/g, '') === completeName);
+          console.log('members:', teamMembers)
+          const person = teamMembers.find((person) => person.completeName.replace(/\s+/g, '').normalize("NFD").replace(/[\u0300-\u036f]/g, '') === completeName);
+          console.log('Person:', person)
           if (!person) return null;
 
           return (

src/components/about/SmallPortraitCard.tsx

@@ -2,13 +2,18 @@ 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, '');
+    console.log('completeName:', completeNameWithoutAccents);
     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;
     }