@@ -36,3 +39,5 @@ export function CarouselEvent(props: CarouselEventProps) {
);
}
+
+export default memo(CarouselEvent);
diff --git a/src/components/CarouselImage/index.tsx b/src/components/CarouselImage/index.tsx
index 814f4ba..9773951 100644
--- a/src/components/CarouselImage/index.tsx
+++ b/src/components/CarouselImage/index.tsx
@@ -1,14 +1,17 @@
+import { memo } from 'react';
+
import { CarouselImageProps } from '../../@types';
-export function CarouselImage(props: CarouselImageProps) {
- const { id, uri } = props;
+function CarouselImage(props: CarouselImageProps) {
+ const { name, uri } = props;
return (
- Todos os Direitos Reservados.
+
+
- Versão {version}.
+
+
+
+
+
+
);
}
+
+export default memo(Header);
diff --git a/src/components/Icon/index.tsx b/src/components/Icon/index.tsx
index e5c58ff..1802d96 100644
--- a/src/components/Icon/index.tsx
+++ b/src/components/Icon/index.tsx
@@ -12,11 +12,12 @@ import {
WhatsappLogo,
X,
} from '@phosphor-icons/react';
+import { memo } from 'react';
import { IconProps } from '../../@types';
-import { iconColors, iconSizes } from '../../constants/components';
+import { iconColors, iconSizes } from '../../constants';
-export function Icon(props: IconProps) {
+function Icon(props: IconProps) {
const {
variant,
color = 'background-color',
@@ -49,3 +50,5 @@ export function Icon(props: IconProps) {
return icons[variant];
}
+
+export default memo(Icon);
diff --git a/src/components/Metric/index.tsx b/src/components/Metric/index.tsx
index d6ab10f..bc30ddc 100644
--- a/src/components/Metric/index.tsx
+++ b/src/components/Metric/index.tsx
@@ -1,10 +1,20 @@
+import React, { memo } from 'react';
+
import { MetricProps } from '../../@types';
-import { metricsVariants } from '../../constants';
-import { Text } from '../Text';
+import { Text, Translator } from '../';
-export function Metric(props: MetricProps) {
+function Metric(props: MetricProps) {
const { value, variant = 'material' } = props;
+ const metricsVariants: Record<
+ Required
+
+
+
+
+
+ handleTo(null)}>
+
@@ -33,3 +43,5 @@ export function Metric(props: MetricProps) {
);
}
+
+export default memo(Metric);
diff --git a/src/components/Modal/index.tsx b/src/components/Modal/index.tsx
index 8ae706a..b43a451 100644
--- a/src/components/Modal/index.tsx
+++ b/src/components/Modal/index.tsx
@@ -1,3 +1,4 @@
+import { memo } from 'react';
import ReactModal from 'react-modal';
import { ModalProps } from '../../@types';
@@ -10,7 +11,7 @@ import {
WhatsAppButton,
} from '../';
-export function Modal(props: ModalProps) {
+function Modal(props: ModalProps) {
const { isOpen, product, onClose } = props;
const hasMetrics = !!product.size || !!product.weight || !!product.material;
@@ -36,7 +37,7 @@ export function Modal(props: ModalProps) {
-
- Por{' '}
+ (false);
const [categorySelected, setCategorySelected] =
useState(null);
+ const { t } = useTranslation();
+
function onSelectCategory(category: SearchInputCategoryProps | null): void {
setCategorySelected(category);
+
if (onSelect) onSelect(category);
setShowDropdown(false);
}
+ function onSubmit(event: FormEvent): void {
+ event.preventDefault();
+
+ if (onSearch) onSearch();
+ }
+
const renderCategoryDropdown: React.JSX.Element = (
setShowDropdown(!showDropdown)}
isHugWidth
/>
{showDropdown && renderCategoryDropdown}
-
);
}
+
+export default memo(SearchInput);
diff --git a/src/components/Spinner/index.tsx b/src/components/Spinner/index.tsx
index 0de81af..9abac96 100644
--- a/src/components/Spinner/index.tsx
+++ b/src/components/Spinner/index.tsx
@@ -1,16 +1,22 @@
import { Spinner as FlowbiteSpinner } from 'flowbite-react';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
import { SpinnerProps } from '../../@types';
import { spinnerSizes } from '../../constants';
-export function Spinner(props: SpinnerProps) {
+function Spinner(props: SpinnerProps) {
const { size = 'medium', color = 'primary' } = props;
+ const { t } = useTranslation();
+
return (
['variant'], string> =
- {
- material: 'Material',
- size: 'Tamanho',
- weight: 'Peso',
- };
diff --git a/src/constants/components/index.ts b/src/constants/components/index.ts
index ef47a6d..68b3224 100644
--- a/src/constants/components/index.ts
+++ b/src/constants/components/index.ts
@@ -1,6 +1,5 @@
export * from './Carousel';
export * from './GenericButton';
export * from './Icon';
-export * from './Metric';
export * from './Spinner';
export * from './Text';
diff --git a/src/contexts/UserContext.tsx b/src/contexts/UserContext.tsx
index a421146..5e7fcc1 100644
--- a/src/contexts/UserContext.tsx
+++ b/src/contexts/UserContext.tsx
@@ -1,11 +1,5 @@
-import { get, onValue, ref, remove } from 'firebase/database';
-import {
- createContext,
- PropsWithChildren,
- useCallback,
- useEffect,
- useState,
-} from 'react';
+import { onValue, ref, remove } from 'firebase/database';
+import { createContext, PropsWithChildren, useEffect, useState } from 'react';
import { toast } from 'sonner';
import {
@@ -16,14 +10,13 @@ import {
Product,
UserContextProps,
} from '../@types';
+import { Translator } from '../components';
import { categoryMapper } from '../helpers';
import { database } from '../services';
import { mapper } from '../utils';
-// TODO: Create type to UserContext in @types/contexts.
export const UserContext = createContext({} as UserContextProps);
-// TODO: Create the data user logic. Add all requests and states this context.
export function UserProvider({ children }: Required) {
const [isLoaded, setIsLoaded] = useState(false);
const [highlights, setHighlights] = useState([]);
@@ -37,85 +30,36 @@ export function UserProvider({ children }: Required) {
return currentTime > highlight.removedAt;
}
- function handleGenericErrorToast(): void {
- toast.error(
- 'Falha ao buscar suas informações! Algo deu errado durante a busca de informações. Por favor, tente novamente. Se o problema persistir, entre em contato com o suporte técnico.',
- { duration: 7500 },
- );
+ function sortProducts(product: Product, productCompare: Product): number {
+ return productCompare.createdAt - product.createdAt;
}
- const handleGetAbout = useCallback(async () => {
- const aboutRef = ref(database, 'about');
- const aboutSnapshot = await get(aboutRef);
-
- if (!aboutSnapshot.exists()) return handleGenericErrorToast();
-
- const aboutFirebase = mapper(aboutSnapshot)[0];
-
- if (!aboutFirebase) return handleGenericErrorToast();
-
- setAbout(aboutFirebase);
- }, []);
-
- const handleGetHighlights = useCallback(async () => {
- const highlightsRef = ref(database, 'highlights');
- const highlightsSnapshot = await get(highlightsRef);
-
- if (!highlightsSnapshot.exists()) return setHighlights([]);
-
- const highlightsFirebase = mapper(highlightsSnapshot);
-
- if (!highlightsFirebase) return handleGenericErrorToast();
-
- // TODO -> REMOVE HIGHLIGHTS IMAGES FROM FIREBASE STORAGE
- highlightsFirebase.forEach(async highlight => {
- if (isGreaterThanPeriodRemove(highlight)) {
- const highlightRef = ref(database, `highlights/${highlight.id}`);
- remove(highlightRef);
- }
+ function handleGenericErrorToast(): void {
+ toast.error((bannersSnapshot);
-
- if (!bannersFirebase) return handleGenericErrorToast();
-
- setBanners(bannersFirebase);
- }, []);
-
- function sortProducts(product: Product, productCompare: Product): number {
- return productCompare.createdAt - product.createdAt;
}
- const fetchFirebase = useCallback(async () => {
- await handleGetBanners();
- await handleGetHighlights();
- await handleGetAbout();
+ useEffect(() => {
+ const bannersRef = ref(database, 'banners');
+ const categoriesRef = ref(database, 'categories');
+ const highlightsRef = ref(database, 'highlights');
+ const aboutRef = ref(database, 'about');
- setIsLoaded(true);
- }, [handleGetAbout, handleGetHighlights, handleGetBanners]);
+ const unsubscribeBanners = onValue(bannersRef, bannersSnapshot => {
+ if (!bannersSnapshot.exists()) {
+ setBanners([]);
+ return handleGenericErrorToast();
+ }
- useEffect(() => {
- fetchFirebase();
- }, [fetchFirebase]);
+ const bannersFirebase = mapper(bannersSnapshot);
+ if (!bannersFirebase) return handleGenericErrorToast();
- useEffect(() => {
- const categoriesRef = ref(database, 'categories');
+ setBanners(bannersFirebase);
+ });
- const unsubscribe = onValue(categoriesRef, categoriesSnapshot => {
- if (!categoriesSnapshot.val()) {
+ const unsubscribeCategories = onValue(categoriesRef, categoriesSnapshot => {
+ if (!categoriesSnapshot.exists()) {
setProducts([]);
setCategories([]);
return;
@@ -134,11 +78,53 @@ export function UserProvider({ children }: Required) {
setCategories(categoriesMapped);
});
+ const unsubscribeHighlights = onValue(highlightsRef, highlightsSnapshot => {
+ if (!highlightsSnapshot.exists()) {
+ setHighlights([]);
+ return handleGenericErrorToast();
+ }
+
+ const highlightsFirebase = mapper(highlightsSnapshot);
+ if (!highlightsFirebase) return handleGenericErrorToast();
+
+ highlightsFirebase.forEach(async highlight => {
+ if (isGreaterThanPeriodRemove(highlight)) {
+ const highlightRef = ref(database, `highlights/${highlight.id}`);
+ remove(highlightRef);
+ }
+ });
+
+ const highlightsInPeriod = highlightsFirebase.filter(
+ highlight => !isGreaterThanPeriodRemove(highlight),
+ );
+
+ setHighlights(highlightsInPeriod);
+ });
+
+ const unsubscribeAbout = onValue(aboutRef, aboutSnapshot => {
+ if (!aboutSnapshot.exists()) return handleGenericErrorToast();
+
+ const aboutFirebase = mapper(aboutSnapshot)[0];
+ if (!aboutFirebase) {
+ setAbout({} as About);
+ return handleGenericErrorToast();
+ }
+
+ setAbout(aboutFirebase);
+ });
+
() => {
- unsubscribe();
+ unsubscribeBanners();
+ unsubscribeCategories();
+ unsubscribeHighlights();
+ unsubscribeAbout();
};
}, []);
+ useEffect(() => {
+ if (banners.length > 0 && about?.id) setIsLoaded(true);
+ }, [banners, about]);
+
return (
(
- {} as Product,
- );
+ const [productSelected, setProductSelected] = useState(null);
const { about, highlights, banners, products, isLoaded } = useUser();
+ const { t } = useTranslation();
const navigate = useNavigate();
- function navigateToProductPage(): void {
+ function navigateToProductsPage(): void {
navigate('/products');
}
@@ -33,6 +34,9 @@ export function LandingPage() {
const firstThreeProducts = [firstProduct, secondProduct, threeProduct].filter(
product => product,
);
+ const productUsedByModal: ProductProps = productSelected
+ ? { ...productSelected, title: productSelected.name }
+ : ({} as ProductProps);
return (
<>
@@ -46,8 +50,8 @@ export function LandingPage() {
{banners.map(banner => (
- Sobre a Maisa
+
@@ -129,7 +132,7 @@ export function LandingPage() {
) : (
- Preparando algo especial para você...
+
setProductSelected({} as Product)}
- product={{ ...productSelected, title: productSelected.name }}
+ isOpen={!!productSelected}
+ onClose={() => setProductSelected(null)}
+ product={productUsedByModal}
/>
);
diff --git a/src/pages/NotFound/index.tsx b/src/pages/NotFound/index.tsx
index 54c7489..de2a761 100644
--- a/src/pages/NotFound/index.tsx
+++ b/src/pages/NotFound/index.tsx
@@ -1,37 +1,44 @@
+import { useTranslation } from 'react-i18next';
import { useNavigate } from 'react-router-dom';
-import { GenericButton, Text } from '../../components';
+import { GenericButton, Text, Translator } from '../../components';
import { PRIMARY_LOGO } from '../../config';
export function NotFound() {
const navigate = useNavigate();
+ const { t } = useTranslation();
- function goToLandingPage(): void {
+ function navigateToLandingPage(): void {
navigate('/');
}
return (
- Não se preocupe, temos muitos produtos incríveis esperando por você!
- Volte para a página inicial ou use a barra de busca para encontrar o
- que procura.
+
-
);
diff --git a/src/pages/Products/index.tsx b/src/pages/Products/index.tsx
index 938213d..cda76d0 100644
--- a/src/pages/Products/index.tsx
+++ b/src/pages/Products/index.tsx
@@ -1,6 +1,11 @@
import { useCallback, useEffect, useState } from 'react';
-import { Category, Product, SearchInputCategoryProps } from '../../@types';
+import {
+ Category,
+ Product,
+ ProductProps,
+ SearchInputCategoryProps,
+} from '../../@types';
import {
Footer,
Header,
@@ -10,6 +15,7 @@ import {
SearchInput,
Spinner,
Text,
+ Translator,
} from '../../components';
import { useUser } from '../../hooks';
@@ -18,9 +24,7 @@ export function Products() {
const [searchValue, setSearchValue] = useState('');
const [products, setProducts] = useState(productsFirebase);
- const [productSelected, setProductSelected] = useState(
- {} as Product,
- );
+ const [productSelected, setProductSelected] = useState(null);
const [categorySelected, setCategorySelected] = useState(
null,
);
@@ -34,10 +38,10 @@ export function Products() {
const productsSelected = searchValue.trim()
? allProductsOfTheCategory.filter(product =>
- searchValue
+ product.name
.trim()
.toLowerCase()
- .includes(product.name.trim().toLowerCase()),
+ .includes(searchValue.trim().toLowerCase()),
)
: allProductsOfTheCategory;
@@ -48,13 +52,15 @@ export function Products() {
category: SearchInputCategoryProps | null,
): void {
if (!category) return setCategorySelected(null);
- setCategorySelected(categories.find(({ id }) => id === category.id)!);
+
+ const foundCategory = categories.find(({ id }) => id === category.id);
+ if (!foundCategory) return setCategorySelected(null);
+ setCategorySelected(foundCategory);
}
- useEffect(() => {
- if (productsFirebase.length) setProducts(productsFirebase);
- else setProducts([]);
- }, [productsFirebase]);
+ const productUsedByModal: ProductProps = productSelected
+ ? { ...productSelected, title: productSelected.name }
+ : ({} as ProductProps);
useEffect(() => {
if (!searchValue) handleSearchProducts();
@@ -82,7 +88,6 @@ export function Products() {
{products.map(product => (
- Não há produtos disponíveis
+
- Preparando nossos lindos produtos para você...
+
setProductSelected({} as Product)}
- product={{ ...productSelected, title: productSelected.name }}
+ isOpen={!!productSelected}
+ onClose={() => setProductSelected(null)}
+ product={productUsedByModal}
/>
);
diff --git a/src/utils/whatsapp.ts b/src/utils/whatsapp.ts
index f8505bf..999dbff 100644
--- a/src/utils/whatsapp.ts
+++ b/src/utils/whatsapp.ts
@@ -1,16 +1,8 @@
-import { SendMessageProps } from '../@types';
+import { BuildWhatsAppUrlProps } from '../@types';
import { DEFAULT_PHONE } from '../config';
-export function sendMessage(props: SendMessageProps) {
- const { type = 'whatsapp-button', phone = DEFAULT_PHONE, product } = props;
+export function buildWhatsAppUrl(props: BuildWhatsAppUrlProps) {
+ const { message, phone = DEFAULT_PHONE } = props;
- const productName = product ? `"${product}" ` : '';
-
- const messages: Record['type'], string> = {
- footer:
- 'Olá, estava olhando o seu site e resolvi entrar em contato. Tenho interesse em seus produtos!',
- 'whatsapp-button': `Olá, estou interresado(a) no produto ${productName}que achei no seu site, gostaria de conversar sobre ele.`,
- };
-
- return `https://wa.me/${phone}?text=${encodeURIComponent(messages[type])}`;
+ return `https://wa.me/${phone}?text=${encodeURIComponent(message)}`;
}
-
@@ -37,7 +47,9 @@ export function SearchInput(props: SearchInputProps) {
className='inline-flex w-full justify-center sm:justify-start cursor-pointer px-4 py-2 hover:transition-opacity hover:duration-300 hover:opacity-80'
onClick={() => onSelectCategory(null)}
>
-
-
@@ -89,15 +109,25 @@ export function SearchInput(props: SearchInputProps) {