{album.next_in_series ? (
- « {album.next_in_series.title}
+
+ « {album.next_in_series.title}
+
) : null}
{album.previous_in_series ? (
-
+
{album.previous_in_series.title} »
) : null}
@@ -118,12 +146,12 @@ export default function AlbumView({ album }: AlbumViewProps): JSX.Element {
) : null}
{/* Subalbums */}
- {album.layout === 'yearly' ? (
+ {album.layout === "yearly" ? (
);
}
-
-export default DownloadDialog;
diff --git a/frontend/src/components/ErrorBoundary.tsx b/frontend/src/components/ErrorBoundary.tsx
deleted file mode 100644
index 3a9f48f..0000000
--- a/frontend/src/components/ErrorBoundary.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import React from 'react';
-import ErrorMessage from './ErrorMessage';
-import { T } from '../translations';
-
-interface ErrorBoundaryState {
- error: Error | null;
-}
-
-export default class ErrorBoundary extends React.Component<{}, ErrorBoundaryState> {
- state = { error: null };
-
- static getDerivedStateFromError(error: Error) {
- return { error };
- }
-
- render() {
- // TODO Error message
- const t = T(r => r.ErrorBoundary);
- return this.state.error ?
{groupAlbumsByYear(album.subalbums).map(({ year, subalbums }) => {
return (
-
-
-
+
{title}
);
}
-function AppBar({ album }: { album: Album }): JSX.Element {
- const t = T(r => r.AppBar);
+interface Props {
+ album: Album;
+ messages: Translations["AppBar"];
+}
+
+export default function AppBar({ messages: t, album }: Props) {
const { path, title } = album;
const rootAlbum = album.breadcrumb[0] || { path, title };
return (
-
+
{rootAlbum.title}
@@ -46,14 +48,14 @@ function AppBar({ album }: { album: Album }): JSX.Element {
@@ -61,5 +63,3 @@ function AppBar({ album }: { album: Album }): JSX.Element {
);
}
-
-export default AppBar;
diff --git a/frontend/src/components/BreadcrumbBar/index.tsx b/frontend/src/components/BreadcrumbBar/index.tsx
index 45fed6f..7f09b9f 100644
--- a/frontend/src/components/BreadcrumbBar/index.tsx
+++ b/frontend/src/components/BreadcrumbBar/index.tsx
@@ -1,32 +1,49 @@
-import React from 'react';
+"use client";
-import Button from 'react-bootstrap/Button';
-import Container from 'react-bootstrap/Container';
-import { Link } from 'react-router-dom';
-import editorIcons from 'material-design-icons/sprites/svg-sprite/svg-sprite-editor-symbol.svg';
-import socialIcons from 'material-design-icons/sprites/svg-sprite/svg-sprite-social-symbol.svg';
+import React from "react";
-import { getCached } from '../../services/getAlbum';
-import Album from '../../models/Album';
-import { T } from '../../translations';
-import DownloadDialog, { useDialogState } from '../DownloadDialog';
+import Button from "react-bootstrap/Button";
+import Container from "react-bootstrap/Container";
-import './index.scss';
-import { breadcrumbSeparator, getBreadcrumbTitle, getFullBreadcrumb } from '../../helpers/breadcrumb';
-import ContactDialog from '../ContactDialog';
+import { getCached } from "../../services/getAlbum";
+import Album from "../../models/Album";
+import DownloadDialog, { useDialogState } from "../DownloadDialog";
+
+import "./index.scss";
+import {
+ breadcrumbSeparator,
+ getBreadcrumbTitle,
+ getFullBreadcrumb,
+} from "../../helpers/breadcrumb";
+import ContactDialog from "../ContactDialog";
+import Link from "next/link";
+import type { Translations } from "@/translations/en";
const downloadAlbumPollingDelay = 3000;
function sleep(ms: number): Promise {
- return new Promise(resolve => setTimeout(resolve, ms));
+ return new Promise((resolve) => setTimeout(resolve, ms));
+}
+
+interface Props {
+ album: Album;
+ messages: {
+ BreadcrumbBar: Translations["BreadcrumbBar"];
+ ContactDialog: Translations["ContactDialog"];
+ DownloadAlbumDialog: Translations["DownloadAlbumDialog"];
+ };
}
-export function BreadcrumbBar({ album }: { album: Album }): JSX.Element {
- const t = React.useMemo(() => T(r => r.BreadcrumbBar), []);
- const fullBreadcrumb = React.useMemo(() => getFullBreadcrumb(album, undefined, 1), [album]);
+export default function BreadcrumbBar({ album, messages }: Props) {
+ const t = messages.BreadcrumbBar;
+ const fullBreadcrumb = React.useMemo(
+ () => getFullBreadcrumb(album, undefined, 1),
+ [album]
+ );
const canDownload = album.is_downloadable && album.pictures.length;
const isPhotographerLinkShown =
- album.credits.photographer && album.credits.photographer.path !== album.path;
+ album.credits.photographer &&
+ album.credits.photographer.path !== album.path;
const [isDownloadPreparing, setDownloadPreparing] = React.useState(false);
const {
@@ -66,12 +83,15 @@ export function BreadcrumbBar({ album }: { album: Album }): JSX.Element {
}, []);
return (
-
+
);
}
-
-export default BreadcrumbBar;
diff --git a/frontend/src/components/ContactDialog.tsx b/frontend/src/components/ContactDialog.tsx
index ef3d451..6ca1dab 100644
--- a/frontend/src/components/ContactDialog.tsx
+++ b/frontend/src/components/ContactDialog.tsx
@@ -1,40 +1,50 @@
-import React from 'react';
-import Modal from 'react-bootstrap/Modal';
-import Form from 'react-bootstrap/Form';
+"use client";
-import { T } from '../translations';
-import Album from '../models/Album';
-import Picture from '../models/Picture';
-import contactPhotographer, { ContactRequest } from '../services/contactPhotographer';
+import React from "react";
+import Modal from "react-bootstrap/Modal";
+import Form from "react-bootstrap/Form";
+
+import Album from "../models/Album";
+import Picture from "../models/Picture";
+import contactPhotographer, {
+ ContactRequest,
+} from "../services/contactPhotographer";
+import type { Translations } from "@/translations/en";
interface Props {
album: Album;
picture?: Picture;
isOpen: boolean;
onClose(): void;
+ messages: Translations["ContactDialog"];
}
-export function ContactDialog({ onClose, isOpen, album, picture }: Props): JSX.Element {
- const [page, setPage] = React.useState<'form' | 'success'>('form');
+export default function ContactDialog({
+ onClose,
+ isOpen,
+ album,
+ picture,
+ messages: t,
+}: Props) {
+ const [page, setPage] = React.useState<"form" | "success">("form");
const [isSending, setSending] = React.useState(false);
- const t = React.useMemo(() => T(r => r.ContactDialog), []);
const handleClose = React.useCallback(() => {
setSending(false);
onClose();
// avoid flash of contact form during closing animation
- setTimeout(() => setPage('form'), 500);
+ setTimeout(() => setPage("form"), 500);
}, [onClose]);
const handleSuccess = React.useCallback(() => {
setSending(false);
- setPage('success');
+ setPage("success");
}, []);
const handleError = React.useCallback(() => {
setSending(false);
- alert(t(r => r.errorText));
+ alert(t.errorText);
}, []);
const handleSubmit = React.useCallback(
@@ -43,9 +53,9 @@ export function ContactDialog({ onClose, isOpen, album, picture }: Props): JSX.E
event.preventDefault();
const formData = new FormData(event.target as HTMLFormElement);
- const contactRequest: ContactRequest = (Object.fromEntries(
+ const contactRequest: ContactRequest = Object.fromEntries(
formData.entries()
- ) as unknown) as ContactRequest;
+ ) as unknown as ContactRequest;
setSending(true);
contactPhotographer(contactRequest).then(handleSuccess, handleError);
},
@@ -53,41 +63,48 @@ export function ContactDialog({ onClose, isOpen, album, picture }: Props): JSX.E
);
const choices = [
- { slug: 'takedown', title: t(r => r.fields.subject.choices.takedown) },
- { slug: 'permission', title: t(r => r.fields.subject.choices.permission) },
- { slug: 'other', title: t(r => r.fields.subject.choices.other) },
+ { slug: "takedown", title: t.fields.subject.choices.takedown },
+ {
+ slug: "permission",
+ title: t.fields.subject.choices.permission,
+ },
+ { slug: "other", title: t.fields.subject.choices.other },
];
const path = picture ? picture.path : album.path;
return (
- {page === 'form' && (
+ {page === "form" && (
)}
- {page === 'success' && (
+ {page === "success" && (
<>
- {t(r => r.dialogTitle)}
+ {t.dialogTitle}
-
-
@@ -142,5 +175,3 @@ export function ContactDialog({ onClose, isOpen, album, picture }: Props): JSX.E
);
}
-
-export default ContactDialog;
diff --git a/frontend/src/components/DownloadDialog.tsx b/frontend/src/components/DownloadDialog.tsx
index 2c0bd62..f570fc6 100644
--- a/frontend/src/components/DownloadDialog.tsx
+++ b/frontend/src/components/DownloadDialog.tsx
@@ -1,37 +1,23 @@
-import React from 'react';
-
-import Modal from 'react-bootstrap/Modal';
-
-import Album from '../models/Album';
-import Linebreaks from './Linebreaks';
-import { TranslationFunction } from '../translations';
-
-interface DownloadDialogTranslations {
- acceptTermsAndConditions: string;
- closeButtonText: string;
- contact: string;
- defaultTerms: string;
- dialogTitle: string;
- director: string;
- downloadButtonText: string;
- genericCredit: string;
- genericCreditAlternative: string;
- instagramCredit: string;
- photographer: string;
- preparingDownloadButtonText?: string;
- termsAndConditions: string;
- twitterCredit: string;
- contactPhotographer: string;
-}
+"use client";
+
+import React from "react";
+
+import Modal from "react-bootstrap/Modal";
-interface DownloadDialogProps {
+import Album from "../models/Album";
+import Linebreaks from "./Linebreaks";
+import type { Translations } from "@/translations/en";
+
+interface Props {
album: Album;
isPreparing?: boolean;
isOpen: boolean;
onClose(): void;
onAccept(): void;
onContactPhotographer(): void;
- t: TranslationFunction; // TODO
+ messages:
+ | Translations["DownloadDialog"]
+ | Translations["DownloadAlbumDialog"];
}
export function useDialogState() {
@@ -42,17 +28,19 @@ export function useDialogState() {
return { isDialogOpen, openDialog, closeDialog };
}
-export function DownloadDialog({
+export default function DownloadDialog({
album,
onAccept,
onClose,
onContactPhotographer,
- t,
+ messages: t,
isPreparing,
isOpen,
-}: DownloadDialogProps): JSX.Element {
- const [isTermsAndConditionsAccepted, setTermsAndConditionsAccepted] = React.useState(false);
- const [downloadButtonClicked, setDownloadButtonClicked] = React.useState(false);
+}: Props) {
+ const [isTermsAndConditionsAccepted, setTermsAndConditionsAccepted] =
+ React.useState(false);
+ const [downloadButtonClicked, setDownloadButtonClicked] =
+ React.useState(false);
const handleAccept = React.useCallback(() => {
setDownloadButtonClicked(true);
onAccept();
@@ -71,42 +59,53 @@ export function DownloadDialog({
setTermsAndConditionsAccepted(!isTermsAndConditionsAccepted);
}, [isTermsAndConditionsAccepted]);
- const text = album && album.terms_and_conditions ? album.terms_and_conditions.text : '';
+ const text =
+ album && album.terms_and_conditions ? album.terms_and_conditions.text : "";
const { photographer, director } = album.credits;
- const haveTwitter = (photographer && photographer.twitter_handle) || (director && director.twitter_handle);
+ const haveTwitter =
+ (photographer && photographer.twitter_handle) ||
+ (director && director.twitter_handle);
const haveInstagram =
- (photographer && photographer.instagram_handle) || (director && director.instagram_handle);
- const haveCredit = (photographer && photographer.display_name) || (director && director.display_name);
+ (photographer && photographer.instagram_handle) ||
+ (director && director.instagram_handle);
+ const haveCredit =
+ (photographer && photographer.display_name) ||
+ (director && director.display_name);
return (
- {t(r => r.dialogTitle)}
+ {t.dialogTitle}
r.defaultTerms)} />
+
@@ -200,19 +207,21 @@ export function DownloadDialog({
className="btn btn-link link-subtle ps-1"
onClick={handleContactPhotographer}
>
- {t(r => r.contactPhotographer)}…
+ {t.contactPhotographer}…
) : (
)}
- {year ? year : t(r => r.unknownYear)}
+
+
);
@@ -137,7 +165,7 @@ export default function AlbumView({ album }: AlbumViewProps): JSX.Element {
{year ? year : t.unknownYear}
{t(r => r.successText)}
+{t.successText}
- {t(r => r.termsAndConditions)} + {t.termsAndConditions}
-- {t(r => r.twitterCredit)} + {t.twitterCredit}
{photographer ? ( <> - 📸{' '} + 📸{" "} {photographer.twitter_handle ? `@${photographer.twitter_handle}` - : photographer.display_name}{' '} + : photographer.display_name}{" "} ) : null} {director ? ( - <>🎬 {director.twitter_handle ? `@${director.twitter_handle}` : director.display_name} + <> + 🎬{" "} + {director.twitter_handle + ? `@${director.twitter_handle}` + : director.display_name}{" "} + ) : null}
@@ -115,12 +114,12 @@ export function DownloadDialog({ {haveInstagram ? ( <>- {t(r => r.instagramCredit)} + {t.instagramCredit}
{photographer ? (
<>
- {t(r => r.photographer)}:{' '}
+ {t.photographer}:{" "}
{photographer.instagram_handle
? `@${photographer.instagram_handle}`
: photographer.display_name}
@@ -129,8 +128,10 @@ export function DownloadDialog({
) : null}
{director ? (
<>
- {t(r => r.director)}:{' '}
- {director.instagram_handle ? `@${director.instagram_handle}` : director.display_name}
+ {t.director}:{" "}
+ {director.instagram_handle
+ ? `@${director.instagram_handle}`
+ : director.display_name}
) : null}
@@ -142,19 +143,21 @@ export function DownloadDialog({
<>
- {haveTwitter || haveInstagram ? t(r => r.genericCredit) : t(r => r.genericCreditAlternative)} + {haveTwitter || haveInstagram + ? t.genericCredit + : t.genericCreditAlternative}
{photographer && photographer.display_name ? (
<>
- {t(r => r.photographer)}: {photographer.display_name}
+ {t.photographer}: {photographer.display_name}
) : null}
{director && director.display_name ? (
<>
- {t(r => r.director)}: {director.display_name}
+ {t.director}: {director.display_name}
) : null}
@@ -172,7 +175,7 @@ export function DownloadDialog({
checked={isTermsAndConditionsAccepted}
onChange={toggleTermsAndConditionsAccepted}
/>
- {' ' + t(r => r.acceptTermsAndConditions)}
+ {" " + t.acceptTermsAndConditions}
-
-);
-
-export default ErrorMessage;
diff --git a/frontend/src/components/Linebreaks.tsx b/frontend/src/components/Linebreaks.tsx
index 5b47255..f36cbfe 100644
--- a/frontend/src/components/Linebreaks.tsx
+++ b/frontend/src/components/Linebreaks.tsx
@@ -1,10 +1,14 @@
-import React from 'react';
+import React from "react";
+
+interface Props {
+ text: string;
+}
/**
* Accepts one prop, `text`, and displays it so that single line breaks get
* turned into a `
-
- {children}
-
- ` and double line breaks start a new `
`. */ -const Linebreaks = ({ text }: { text: string }) => { +export default function Linebreaks({ text }: Props) { const paragraphs = text.split(/(?:\r?\n){2,}/g); return ( <> @@ -20,6 +24,4 @@ const Linebreaks = ({ text }: { text: string }) => { ))} ); -}; - -export default Linebreaks; +} diff --git a/frontend/src/components/Loading.tsx b/frontend/src/components/Loading.tsx deleted file mode 100644 index 1be297d..0000000 --- a/frontend/src/components/Loading.tsx +++ /dev/null @@ -1,16 +0,0 @@ -import React from 'react'; - -// import Spinner from 'react-svg-spinner'; - -// TODO Replace spinner with sth like https://github.com/danilowoz/react-content-loader -// TODO Figure out how to center this vertically without breaking sticky footer -// Adding h-100 to both divs and height: 100% to html, body works otherwise, but breaks footer -const Loading: React.FC<{}> = () => ( -
-
-);
-
-export default Loading;
diff --git a/frontend/src/components/MainView.tsx b/frontend/src/components/MainView.tsx
deleted file mode 100644
index 788bdba..0000000
--- a/frontend/src/components/MainView.tsx
+++ /dev/null
@@ -1,86 +0,0 @@
-import React from 'react';
-
-import { RouteComponentProps, StaticContext } from 'react-router';
-
-import AlbumView from './AlbumView';
-import Loading from './Loading';
-import PictureView from './PictureView';
-import { Content, getAlbum } from '../services/getAlbum';
-import ErrorMessage from './ErrorMessage';
-import { T } from '../translations';
-import { getDocumentTitle } from '../helpers/breadcrumb';
-
-const loadingViewDelayMillis = 500;
-
-interface LocationState {
- fromAlbumView?: boolean;
-}
-
-const MainView: React.FC
- {/*
- goTo('previous')}
+ onClick={() => goTo("previous")}
className="PictureView-nav PictureView-nav-previous"
- title={t(r => r.previousPicture)}
+ title={t.previousPicture}
>
- */}
+ «
) : null}
{picture.next ? (
goTo('next')}
+ onClick={() => goTo("next")}
className="PictureView-nav PictureView-nav-next"
- title={t(r => r.nextPicture)}
+ title={t.nextPicture}
>
- */}
+ »
) : null}
goTo('album')}
+ onClick={() => goTo("album")}
className="PictureView-action PictureView-action-exit"
- title={t(r => r.backToAlbum)}
+ title={t.backToAlbum}
>
- */}
+ ×
{album.is_downloadable && picture.original && (
@@ -192,35 +210,35 @@ function PictureView({ album, picture, fromAlbumView, history }: PictureViewProp
r.downloadOriginal)}
+ title={t.downloadOriginal}
>
- */}
+ 💾