Merge pull request #78 from perttuvaarala/image-popup

posts images will now open bigger after clickin them
perttuvaarala · Oct 15, 2023 · d728749 · d728749
2 parents d5ede8a + 2e53bee
commit d728749
Show file tree

Hide file tree

Showing 3 changed files with 48 additions and 5 deletions.
diff --git a/packages/app/src/components/EditProfile/index.tsx b/packages/app/src/components/EditProfile/index.tsx
@@ -149,6 +149,7 @@ function EditProfile() {
 					type="date"
 					value={birthdate}
 					onChange={(e) => setBirthdate(e.target.value)}
+					max={new Date().toISOString().split("T")[0]}
 				></StyledInput>
 				<label>Favourite fishing style</label>
 				<StyledSelect

diff --git a/packages/app/src/components/Image/index.tsx b/packages/app/src/components/Image/index.tsx
@@ -1,11 +1,13 @@
-import { FC } from "react";
+import { FC, useState } from "react";
 import styled from "styled-components";
 
 const StyledImage = styled.img`
 	width: 100%;
 	height: 100%;
 	object-fit: contain;
+	cursor: pointer; /* Add cursor style to indicate it's clickable */
 `;
+
 const StyledImageContainer = styled.div`
 	max-width: 100%;
 	width: 500px;
@@ -14,15 +16,53 @@ const StyledImageContainer = styled.div`
 	border-radius: 0.5rem;
 `;
 
+const ImagePopup = styled.div`
+	position: fixed;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	background: rgba(0, 0, 0, 0.8);
+	z-index: 999;
+`;
+
+const ImagePopupContent = styled.div`
+	max-width: 80%;
+	max-height: 80%;
+`;
+
 interface ImageProps {
 	src: string;
 }
 
 const Image: FC<ImageProps> = ({ src }) => {
+	const [isImagePopupOpen, setImagePopupOpen] = useState(false);
+
+	const openImagePopup = () => {
+		setImagePopupOpen(true);
+	};
+
+	const closeImagePopup = () => {
+		setImagePopupOpen(false);
+	};
+
 	return (
-		<StyledImageContainer>
-			<StyledImage src={src} />
-		</StyledImageContainer>
+		<>
+			<StyledImageContainer onClick={openImagePopup}>
+				<StyledImage src={src} />
+			</StyledImageContainer>
+
+			{isImagePopupOpen && (
+				<ImagePopup onClick={closeImagePopup}>
+					<ImagePopupContent>
+						<StyledImage src={src} />
+					</ImagePopupContent>
+				</ImagePopup>
+			)}
+		</>
 	);
 };
 

diff --git a/packages/app/src/components/Posts/index.tsx b/packages/app/src/components/Posts/index.tsx
@@ -82,7 +82,9 @@ const Post: FC<PostProps> = ({ post }) => {
 		<StyledPost>
 			<StyledDiv>
 				<h3>{post.user.username}</h3>
-				<p>Favourite: {post.user.favouriteFishingStyle}</p>
+				{post.user.favouriteFishingStyle && (
+					<p>Favourite: {post.user.favouriteFishingStyle}</p>
+				)}
 			</StyledDiv>
 			<StyledDiv>
 				<div>