Skip to content

Commit

Permalink
Switch external DAM integration to Lorem Picsum (#2918)
Browse files Browse the repository at this point in the history 
Co-authored-by: Markus Fichtner <[email protected]>
Co-authored-by: Johannes Obermair <[email protected]>
  • Loading branch information
@fichtnerma @johnnyomair
3 people authored Dec 12, 2024
1 parent 9e83794 commit 47d40ae
Show file tree
Hide file tree
Showing 6 changed files with 41 additions and 39 deletions.
8 changes: 4 additions & 4 deletions demo/admin/src/App.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,6 @@ import { createApolloClient } from "@src/common/apollo/createApolloClient";
import ContentScopeProvider, { ContentScope } from "@src/common/ContentScopeProvider";
import { additionalPageTreeNodeFieldsFragment } from "@src/common/EditPageNode";
import { ConfigProvider, createConfig } from "@src/config";
import { ImportFromUnsplash } from "@src/dam/ImportFromUnsplash";
import { pageTreeCategories } from "@src/pageTree/pageTreeCategories";
import { theme } from "@src/theme";
import { HTML5toTouch } from "rdndmb-html5-to-touch";
Expand All @@ -35,6 +34,7 @@ import { Route, Switch } from "react-router-dom";

import MasterHeader from "./common/MasterHeader";
import MasterMenu, { masterMenuData, pageTreeDocumentTypes } from "./common/MasterMenu";
import { ImportFromPicsum } from "./dam/ImportFromPicsum";
import { getMessages } from "./lang";
import { Link } from "./links/Link";
import { NewsDependency } from "./news/dependencies/NewsDependency";
Expand Down Expand Up @@ -84,10 +84,10 @@ class App extends Component {
<DamConfigProvider
value={{
scopeParts: ["domain"],
additionalToolbarItems: <ImportFromUnsplash />,
additionalToolbarItems: <ImportFromPicsum />,
importSources: {
unsplash: {
label: <FormattedMessage id="dam.importSource.unsplash.label" defaultMessage="Unsplash" />,
picsum: {
label: <FormattedMessage id="dam.importSource.picsum.label" defaultMessage="Lorem Picsum" />,
},
},
contentGeneration: {
Expand Down
4 changes: 2 additions & 2 deletions demo/admin/src/common/MasterMenu.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ import {
UserPermissionsPage,
} from "@comet/cms-admin";
import { ContentScope } from "@src/common/ContentScopeProvider";
import { ImportFromUnsplash } from "@src/dam/ImportFromUnsplash";
import { ImportFromPicsum } from "@src/dam/ImportFromPicsum";
import Dashboard from "@src/dashboard/Dashboard";
import { PredefinedPage } from "@src/documents/predefinedPages/PredefinedPage";
import { GQLPageTreeNodeCategory } from "@src/graphql.generated";
Expand Down Expand Up @@ -124,7 +124,7 @@ export const masterMenuData: MasterMenuData = [
icon: <Assets />,
route: {
path: "/assets",
render: () => <DamPage additionalToolbarItems={<ImportFromUnsplash />} />,
render: () => <DamPage additionalToolbarItems={<ImportFromPicsum />} />,
},
requiredPermission: "dam",
},
Expand Down
34 changes: 17 additions & 17 deletions demo/admin/src/dam/ImportFromUnsplash.tsx → demo/admin/src/dam/ImportFromPicsum.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,22 +5,22 @@ import { styled } from "@mui/material/styles";
import { useState } from "react";
import { FormattedMessage } from "react-intl";

import { getRandomUnsplashImage, UnsplashImage } from "./getRandomUnsplashImage";
import UnsplashIcon from "./UnsplashIcon";
import { getRandomPicsumImage, PicsumImage } from "./getRandomPicsumImage";
import PicsumIcon from "./PicsumIcon";

export const ImportFromUnsplash = () => {
export const ImportFromPicsum = () => {
const { allAcceptedMimeTypes } = useDamAcceptedMimeTypes();
const { folderId } = useCurrentDamFolder();
const [isOpen, setIsOpen] = useState(false);
const [unsplashImage, setUnsplashImage] = useState<UnsplashImage>();
const [picsumImage, setPicsumImage] = useState<PicsumImage>();

const { uploadFiles } = useDamFileUpload({
acceptedMimetypes: allAcceptedMimeTypes,
});

const handleOpenDialog = async () => {
const image = await getRandomUnsplashImage();
setUnsplashImage(image);
const image = await getRandomPicsumImage();
setPicsumImage(image);
setIsOpen(true);
};

Expand All @@ -29,40 +29,40 @@ export const ImportFromUnsplash = () => {
};

const handleSave = async () => {
if (unsplashImage === undefined) return;
if (picsumImage === undefined) return;
await uploadFiles(
{ acceptedFiles: [unsplashImage.file], fileRejections: [] },
{ acceptedFiles: [picsumImage.file], fileRejections: [] },
{
folderId,
importSource: {
importSourceId: unsplashImage.url,
importSourceType: "unsplash",
importSourceId: picsumImage.url,
importSourceType: "picsum",
},
},
);
handleCloseDialog();
};

const handleShuffle = async () => {
const image = await getRandomUnsplashImage();
setUnsplashImage(image);
const image = await getRandomPicsumImage();
setPicsumImage(image);
};

return (
<>
<Button variant="text" color="inherit" startIcon={<UnsplashIcon />} onClick={handleOpenDialog}>
<FormattedMessage id="pages.dam.importFromUnsplash" defaultMessage="Import from Unsplash" />
<Button variant="text" color="inherit" startIcon={<PicsumIcon />} onClick={handleOpenDialog}>
<FormattedMessage id="pages.dam.importFromPicsum" defaultMessage="Import from Picsum" />
</Button>
<Dialog open={isOpen} onClose={handleCloseDialog}>
<div>
<DialogTitle>Import from Unsplash</DialogTitle>
<DialogTitle>Import from Picsum</DialogTitle>
<DialogContent>
<ImagePreview src={unsplashImage?.url} alt="image" />
<ImagePreview src={picsumImage?.url} alt="image" />
</DialogContent>
<DialogActions>
<CancelButton onClick={handleCloseDialog} />
<Button onClick={handleShuffle}>
<FormattedMessage id="pages.dam.importFromUnsplash.dialog.shuffle" defaultMessage="Shuffle" />
<FormattedMessage id="pages.dam.importFromPicsum.dialog.shuffle" defaultMessage="Shuffle" />
</Button>
<SaveButton onClick={handleSave}>
<FormattedMessage {...messages.save} />
Expand Down
10 changes: 10 additions & 0 deletions demo/admin/src/dam/PicsumIcon.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
import { SvgIcon, SvgIconProps } from "@mui/material";

export default function PicsumIcon(props: SvgIconProps): JSX.Element {
return (
<SvgIcon {...props} viewBox="0 0 100 100">
<path d="M86.5,28.6h-8.1l-1-7.1c-0.4-2.9-1.9-5.5-4.2-7.3c-2.3-1.8-5.2-2.5-8.1-2.1L12,19.5c-6,0.8-10.2,6.4-9.4,12.4l5,37 c0.8,5.5,5.5,9.5,10.9,9.5c0.5,0,1,0,1.5-0.1l2.1-0.3c0.5,5.6,5.2,10,10.9,10h53.6c6,0,11-4.9,11-11V39.6 C97.5,33.6,92.6,28.6,86.5,28.6z M91.5,39.6V71L75.7,52.9c-2.6-3-7.4-3-10,0L52.1,68.5l-4.9-5.4c-2.5-2.7-6.8-2.7-9.2,0L28,74 V39.6c0-2.7,2.2-5,5-5h53.6C89.3,34.6,91.5,36.9,91.5,39.6z M22,39.6v32.2l-2.8,0.4c-2.7,0.4-5.2-1.5-5.6-4.3L8.5,31 c-0.4-2.7,1.5-5.2,4.3-5.6l53.1-7.3c0.2,0,0.5,0,0.7,0c2.4,0,4.6,1.8,4.9,4.3l0.9,6.3H33C26.9,28.6,22,33.6,22,39.6z" />
<circle cx="42.5" cy="47.8" r="6" />
</SvgIcon>
);
}
9 changes: 0 additions & 9 deletions demo/admin/src/dam/UnsplashIcon.tsx
View file

This file was deleted.

15 changes: 8 additions & 7 deletions demo/admin/src/dam/getRandomUnsplashImage.ts → demo/admin/src/dam/getRandomPicsumImage.ts
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
export interface UnsplashImage {
export interface PicsumImage {
file: File;
url: string;
}

async function fetchUnsplashImage(url: string) {
async function fetchPicsumImage(url: string) {
const response = await fetch(url);

if (!response.ok) {
Expand All @@ -18,19 +18,20 @@ async function fetchUnsplashImage(url: string) {

function extractFileNameFromUrl(url: string): string {
const fileNameWithQuery = url.split("?")[0];
const fileName = fileNameWithQuery.split("/").pop();
const fileNameStart = fileNameWithQuery.split("/").indexOf("id");
const fileName = `${fileNameWithQuery.split("/")[fileNameStart]}-${fileNameWithQuery.split("/")[fileNameStart + 1]}`;
return fileName ? `${fileName}.jpeg` : "unnamed.jpeg";
}

export async function getRandomUnsplashImage(): Promise<UnsplashImage> {
const imageUrl = "https://source.unsplash.com/all/";
export async function getRandomPicsumImage(): Promise<PicsumImage> {
const imageUrl = "https://picsum.photos/1920/1080";

try {
const image = await fetchUnsplashImage(imageUrl);
const image = await fetchPicsumImage(imageUrl);
const mimeType = image.blob.type;

if (mimeType !== "image/jpeg") {
return getRandomUnsplashImage();
return getRandomPicsumImage();
}

const fileName = extractFileNameFromUrl(image.origin);
Expand Down

0 comments on commit 47d40ae

Please sign in to comment.