From 537587b05227c35442b9100000010eb672808016 Mon Sep 17 00:00:00 2001 From: Stepan Usatiuk Date: Fri, 16 Oct 2020 15:47:27 +0000 Subject: [PATCH] show photo in an overlay --- frontend/src/Home/Home.tsx | 3 +- frontend/src/Photos/Overview.scss | 27 ++++++++++++++++++ frontend/src/Photos/Overview.tsx | 45 +++++++++++++++++++++++++----- frontend/src/Photos/Photo.tsx | 25 +++++++---------- frontend/src/Photos/PhotoCard.tsx | 5 ++-- frontend/src/Photos/PhotoRoute.tsx | 17 +++++++++++ 6 files changed, 96 insertions(+), 26 deletions(-) create mode 100644 frontend/src/Photos/PhotoRoute.tsx diff --git a/frontend/src/Home/Home.tsx b/frontend/src/Home/Home.tsx index 8f00a31..6e0b648 100644 --- a/frontend/src/Home/Home.tsx +++ b/frontend/src/Home/Home.tsx @@ -24,6 +24,7 @@ import { toggleDarkMode } from "~redux/localSettings/actions"; import { IAppState } from "~redux/reducers"; import { logoutUser } from "~redux/user/actions"; import { Photo } from "~Photos/Photo"; +import { PhotoRoute } from "~Photos/PhotoRoute"; export interface IHomeProps extends RouteComponentProps { user: IUserJSON | null; @@ -103,7 +104,7 @@ export class HomeComponent extends React.PureComponent { /> diff --git a/frontend/src/Photos/Overview.scss b/frontend/src/Photos/Overview.scss index 765260e..090077d 100644 --- a/frontend/src/Photos/Overview.scss +++ b/frontend/src/Photos/Overview.scss @@ -1,5 +1,32 @@ @import "~@blueprintjs/core/lib/scss/variables"; +#photoOverlayContainer { + width: 100%; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + transition: 0.3s; +} + +.bp3-overlay-enter { + opacity: 0; +} + +.bp3-overlay-enter-active { + opacity: 1; +} + + +.bp3-overlay-exit { + opacity: 1; +} + +.bp3-overlay-exit-active { + opacity: 0; +} + + #overview { display: flex; flex-direction: column; diff --git a/frontend/src/Photos/Overview.tsx b/frontend/src/Photos/Overview.tsx index 1b744b1..6d9a743 100644 --- a/frontend/src/Photos/Overview.tsx +++ b/frontend/src/Photos/Overview.tsx @@ -7,8 +7,9 @@ import { photosLoadStart } from "~redux/photos/actions"; import { IPhotoReqJSON } from "~../../src/entity/Photo"; import { LoadingStub } from "~LoadingStub"; import { PhotoCard } from "./PhotoCard"; -import { Button } from "@blueprintjs/core"; +import { Button, Classes, Overlay } from "@blueprintjs/core"; import { UploadButton } from "./UploadButton"; +import { Photo } from "./Photo"; export interface IOverviewComponentProps { photos: IPhotoReqJSON[] | null; @@ -23,6 +24,9 @@ export interface IOverviewComponentProps { export const OverviewComponent: React.FunctionComponent = ( props, ) => { + const [selectedPhoto, setSelectedPhoto] = React.useState(0); + const [isOverlayOpened, setOverlayOpen] = React.useState(false); + if (!props.overviewLoaded && !props.overviewFetching) { props.fetchPhotos(); } @@ -30,17 +34,44 @@ export const OverviewComponent: React.FunctionComponent return ; } + const onCardClick = (id: number) => { + setSelectedPhoto(id); + setOverlayOpen(true); + }; + const photos = props.photos .sort((a, b) => b.shotAt - a.shotAt) - .map((photo) => ); + .map((photo) => ( + onCardClick(photo.id)} + /> + )); return ( -
-
- + <> + { + setOverlayOpen(false); + }} + lazy + > +
+ +
+ +
+
+ +
+
{photos}
-
{photos}
-
+ ); }; diff --git a/frontend/src/Photos/Photo.tsx b/frontend/src/Photos/Photo.tsx index 4c63238..9983c17 100644 --- a/frontend/src/Photos/Photo.tsx +++ b/frontend/src/Photos/Photo.tsx @@ -1,7 +1,6 @@ import "./Photo.scss"; import * as React from "react"; import { connect } from "react-redux"; -import { RouteComponentProps, withRouter } from "react-router"; import { Dispatch } from "redux"; import { IPhotoReqJSON } from "~../../src/entity/Photo"; import { LoadingStub } from "~LoadingStub"; @@ -10,25 +9,19 @@ import { photoLoadStart } from "~redux/photos/actions"; import { IPhotoState } from "~redux/photos/reducer"; import { IAppState } from "~redux/reducers"; -export interface IPhotoComponentProps extends RouteComponentProps { +export interface IPhotoComponentProps { + id: number; photo: IPhotoReqJSON | undefined; photoState: IPhotoState | undefined; fetchPhoto: (id: number) => void; } -function getId(props: RouteComponentProps) { - return parseInt((props.match?.params as { id: string }).id); -} - export const PhotoComponent: React.FunctionComponent = ( props, ) => { - const id = getId(props); - if (!props.photo && !props.photoState?.fetching) { - console.log(props); - props.fetchPhoto(id); + props.fetchPhoto(props.id); } if (!props.photo) { return ; @@ -53,8 +46,8 @@ export const PhotoComponent: React.FunctionComponent = ( ); }; -function mapStateToProps(state: IAppState, props: RouteComponentProps) { - const id = getId(props); +function mapStateToProps(state: IAppState, props: IPhotoComponentProps) { + const { id } = props; let photo = undefined; let photoState = undefined; @@ -74,6 +67,8 @@ function mapDispatchToProps(dispatch: Dispatch) { return { fetchPhoto: (id: number) => dispatch(photoLoadStart(id)) }; } -export const Photo = withRouter( - connect(mapStateToProps, mapDispatchToProps)(PhotoComponent), -); +// Because https://github.com/DefinitelyTyped/DefinitelyTyped/issues/16990 +export const Photo = connect( + mapStateToProps, + mapDispatchToProps, +)(PhotoComponent) as any; diff --git a/frontend/src/Photos/PhotoCard.tsx b/frontend/src/Photos/PhotoCard.tsx index 455d3e2..d520967 100644 --- a/frontend/src/Photos/PhotoCard.tsx +++ b/frontend/src/Photos/PhotoCard.tsx @@ -20,6 +20,7 @@ export interface IPhotoCardComponentProps extends RouteComponentProps { deletePhoto: (photo: IPhotoReqJSON) => void; cancelDelete: (photo: IPhotoReqJSON) => void; + onClick: () => void; } @ContextMenuTarget @@ -48,9 +49,7 @@ export class PhotoCardComponent extends React.PureComponent< - this.props.history.push(`/photos/${this.props.photo.id}`) - } + onClick={() => this.props.onClick()} > {fileExists ? ( = ( + props: RouteComponentProps, +) => { + const id = getId(props); + + return ; +}; + +export const PhotoRoute = withRouter(PhotoRouteComponent);