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"; import { handleClickLink } from "./helper";
const MiniPhotos = (props) => { const MiniPhotos = (props) => {
const { user, userID, linkHandling, ...rest } = props; const { user, userID, linkHandling, ...rest } = props;
const { linkRefs, linkState } = linkHandling; const { linkRefs, linkState } = linkHandling;
const [activeLink, setActiveLink] = linkState; const [activeLink, setActiveLink] = linkState;
const { photos: photosLinkRef } = linkRefs; 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() { const slugBase = `${user.lastname}.${user.firstname}`;
handleClickLink(
{ currentTarget: photosLinkRef.current },
activeLink,
setActiveLink
);
}
return ( const userSlug =
<Card {...rest}> user.index && user.index > 0 ? `${slugBase}.${user.index}` : slugBase;
<Card.Body>
<Card.Title> const photosLink = `/fakebook/${userSlug}/Photos`;
<Link to={photosLink} className="text-body" onClick={handleClick}>
<b>Photos</b> /* ---------------------------------------------------------------- */
</Link>
</Card.Title> function handleClick() {
<Row> handleClickLink(
{photos.map((photo, index) => { { currentTarget: photosLinkRef.current },
return ( activeLink,
//we only render maximum 9 photos setActiveLink
index < NUMBER_OF_PHOTOS && ( );
<Col }
key={index}
xs={4} return (
className="m-0" <Card {...rest}>
style={{ <Card.Body>
paddingLeft: "3px", <Card.Title>
paddingRight: "3px", <Link to={photosLink} className='text-body' onClick={handleClick}>
paddingTop: "0", <b>Photos</b>
paddingBottom: "0", </Link>
}}> </Card.Title>
<Link <Row>
to={`/fakebook/photo/${userID}/${index}`} {photos.map((photo, index) => {
className="text-body" return (
onClick={handleClick} //we only render maximum 9 photos
tabIndex="-1"> index < NUMBER_OF_PHOTOS && (
<ResponsiveImage <Col
photo={photo} key={index}
userID={userID} xs={4}
index={index} className='m-0'
width="100%" style={{
height="100%" paddingLeft: "3px",
/> paddingRight: "3px",
</Link> paddingTop: "0",
</Col> paddingBottom: "0",
) }}
); >
})} <Link
</Row> to={`/fakebook/photo/${userID}/${index}`}
</Card.Body> className='text-body'
</Card> onClick={handleClick}
); tabIndex='-1'
>
<ResponsiveImage
photo={photo}
userID={userID}
index={index}
width='100%'
height='100%'
/>
</Link>
</Col>
)
);
})}
</Row>
</Card.Body>
</Card>
);
}; };
export default MiniPhotos; export default MiniPhotos;