From 52f8bcbff2b2a7e2d7ce582ffcfd47ea456eca46 Mon Sep 17 00:00:00 2001
From: Alex Erdei <mralexerdei@yahoo.co.uk>
Date: Tue, 6 May 2025 13:05:08 +0100
Subject: [PATCH] Fix MiniPhotos component to link to the current users profile
 if index > 0

---
 src/components/MiniPhotos.jsx | 127 ++++++++++++++++++----------------
 1 file changed, 69 insertions(+), 58 deletions(-)

diff --git a/src/components/MiniPhotos.jsx b/src/components/MiniPhotos.jsx
index 8c3e63a..3d1152a 100644
--- a/src/components/MiniPhotos.jsx
+++ b/src/components/MiniPhotos.jsx
@@ -5,70 +5,81 @@ import ResponsiveImage from "./ResponsiveImage";
 import { handleClickLink } from "./helper";
 
 const MiniPhotos = (props) => {
-	const { user, userID, linkHandling, ...rest } = props;
+  const { user, userID, linkHandling, ...rest } = props;
 
-	const { linkRefs, linkState } = linkHandling;
-	const [activeLink, setActiveLink] = linkState;
-	const { photos: photosLinkRef } = linkRefs;
+  const { linkRefs, linkState } = linkHandling;
+  const [activeLink, setActiveLink] = linkState;
+  const { photos: photosLinkRef } = linkRefs;
 
-	const photos = user.photos;
+  const photos = user.photos;
 
-	const NUMBER_OF_PHOTOS = 9;
+  const NUMBER_OF_PHOTOS = 9;
 
-	const photosLink = `/fakebook/${user.lastname}.${user.firstname}/Photos`;
+  /* ---------- FIX: build unique slug ----------------------------- */
 
-	function handleClick() {
-		handleClickLink(
-			{ currentTarget: photosLinkRef.current },
-			activeLink,
-			setActiveLink
-		);
-	}
+  const slugBase = `${user.lastname}.${user.firstname}`;
 
-	return (
-		<Card {...rest}>
-			<Card.Body>
-				<Card.Title>
-					<Link to={photosLink} className="text-body" onClick={handleClick}>
-						<b>Photos</b>
-					</Link>
-				</Card.Title>
-				<Row>
-					{photos.map((photo, index) => {
-						return (
-							//we only render maximum 9 photos
-							index < NUMBER_OF_PHOTOS && (
-								<Col
-									key={index}
-									xs={4}
-									className="m-0"
-									style={{
-										paddingLeft: "3px",
-										paddingRight: "3px",
-										paddingTop: "0",
-										paddingBottom: "0",
-									}}>
-									<Link
-										to={`/fakebook/photo/${userID}/${index}`}
-										className="text-body"
-										onClick={handleClick}
-										tabIndex="-1">
-										<ResponsiveImage
-											photo={photo}
-											userID={userID}
-											index={index}
-											width="100%"
-											height="100%"
-										/>
-									</Link>
-								</Col>
-							)
-						);
-					})}
-				</Row>
-			</Card.Body>
-		</Card>
-	);
+  const userSlug =
+    user.index && user.index > 0 ? `${slugBase}.${user.index}` : slugBase;
+
+  const photosLink = `/fakebook/${userSlug}/Photos`;
+
+  /* ---------------------------------------------------------------- */
+
+  function handleClick() {
+    handleClickLink(
+      { currentTarget: photosLinkRef.current },
+      activeLink,
+      setActiveLink
+    );
+  }
+
+  return (
+    <Card {...rest}>
+      <Card.Body>
+        <Card.Title>
+          <Link to={photosLink} className='text-body' onClick={handleClick}>
+            <b>Photos</b>
+          </Link>
+        </Card.Title>
+        <Row>
+          {photos.map((photo, index) => {
+            return (
+              //we only render maximum 9 photos
+              index < NUMBER_OF_PHOTOS && (
+                <Col
+                  key={index}
+                  xs={4}
+                  className='m-0'
+                  style={{
+                    paddingLeft: "3px",
+                    paddingRight: "3px",
+                    paddingTop: "0",
+                    paddingBottom: "0",
+                  }}
+                >
+                  <Link
+                    to={`/fakebook/photo/${userID}/${index}`}
+                    className='text-body'
+                    onClick={handleClick}
+                    tabIndex='-1'
+                  >
+                    <ResponsiveImage
+                      photo={photo}
+                      userID={userID}
+                      index={index}
+                      width='100%'
+                      height='100%'
+                    />
+                  </Link>
+                </Col>
+              )
+            );
+          })}
+        </Row>
+      </Card.Body>
+    </Card>
+  );
 };
 
 export default MiniPhotos;