alex73
/
fakebook-aigen
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fix MiniPhotos component to link to the current users profile if index > 0

This commit is contained in:
Alex Erdei 2025-05-06 13:05:08 +01:00
parent eb70197adb
commit 52f8bcbff2
1 changed files with 69 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

127
src/components/MiniPhotos.jsx
View File

@ -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;