selectable photos

frontend/src/Photos/Overview.tsx

@@ -31,15 +31,33 @@ export interface IOverviewComponentProps {
     fetchPhotos: () => void;
 }
 
+const PhotoCardM = React.memo(PhotoCard);
+
 export const OverviewComponent: React.FunctionComponent<
     IOverviewComponentProps
 > = (props) => {
     const [selectedPhoto, setSelectedPhoto] = React.useState<number>(0);
     const [isOverlayOpened, setOverlayOpen] = React.useState<boolean>(false);
-
-    const onCardClick = (id: number) => {
-        setSelectedPhoto(id);
-        setOverlayOpen(true);
+    const [selectedPhotos, setSelectedPhotos] = React.useState<Set<number>>(
+        new Set(),
+    );
+    const selectedPhotosRef = React.useRef<Set<number>>(selectedPhotos);
+    selectedPhotosRef.current = selectedPhotos;
+    const onCardClick = (e: React.MouseEvent<HTMLElement>, id: number) => {
+        if (e.ctrlKey) {
+            const newSelectedPhotos = new Set<number>([
+                ...selectedPhotosRef.current,
+            ]);
+            if (newSelectedPhotos.has(id)) {
+                newSelectedPhotos.delete(id);
+            } else {
+                newSelectedPhotos.add(id);
+            }
+            setSelectedPhotos(newSelectedPhotos);
+        } else {
+            setSelectedPhoto(id);
+            setOverlayOpen(true);
+        }
     };
 
     if (
@@ -73,6 +91,10 @@ export const OverviewComponent: React.FunctionComponent<
         {},
     );
 
+    const onClick = React.useCallback((e: React.MouseEvent<HTMLElement>) => {
+        onCardClick(e, Number(e.currentTarget.id));
+    }, []);
+
     const photos = Object.keys(dates).reduce(
         (acc: JSX.Element[], year): JSX.Element[] => {
             const els = Object.keys(dates[year]).reduce(
@@ -85,10 +107,12 @@ export const OverviewComponent: React.FunctionComponent<
                     );
                     const photosEls = photos.map((photo) => {
                         return (
-                            <PhotoCard
-                                key={photo.id}
+                            <PhotoCardM
+                                selected={selectedPhotos.has(photo.id)}
+                                key={"p" + photo.id}
+                                id={String(photo.id)}
                                 photo={photo}
-                                onClick={() => onCardClick(photo.id)}
+                                onClick={onClick}
                             />
                         );
                     });

frontend/src/Photos/PhotoCard.scss

@@ -2,6 +2,10 @@
     img {
         transition: all 0.3s;
     }
+    .selected {
+        padding: 1rem;
+        border-radius: 1.5rem;
+    }
 
     .notLoaded {
         opacity: 0;
@@ -10,4 +14,5 @@
     .loaded {
         opacity: 1;
     }
+
 }

frontend/src/Photos/PhotoCard.tsx

@@ -20,10 +20,12 @@ import { LargeSize, PreviewSize } from "./helper";
 
 export interface IPhotoCardComponentProps extends RouteComponentProps {
     photo: IPhotoReqJSON;
+    selected: boolean;
+    id: string;
 
     deletePhoto: (photo: IPhotoReqJSON) => void;
     cancelDelete: (photo: IPhotoReqJSON) => void;
-    onClick: () => void;
+    onClick: (e: React.MouseEvent<HTMLElement>) => void;
 }
 
 export interface IPhotoCardComponentState {
@@ -73,12 +75,18 @@ export class PhotoCardComponent extends React.PureComponent<
             <Card
                 className="photoCard"
                 interactive={true}
-                onClick={() => this.props.onClick()}
+                id={this.props.id}
+                onClick={(e: React.MouseEvent<HTMLElement>) =>
+                    this.props.onClick(e)
+                }
             >
                 {fileExists ? (
                     <img
                         src={getPhotoThumbPath(this.props.photo, PreviewSize)}
-                        className={this.state.loaded ? "loaded" : "notLoaded"}
+                        className={
+                            (this.state.loaded ? "loaded " : "notLoaded ") +
+                            (this.props.selected ? "selected " : " ")
+                        }
                         onLoad={() => this.setLoaded(true)}
                         /*
                         onMouseEnter={() =>

frontend/tsconfig.json

@@ -1,9 +1,6 @@
 {
     "compilerOptions": {
-        "lib": [
-            "es2017",
-            "dom"
-        ],
+        "lib": ["es2017", "dom"],
         "jsx": "react",
         "target": "es5",
         "module": "commonjs",
@@ -17,11 +14,8 @@
         "strictFunctionTypes": true,
         "strictNullChecks": true,
         "skipLibCheck": true,
-        "isolatedModules": true
+        "isolatedModules": true,
+        "downlevelIteration": true
     },
-    "include": [
-        "./src/**/*.ts",
-        "./src/**/*.tsx",
-        "./jest.config.js"
-    ]
-}
+    "include": ["./src/**/*.ts", "./src/**/*.tsx", "./jest.config.js"]
+}