From 9339364dce6713b6e97cbdb97808b1718ff37d30 Mon Sep 17 00:00:00 2001 From: Ronald Langeveld Date: Thu, 21 Sep 2023 09:23:45 +0700 Subject: [PATCH] Added Unsplash selector to AdminX (#18216) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit no issue - Copied over the Unsplash Component from Koenig to AdminX and converted it to Typescript. - Changed the business logic to follow a bit of dependency injection to make it more testable and easier to maintain. - Ideally we move this out of Admin X Settings and perhaps into it's own library so we don't need to deal with a duplicate code between Koenig and Admin X. --- ### 🤖 Generated by Copilot at a40bf5b This pull request adds support for selecting images from Unsplash in the admin settings UI. It introduces a new `UnsplashService` class that handles the Unsplash API requests and a new `MasonryService` class that handles the masonry layout of the images. It also adds several new custom components, such as `UnsplashButton`, `UnsplashGallery`, `UnsplashImage`, `UnsplashSelector`, `UnsplashZoomed`, and `UnsplashSearchModal`, that render the Unsplash modal and its elements. It modifies the existing `ImageUpload`, `App`, `ServicesProvider`, and `BrandSettings` components to integrate the Unsplash feature and pass the necessary props. It also adds some new types, constants, and assets related to the Unsplash data and UI. Finally, it adds some unit tests for the `UnsplashService` and `MasonryService` classes. --- apps/admin-x-settings/src/App.tsx | 6 +- .../admin-x-ds/assets/icons/unsplash-logo.svg | 3 + .../admin-x-ds/global/form/ImageUpload.tsx | 35 +++- .../unsplash/assets/kg-card-type-unsplash.svg | 3 + .../admin-x-ds/unsplash/assets/kg-close.svg | 3 + .../unsplash/assets/kg-download.svg | 3 + .../admin-x-ds/unsplash/assets/kg-search.svg | 3 + .../unsplash/assets/kg-unsplash-heart.svg | 3 + .../admin-x-ds/unsplash/ui/UnsplashButton.tsx | 37 ++++ .../unsplash/ui/UnsplashGallery.tsx | 149 ++++++++++++++ .../admin-x-ds/unsplash/ui/UnsplashImage.tsx | 85 ++++++++ .../unsplash/ui/UnsplashSelector.tsx | 42 ++++ .../admin-x-ds/unsplash/ui/UnsplashZoomed.tsx | 32 +++ .../src/components/Settings.tsx | 32 ++- .../components/providers/ServiceProvider.tsx | 15 +- .../site/designAndBranding/BrandSettings.tsx | 26 +++ apps/admin-x-settings/src/main.tsx | 2 + apps/admin-x-settings/src/utils/portal.tsx | 30 +++ .../utils/unsplash/UnsplashSearchModal.tsx | 192 ++++++++++++++++++ .../src/utils/unsplash/UnsplashService.ts | 68 +++++++ .../src/utils/unsplash/UnsplashTypes.ts | 80 ++++++++ .../api/InMemoryUnsplashRepository.ts | 55 +++++ .../utils/unsplash/api/UnsplashRepository.ts | 169 +++++++++++++++ .../utils/unsplash/api/unsplashFixtures.ts | 142 +++++++++++++ .../utils/unsplash/masonry/MasonryService.ts | 55 +++++ .../src/utils/unsplash/photo/PhotoUseCase.ts | 36 ++++ .../test/unit/unsplash/Masonry.test.ts | 56 +++++ .../unit/unsplash/UnsplashService.test.ts | 54 +++++ .../admin/app/components/admin-x/settings.js | 9 + 29 files changed, 1408 insertions(+), 17 deletions(-) create mode 100644 apps/admin-x-settings/src/admin-x-ds/assets/icons/unsplash-logo.svg create mode 100644 apps/admin-x-settings/src/admin-x-ds/unsplash/assets/kg-card-type-unsplash.svg create mode 100644 apps/admin-x-settings/src/admin-x-ds/unsplash/assets/kg-close.svg create mode 100644 apps/admin-x-settings/src/admin-x-ds/unsplash/assets/kg-download.svg create mode 100644 apps/admin-x-settings/src/admin-x-ds/unsplash/assets/kg-search.svg create mode 100644 apps/admin-x-settings/src/admin-x-ds/unsplash/assets/kg-unsplash-heart.svg create mode 100644 apps/admin-x-settings/src/admin-x-ds/unsplash/ui/UnsplashButton.tsx create mode 100644 apps/admin-x-settings/src/admin-x-ds/unsplash/ui/UnsplashGallery.tsx create mode 100644 apps/admin-x-settings/src/admin-x-ds/unsplash/ui/UnsplashImage.tsx create mode 100644 apps/admin-x-settings/src/admin-x-ds/unsplash/ui/UnsplashSelector.tsx create mode 100644 apps/admin-x-settings/src/admin-x-ds/unsplash/ui/UnsplashZoomed.tsx create mode 100644 apps/admin-x-settings/src/utils/portal.tsx create mode 100644 apps/admin-x-settings/src/utils/unsplash/UnsplashSearchModal.tsx create mode 100644 apps/admin-x-settings/src/utils/unsplash/UnsplashService.ts create mode 100644 apps/admin-x-settings/src/utils/unsplash/UnsplashTypes.ts create mode 100644 apps/admin-x-settings/src/utils/unsplash/api/InMemoryUnsplashRepository.ts create mode 100644 apps/admin-x-settings/src/utils/unsplash/api/UnsplashRepository.ts create mode 100644 apps/admin-x-settings/src/utils/unsplash/api/unsplashFixtures.ts create mode 100644 apps/admin-x-settings/src/utils/unsplash/masonry/MasonryService.ts create mode 100644 apps/admin-x-settings/src/utils/unsplash/photo/PhotoUseCase.ts create mode 100644 apps/admin-x-settings/test/unit/unsplash/Masonry.test.ts create mode 100644 apps/admin-x-settings/test/unit/unsplash/UnsplashService.test.ts diff --git a/apps/admin-x-settings/src/App.tsx b/apps/admin-x-settings/src/App.tsx index 87cf0ea84f..2ad290b758 100644 --- a/apps/admin-x-settings/src/App.tsx +++ b/apps/admin-x-settings/src/App.tsx @@ -3,6 +3,7 @@ import MainContent from './MainContent'; import NiceModal from '@ebay/nice-modal-react'; import RoutingProvider, {ExternalLink} from './components/providers/RoutingProvider'; import clsx from 'clsx'; +import {DefaultHeaderTypes} from './utils/unsplash/UnsplashTypes'; import {GlobalDirtyStateProvider} from './hooks/useGlobalDirtyState'; import {OfficialTheme, ServicesProvider} from './components/providers/ServiceProvider'; import {QueryClient, QueryClientProvider} from '@tanstack/react-query'; @@ -16,6 +17,7 @@ interface AppProps { externalNavigate: (link: ExternalLink) => void; toggleFeatureFlag: (flag: string, enabled: boolean) => void; darkMode?: boolean; + unsplashConfig: DefaultHeaderTypes } const queryClient = new QueryClient({ @@ -28,7 +30,7 @@ const queryClient = new QueryClient({ } }); -function App({ghostVersion, officialThemes, zapierTemplates, externalNavigate, toggleFeatureFlag, darkMode = false}: AppProps) { +function App({ghostVersion, officialThemes, zapierTemplates, externalNavigate, toggleFeatureFlag, darkMode = false, unsplashConfig}: AppProps) { const appClassName = clsx( 'admin-x-settings h-[100vh] w-full overflow-y-auto overflow-x-hidden', darkMode && 'dark' @@ -36,7 +38,7 @@ function App({ghostVersion, officialThemes, zapierTemplates, externalNavigate, t return ( - + diff --git a/apps/admin-x-settings/src/admin-x-ds/assets/icons/unsplash-logo.svg b/apps/admin-x-settings/src/admin-x-ds/assets/icons/unsplash-logo.svg new file mode 100644 index 0000000000..805b50f3e5 --- /dev/null +++ b/apps/admin-x-settings/src/admin-x-ds/assets/icons/unsplash-logo.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/apps/admin-x-settings/src/admin-x-ds/global/form/ImageUpload.tsx b/apps/admin-x-settings/src/admin-x-ds/global/form/ImageUpload.tsx index 0492ae48f1..1723f9a37b 100644 --- a/apps/admin-x-settings/src/admin-x-ds/global/form/ImageUpload.tsx +++ b/apps/admin-x-settings/src/admin-x-ds/global/form/ImageUpload.tsx @@ -23,6 +23,9 @@ interface ImageUploadProps { editButtonContent?: React.ReactNode; editButtonUnstyled?: boolean; buttonContainerClassName?: string; + unsplashButtonClassName?: string; + unsplashButtonUnstyled?: boolean; + unsplashButtonContent?: React.ReactNode; /** * Removes all the classnames from all elements so you can set a completely custom styling @@ -38,7 +41,10 @@ interface ImageUploadProps { pintura?: { isEnabled: boolean; openEditor: () => void; - } + }; + + unsplashEnabled?: boolean; + openUnsplash?: () => void; } const ImageUpload: React.FC = ({ @@ -63,7 +69,12 @@ const ImageUpload: React.FC = ({ editButtonClassName, editButtonContent, editButtonUnstyled = false, - buttonContainerClassName + buttonContainerClassName, + unsplashButtonClassName, + unsplashButtonUnstyled = false, + unsplashButtonContent, + unsplashEnabled, + openUnsplash }) => { if (!unstyled) { imageContainerClassName = clsx( @@ -99,10 +110,18 @@ const ImageUpload: React.FC = ({ editButtonClassName ); } + + if (!unsplashButtonUnstyled) { + unsplashButtonClassName = clsx( + 'absolute right-16 top-4 flex h-8 w-8 cursor-pointer items-center justify-center rounded bg-[rgba(255,255,255)] text-white', + unsplashButtonClassName + ); + } } deleteButtonContent = deleteButtonContent || ; editButtonContent = editButtonContent || ; + unsplashButtonContent = unsplashButtonContent || ; if (imageURL) { let image = ( @@ -150,14 +169,22 @@ const ImageUpload: React.FC = ({ return image; } else { return ( -
+
+ { + unsplashEnabled && + + } - {children} + <> + {children} +
); diff --git a/apps/admin-x-settings/src/admin-x-ds/unsplash/assets/kg-card-type-unsplash.svg b/apps/admin-x-settings/src/admin-x-ds/unsplash/assets/kg-card-type-unsplash.svg new file mode 100644 index 0000000000..805b50f3e5 --- /dev/null +++ b/apps/admin-x-settings/src/admin-x-ds/unsplash/assets/kg-card-type-unsplash.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/apps/admin-x-settings/src/admin-x-ds/unsplash/assets/kg-close.svg b/apps/admin-x-settings/src/admin-x-ds/unsplash/assets/kg-close.svg new file mode 100644 index 0000000000..30bce27c3b --- /dev/null +++ b/apps/admin-x-settings/src/admin-x-ds/unsplash/assets/kg-close.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/apps/admin-x-settings/src/admin-x-ds/unsplash/assets/kg-download.svg b/apps/admin-x-settings/src/admin-x-ds/unsplash/assets/kg-download.svg new file mode 100644 index 0000000000..2d1c72bfa4 --- /dev/null +++ b/apps/admin-x-settings/src/admin-x-ds/unsplash/assets/kg-download.svg @@ -0,0 +1,3 @@ + + + diff --git a/apps/admin-x-settings/src/admin-x-ds/unsplash/assets/kg-search.svg b/apps/admin-x-settings/src/admin-x-ds/unsplash/assets/kg-search.svg new file mode 100644 index 0000000000..dd56d96d42 --- /dev/null +++ b/apps/admin-x-settings/src/admin-x-ds/unsplash/assets/kg-search.svg @@ -0,0 +1,3 @@ + + + diff --git a/apps/admin-x-settings/src/admin-x-ds/unsplash/assets/kg-unsplash-heart.svg b/apps/admin-x-settings/src/admin-x-ds/unsplash/assets/kg-unsplash-heart.svg new file mode 100644 index 0000000000..1b31419ccb --- /dev/null +++ b/apps/admin-x-settings/src/admin-x-ds/unsplash/assets/kg-unsplash-heart.svg @@ -0,0 +1,3 @@ + + + diff --git a/apps/admin-x-settings/src/admin-x-ds/unsplash/ui/UnsplashButton.tsx b/apps/admin-x-settings/src/admin-x-ds/unsplash/ui/UnsplashButton.tsx new file mode 100644 index 0000000000..174e5df73c --- /dev/null +++ b/apps/admin-x-settings/src/admin-x-ds/unsplash/ui/UnsplashButton.tsx @@ -0,0 +1,37 @@ +import React, {HTMLProps} from 'react'; +import {ReactComponent as DownloadIcon} from '../assets/kg-download.svg'; +import {ReactComponent as UnsplashHeartIcon} from '../assets/kg-unsplash-heart.svg'; + +// Define the available icon types +type ButtonIconType = 'heart' | 'download'; + +// Define the props type +interface UnsplashButtonProps extends HTMLProps { + icon?: ButtonIconType; + label?: string; +} + +const BUTTON_ICONS: Record>>> = { + heart: UnsplashHeartIcon, + download: DownloadIcon +}; + +const UnsplashButton: React.FC = ({icon, label, ...props}) => { + let Icon = null; + if (icon) { + Icon = BUTTON_ICONS[icon]; + } + + return ( + e.stopPropagation()} + {...props} + > + {icon && Icon && } + {label && {label}} + + ); +}; + +export default UnsplashButton; diff --git a/apps/admin-x-settings/src/admin-x-ds/unsplash/ui/UnsplashGallery.tsx b/apps/admin-x-settings/src/admin-x-ds/unsplash/ui/UnsplashGallery.tsx new file mode 100644 index 0000000000..bd3a165d7c --- /dev/null +++ b/apps/admin-x-settings/src/admin-x-ds/unsplash/ui/UnsplashGallery.tsx @@ -0,0 +1,149 @@ +import React, {ReactNode, RefObject} from 'react'; +import UnsplashImage from './UnsplashImage'; +import UnsplashZoomed from './UnsplashZoomed'; +import {Photo} from '../../../utils/unsplash/UnsplashTypes'; + +interface MasonryColumnProps { + children: ReactNode; +} + +interface UnsplashGalleryColumnsProps { + columns?: Photo[][] | []; + insertImage?: any; + selectImg?: any; + zoomed?: Photo | null; +} + +interface GalleryLayoutProps { + children?: ReactNode; + galleryRef: RefObject; + isLoading?: boolean; + zoomed?: Photo | null; +} + +interface UnsplashGalleryProps extends GalleryLayoutProps { + error?: string | null; + dataset?: Photo[][] | []; + selectImg?: any; + insertImage?: any; +} + +const UnsplashGalleryLoading: React.FC = () => { + return ( +
+
+
+ ); +}; + +export const MasonryColumn: React.FC = (props) => { + return ( +
+ {props.children} +
+ ); +}; + +const UnsplashGalleryColumns: React.FC = (props) => { + if (!props?.columns) { + return null; + } + + return ( + props?.columns.map((array, index) => ( + // eslint-disable-next-line react/no-array-index-key + + { + array.map((payload: Photo) => ( + + )) + } + + )) + ); +}; + +const GalleryLayout: React.FC = (props) => { + return ( +
+
+ {props.children} + {props?.isLoading && } +
+
+ ); +}; + +const UnsplashGallery: React.FC = ({zoomed, + error, + galleryRef, + isLoading, + dataset, + selectImg, + insertImage}) => { + if (zoomed) { + return ( + + + + ); + } + + if (error) { + return ( + +
+

Error

+

{error}

+
+ + ); + } + + return ( + + + + ); +}; + +export default UnsplashGallery; diff --git a/apps/admin-x-settings/src/admin-x-ds/unsplash/ui/UnsplashImage.tsx b/apps/admin-x-settings/src/admin-x-ds/unsplash/ui/UnsplashImage.tsx new file mode 100644 index 0000000000..949173c8e9 --- /dev/null +++ b/apps/admin-x-settings/src/admin-x-ds/unsplash/ui/UnsplashImage.tsx @@ -0,0 +1,85 @@ +import UnsplashButton from './UnsplashButton'; +import {FC, MouseEvent} from 'react'; +import {Links, Photo, User} from '../../../utils/unsplash/UnsplashTypes'; + +export interface UnsplashImageProps { + payload: Photo; + srcUrl: string; + links: Links; + likes: number; + user: User; + alt: string; + urls: { regular: string }; + height: number; + width: number; + zoomed: Photo | null; + insertImage: (options: { + src: string, + caption: string, + height: number, + width: number, + alt: string, + links: Links + }) => void; + selectImg: (payload: Photo | null) => void; +} + +const UnsplashImage: FC = ({payload, srcUrl, links, likes, user, alt, urls, height, width, zoomed, insertImage, selectImg}) => { + const handleClick = (e: MouseEvent) => { + e.stopPropagation(); + selectImg(zoomed ? null : payload); + }; + + return ( +
+ {alt} +
+
+ + +
+
+
+ author +
{user.name}
+
+ { + e.stopPropagation(); + insertImage({ + src: urls.regular.replace(/&w=1080/, '&w=2000'), + caption: `Photo by ${user.name} / Unsplash`, + height: height, + width: width, + alt: alt, + links: links + }); + }} /> +
+
+
+ ); +}; + +export default UnsplashImage; diff --git a/apps/admin-x-settings/src/admin-x-ds/unsplash/ui/UnsplashSelector.tsx b/apps/admin-x-settings/src/admin-x-ds/unsplash/ui/UnsplashSelector.tsx new file mode 100644 index 0000000000..668c91f099 --- /dev/null +++ b/apps/admin-x-settings/src/admin-x-ds/unsplash/ui/UnsplashSelector.tsx @@ -0,0 +1,42 @@ +import {ChangeEvent, FunctionComponent, ReactNode} from 'react'; +import {ReactComponent as CloseIcon} from '../assets/kg-close.svg'; +import {ReactComponent as SearchIcon} from '../assets/kg-search.svg'; +import {ReactComponent as UnsplashIcon} from '../assets/kg-card-type-unsplash.svg'; + +interface UnsplashSelectorProps { + closeModal: () => void; + handleSearch: (e: ChangeEvent) => void; + children: ReactNode; +} + +const UnsplashSelector: FunctionComponent = ({closeModal, handleSearch, children}) => { + return ( + <> +
+
+ +
+
+

+ + Unsplash +

+
+ + +
+
+ {children} +
+
+ + ); +}; + +export default UnsplashSelector; diff --git a/apps/admin-x-settings/src/admin-x-ds/unsplash/ui/UnsplashZoomed.tsx b/apps/admin-x-settings/src/admin-x-ds/unsplash/ui/UnsplashZoomed.tsx new file mode 100644 index 0000000000..3589f152a0 --- /dev/null +++ b/apps/admin-x-settings/src/admin-x-ds/unsplash/ui/UnsplashZoomed.tsx @@ -0,0 +1,32 @@ +import UnsplashImage, {UnsplashImageProps} from './UnsplashImage'; +import {FC} from 'react'; + +import {Photo} from '../../../utils/unsplash/UnsplashTypes'; + +interface UnsplashZoomedProps extends Omit { + zoomed: Photo | null; + selectImg: (photo: Photo | null) => void; +} + +const UnsplashZoomed: FC = ({payload, insertImage, selectImg, zoomed}) => { + return ( +
selectImg(null)}> + +
+ ); +}; + +export default UnsplashZoomed; diff --git a/apps/admin-x-settings/src/components/Settings.tsx b/apps/admin-x-settings/src/components/Settings.tsx index d3c711dc84..9639bb9001 100644 --- a/apps/admin-x-settings/src/components/Settings.tsx +++ b/apps/admin-x-settings/src/components/Settings.tsx @@ -5,19 +5,33 @@ import EmailSettings from './settings/email/EmailSettings'; import GeneralSettings from './settings/general/GeneralSettings'; import MembershipSettings from './settings/membership/MembershipSettings'; import SiteSettings from './settings/site/SiteSettings'; +// import UnsplashSearchModal from '../utils/unsplash/UnsplashSearchModal'; + +// const API_VERSION = 'v1'; +// const API_TOKEN = '8672af113b0a8573edae3aa3713886265d9bb741d707f6c01a486cde8c278980'; + +// export const defaultHeaders = { +// Authorization: `Client-ID ${API_TOKEN}`, +// 'Accept-Version': API_VERSION, +// 'Content-Type': 'application/json', +// 'App-Pragma': 'no-cache', +// 'X-Unsplash-Cache': true +// }; const Settings: React.FC = () => { return ( -
- - - - - -
- Click here to open the original Admin settings. + <> +
+ + + + + +
+ Click here to open the original Admin settings. +
-
+ ); }; diff --git a/apps/admin-x-settings/src/components/providers/ServiceProvider.tsx b/apps/admin-x-settings/src/components/providers/ServiceProvider.tsx index 9ce6e993d9..122b121fd8 100644 --- a/apps/admin-x-settings/src/components/providers/ServiceProvider.tsx +++ b/apps/admin-x-settings/src/components/providers/ServiceProvider.tsx @@ -1,5 +1,6 @@ import React, {createContext, useContext} from 'react'; import useSearchService, {SearchService} from '../../utils/search'; +import {DefaultHeaderTypes} from '../../utils/unsplash/UnsplashTypes'; import {ZapierTemplate} from '../settings/advanced/integrations/ZapierModal'; export type OfficialTheme = { @@ -16,6 +17,7 @@ interface ServicesContextProps { officialThemes: OfficialTheme[]; zapierTemplates: ZapierTemplate[]; search: SearchService; + unsplashConfig: DefaultHeaderTypes; toggleFeatureFlag: (flag: string, enabled: boolean) => void; } @@ -25,6 +27,7 @@ interface ServicesProviderProps { zapierTemplates: ZapierTemplate[]; officialThemes: OfficialTheme[]; toggleFeatureFlag: (flag: string, enabled: boolean) => void; + unsplashConfig: DefaultHeaderTypes; } const ServicesContext = createContext({ @@ -32,10 +35,17 @@ const ServicesContext = createContext({ officialThemes: [], zapierTemplates: [], search: {filter: '', setFilter: () => {}, checkVisible: () => true}, - toggleFeatureFlag: () => {} + toggleFeatureFlag: () => {}, + unsplashConfig: { + Authorization: '', + 'Accept-Version': '', + 'Content-Type': '', + 'App-Pragma': '', + 'X-Unsplash-Cache': true + } }); -const ServicesProvider: React.FC = ({children, ghostVersion, zapierTemplates, officialThemes, toggleFeatureFlag}) => { +const ServicesProvider: React.FC = ({children, ghostVersion, zapierTemplates, officialThemes, toggleFeatureFlag, unsplashConfig}) => { const search = useSearchService(); return ( @@ -44,6 +54,7 @@ const ServicesProvider: React.FC = ({children, ghostVersi officialThemes, zapierTemplates, search, + unsplashConfig, toggleFeatureFlag }}> {children} diff --git a/apps/admin-x-settings/src/components/settings/site/designAndBranding/BrandSettings.tsx b/apps/admin-x-settings/src/components/settings/site/designAndBranding/BrandSettings.tsx index cd3b4b08b4..23d96c22eb 100644 --- a/apps/admin-x-settings/src/components/settings/site/designAndBranding/BrandSettings.tsx +++ b/apps/admin-x-settings/src/components/settings/site/designAndBranding/BrandSettings.tsx @@ -5,11 +5,13 @@ import ImageUpload from '../../../../admin-x-ds/global/form/ImageUpload'; import React, {useRef, useState} from 'react'; import SettingGroupContent from '../../../../admin-x-ds/settings/SettingGroupContent'; import TextField from '../../../../admin-x-ds/global/form/TextField'; +import UnsplashSearchModal from '../../../../utils/unsplash/UnsplashSearchModal'; import usePinturaEditor from '../../../../hooks/usePinturaEditor'; import {SettingValue, getSettingValues} from '../../../../api/settings'; import {debounce} from '../../../../utils/debounce'; import {getImageUrl, useUploadImage} from '../../../../api/images'; import {useGlobalData} from '../../../providers/GlobalDataProvider'; +import {useServices} from '../../../providers/ServiceProvider'; export interface BrandSettingValues { description: string @@ -24,8 +26,11 @@ const BrandSettings: React.FC<{ values: BrandSettingValues, updateSetting: (key: const [siteDescription, setSiteDescription] = useState(values.description); const {settings} = useGlobalData(); const [pintura] = getSettingValues(settings, ['pintura']); + const [unsplashEnabled] = getSettingValues(settings, ['unsplash']); const [pinturaJsUrl] = getSettingValues(settings, ['pintura_js_url']); const [pinturaCssUrl] = getSettingValues(settings, ['pintura_css_url']); + const [showUnsplash, setShowUnsplash] = useState(false); + const {unsplashConfig} = useServices(); const updateDescriptionDebouncedRef = useRef( debounce((value: string) => { @@ -118,6 +123,7 @@ const BrandSettings: React.FC<{ values: BrandSettingValues, updateSetting: (key: height='180px' id='cover' imageURL={values.coverImage || ''} + openUnsplash={() => setShowUnsplash(true)} pintura={ { isEnabled: pinturaEnabled, @@ -129,6 +135,8 @@ const BrandSettings: React.FC<{ values: BrandSettingValues, updateSetting: (key: }) } } + unsplashButtonClassName='!top-1 !right-1' + unsplashEnabled={true} onDelete={() => updateSetting('cover_image', null)} onUpload={async (file) => { updateSetting('cover_image', getImageUrl(await uploadImage({file}))); @@ -136,6 +144,24 @@ const BrandSettings: React.FC<{ values: BrandSettingValues, updateSetting: (key: > Upload cover + { + showUnsplash && unsplashConfig && unsplashEnabled && ( + { + setShowUnsplash(false); + }} + onImageInsert={(image) => { + if (image.src) { + updateSetting('cover_image', image.src); + } + setShowUnsplash(false); + }} + /> + ) + }
diff --git a/apps/admin-x-settings/src/main.tsx b/apps/admin-x-settings/src/main.tsx index a8af546822..5be3aaeb0b 100644 --- a/apps/admin-x-settings/src/main.tsx +++ b/apps/admin-x-settings/src/main.tsx @@ -2,6 +2,7 @@ import './styles/demo.css'; import App from './App.tsx'; import React from 'react'; import ReactDOM from 'react-dom/client'; +import {DefaultHeaderTypes} from './utils/unsplash/UnsplashTypes.ts'; ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render( @@ -30,6 +31,7 @@ ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render( image: 'assets/img/themes/Edition.png' }]} toggleFeatureFlag={() => {}} + unsplashConfig={{} as DefaultHeaderTypes} zapierTemplates={[]} /> diff --git a/apps/admin-x-settings/src/utils/portal.tsx b/apps/admin-x-settings/src/utils/portal.tsx new file mode 100644 index 0000000000..5afe1b540c --- /dev/null +++ b/apps/admin-x-settings/src/utils/portal.tsx @@ -0,0 +1,30 @@ +import React, {ReactNode} from 'react'; +import {createPortal} from 'react-dom'; + +interface PortalProps { + children: ReactNode; + to?: Element; +} + +const Portal: React.FC = ({children, to}) => { + const container: Element = to || document.body; + + if (!container) { + return <>{children}; + } + + const cancelEvents = (event: React.MouseEvent) => { + event.stopPropagation(); + }; + + return createPortal( +
+
+ {children} +
+
, + container + ); +}; + +export default Portal; diff --git a/apps/admin-x-settings/src/utils/unsplash/UnsplashSearchModal.tsx b/apps/admin-x-settings/src/utils/unsplash/UnsplashSearchModal.tsx new file mode 100644 index 0000000000..c847c3fd6a --- /dev/null +++ b/apps/admin-x-settings/src/utils/unsplash/UnsplashSearchModal.tsx @@ -0,0 +1,192 @@ +import MasonryService from './masonry/MasonryService'; +import Portal from '../portal'; +import React, {useMemo, useRef, useState} from 'react'; +import UnsplashGallery from '../../admin-x-ds/unsplash/ui/UnsplashGallery'; +import UnsplashSelector from '../../admin-x-ds/unsplash/ui/UnsplashSelector'; +import {DefaultHeaderTypes, Photo} from './UnsplashTypes'; +import {PhotoUseCases} from './photo/PhotoUseCase'; +import {UnsplashRepository} from './api/UnsplashRepository'; +import {UnsplashService} from './UnsplashService'; + +interface UnsplashModalProps { + onClose: () => void; + onImageInsert: (image: Photo) => void; + unsplashConf: { + defaultHeaders: DefaultHeaderTypes; + }; + } + +const UnsplashSearchModal : React.FC = ({onClose, onImageInsert, unsplashConf}) => { + const unsplashRepo = useMemo(() => new UnsplashRepository(unsplashConf.defaultHeaders), [unsplashConf.defaultHeaders]); + const photoUseCase = useMemo(() => new PhotoUseCases(unsplashRepo), [unsplashRepo]); + const masonryService = useMemo(() => new MasonryService(3), []); + const UnsplashLib = useMemo(() => new UnsplashService(photoUseCase, masonryService), [photoUseCase, masonryService]); + const galleryRef = useRef(null); + const [scrollPos, setScrollPos] = useState(0); + const [lastScrollPos, setLastScrollPos] = useState(0); + const [isLoading, setIsLoading] = useState(UnsplashLib.searchIsRunning() || true); + const initLoadRef = useRef(false); + const [searchTerm, setSearchTerm] = useState(''); + const [zoomedImg, setZoomedImg] = useState(null); + const [dataset, setDataset] = useState([]); + + React.useEffect(() => { + if (galleryRef.current && zoomedImg === null && lastScrollPos !== 0) { + galleryRef.current.scrollTop = lastScrollPos; + setLastScrollPos(0); + } + }, [zoomedImg, scrollPos, lastScrollPos]); + + React.useEffect(() => { + const handleKeyDown = (e:KeyboardEvent) => { + if (e.key === 'Escape') { + onClose(); + } + }; + window.addEventListener('keydown', handleKeyDown); + return () => { + window.removeEventListener('keydown', handleKeyDown); + }; + }, [onClose]); + + React.useEffect(() => { + const ref = galleryRef.current; + if (!zoomedImg) { + if (ref) { + ref.addEventListener('scroll', () => { + setScrollPos(ref.scrollTop); + }); + } + // unmount + return () => { + if (ref) { + ref.removeEventListener('scroll', () => { + setScrollPos(ref.scrollTop); + }); + } + }; + } + }, [galleryRef, zoomedImg]); + + const loadInitPhotos = React.useCallback(async () => { + if (initLoadRef.current === false || searchTerm.length === 0) { + setDataset([]); + UnsplashLib.clearPhotos(); + await UnsplashLib.loadNew(); + const columns = UnsplashLib.getColumns(); + setDataset(columns || []); + if (galleryRef.current && galleryRef.current.scrollTop !== 0) { + galleryRef.current.scrollTop = 0; + } + setIsLoading(false); + } + }, [UnsplashLib, searchTerm]); + + const handleSearch = async (e: React.ChangeEvent) => { + const query = e.target.value; + if (query.length > 2) { + setZoomedImg(null); + setSearchTerm(query); + } + if (query.length === 0) { + setSearchTerm(''); + initLoadRef.current = false; + await loadInitPhotos(); + } + }; + + const search = React.useCallback(async () => { + if (searchTerm) { + setIsLoading(true); + setDataset([]); + UnsplashLib.clearPhotos(); + await UnsplashLib.updateSearch(searchTerm); + const columns = UnsplashLib.getColumns(); + if (columns) { + setDataset(columns); + } + if (galleryRef.current && galleryRef.current.scrollTop !== 0) { + galleryRef.current.scrollTop = 0; + } + setIsLoading(false); + } + }, [searchTerm, UnsplashLib]); + + React.useEffect(() => { + const timeoutId = setTimeout(async () => { + if (searchTerm.length > 2) { + await search(); + } else { + await loadInitPhotos(); + } + }, 300); + return () => { + initLoadRef.current = true; + clearTimeout(timeoutId); + }; + }, [searchTerm, search, loadInitPhotos]); + + const loadMorePhotos = React.useCallback(async () => { + setIsLoading(true); + await UnsplashLib.loadNextPage(); + const columns = UnsplashLib.getColumns(); + setDataset(columns || []); + setIsLoading(false); + }, [UnsplashLib]); + + React.useEffect(() => { + const ref = galleryRef.current; + if (ref) { + const handleScroll = async () => { + if (zoomedImg === null && ref.scrollTop + ref.clientHeight >= ref.scrollHeight - 1000) { + await loadMorePhotos(); + } + }; + ref.addEventListener('scroll', handleScroll); + return () => { + ref.removeEventListener('scroll', handleScroll); + }; + } + }, [galleryRef, loadMorePhotos, zoomedImg]); + + const selectImg = (payload:Photo) => { + if (payload) { + setZoomedImg(payload); + setLastScrollPos(scrollPos); + } + + if (payload === null) { + setZoomedImg(null); + if (galleryRef.current) { + galleryRef.current.scrollTop = lastScrollPos; + } + } + }; + + async function insertImage(image:Photo) { + if (image.src) { + UnsplashLib.triggerDownload(image); + onImageInsert(image); + } + } + return ( + + + + + + ); +}; + +export default UnsplashSearchModal; diff --git a/apps/admin-x-settings/src/utils/unsplash/UnsplashService.ts b/apps/admin-x-settings/src/utils/unsplash/UnsplashService.ts new file mode 100644 index 0000000000..2bc0941563 --- /dev/null +++ b/apps/admin-x-settings/src/utils/unsplash/UnsplashService.ts @@ -0,0 +1,68 @@ +import MasonryService from './masonry/MasonryService'; +import {Photo} from './UnsplashTypes'; +import {PhotoUseCases} from './photo/PhotoUseCase'; + +export interface IUnsplashService { + loadNew(): Promise; + layoutPhotos(): void; + getColumns(): Photo[][] | [] | null; + updateSearch(term: string): Promise; + loadNextPage(): Promise; + clearPhotos(): void; + triggerDownload(photo: Photo): void; + photos: Photo[]; + searchIsRunning(): boolean; +} + +export class UnsplashService implements IUnsplashService { + private photoUseCases: PhotoUseCases; + private masonryService: MasonryService; + public photos: Photo[] = []; + + constructor(photoUseCases: PhotoUseCases, masonryService: MasonryService) { + this.photoUseCases = photoUseCases; + this.masonryService = masonryService; + } + + async loadNew() { + let images = await this.photoUseCases.fetchPhotos(); + this.photos = images; + await this.layoutPhotos(); + } + + async layoutPhotos() { + this.masonryService.reset(); + this.photos.forEach((photo) => { + photo.ratio = photo.height / photo.width; + this.masonryService.addPhotoToColumns(photo); + }); + } + + getColumns() { + return this.masonryService.getColumns(); + } + + async updateSearch(term: string) { + let results = await this.photoUseCases.searchPhotos(term); + this.photos = results; + this.layoutPhotos(); + } + + async loadNextPage() { + const newPhotos = await this.photoUseCases.fetchNextPage() || []; + this.photos = [...this.photos, ...newPhotos]; + this.layoutPhotos(); + } + + clearPhotos() { + this.photos = []; + } + + triggerDownload(photo: Photo) { + this.photoUseCases.triggerDownload(photo); + } + + searchIsRunning() { + return this.photoUseCases.searchIsRunning(); + } +} diff --git a/apps/admin-x-settings/src/utils/unsplash/UnsplashTypes.ts b/apps/admin-x-settings/src/utils/unsplash/UnsplashTypes.ts new file mode 100644 index 0000000000..3c78aa223f --- /dev/null +++ b/apps/admin-x-settings/src/utils/unsplash/UnsplashTypes.ts @@ -0,0 +1,80 @@ +export type URLS = { + raw: string; + full: string; + regular: string; + small: string; + thumb: string; + }; + +export type Links = { + self: string; + html: string; + download: string; + download_location: string; + }; + +export type ProfileImage = { + small: string; + medium: string; + large: string; + }; + +export type User = { + id: string; + updated_at: string; + username: string; + name: string; + first_name: string; + last_name: string; + twitter_username: string; + portfolio_url: string; + bio: string; + location: string; + links: Links; + profile_image: ProfileImage; + instagram_username: string; + total_collections: number; + total_likes: number; + total_photos: number; + accepted_tos: boolean; + for_hire: boolean; + social: { + instagram_username: string; + portfolio_url: string; + twitter_username: string; + paypal_email: null | string; + }; + }; + +export type Photo = { + id: string; + slug: string; + created_at: string; + updated_at: string; + promoted_at: string | null; // Nullable + width: number; + height: number; + color: string; + blur_hash: string; + description: null | string; // Nullable + alt_description: string; + breadcrumbs: []; // You could make this more specific + urls: URLS; + links: Links; + likes: number; + liked_by_user: boolean; + current_user_collections: []; // You could make this more specific + sponsorship: null | []; // Nullable + topic_submissions: []; // You could make this more specific + user: User; + ratio: number; + src? : string; + }; + +export type DefaultHeaderTypes = { + Authorization: string; + 'Accept-Version': string; + 'Content-Type': string; + 'App-Pragma': string; + 'X-Unsplash-Cache': boolean; +}; diff --git a/apps/admin-x-settings/src/utils/unsplash/api/InMemoryUnsplashRepository.ts b/apps/admin-x-settings/src/utils/unsplash/api/InMemoryUnsplashRepository.ts new file mode 100644 index 0000000000..a0ef976687 --- /dev/null +++ b/apps/admin-x-settings/src/utils/unsplash/api/InMemoryUnsplashRepository.ts @@ -0,0 +1,55 @@ +// for testing purposes +import {IUnsplashRepository} from './UnsplashRepository'; +import {Photo} from '../UnsplashTypes'; +import {fixturePhotos} from './unsplashFixtures'; + +export class InMemoryUnsplashRepository implements IUnsplashRepository { + photos: Photo[] = fixturePhotos; + PAGINATION: { [key: string]: string } = {}; + REQUEST_IS_RUNNING: boolean = false; + SEARCH_IS_RUNNING: boolean = false; + LAST_REQUEST_URL: string = ''; + ERROR: string | null = null; + IS_LOADING: boolean = false; + currentPage: number = 1; + + public async fetchPhotos(): Promise { + this.IS_LOADING = true; + + const start = (this.currentPage - 1) * 30; + const end = this.currentPage * 30; + this.currentPage += 1; + + this.IS_LOADING = false; + + return this.photos.slice(start, end); + } + + public async fetchNextPage(): Promise { + if (this.REQUEST_IS_RUNNING || this.SEARCH_IS_RUNNING) { + return null; + } + + const photos = await this.fetchPhotos(); + return photos.length > 0 ? photos : null; + } + + public async searchPhotos(term: string): Promise { + this.SEARCH_IS_RUNNING = true; + const filteredPhotos = this.photos.filter(photo => photo.description?.includes(term) || photo.alt_description?.includes(term) + ); + this.SEARCH_IS_RUNNING = false; + + return filteredPhotos; + } + + searchIsRunning(): boolean { + return this.SEARCH_IS_RUNNING; + } + + triggerDownload(photo: Photo): void { + () => { + photo; + }; + } +} diff --git a/apps/admin-x-settings/src/utils/unsplash/api/UnsplashRepository.ts b/apps/admin-x-settings/src/utils/unsplash/api/UnsplashRepository.ts new file mode 100644 index 0000000000..30c8e83185 --- /dev/null +++ b/apps/admin-x-settings/src/utils/unsplash/api/UnsplashRepository.ts @@ -0,0 +1,169 @@ +import {DefaultHeaderTypes, Photo} from '../UnsplashTypes'; + +export interface IUnsplashRepository { + fetchPhotos(): Promise; + fetchNextPage(): Promise; + searchPhotos(term: string): Promise; + triggerDownload(photo: Photo): void; + searchIsRunning(): boolean; + } + +export class UnsplashRepository implements IUnsplashRepository { + API_URL: string = 'https://api.unsplash.com'; + HEADERS: DefaultHeaderTypes; + ERROR: string | null = null; + PAGINATION: { [key: string]: string } = {}; + REQUEST_IS_RUNNING: boolean = false; + SEARCH_IS_RUNNING: boolean = false; + LAST_REQUEST_URL: string = ''; + IS_LOADING: boolean = false; + + constructor(HEADERS: DefaultHeaderTypes) { + this.HEADERS = HEADERS; + } + + private async makeRequest(url: string): Promise { + if (this.REQUEST_IS_RUNNING) { + return null; + } + + this.LAST_REQUEST_URL = url; + const options = { + method: 'GET', + headers: this.HEADERS as unknown as HeadersInit + }; + + try { + this.REQUEST_IS_RUNNING = true; + this.IS_LOADING = true; + + const response = await fetch(url, options); + const checkedResponse = await this.checkStatus(response); + this.extractPagination(checkedResponse); + + const jsonResponse = await checkedResponse.json(); + + if ('results' in jsonResponse) { + return jsonResponse.results; + } else { + return jsonResponse; + } + } catch (error) { + this.ERROR = error as string; + return null; + } finally { + this.REQUEST_IS_RUNNING = false; + this.IS_LOADING = false; + } + } + + private extractPagination(response: Response): Response { + let linkRegex = new RegExp('<(.*)>; rel="(.*)"'); + + let links = []; + + let pagination : { [key: string]: string } = {}; + + for (let entry of response.headers.entries()) { + if (entry[0] === 'link') { + links.push(entry[1]); + } + } + + if (links) { + links.toString().split(',').forEach((link) => { + if (link){ + let linkParts = linkRegex.exec(link); + if (linkParts) { + pagination[linkParts[2]] = linkParts[1]; + } + } + }); + } + + this.PAGINATION = pagination; + + return response; + } + + public async fetchPhotos(): Promise { + const url = `${this.API_URL}/photos?per_page=30`; + const request = await this.makeRequest(url); + return request as Photo[]; + } + + public async fetchNextPage(): Promise { + if (this.REQUEST_IS_RUNNING) { + return null; + } + + if (this.SEARCH_IS_RUNNING) { + return null; + } + + if (this.PAGINATION.next) { + const url = `${this.PAGINATION.next}`; + const response = await this.makeRequest(url); + if (response) { + return response as Photo[]; + } + } + + return null; + } + + public async searchPhotos(term: string): Promise { + const url = `${this.API_URL}/search/photos?query=${term}&per_page=30`; + + const request = await this.makeRequest(url); + if (request) { + return request as Photo[]; + } + + return []; + } + + public async triggerDownload(photo: Photo): Promise { + if (photo.links.download_location) { + await this.makeRequest(photo.links.download_location); + } + } + + private async checkStatus(response: Response): Promise { + if (response.status >= 200 && response.status < 300) { + return response; + } + + let errorText = ''; + let responseTextPromise: Promise; // or Promise if you know the type + + const contentType = response.headers.get('content-type'); + if (contentType === 'application/json') { + responseTextPromise = response.json().then(json => (json).errors[0]); // or cast to a specific type if you know it + } else if (contentType === 'text/xml') { + responseTextPromise = response.text(); + } else { + throw new Error('Unsupported content type'); + } + + return responseTextPromise.then((responseText: string) => { // you can type responseText based on what you expect + if (response.status === 403 && response.headers.get('x-ratelimit-remaining') === '0') { + // we've hit the rate limit on the API + errorText = 'Unsplash API rate limit reached, please try again later.'; + } + + errorText = errorText || responseText || `Error ${response.status}: Uh-oh! Trouble reaching the Unsplash API`; + + // set error text for display in UI + this.ERROR = errorText; + + // throw error to prevent further processing + let error = new Error(errorText) as Error; // or create a custom Error class + throw error; + }); + } + + searchIsRunning(): boolean { + return this.SEARCH_IS_RUNNING; + } +} diff --git a/apps/admin-x-settings/src/utils/unsplash/api/unsplashFixtures.ts b/apps/admin-x-settings/src/utils/unsplash/api/unsplashFixtures.ts new file mode 100644 index 0000000000..3a56b8ed6b --- /dev/null +++ b/apps/admin-x-settings/src/utils/unsplash/api/unsplashFixtures.ts @@ -0,0 +1,142 @@ +import {Photo} from '../UnsplashTypes'; + +export const fixturePhotos: Photo[] = [ + { + id: '1', + slug: 'photo1', + created_at: '2021-01-01', + updated_at: '2021-01-02', + promoted_at: null, + width: 1080, + height: 720, + color: '#ffffff', + blur_hash: 'abc123', + description: 'A nice photo', + alt_description: 'alt1', + breadcrumbs: [], + urls: { + raw: 'http://example.com/raw1', + full: 'http://example.com/full1', + regular: 'http://example.com/regular1', + small: 'http://example.com/small1', + thumb: 'http://example.com/thumb1' + }, + links: { + self: 'http://example.com/self1', + html: 'http://example.com/html1', + download: 'http://example.com/download1', + download_location: 'http://example.com/download_location1' + }, + likes: 100, + liked_by_user: true, + current_user_collections: [], + sponsorship: null, + topic_submissions: [], + user: { + id: 'user1', + updated_at: '2021-01-01', + username: 'user1', + name: 'User One', + first_name: 'User', + last_name: 'One', + twitter_username: 'user1_twitter', + portfolio_url: 'http://portfolio1.com', + bio: 'Bio1', + location: 'Location1', + links: { + self: 'http://example.com/self1', + html: 'http://example.com/html1', + download: 'http://example.com/download1', + download_location: 'http://example.com/download_location1' + }, + profile_image: { + small: 'http://small1.com', + medium: 'http://medium1.com', + large: 'http://large1.com' + }, + instagram_username: 'insta1', + total_collections: 10, + total_likes: 100, + total_photos: 1000, + accepted_tos: true, + for_hire: false, + social: { + instagram_username: 'insta1', + portfolio_url: 'http://portfolio1.com', + twitter_username: 'user1_twitter', + paypal_email: null + } + }, + ratio: 1.5, + src: 'http://src1.com' + }, + { + id: '2', + slug: 'photo1', + created_at: '2021-01-01', + updated_at: '2021-01-02', + promoted_at: null, + width: 1080, + height: 720, + color: '#ffffff', + blur_hash: 'abc123', + description: 'hello world', + alt_description: 'alt1', + breadcrumbs: [], + urls: { + raw: 'http://example.com/raw1', + full: 'http://example.com/full1', + regular: 'http://example.com/regular1', + small: 'http://example.com/small1', + thumb: 'http://example.com/thumb1' + }, + links: { + self: 'http://example.com/self1', + html: 'http://example.com/html1', + download: 'http://example.com/download1', + download_location: 'http://example.com/download_location1' + }, + likes: 100, + liked_by_user: true, + current_user_collections: [], + sponsorship: null, + topic_submissions: [], + user: { + id: 'user1', + updated_at: '2021-01-01', + username: 'user1', + name: 'User One', + first_name: 'User', + last_name: 'One', + twitter_username: 'user1_twitter', + portfolio_url: 'http://portfolio1.com', + bio: 'Bio1', + location: 'Location1', + links: { + self: 'http://example.com/self1', + html: 'http://example.com/html1', + download: 'http://example.com/download1', + download_location: 'http://example.com/download_location1' + }, + profile_image: { + small: 'http://small1.com', + medium: 'http://medium1.com', + large: 'http://large1.com' + }, + instagram_username: 'insta1', + total_collections: 10, + total_likes: 100, + total_photos: 1000, + accepted_tos: true, + for_hire: false, + social: { + instagram_username: 'insta1', + portfolio_url: 'http://portfolio1.com', + twitter_username: 'user1_twitter', + paypal_email: null + } + }, + ratio: 1.5, + src: 'http://src1.com' + } +]; diff --git a/apps/admin-x-settings/src/utils/unsplash/masonry/MasonryService.ts b/apps/admin-x-settings/src/utils/unsplash/masonry/MasonryService.ts new file mode 100644 index 0000000000..6a624cf983 --- /dev/null +++ b/apps/admin-x-settings/src/utils/unsplash/masonry/MasonryService.ts @@ -0,0 +1,55 @@ +import {Photo} from '../UnsplashTypes'; + +export default class MasonryService { + public columnCount: number; + public columns: Photo[][] | [] = []; + public columnHeights: number[] | null; + + constructor(columnCount: number = 3) { + this.columnCount = columnCount; + this.columns = [[]]; + this.columnHeights = null; + } + + reset(): void { + let columns: Photo[][] = []; + let columnHeights: number[] = []; + + for (let i = 0; i < this.columnCount; i += 1) { + columns[i] = []; + columnHeights[i] = 0; + } + + this.columns = columns; + this.columnHeights = columnHeights; + } + + addColumns(): void { + for (let i = 0; i < this.columnCount; i++) { + (this.columns as Photo[][]).push([]); + this.columnHeights!.push(0); + } + } + + addPhotoToColumns(photo: Photo): void { + if (!this.columns) { + this.reset(); + } + let min = Math.min(...this.columnHeights!); + let columnIndex = this.columnHeights!.indexOf(min); + + this.columnHeights![columnIndex] += 300 * photo.ratio; + this.columns![columnIndex].push(photo); + } + + getColumns(): Photo[][] | null { + return this.columns; + } + + changeColumnCount(newColumnCount: number): void { + if (newColumnCount !== this.columnCount) { + this.columnCount = newColumnCount; + this.reset(); + } + } +} diff --git a/apps/admin-x-settings/src/utils/unsplash/photo/PhotoUseCase.ts b/apps/admin-x-settings/src/utils/unsplash/photo/PhotoUseCase.ts new file mode 100644 index 0000000000..a77d3b95b6 --- /dev/null +++ b/apps/admin-x-settings/src/utils/unsplash/photo/PhotoUseCase.ts @@ -0,0 +1,36 @@ +import {IUnsplashRepository} from '../api/UnsplashRepository'; +import {Photo} from '../UnsplashTypes'; + +export class PhotoUseCases { + private repository: IUnsplashRepository; + + constructor(repository: IUnsplashRepository) { + this.repository = repository; + } + + async fetchPhotos(): Promise { + return await this.repository.fetchPhotos(); + } + + async searchPhotos(term: string): Promise { + return await this.repository.searchPhotos(term); + } + + async triggerDownload(photo: Photo): Promise { + this.repository.triggerDownload(photo); + } + + async fetchNextPage(): Promise { + let request = await this.repository.fetchNextPage(); + + if (request) { + return request; + } + + return null; + } + + searchIsRunning(): boolean { + return this.repository.searchIsRunning(); + } +} diff --git a/apps/admin-x-settings/test/unit/unsplash/Masonry.test.ts b/apps/admin-x-settings/test/unit/unsplash/Masonry.test.ts new file mode 100644 index 0000000000..dcfd9452b9 --- /dev/null +++ b/apps/admin-x-settings/test/unit/unsplash/Masonry.test.ts @@ -0,0 +1,56 @@ +import MasonryService from '../../../src/utils/unsplash/masonry/MasonryService'; +import {Photo} from '../../../src/utils/unsplash/UnsplashTypes'; +import {fixturePhotos} from '../../../src/utils/unsplash/api/unsplashFixtures'; + +describe('MasonryService', () => { + let service: MasonryService; + let mockPhotos: Photo[]; + + beforeEach(() => { + service = new MasonryService(3); + mockPhotos = fixturePhotos; + }); + + it('should initialize with default column count', () => { + expect(service.columnCount).toEqual(3); + }); + + describe('reset', () => { + it('should reset columns and columnHeights', () => { + service.reset(); + expect(service.columns.length).toEqual(3); + expect(service.columnHeights!.length).toEqual(3); + }); + }); + + describe('addPhotoToColumns', () => { + it('should add photo to columns with the minimum height)', () => { + service.reset(); + service.addPhotoToColumns(mockPhotos[0]); + expect(service.columns![0]).toContain(mockPhotos[0]); + }); + }); + + describe('getColumns', () => { + it('should return the columns', () => { + service.reset(); + const columns = service.getColumns(); + expect(columns).toEqual(service.columns); + }); + }); + + describe('changeColumnCount', () => { + it('should change the column count and reset', () => { + service.changeColumnCount(4); + expect(service.columnCount).toEqual(4); + expect(service.columns.length).toEqual(4); + expect(service.columnHeights!.length).toEqual(4); + }); + + it('should not reset if the column count is not changed', () => { + const prevColumns = service.getColumns(); + service.changeColumnCount(3); + expect(service.getColumns()).toEqual(prevColumns); + }); + }); +}); diff --git a/apps/admin-x-settings/test/unit/unsplash/UnsplashService.test.ts b/apps/admin-x-settings/test/unit/unsplash/UnsplashService.test.ts new file mode 100644 index 0000000000..1900d86b9d --- /dev/null +++ b/apps/admin-x-settings/test/unit/unsplash/UnsplashService.test.ts @@ -0,0 +1,54 @@ +import MasonryService from '../../../src/utils/unsplash/masonry/MasonryService'; +import {IUnsplashRepository} from '../../../src/utils/unsplash/api/UnsplashRepository'; +import {IUnsplashService, UnsplashService} from '../../../src/utils/unsplash/UnsplashService'; +import {InMemoryUnsplashRepository} from '../../../src/utils/unsplash/api/InMemoryUnsplashRepository'; +import {PhotoUseCases} from '../../../src/utils/unsplash/photo/PhotoUseCase'; +import {fixturePhotos} from '../../../src/utils/unsplash/api/unsplashFixtures'; + +describe('UnsplashService', () => { + let unsplashService: IUnsplashService; + let unsplashRepository: IUnsplashRepository; + let masonryService: MasonryService; + let photoUseCases: PhotoUseCases; + + beforeEach(() => { + unsplashRepository = new InMemoryUnsplashRepository(); + masonryService = new MasonryService(3); + photoUseCases = new PhotoUseCases(unsplashRepository); + unsplashService = new UnsplashService(photoUseCases, masonryService); + }); + + it('can load new photos', async function () { + await unsplashService.loadNew(); + const photos = unsplashService.photos; + expect(photos).toEqual(fixturePhotos); + }); + + it('set up new columns of 3', async function () { + await unsplashService.loadNew(); + const columns = unsplashService.getColumns(); + if (columns) { + expect(columns.length).toBe(3); + } + }); + + it('can search for photos', async function () { + await unsplashService.updateSearch('cat'); + const photos = unsplashService.photos; + expect(photos.length).toBe(0); + await unsplashService.updateSearch('photo'); + const photos2 = unsplashService.photos; + expect(photos2.length).toBe(1); + }); + + it('can check if search is running', async function () { + const isRunning = unsplashService.searchIsRunning(); + expect(isRunning).toBe(false); + }); + + it('can load next page', async function () { + await unsplashService.loadNextPage(); + const photos = unsplashService.photos; + expect(photos.length).toBe(2); + }); +}); diff --git a/ghost/admin/app/components/admin-x/settings.js b/ghost/admin/app/components/admin-x/settings.js index 067f5ac5fb..22c39a000a 100644 --- a/ghost/admin/app/components/admin-x/settings.js +++ b/ghost/admin/app/components/admin-x/settings.js @@ -176,6 +176,14 @@ const zapierTemplates = [{ url: 'https://zapier.com/webintent/create-zap?template=359342' }]; +export const defaultUnsplashHeaders = { + Authorization: `Client-ID 8672af113b0a8573edae3aa3713886265d9bb741d707f6c01a486cde8c278980`, + 'Accept-Version': 'v1', + 'Content-Type': 'application/json', + 'App-Pragma': 'no-cache', + 'X-Unsplash-Cache': true +}; + class ErrorHandler extends React.Component { state = { hasError: false @@ -316,6 +324,7 @@ export default class AdminXSettings extends Component { externalNavigate={this.externalNavigate} toggleFeatureFlag={this.toggleFeatureFlag} darkMode={this.feature.nightShift} + unsplashConfig={defaultUnsplashHeaders} />