Update SmallPortraitCard and AboutPage component except for index.ts page.

Author: HaudinFlorence

src/components/about/LargePortraitCardPage.tsx

@@ -0,0 +1,56 @@
+import React from 'react';
+import Layout from '@theme/Layout';
+import { useHistory, useLocation} from '@docusaurus/router';
+import { Route } from 'react-router-dom';
+import { About } from '@site/src/components/about'
+import LargePortraitCard from '@site/src/components/about/LargePortraitCard';
+import { getTeamByPersonName } from '@site/src/components/about';
+import styles from "@site/src/components/about/styles.module.css";
+
+export default function LargePortraitCardPage() {
+  const location = useLocation();
+  const history = useHistory();
+
+  function handleClose() {
+    if (location.state?.fromAbout) {
+      history.push('/about');
+    } else {
+      history.goBack();
+    }
+  }
+  return (
+    <Layout>
+      <About />
+      <Route
+        path="/about/:completeName"
+        render={({ history, match }) => {
+          const { completeName } = match.params;
+          const teamMembers = getTeamByPersonName(completeName);
+          const person = teamMembers.find(person => person.completeName.replace(/\s+/g, '') === completeName);
+          if (!person) return null;
+
+          return (
+            <div className={styles.modal_overlay} onClick={() => history.push('/about')}>
+              <div
+                className={styles.modal_content}
+                onClick={(e) => e.stopPropagation()}
+              >
+                <button
+                  className="close-button"
+                  style={{
+                    position: "absolute",
+                    top: "10px",
+                    right: "10px",
+                  }}
+                  onClick={handleClose}
+                />
+                <LargePortraitCard person={person} />
+              </div>
+            </div>
+          );
+        }}
+      />
+    </Layout>
+  )
+}
+

src/components/about/SmallPortraitCard.tsx

@@ -2,14 +2,15 @@ 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 () {
-    history.push("/about/");
-    history.push("/about/" + person.firstName);
-
-  };
+  function openDialog() {
+    history.push({
+      pathname: `/about/${person.completeName.replace(/\s+/g, '')}`,
+      state: { fromAbout: true },
+    });
+  }
 
   return (
     <div onClick={openDialog}>

src/components/about/SmallPortraitCardWithDialog.tsx

@@ -1,7 +1,5 @@
 import styles from "./styles.module.css";
-import Example from "./PortraitDialog";
-import { SmallPortraitCardWithDialog } from "./SmallPortraitCardWithDialog";
-
+import { SmallPortraitCard } from "./SmallPortraitCard";
 
 export default function SubTeam({ subTeamName, subTeam }) {
   return (
@@ -12,7 +10,7 @@ export default function SubTeam({ subTeamName, subTeam }) {
           {subTeam.map((person, index) => (
             <li className="cards-list" key={person.firstName}>
               <div className="col">
-                <SmallPortraitCardWithDialog person={person} />
+                <SmallPortraitCard person={person} />
               </div>
             </li>
           ))}