diff --git a/src/components/common/singleMediaViewAndSelect.tsx b/src/components/common/singleMediaViewAndSelect.tsx index 0144d6e..8846ed4 100644 --- a/src/components/common/singleMediaViewAndSelect.tsx +++ b/src/components/common/singleMediaViewAndSelect.tsx @@ -35,7 +35,6 @@ export const SingleMediaViewAndSelect: FC = ({ = ({ + index, + entity, + doubleLinks, + allowedRatios, + saveDoubleMedia, +}) => { + const { errors } = useFormikContext(); + return ( + <> + + + double add + + + + + saveDoubleMedia && saveDoubleMedia(selectedMedia, 'left', index) + } + /> + {`${errors}.entities.${index}.doubleAdd.left.mediaId` && ( + + )} + + + + + + + + saveDoubleMedia && saveDoubleMedia(selectedMedia, 'right', index) + } + /> + {`${errors}.entities.${index}.doubleAdd.right.mediaId` && ( + + )} + + + + + + + ); +}; diff --git a/src/components/managers/hero/entities/entities.tsx b/src/components/managers/hero/entities/entities.tsx new file mode 100644 index 0000000..e3f4ba9 --- /dev/null +++ b/src/components/managers/hero/entities/entities.tsx @@ -0,0 +1,222 @@ +import { Button, Divider, Grid } from '@mui/material'; +import { common_HeroFullInsert, common_MediaFull, common_Product } from 'api/proto-http/admin'; +import { common_HeroEntity } from 'api/proto-http/frontend'; +import { calculateAspectRatio } from 'features/utilitty/calculateAspectRatio'; +import { FieldArrayRenderProps, useFormikContext } from 'formik'; +import { FC, useEffect, useState } from 'react'; +import styles from 'styles/hero.scss'; +import { removeEntityIndex } from '../utility/arrayHelpers'; +import { getAllowedRatios } from '../utility/getAllowedRatios'; +import { DoubleAdd } from './doubleAdd/doubleAdd'; +import { FeaturedProduct } from './featuredProducts/featuredProduct'; +import { MainAdd } from './mainAdd/mainAdd'; +import { SingleAdd } from './singleAdd/singleAdd'; + +interface EntitiesProps { + entities: common_HeroEntity[]; + entityRefs: React.MutableRefObject<{ [key: number]: HTMLDivElement | null }>; + arrayHelpers: FieldArrayRenderProps; +} +export const Entities: FC = ({ entityRefs, entities, arrayHelpers }) => { + const { values, setFieldValue } = useFormikContext(); + const [main, setMain] = useState(''); + const [single, setSingle] = useState<{ [key: number]: string }>({}); + const [doubleAdd, setDoubleAdd] = useState<{ + [key: number]: { left: string | undefined; right: string | undefined }; + }>({}); + const [product, setProduct] = useState<{ [key: number]: common_Product[] }>({}); + const [currentEntityIndex, setCurrentEntityIndex] = useState(null); + const [allowedRatios, setAllowedRatios] = useState<{ [key: number]: string[] }>({}); + const [isModalOpen, setIsModalOpen] = useState(false); + + const handleOpenProductSelection = (index: number) => { + setCurrentEntityIndex(index); + setIsModalOpen(true); + }; + const handleCloseModal = () => setIsModalOpen(false); + + const fetchEntities = () => { + const mainAdd = + entities.find((e) => e.mainAdd)?.mainAdd?.singleAdd?.media?.media?.thumbnail?.mediaUrl || ''; + const singleEntities = entities.reduce( + (acc, e, i) => ({ ...acc, [i]: e.singleAdd?.media?.media?.thumbnail?.mediaUrl || '' }), + {}, + ); + const doubleAddEntities = entities.reduce<{ + [key: number]: { left: string; right: string }; + }>( + (acc, e, i) => ({ + ...acc, + [i]: e.doubleAdd + ? { + left: e.doubleAdd.left?.media?.media?.thumbnail?.mediaUrl || '', + right: e.doubleAdd.right?.media?.media?.thumbnail?.mediaUrl || '', + } + : { left: '', right: '' }, + }), + {}, + ); + const productsForEntities = entities.reduce( + (acc, e, i) => ({ ...acc, [i]: e.featuredProducts?.products || [] }), + {}, + ); + + const calculatedAllowedRatios = entities.reduce<{ [key: number]: string[] }>((acc, e, i) => { + const allowedRatios = getAllowedRatios(e); + if (allowedRatios.length > 0) { + acc[i] = allowedRatios; + } + return acc; + }, {}); + + setMain(mainAdd); + setSingle(singleEntities); + setDoubleAdd(doubleAddEntities); + setProduct(productsForEntities); + setAllowedRatios(calculatedAllowedRatios); + }; + + useEffect(() => { + fetchEntities(); + }, [entities]); + + const handleProductsReorder = (newProductsOrder: common_Product[], index: number) => { + setProduct((prevState) => ({ + ...prevState, + [index]: newProductsOrder, + })); + }; + + const handleSaveNewSelection = (newSelectedProducts: common_Product[], index: number) => { + const productIds = newSelectedProducts.map((product) => product.id); + setFieldValue(`entities.${index}.featuredProducts.productIds`, productIds); + setProduct((prevState) => ({ + ...prevState, + [index]: newSelectedProducts, + })); + + handleCloseModal(); + }; + + const saveMainMedia = (selectedMedia: common_MediaFull[], index: number) => { + const newMainMedia = selectedMedia[0]; + setFieldValue(`entities.${index}.mainAdd.singleAdd.mediaId`, newMainMedia.id); + setMain(newMainMedia.media?.thumbnail?.mediaUrl || ''); + }; + + const saveSingleMedia = (selectedMedia: common_MediaFull[], index: number) => { + const newSingleMedia = selectedMedia[0]; + setFieldValue(`entities.${index}.singleAdd.mediaId`, newSingleMedia.id); + setSingle((prev) => ({ + ...prev, + [index]: newSingleMedia.media?.thumbnail?.mediaUrl || '', + })); + }; + + const saveDoubleMedia = ( + selectedMedia: common_MediaFull[], + side: 'left' | 'right', + index: number, + ) => { + if (!selectedMedia.length) return; + + const newDoubleMediaUrl = selectedMedia[0].media?.thumbnail?.mediaUrl; + const doubleAddMediaId = selectedMedia[0].id; + const ratio = calculateAspectRatio( + selectedMedia[0].media?.thumbnail?.width, + selectedMedia[0].media?.thumbnail?.height, + ); + + let newAllowedRatios = ['4:5', '1:1']; + if (ratio === '4:5') { + newAllowedRatios = ['4:5']; + } else if (ratio === '1:1') { + newAllowedRatios = ['1:1']; + } + + setDoubleAdd((prevDoubleAdd) => ({ + ...prevDoubleAdd, + [index]: { + ...prevDoubleAdd[index], + [side]: newDoubleMediaUrl, + }, + })); + + setAllowedRatios((prevRatios) => ({ + ...prevRatios, + [index]: newAllowedRatios, + })); + + setFieldValue(`entities.${index}.doubleAdd.${side}.mediaId`, doubleAddMediaId); + }; + + const handleRemoveEntity = (index: number, arrayHelpers: any, values: any) => { + if (values.entities[index].type === 'HERO_TYPE_MAIN_ADD') { + setMain(''); + } + setSingle((prevSingle) => removeEntityIndex(prevSingle, index)); + setDoubleAdd((prevDoubleAdd) => removeEntityIndex(prevDoubleAdd, index)); + setProduct((prevProduct) => removeEntityIndex(prevProduct, index)); + + arrayHelpers.remove(index); + }; + + return ( + + {values.entities && + values.entities.map((entity, index) => ( + (entityRefs.current[index] = el)}> + + {entity.type === 'HERO_TYPE_MAIN_ADD' && ( + + )} + {entity.type === 'HERO_TYPE_SINGLE_ADD' && ( + + )} + {entity.type === 'HERO_TYPE_DOUBLE_ADD' && ( + + )} + {entity.type === 'HERO_TYPE_FEATURED_PRODUCTS' && ( + + )} + + + + + + + + + ))} + + ); +}; diff --git a/src/components/managers/hero/entities/featuredProducts/featuredProduct.tsx b/src/components/managers/hero/entities/featuredProducts/featuredProduct.tsx new file mode 100644 index 0000000..807a5da --- /dev/null +++ b/src/components/managers/hero/entities/featuredProducts/featuredProduct.tsx @@ -0,0 +1,91 @@ +import { Box, Button, Grid, TextField, Typography } from '@mui/material'; +import { common_HeroFullInsert } from 'api/proto-http/admin'; +import { ProductPickerModal } from 'components/common/productPickerModal'; +import { isValidUrlForHero } from 'features/utilitty/isValidUrl'; +import { ErrorMessage, Field, useFormikContext } from 'formik'; +import { FC } from 'react'; +import styles from 'styles/hero.scss'; +import { HeroProductEntityInterface } from '../interface/interface'; +import { HeroProductTable } from './heroProductsTable'; + +export const FeaturedProduct: FC = ({ + index, + entity, + product, + isModalOpen, + currentEntityIndex, + handleProductsReorder, + handleOpenProductSelection, + handleCloseModal, + handleSaveNewSelection, +}) => { + const { errors } = useFormikContext(); + return ( + <> + + + featured products + + + + + + + + + handleProductsReorder(newProductsOrder, index)} + /> + {`${errors}.entities.${index}.featuredProducts.productIds` && ( + + )} + + + handleSaveNewSelection(selectedProduct, index)} + selectedProductIds={(product[index] || []).map((x) => x.id!)} + /> + + ); +}; diff --git a/src/components/managers/hero/heroProductsTable.tsx b/src/components/managers/hero/entities/featuredProducts/heroProductsTable.tsx similarity index 96% rename from src/components/managers/hero/heroProductsTable.tsx rename to src/components/managers/hero/entities/featuredProducts/heroProductsTable.tsx index ed49d76..1bd127d 100644 --- a/src/components/managers/hero/heroProductsTable.tsx +++ b/src/components/managers/hero/entities/featuredProducts/heroProductsTable.tsx @@ -5,8 +5,9 @@ import { Checkbox } from '@mui/material'; import IconButton from '@mui/material/IconButton'; import { useNavigate } from '@tanstack/react-location'; import { getDictionary } from 'api/admin'; -import { common_Category, common_Product } from 'api/proto-http/admin'; +import { common_Category, common_HeroFullInsert, common_Product } from 'api/proto-http/admin'; import { ROUTES } from 'constants/routes'; +import { useFormikContext } from 'formik'; import { MRT_TableContainer, useMaterialReactTable, @@ -23,9 +24,9 @@ export const HeroProductTable: FC< HeroProductTableData & { id: number; onReorder: (newOrder: common_Product[]) => void; - setFieldValue: (field: string, value: any) => void; } -> = ({ products, id, onReorder, setFieldValue }) => { +> = ({ products, id, onReorder }) => { + const { setFieldValue } = useFormikContext(); const [categories, setCategories] = useState([]); const navigate = useNavigate(); diff --git a/src/components/managers/hero/entities/interface/interface.ts b/src/components/managers/hero/entities/interface/interface.ts new file mode 100644 index 0000000..5fc8b52 --- /dev/null +++ b/src/components/managers/hero/entities/interface/interface.ts @@ -0,0 +1,27 @@ +import { common_MediaFull, common_Product } from "api/proto-http/admin"; + +export interface HeroMediaEntityInterface { + index: number; + entity: any; + link?: string; + singleLink?: { [key: number]: string; }; + doubleLinks?: { + [key: number]: { left: string | undefined; right: string | undefined }; + }; + allowedRatios?: { [key: number]: string[] }; + saveMedia?: (selectedMedia: common_MediaFull[], index: number) => void; + saveDoubleMedia?: (selectedMedia: common_MediaFull[], side: 'left' | 'right', index: number) => void; +} + + +export interface HeroProductEntityInterface { + index: number; + entity: any; + product: { [key: number]: common_Product[] }; + isModalOpen: boolean; + currentEntityIndex: number | null; + handleProductsReorder: (newProductsOrder: common_Product[], index: number) => void; + handleOpenProductSelection: (index: number) => void; + handleCloseModal: () => void; + handleSaveNewSelection: (selectedProduct: common_Product[], index: number) => void; +} \ No newline at end of file diff --git a/src/components/managers/hero/entities/mainAdd/mainAdd.tsx b/src/components/managers/hero/entities/mainAdd/mainAdd.tsx new file mode 100644 index 0000000..54850f8 --- /dev/null +++ b/src/components/managers/hero/entities/mainAdd/mainAdd.tsx @@ -0,0 +1,61 @@ +import { Box, Grid, TextField, Typography } from '@mui/material'; +import { common_HeroFullInsert } from 'api/proto-http/admin'; +import { SingleMediaViewAndSelect } from 'components/common/singleMediaViewAndSelect'; +import { isValidUrlForHero } from 'features/utilitty/isValidUrl'; +import { ErrorMessage, Field, useFormikContext } from 'formik'; +import { FC } from 'react'; +import styles from 'styles/hero.scss'; +import { HeroMediaEntityInterface } from '../interface/interface'; + +export const MainAdd: FC = ({ index, entity, link, saveMedia }) => { + const { errors } = useFormikContext(); + return ( + <> + + + main + + + + saveMedia && saveMedia(selectedMedia, index)} + /> + {`${errors}.entities.${index}.mainAdd..singleAdd.mediaId` && ( + + )} + + + + + + + + ); +}; diff --git a/src/components/managers/hero/entities/singleAdd/singleAdd.tsx b/src/components/managers/hero/entities/singleAdd/singleAdd.tsx new file mode 100644 index 0000000..9d77747 --- /dev/null +++ b/src/components/managers/hero/entities/singleAdd/singleAdd.tsx @@ -0,0 +1,63 @@ +import { Box, Grid, TextField, Typography } from '@mui/material'; +import { common_HeroFullInsert } from 'api/proto-http/admin'; +import { SingleMediaViewAndSelect } from 'components/common/singleMediaViewAndSelect'; +import { isValidUrlForHero } from 'features/utilitty/isValidUrl'; +import { ErrorMessage, Field, useFormikContext } from 'formik'; +import { FC } from 'react'; +import styles from 'styles/hero.scss'; +import { HeroMediaEntityInterface } from '../interface/interface'; + +export const SingleAdd: FC = ({ + index, + entity, + singleLink, + saveMedia, +}) => { + const { errors } = useFormikContext(); + return ( + <> + + + single add + + + + saveMedia && saveMedia(selectedMedia, index)} + /> + {`${errors}.entities.${index}.singleAdd.mediaId` && ( + + )} + + + + + + + ); +}; diff --git a/src/components/managers/hero/hero.tsx b/src/components/managers/hero/hero.tsx index 015d520..875b01e 100644 --- a/src/components/managers/hero/hero.tsx +++ b/src/components/managers/hero/hero.tsx @@ -1,32 +1,19 @@ -import { Alert, Box, Button, Divider, Grid, Snackbar, TextField, Typography } from '@mui/material'; +import { Alert, Button, Grid, Snackbar } from '@mui/material'; import { addHero, getHero } from 'api/hero'; -import { common_HeroFullInsert, common_MediaFull, common_Product } from 'api/proto-http/admin'; -import { ProductPickerModal } from 'components/common/productPickerModal'; -import { SingleMediaViewAndSelect } from 'components/common/singleMediaViewAndSelect'; +import { common_HeroFullInsert } from 'api/proto-http/admin'; +import { common_HeroEntity } from 'api/proto-http/frontend'; import { Layout } from 'components/login/layout'; -import { calculateAspectRatio } from 'features/utilitty/calculateAspectRatio'; -import { isValidUrlForHero } from 'features/utilitty/isValidUrl'; -import { ErrorMessage, Field, FieldArray, Form, Formik } from 'formik'; +import { Field, FieldArray, Form, Formik } from 'formik'; import { FC, useEffect, useRef, useState } from 'react'; import styles from 'styles/hero.scss'; -import { HeroProductTable } from './heroProductsTable'; +import { Entities } from './entities/entities'; import { SelectHeroType } from './selectHeroType'; -import { removeEntityIndex } from './utility/arrayHelpers'; -import { getAllowedRatios } from './utility/getAllowedRatios'; import { heroValidationSchema } from './utility/heroValidationShema'; import { mapHeroFunction } from './utility/mapHeroFunction'; export const Hero: FC = () => { const [hero, setHero] = useState(mapHeroFunction()); - const [main, setMain] = useState(''); - const [single, setSingle] = useState<{ [key: number]: string }>({}); - const [doubleAdd, setDoubleAdd] = useState<{ - [key: number]: { left: string | undefined; right: string | undefined }; - }>({}); - const [product, setProduct] = useState<{ [key: number]: common_Product[] }>({}); - const [currentEntityIndex, setCurrentEntityIndex] = useState(null); - const [allowedRatios, setAllowedRatios] = useState<{ [key: number]: string[] }>({}); - const [isModalOpen, setIsModalOpen] = useState(false); + const [entities, setEntities] = useState([]); const [snackBarMessage, setSnackBarMessage] = useState(''); const [isSnackBarOpen, setIsSnackBarOpen] = useState(false); const [snackBarSeverity, setSnackBarSeverity] = useState<'success' | 'error'>('success'); @@ -38,66 +25,18 @@ export const Hero: FC = () => { setIsSnackBarOpen(true); }; - const handleOpenProductSelection = (index: number) => { - setCurrentEntityIndex(index); - setIsModalOpen(true); - }; - const handleCloseModal = () => setIsModalOpen(false); - const fetchHero = async () => { const response = await getHero({}); if (!response) return; const heroEntities = response.hero?.entities || []; - const mainAdd = - heroEntities.find((e) => e.mainAdd)?.mainAdd?.singleAdd?.media?.media?.thumbnail?.mediaUrl || - ''; - const singleEntities = heroEntities.reduce( - (acc, e, i) => ({ ...acc, [i]: e.singleAdd?.media?.media?.thumbnail?.mediaUrl || '' }), - {}, - ); - const doubleAddEntities = heroEntities.reduce<{ - [key: number]: { left: string; right: string }; - }>( - (acc, e, i) => ({ - ...acc, - [i]: e.doubleAdd - ? { - left: e.doubleAdd.left?.media?.media?.thumbnail?.mediaUrl || '', - right: e.doubleAdd.right?.media?.media?.thumbnail?.mediaUrl || '', - } - : { left: '', right: '' }, - }), - {}, - ); - const productsForEntities = heroEntities.reduce( - (acc, e, i) => ({ ...acc, [i]: e.featuredProducts?.products || [] }), - {}, - ); - - const calculatedAllowedRatios = heroEntities.reduce<{ [key: number]: string[] }>( - (acc, e, i) => { - const allowedRatios = getAllowedRatios(e); - if (allowedRatios.length > 0) { - acc[i] = allowedRatios; - } - return acc; - }, - {}, - ); - + setEntities(heroEntities); setHero(mapHeroFunction(response.hero)); - setMain(mainAdd); - setSingle(singleEntities); - setDoubleAdd(doubleAddEntities); - setProduct(productsForEntities); - setAllowedRatios(calculatedAllowedRatios); }; useEffect(() => { fetchHero(); - console.log(allowedRatios); }, []); const saveHero = async (values: common_HeroFullInsert) => { @@ -109,96 +48,6 @@ export const Hero: FC = () => { } }; - const handleProductsReorder = (newProductsOrder: common_Product[], index: number) => { - setProduct((prevState) => ({ - ...prevState, - [index]: newProductsOrder, - })); - }; - - const handleSaveNewSelection = ( - newSelectedProducts: common_Product[], - index: number, - setFieldValue: any, - ) => { - const productIds = newSelectedProducts.map((product) => product.id); - setFieldValue(`entities.${index}.featuredProducts.productIds`, productIds); - setProduct((prevState) => ({ - ...prevState, - [index]: newSelectedProducts, - })); - - handleCloseModal(); - }; - - const saveMainMedia = (selectedMedia: common_MediaFull[], setFieldValue: any, index: number) => { - const newMainMedia = selectedMedia[0]; - setFieldValue(`entities.${index}.mainAdd.singleAdd.mediaId`, newMainMedia.id); - setMain(newMainMedia.media?.thumbnail?.mediaUrl || ''); - }; - - const saveSingleMedia = ( - selectedMedia: common_MediaFull[], - setFieldValue: any, - index: number, - ) => { - const newSingleMedia = selectedMedia[0]; - setFieldValue(`entities.${index}.singleAdd.mediaId`, newSingleMedia.id); - setSingle((prev) => ({ - ...prev, - [index]: newSingleMedia.media?.thumbnail?.mediaUrl || '', - })); - }; - - const saveDoubleMedia = ( - selectedMedia: common_MediaFull[], - side: 'left' | 'right', - setFieldValue: any, - index: number, - ) => { - if (!selectedMedia.length) return; - - const newDoubleMediaUrl = selectedMedia[0].media?.thumbnail?.mediaUrl; - const doubleAddMediaId = selectedMedia[0].id; - const ratio = calculateAspectRatio( - selectedMedia[0].media?.thumbnail?.width, - selectedMedia[0].media?.thumbnail?.height, - ); - - let newAllowedRatios = ['4:5', '1:1']; - if (ratio === '4:5') { - newAllowedRatios = ['4:5']; - } else if (ratio === '1:1') { - newAllowedRatios = ['1:1']; - } - - setDoubleAdd((prevDoubleAdd) => ({ - ...prevDoubleAdd, - [index]: { - ...prevDoubleAdd[index], - [side]: newDoubleMediaUrl, - }, - })); - - setAllowedRatios((prevRatios) => ({ - ...prevRatios, - [index]: newAllowedRatios, - })); - - setFieldValue(`entities.${index}.doubleAdd.${side}.mediaId`, doubleAddMediaId); - }; - - const handleRemoveEntity = (index: number, arrayHelpers: any, values: any) => { - if (values.entities[index].type === 'HERO_TYPE_MAIN_ADD') { - setMain(''); - } - setSingle((prevSingle) => removeEntityIndex(prevSingle, index)); - setDoubleAdd((prevDoubleAdd) => removeEntityIndex(prevDoubleAdd, index)); - setProduct((prevProduct) => removeEntityIndex(prevProduct, index)); - - arrayHelpers.remove(index); - }; - return ( { enableReinitialize onSubmit={saveHero} > - {({ values, handleSubmit, setFieldValue, errors, touched }) => ( + {({ handleSubmit }) => (
( - {values.entities && - values.entities.map((entity, index) => ( - (entityRefs.current[index] = el)}> - - {entity.type === 'HERO_TYPE_MAIN_ADD' && ( - <> - - - main - - - - - saveMainMedia(selectedMedia, setFieldValue, index) - } - /> - {`${errors}.entities.${index}.mainAdd..singleAdd.mediaId` && ( - - )} - - - - - - - )} - {entity.type === 'HERO_TYPE_SINGLE_ADD' && ( - <> - - - single add - - - - - saveSingleMedia(selectedMedia, setFieldValue, index) - } - /> - {`${errors}.entities.${index}.singleAdd.mediaId` && ( - - )} - - - - - - - )} - {entity.type === 'HERO_TYPE_DOUBLE_ADD' && ( - <> - - - double add - - - - - saveDoubleMedia(selectedMedia, 'left', setFieldValue, index) - } - /> - {`${errors}.entities.${index}.doubleAdd.left.mediaId` && ( - - )} - - - - - - - - saveDoubleMedia(selectedMedia, 'right', setFieldValue, index) - } - /> - {`${errors}.entities.${index}.doubleAdd.right.mediaId` && ( - - )} - - - - - - - )} - {entity.type === 'HERO_TYPE_FEATURED_PRODUCTS' && ( - <> - - - featured products - - - - - - - - - - handleProductsReorder(newProductsOrder, index) - } - setFieldValue={setFieldValue} - /> - {`${errors}.entities.${index}.featuredProducts.productIds` && ( - - )} - - - - handleSaveNewSelection(selectedProduct, index, setFieldValue) - } - selectedProductIds={(product[index] || []).map((x) => x.id!)} - /> - - )} - - - - - - - - - ))} + { switch (entity?.type) { @@ -11,10 +12,11 @@ export const heroValidationSchema = Yup.object().shape({ mainAdd: Yup.object().shape({ singleAdd: Yup.object().shape({ mediaId: Yup.number().min(1, 'Main Add Media is required'), - exploreLink: Yup.string().nullable().test( - 'is-valid-url', - (value) => !value || isValidUrl(value), - ), + exploreLink: Yup.string().nullable() + .test( + 'is-valid-url', + (value) => !value || isValidURL(value), + ), exploreText: Yup.string().nullable(), }), }), @@ -27,7 +29,7 @@ export const heroValidationSchema = Yup.object().shape({ mediaId: Yup.number().min(1, 'Single Add Media is required'), exploreLink: Yup.string().nullable().test( 'is-valid-url', - (value) => !value || isValidUrl(value), + (value) => !value || isValidURL(value), ), exploreText: Yup.string().nullable(), }), @@ -41,7 +43,7 @@ export const heroValidationSchema = Yup.object().shape({ mediaId: Yup.number().min(1, 'Left media is required'), exploreLink: Yup.string().nullable().test( 'is-valid-url', - (value) => !value || isValidUrl(value), + (value) => !value || isValidURL(value), ), exploreText: Yup.string().nullable(), }), @@ -49,7 +51,7 @@ export const heroValidationSchema = Yup.object().shape({ mediaId: Yup.number().min(1, 'Right media is required'), exploreLink: Yup.string().nullable().test( 'is-valid-url', - (value) => !value || isValidUrl(value), + (value) => !value || isValidURL(value), ), exploreText: Yup.string().nullable(), }), @@ -66,7 +68,7 @@ export const heroValidationSchema = Yup.object().shape({ title: Yup.string().nullable(), exploreLink: Yup.string().nullable().test( 'is-valid-url', - (value) => !value || isValidUrl(value), + (value) => !value || isValidURL(value), ), exploreText: Yup.string().nullable(), }), diff --git a/src/features/interfaces/mediaSelectorInterfaces.ts b/src/features/interfaces/mediaSelectorInterfaces.ts index 15693a2..9cd5b5b 100644 --- a/src/features/interfaces/mediaSelectorInterfaces.ts +++ b/src/features/interfaces/mediaSelectorInterfaces.ts @@ -4,7 +4,6 @@ import { Dispatch, SetStateAction } from 'react'; export interface MediaSelectorLayoutProps { label: string - isEditMode?: boolean; allowMultiple: boolean; aspectRatio?: string[]; hideVideos?: boolean; diff --git a/src/features/mediaSelector/mediaSelectorLayout.tsx b/src/features/mediaSelector/mediaSelectorLayout.tsx index 6fe5510..e2faad7 100644 --- a/src/features/mediaSelector/mediaSelectorLayout.tsx +++ b/src/features/mediaSelector/mediaSelectorLayout.tsx @@ -5,7 +5,6 @@ import { MediaSelectorModal } from './mediaSelectorModal'; export const MediaSelectorLayout: FC = ({ label, - isEditMode = true, allowMultiple, aspectRatio, hideVideos, diff --git a/src/features/utilitty/isValidUrl.ts b/src/features/utilitty/isValidUrl.ts index b50b71c..dd80c32 100644 --- a/src/features/utilitty/isValidUrl.ts +++ b/src/features/utilitty/isValidUrl.ts @@ -12,6 +12,6 @@ export const isValidUrlForHero = (url: string | undefined) => { if (url === undefined) { return false; } - const pattern = new RegExp('https?://(?:[w-]+.)?grbpwr.com(?:/[^s]*)?'); // fragment locator + const pattern = new RegExp('https?://(?:[w-]+.)?grbpwr.com(?:/[^s]*)?'); return !!pattern.test(url); }; \ No newline at end of file