From 18617861ac46d05a68b0c1e49eceb0518dba54e1 Mon Sep 17 00:00:00 2001 From: Lukie Kang Date: Thu, 17 Mar 2022 12:41:44 +0000 Subject: [PATCH 01/10] initial implementation of navigation buttons --- src/components/AssetModal/AssetModal.tsx | 39 +++++++++++++++++++----- 1 file changed, 32 insertions(+), 7 deletions(-) diff --git a/src/components/AssetModal/AssetModal.tsx b/src/components/AssetModal/AssetModal.tsx index fbc8c374..25ff162f 100644 --- a/src/components/AssetModal/AssetModal.tsx +++ b/src/components/AssetModal/AssetModal.tsx @@ -4,14 +4,17 @@ import Image from 'next/image' import ArrowDownSvg from 'icons/svgs/arrow-down.svg' import SearchWhiteSvg from 'icons/svgs/search-white.svg' import DownloadSvg from 'icons/svgs/download.svg' -import {useAppSelector} from 'app/hooks' +import {useAppSelector, useAppDispatch} from 'app/hooks' +import {setSelectedAssetEnvironment} from 'features/planAssetsSlice' import AssetErrorSVG from 'icons/svgs/asset-error.svg' import downloadAsset from 'services/downloadAsset' import {getSelectedAssetEnvironment, getSelectedAssetGroup} from 'features/planAssetsSlice' import {classNames} from 'utils/classNames' import {EnvironmentName, EnvironmentShortName} from 'utils/enums' + const AssetModal = () => { + const dispatch = useAppDispatch() const [imageDimensions, setImageDimensions] = useState(null) const imageClasses = imageDimensions ? 'opacity-100 transition-opacity duration-500' : 'opacity-0 transition-opacity' @@ -75,28 +78,51 @@ const AssetModal = () => { const renderImageSection = () => { const isUniqueAcrossEnvironments = Object.values(selectedAssetGroup).filter(env => env?.image?.id).length === 1 - const renderNavigationButton = rotation => ( + + enum NavigationDirection { + LEFT = 'rotate-90', + RIGHT = '-rotate-90' + } + + const handleNavigationButtonClick = navigationDirection => { + + const assetArray = Object.values(selectedAssetGroup) + const currentAssetIndex = assetArray.findIndex(asset => asset.environment === selectedAssetEnvironment) + const lastAssetEnvironment = assetArray[assetArray.length - 1].environment + + if (navigationDirection === NavigationDirection.LEFT) { + const newEnvironment = selectedAsset === assetArray[0] ? lastAssetEnvironment : assetArray[currentAssetIndex - 1].environment + dispatch(setSelectedAssetEnvironment(newEnvironment)) + } else { + const newEnvironment = selectedAsset.environment === lastAssetEnvironment ? assetArray[0].environment : assetArray[currentAssetIndex + 1].environment + dispatch(setSelectedAssetEnvironment(newEnvironment)) + } + + + } + + const renderNavigationButton = navigationDirection => ( ) return (
- {!isUniqueAcrossEnvironments && renderNavigationButton('rotate-90')} + {!isUniqueAcrossEnvironments && renderNavigationButton(NavigationDirection.LEFT)}
{renderAssetimage()}
- {!isUniqueAcrossEnvironments && renderNavigationButton('-rotate-90')} + {!isUniqueAcrossEnvironments && renderNavigationButton(NavigationDirection.RIGHT)}
) } @@ -143,7 +169,6 @@ const AssetModal = () => { {renderJson()} - ) } From 87a5a4a92265231520b50ca5b96e1c6c2e4235f4 Mon Sep 17 00:00:00 2001 From: Lukie Kang Date: Thu, 17 Mar 2022 12:56:43 +0000 Subject: [PATCH 02/10] refactor logic --- src/components/AssetModal/AssetModal.tsx | 17 ++++++++--------- 1 file changed, 8 insertions(+), 9 deletions(-) diff --git a/src/components/AssetModal/AssetModal.tsx b/src/components/AssetModal/AssetModal.tsx index 25ff162f..008a6cac 100644 --- a/src/components/AssetModal/AssetModal.tsx +++ b/src/components/AssetModal/AssetModal.tsx @@ -77,7 +77,8 @@ const AssetModal = () => { } const renderImageSection = () => { - const isUniqueAcrossEnvironments = Object.values(selectedAssetGroup).filter(env => env?.image?.id).length === 1 + const assetArray = Object.values(selectedAssetGroup) + const isUniqueAcrossEnvironments = assetArray.filter(asset => asset !== null).length === 1 enum NavigationDirection { LEFT = 'rotate-90', @@ -85,20 +86,18 @@ const AssetModal = () => { } const handleNavigationButtonClick = navigationDirection => { - - const assetArray = Object.values(selectedAssetGroup) const currentAssetIndex = assetArray.findIndex(asset => asset.environment === selectedAssetEnvironment) + const firstAssetEnvironment = assetArray[0].environment const lastAssetEnvironment = assetArray[assetArray.length - 1].environment + let newEnvironment = selectedAssetEnvironment + if (navigationDirection === NavigationDirection.LEFT) { - const newEnvironment = selectedAsset === assetArray[0] ? lastAssetEnvironment : assetArray[currentAssetIndex - 1].environment - dispatch(setSelectedAssetEnvironment(newEnvironment)) + newEnvironment = selectedAssetEnvironment === firstAssetEnvironment ? lastAssetEnvironment : assetArray[currentAssetIndex - 1].environment } else { - const newEnvironment = selectedAsset.environment === lastAssetEnvironment ? assetArray[0].environment : assetArray[currentAssetIndex + 1].environment - dispatch(setSelectedAssetEnvironment(newEnvironment)) + newEnvironment = selectedAssetEnvironment === lastAssetEnvironment ? firstAssetEnvironment : assetArray[currentAssetIndex + 1].environment } - - + dispatch(setSelectedAssetEnvironment(newEnvironment)) } const renderNavigationButton = navigationDirection => ( From 492ca9b6c6b9f4b73a846be014abdaaf630ab6b0 Mon Sep 17 00:00:00 2001 From: Lukie Kang Date: Thu, 17 Mar 2022 12:58:41 +0000 Subject: [PATCH 03/10] fix typo --- src/components/AssetModal/AssetModal.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/AssetModal/AssetModal.tsx b/src/components/AssetModal/AssetModal.tsx index 008a6cac..b190c171 100644 --- a/src/components/AssetModal/AssetModal.tsx +++ b/src/components/AssetModal/AssetModal.tsx @@ -60,7 +60,7 @@ const AssetModal = () => { ) - const renderAssetimage = () => { + const renderAssetImage = () => { if (isError) { return } @@ -118,7 +118,7 @@ const AssetModal = () => { {!isUniqueAcrossEnvironments && renderNavigationButton(NavigationDirection.LEFT)}
- {renderAssetimage()} + {renderAssetImage()}
{!isUniqueAcrossEnvironments && renderNavigationButton(NavigationDirection.RIGHT)} From d6277c3b3870af3a6df20904afd75dbe7fc72f8f Mon Sep 17 00:00:00 2001 From: Lukie Kang Date: Thu, 17 Mar 2022 12:59:53 +0000 Subject: [PATCH 04/10] whitespace --- src/components/AssetModal/AssetModal.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/AssetModal/AssetModal.tsx b/src/components/AssetModal/AssetModal.tsx index b190c171..b430de60 100644 --- a/src/components/AssetModal/AssetModal.tsx +++ b/src/components/AssetModal/AssetModal.tsx @@ -89,7 +89,6 @@ const AssetModal = () => { const currentAssetIndex = assetArray.findIndex(asset => asset.environment === selectedAssetEnvironment) const firstAssetEnvironment = assetArray[0].environment const lastAssetEnvironment = assetArray[assetArray.length - 1].environment - let newEnvironment = selectedAssetEnvironment if (navigationDirection === NavigationDirection.LEFT) { From fca1afaf18957634ca4a064e8e765dc04f90e91b Mon Sep 17 00:00:00 2001 From: Lukie Kang Date: Mon, 21 Mar 2022 11:29:15 +0000 Subject: [PATCH 05/10] fix for asset error image not rendering --- src/components/AssetModal/AssetModal.tsx | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/src/components/AssetModal/AssetModal.tsx b/src/components/AssetModal/AssetModal.tsx index b430de60..3f81a0e9 100644 --- a/src/components/AssetModal/AssetModal.tsx +++ b/src/components/AssetModal/AssetModal.tsx @@ -16,13 +16,14 @@ import {EnvironmentName, EnvironmentShortName} from 'utils/enums' const AssetModal = () => { const dispatch = useAppDispatch() const [imageDimensions, setImageDimensions] = useState(null) + const [isError, setIsError] = useState(false) const imageClasses = imageDimensions ? 'opacity-100 transition-opacity duration-500' : 'opacity-0 transition-opacity' const selectedAssetEnvironment = useAppSelector(getSelectedAssetEnvironment) const selectedAssetGroup = useAppSelector(getSelectedAssetGroup) const selectedAsset = selectedAssetGroup[selectedAssetEnvironment] - const {hasMultipleImagesOfThisType, typeIndex, image, heading, isError, environment} = selectedAsset + const {hasMultipleImagesOfThisType, typeIndex, image, heading, environment} = selectedAsset const {id, url, description, encoding} = image const urlArray = url.split('/') @@ -72,7 +73,8 @@ const AssetModal = () => { height={imageDimensions?.naturalWeight || 280} objectFit='contain' alt={description || heading} - onLoadingComplete={(imageDimensions) => setImageDimensions(imageDimensions)}/> + onLoadingComplete={(imageDimensions) => setImageDimensions(imageDimensions)} + onError={() => setIsError(true)}/> ) } @@ -97,6 +99,7 @@ const AssetModal = () => { newEnvironment = selectedAssetEnvironment === lastAssetEnvironment ? firstAssetEnvironment : assetArray[currentAssetIndex + 1].environment } dispatch(setSelectedAssetEnvironment(newEnvironment)) + setIsError(false) } const renderNavigationButton = navigationDirection => ( From 0523c1432fa97059bc8d6433aa208ba18445fbeb Mon Sep 17 00:00:00 2001 From: Lukie Kang Date: Mon, 21 Mar 2022 11:40:17 +0000 Subject: [PATCH 06/10] fix stlying issues between asset could not load and asset loaded modals --- src/components/AssetModal/AssetModal.tsx | 16 +++++++++++++--- 1 file changed, 13 insertions(+), 3 deletions(-) diff --git a/src/components/AssetModal/AssetModal.tsx b/src/components/AssetModal/AssetModal.tsx index 3f81a0e9..9a9c3770 100644 --- a/src/components/AssetModal/AssetModal.tsx +++ b/src/components/AssetModal/AssetModal.tsx @@ -63,7 +63,11 @@ const AssetModal = () => { const renderAssetImage = () => { if (isError) { - return + return ( +
+ +
+ ) } return ( {
) } + const renderAssetDetails = () => { + if (isError) { + return ( +
+ ) + } return ( -
+
Dimensions {imageDimensions && `${imageDimensions.naturalWidth} x ${imageDimensions.naturalHeight}`} @@ -205,7 +215,7 @@ const AssetModal = () => { {renderEnvironmentTags()} {renderImageSection()} - {!isError && renderAssetDetails()} + {renderAssetDetails()} {renderJSONSection()} {renderButtons()} From c9c6abf35d19051049ae48c416dd76dc81e755c0 Mon Sep 17 00:00:00 2001 From: Lukie Kang Date: Mon, 21 Mar 2022 11:43:02 +0000 Subject: [PATCH 07/10] remove unneeded div --- src/components/AssetModal/AssetModal.tsx | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/src/components/AssetModal/AssetModal.tsx b/src/components/AssetModal/AssetModal.tsx index 9a9c3770..833e63d4 100644 --- a/src/components/AssetModal/AssetModal.tsx +++ b/src/components/AssetModal/AssetModal.tsx @@ -64,9 +64,7 @@ const AssetModal = () => { const renderAssetImage = () => { if (isError) { return ( -
- -
+ ) } return ( From dc675dcb335d8d5477e8d93aab4b028a16c94fef Mon Sep 17 00:00:00 2001 From: Lukie Kang Date: Mon, 21 Mar 2022 12:35:07 +0000 Subject: [PATCH 08/10] remove redundant isError and other comment fixes --- .../AssetGrid/components/Asset/Asset.tsx | 1 - src/components/AssetModal/AssetModal.tsx | 20 +++++++------------ src/types/index.ts | 1 - 3 files changed, 7 insertions(+), 15 deletions(-) diff --git a/src/components/AssetGrid/components/Asset/Asset.tsx b/src/components/AssetGrid/components/Asset/Asset.tsx index 71b9910c..d5ce6ed7 100644 --- a/src/components/AssetGrid/components/Asset/Asset.tsx +++ b/src/components/AssetGrid/components/Asset/Asset.tsx @@ -33,7 +33,6 @@ const Asset = ({image, assetType, typeIndex, imageEnv}: Props) => { typeIndex, heading: assetType.heading, environment: env, - isError, } ) diff --git a/src/components/AssetModal/AssetModal.tsx b/src/components/AssetModal/AssetModal.tsx index 833e63d4..44d7659c 100644 --- a/src/components/AssetModal/AssetModal.tsx +++ b/src/components/AssetModal/AssetModal.tsx @@ -84,21 +84,15 @@ const AssetModal = () => { const assetArray = Object.values(selectedAssetGroup) const isUniqueAcrossEnvironments = assetArray.filter(asset => asset !== null).length === 1 - enum NavigationDirection { - LEFT = 'rotate-90', - RIGHT = '-rotate-90' - } - const handleNavigationButtonClick = navigationDirection => { const currentAssetIndex = assetArray.findIndex(asset => asset.environment === selectedAssetEnvironment) - const firstAssetEnvironment = assetArray[0].environment - const lastAssetEnvironment = assetArray[assetArray.length - 1].environment - let newEnvironment = selectedAssetEnvironment + const lastAssetIndex = assetArray.length - 1 - if (navigationDirection === NavigationDirection.LEFT) { - newEnvironment = selectedAssetEnvironment === firstAssetEnvironment ? lastAssetEnvironment : assetArray[currentAssetIndex - 1].environment + let newEnvironment + if (navigationDirection === 'rotate-90') { + newEnvironment = currentAssetIndex === 0 ? assetArray[lastAssetIndex].environment : assetArray[currentAssetIndex - 1].environment } else { - newEnvironment = selectedAssetEnvironment === lastAssetEnvironment ? firstAssetEnvironment : assetArray[currentAssetIndex + 1].environment + newEnvironment = currentAssetIndex === lastAssetIndex ? assetArray[0].environment : assetArray[currentAssetIndex + 1].environment } dispatch(setSelectedAssetEnvironment(newEnvironment)) setIsError(false) @@ -119,13 +113,13 @@ const AssetModal = () => { return (
- {!isUniqueAcrossEnvironments && renderNavigationButton(NavigationDirection.LEFT)} + {!isUniqueAcrossEnvironments && renderNavigationButton('rotate-90')}
{renderAssetImage()}
- {!isUniqueAcrossEnvironments && renderNavigationButton(NavigationDirection.RIGHT)} + {!isUniqueAcrossEnvironments && renderNavigationButton('-rotate-90')}
) } diff --git a/src/types/index.ts b/src/types/index.ts index 0645242a..1adfb6fb 100644 --- a/src/types/index.ts +++ b/src/types/index.ts @@ -57,7 +57,6 @@ export type PlanAsset = { // Plan Image with additional metadata used for Asset hasMultipleImagesOfThisType: boolean typeIndex: number, heading: string, - isError: boolean, environment: string, } From 9abf82d96d35ef88e9dca3d15d1fd927f8fcec0b Mon Sep 17 00:00:00 2001 From: Lukie Kang Date: Mon, 21 Mar 2022 12:47:29 +0000 Subject: [PATCH 09/10] add isLoadingCheck to revent visual glitch --- src/components/AssetModal/AssetModal.tsx | 14 +++++++++++--- 1 file changed, 11 insertions(+), 3 deletions(-) diff --git a/src/components/AssetModal/AssetModal.tsx b/src/components/AssetModal/AssetModal.tsx index 44d7659c..121b1969 100644 --- a/src/components/AssetModal/AssetModal.tsx +++ b/src/components/AssetModal/AssetModal.tsx @@ -17,6 +17,7 @@ const AssetModal = () => { const dispatch = useAppDispatch() const [imageDimensions, setImageDimensions] = useState(null) const [isError, setIsError] = useState(false) + const [isLoading, setIsLoading] = useState(true) const imageClasses = imageDimensions ? 'opacity-100 transition-opacity duration-500' : 'opacity-0 transition-opacity' const selectedAssetEnvironment = useAppSelector(getSelectedAssetEnvironment) @@ -62,6 +63,11 @@ const AssetModal = () => { const renderAssetImage = () => { + + const handleOnLoadingComplete = (imageDimensions) => { + setImageDimensions(imageDimensions) + setIsLoading(false) + } if (isError) { return ( @@ -75,7 +81,7 @@ const AssetModal = () => { height={imageDimensions?.naturalWeight || 280} objectFit='contain' alt={description || heading} - onLoadingComplete={(imageDimensions) => setImageDimensions(imageDimensions)} + onLoadingComplete={(imageDimensions) => handleOnLoadingComplete(imageDimensions)} onError={() => setIsError(true)}/> ) } @@ -96,6 +102,7 @@ const AssetModal = () => { } dispatch(setSelectedAssetEnvironment(newEnvironment)) setIsError(false) + setIsLoading(true) } const renderNavigationButton = navigationDirection => ( @@ -126,7 +133,7 @@ const AssetModal = () => { const renderAssetDetails = () => { - if (isError) { + if (isError || isLoading) { return (
) @@ -146,7 +153,8 @@ const AssetModal = () => { {filename}
- ) } + ) + } const renderJSONSection = () => { From 8c8633cff6582b38ebbe8f6e75d85c48c4bef5b5 Mon Sep 17 00:00:00 2001 From: Lukie Kang Date: Mon, 21 Mar 2022 14:49:59 +0000 Subject: [PATCH 10/10] readd enums --- src/components/AssetModal/AssetModal.tsx | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/src/components/AssetModal/AssetModal.tsx b/src/components/AssetModal/AssetModal.tsx index 121b1969..91c64e1a 100644 --- a/src/components/AssetModal/AssetModal.tsx +++ b/src/components/AssetModal/AssetModal.tsx @@ -89,13 +89,17 @@ const AssetModal = () => { const renderImageSection = () => { const assetArray = Object.values(selectedAssetGroup) const isUniqueAcrossEnvironments = assetArray.filter(asset => asset !== null).length === 1 + enum NavigationDirection { + LEFT = 'rotate-90', + RIGHT = '-rotate-90' + } const handleNavigationButtonClick = navigationDirection => { const currentAssetIndex = assetArray.findIndex(asset => asset.environment === selectedAssetEnvironment) const lastAssetIndex = assetArray.length - 1 let newEnvironment - if (navigationDirection === 'rotate-90') { + if (navigationDirection === NavigationDirection.LEFT) { newEnvironment = currentAssetIndex === 0 ? assetArray[lastAssetIndex].environment : assetArray[currentAssetIndex - 1].environment } else { newEnvironment = currentAssetIndex === lastAssetIndex ? assetArray[0].environment : assetArray[currentAssetIndex + 1].environment @@ -120,13 +124,13 @@ const AssetModal = () => { return (
- {!isUniqueAcrossEnvironments && renderNavigationButton('rotate-90')} + {!isUniqueAcrossEnvironments && renderNavigationButton(NavigationDirection.LEFT)}
{renderAssetImage()}
- {!isUniqueAcrossEnvironments && renderNavigationButton('-rotate-90')} + {!isUniqueAcrossEnvironments && renderNavigationButton(NavigationDirection.RIGHT)}
) }