From 15de99b795c753a927145c799b08623448fc9d7b Mon Sep 17 00:00:00 2001 From: Victor Lucas <11355873+victorlucss@users.noreply.github.com> Date: Tue, 21 Nov 2023 15:49:36 -0500 Subject: [PATCH 1/2] feat: budgets (#18) * feat: budgets * fix: remove unused * fix: remove unused * fix: lint * fix: build --- .gitignore | 4 +- .vscode/settings.json | 3 - components/LateralMenu/index.tsx | 2 + configs/collections.config.ts | 3 + .../BaseModule/components/Bubble/index.tsx | 13 +- modules/BaseModule/constants/Bubble.ts | 1 + .../BaseModule/container/BaseForm/index.tsx | 28 ++++- .../BaseModule/container/BaseList/index.tsx | 56 +++++---- modules/BaseModule/shared/renderFields.tsx | 21 ---- .../FormBill/form-bill.container.tsx | 20 ++- .../components/form-budget.component.tsx | 116 ++++++++++++++++++ .../container/form-budget.container.tsx | 12 ++ .../container/list-budget.container.tsx | 82 +++++++++++++ modules/Budget/services/budget.service.ts | 43 +++++++ .../components/form-category.component.tsx | 2 +- .../container/list-categories.container.tsx | 15 ++- modules/Category/hooks/useCategories.tsx | 41 +++++++ .../Category/hooks/useCategoriesSelect.tsx | 26 ---- pages/budget/create.tsx | 12 ++ pages/budget/index.tsx | 10 ++ pages/logout.tsx | 5 +- 21 files changed, 410 insertions(+), 105 deletions(-) delete mode 100644 .vscode/settings.json create mode 100644 configs/collections.config.ts delete mode 100644 modules/BaseModule/shared/renderFields.tsx create mode 100644 modules/Budget/components/form-budget.component.tsx create mode 100644 modules/Budget/container/form-budget.container.tsx create mode 100644 modules/Budget/container/list-budget.container.tsx create mode 100644 modules/Budget/services/budget.service.ts create mode 100644 modules/Category/hooks/useCategories.tsx delete mode 100644 modules/Category/hooks/useCategoriesSelect.tsx create mode 100644 pages/budget/create.tsx create mode 100644 pages/budget/index.tsx diff --git a/.gitignore b/.gitignore index cb034b6..992029d 100644 --- a/.gitignore +++ b/.gitignore @@ -30,6 +30,8 @@ yarn-error.log* .env.development.local .env.test.local .env.production.local +.env.prod # vercel -.vercel \ No newline at end of file +.vercel +.vscode \ No newline at end of file diff --git a/.vscode/settings.json b/.vscode/settings.json deleted file mode 100644 index 3662b37..0000000 --- a/.vscode/settings.json +++ /dev/null @@ -1,3 +0,0 @@ -{ - "typescript.tsdk": "node_modules/typescript/lib" -} \ No newline at end of file diff --git a/components/LateralMenu/index.tsx b/components/LateralMenu/index.tsx index 1bbc53e..d25406b 100644 --- a/components/LateralMenu/index.tsx +++ b/components/LateralMenu/index.tsx @@ -20,6 +20,7 @@ import { FiHome, FiPower, FiTrendingUp, FiTrendingDown, FiMenu } from 'react-ico import { IconType } from 'react-icons'; import Image from 'next/image'; import { BiSolidCategoryAlt } from 'react-icons/bi'; +import { TbPigMoney } from 'react-icons/tb'; interface LinkItemProps { name: string; @@ -30,6 +31,7 @@ const LinkItems: Array = [ { name: 'Início', icon: FiHome, link: '/' }, { name: 'Criar receita', icon: FiTrendingUp, link: '/bill?type=INCOME' }, { name: 'Criar despesa', icon: FiTrendingDown, link: '/bill?type=EXPENSE' }, + { name: 'Orçamentos', icon: TbPigMoney, link: '/budget' }, { name: 'Categorias', icon: BiSolidCategoryAlt, link: '/category' }, { name: 'Sair', diff --git a/configs/collections.config.ts b/configs/collections.config.ts new file mode 100644 index 0000000..d0a37d8 --- /dev/null +++ b/configs/collections.config.ts @@ -0,0 +1,3 @@ +import { firestore } from '@Configs/Firebase'; + +export const budgetsCollection = firestore.collection('budgets'); diff --git a/modules/BaseModule/components/Bubble/index.tsx b/modules/BaseModule/components/Bubble/index.tsx index d9e57b1..8115f61 100644 --- a/modules/BaseModule/components/Bubble/index.tsx +++ b/modules/BaseModule/components/Bubble/index.tsx @@ -1,7 +1,7 @@ import React from 'react'; import { FieldErrors, FieldValues, UseFormRegister } from 'react-hook-form'; -import { Input, Select } from '@Components'; +import { Input, Select, MoneyInput } from '@Components'; import SelectOption from '@Modules/BaseModule/interfaces/SelectOption'; import { BubbleEnum, BUBBLE_TYPES } from '../../constants/Bubble'; @@ -55,6 +55,17 @@ const Bubble = ({ /> ); + case BUBBLE_TYPES.MONEY: + return ( + + ); + case BUBBLE_TYPES.SELECT: return ( { - id?: string | number; - fetch?: (id: string | number) => Promise; + id?: string; + fetch?: (id: string) => Promise; fields: BaseField[]; - onSubmit: (element: T) => T | Promise | Promise; + onSubmit: (element: T) => Promise; submitLabel?: string; schema: Yup.AnyObjectSchema; } @@ -65,10 +65,26 @@ const BaseForm = ({ } }, [fetchData, id]); + const renderFields = useMemo(() => { + return fields.map(({ name, type, label, options, value }) => ( + + )); + }, [fields]); + return (

- {renderFields(fields, errors, register)} + {renderFields} {submitLabel} diff --git a/modules/BaseModule/container/BaseList/index.tsx b/modules/BaseModule/container/BaseList/index.tsx index adb5270..b9d9c3f 100644 --- a/modules/BaseModule/container/BaseList/index.tsx +++ b/modules/BaseModule/container/BaseList/index.tsx @@ -39,12 +39,12 @@ interface BaseListInterface { items: T[]; isLoading: boolean; optionsEnabled?: boolean; - onDeleteItem?: (id: string | number) => void; + onDeleteItem?: (id: string) => void; onCloseOption?: () => void; - editComponent?: (id: string | number) => React.ReactElement; + editComponent?: (id: string) => React.ReactElement; } -const BaseList = ({ +const BaseList = ({ headers, items, isLoading, @@ -54,7 +54,7 @@ const BaseList = ({ onDeleteItem, }: BaseListInterface) => { const [modalType, setModalType] = useState(null); - const [id, setId] = useState(); + const [id, setId] = useState(); useEffect(() => { if (!modalType && !!onCloseOption) { @@ -67,6 +67,10 @@ const BaseList = ({ setModalType(type); }; + const wrapperOnDelete = cb => { + setModalType(null); + }; + const tableItems = useMemo(() => { const fields = headers.map(({ field }) => field); @@ -102,7 +106,7 @@ const BaseList = ({ fontSize="sm" onClick={() => handleOpenModalWithId(item.id, MODAL_TYPES.EDIT_MODAL)} > - Editar categoria + Editar item ({ fontSize="sm" onClick={() => handleOpenModalWithId(item.id, MODAL_TYPES.DELETE_MODAL)} > - Deletar categoria + Deletar item @@ -133,9 +137,9 @@ const BaseList = ({ return ( <> - Deletar categoria + Deletar item - Você tem certeza que deseja apagar esta categoria? + Você tem certeza que deseja apagar este item? ); @@ -153,7 +157,7 @@ const BaseList = ({ return ( <> setModalType(null)}>Cancelar - onDeleteItem(id)}> + wrapperOnDelete(onDeleteItem(id))}> Deletar @@ -170,24 +174,22 @@ const BaseList = ({ > {modalContent} - - - - - {headers.map(({ label }) => ( - - ))} - {optionsEnabled && } - - - - <> - {isLoading && } - {!isLoading && tableItems} - - -

{label}

- + + + + {headers.map(({ label }) => ( + + ))} + {optionsEnabled && } + + + + <> + {isLoading && } + {!isLoading && tableItems} + + +

{label}

); }; diff --git a/modules/BaseModule/shared/renderFields.tsx b/modules/BaseModule/shared/renderFields.tsx deleted file mode 100644 index e9b168e..0000000 --- a/modules/BaseModule/shared/renderFields.tsx +++ /dev/null @@ -1,21 +0,0 @@ -import React from 'react'; - -import Bubble from '../components/Bubble'; -import BaseField from '../interfaces/BaseField'; - -const renderFields = (fields: BaseField[], errors, register) => - fields.map(({ name, type, label, options, value }) => ( - - )); - -export default renderFields; diff --git a/modules/Bill/container/FormBill/form-bill.container.tsx b/modules/Bill/container/FormBill/form-bill.container.tsx index 9be7ada..eaa881a 100644 --- a/modules/Bill/container/FormBill/form-bill.container.tsx +++ b/modules/Bill/container/FormBill/form-bill.container.tsx @@ -10,7 +10,7 @@ import { BillTypes, BillStatus } from '@Modules/Bill/constants/Types'; import { Input, MoneyInput, Select, DatePicker, Box, If } from '@Components'; import { useUser } from '@Modules/Authentication/context/UserContext'; import { defaultRequiredMessage, TO_YEAR } from '@Modules/Bill/constants/BillConsts'; -import { useCategoriesSelect } from '@Modules/Category/hooks/useCategoriesSelect'; +import { useCategories } from '@Modules/Category/hooks/useCategories'; const types = [ { @@ -52,7 +52,7 @@ export const FormBillContainer = ({ billId }: FormBillProps) => { const router = useRouter(); const toast = useToast(); const { userId } = useUser(); - const categoriesSelect = useCategoriesSelect(); + const categoriesSelect = useCategories(); const [foundBill, setFoundBill] = useState(); @@ -183,16 +183,14 @@ export const FormBillContainer = ({ billId }: FormBillProps) => { }, [watch, router.query.type]); const categories = useMemo(() => { - console.log( - categoriesSelect, - categoriesSelect.filter(category => category.type === type) + return ( + categoriesSelect + ?.filter(category => category.type === type) + ?.map(category => ({ + label: category.name, + value: category.id, + })) || [] ); - return categoriesSelect - .filter(category => category.type === type) - .map(category => ({ - label: category.name, - value: category.id, - })); }, [type, categoriesSelect]); useEffect(() => { diff --git a/modules/Budget/components/form-budget.component.tsx b/modules/Budget/components/form-budget.component.tsx new file mode 100644 index 0000000..ae28c63 --- /dev/null +++ b/modules/Budget/components/form-budget.component.tsx @@ -0,0 +1,116 @@ +import React, { useCallback, useEffect, useState } from 'react'; +import { object, string } from 'yup'; +import { useToast, Text } from '@chakra-ui/react'; +import { useRouter } from 'next/router'; + +import BaseForm from '@Modules/BaseModule/container/BaseForm'; +import { BUBBLE_TYPES, BubbleEnum } from '@Modules/BaseModule/constants/Bubble'; +import { BillTypes } from '@Modules/Bill/constants/Types'; +import { useUser } from '@Authentication/context/UserContext'; +import { useCategories } from '@Modules/Category/hooks/useCategories'; +import { + createBudget, + getOneBudget, + updateBudget, + verifyExistsBudgetCategory, + IBudget, +} from '@Modules/Budget/services/budget.service'; + +interface FormBudgetProps { + id?: string; +} + +const schema = object().shape({ + name: string().required('Este campo é obrigatório.'), + value: string().required('Este campo é obrigatório.'), + categoryId: string().required('Este campo é obrigatório.'), +}); + +export const FormBudget = ({ id }: FormBudgetProps) => { + const toast = useToast(); + const router = useRouter(); + const { userId } = useUser(); + const categories = useCategories({ type: BillTypes.EXPENSE }); + const [fields, setFields] = useState([]); + + useEffect(() => { + if (categories?.length > 0) { + setFields([ + { + name: 'name', + label: 'Nome', + type: BUBBLE_TYPES.INPUT_TEXT as BubbleEnum, + }, + { + name: 'value', + label: 'Valor', + type: BUBBLE_TYPES.MONEY as BubbleEnum, + }, + { + name: 'categoryId', + label: 'Categoria', + type: BUBBLE_TYPES.SELECT as BubbleEnum, + options: categories.map(({ id, name }) => ({ label: name, value: id })), + }, + ]); + } + }, [categories]); + + const fetch = useCallback( + async id => { + return getOneBudget(id); + }, + [id] + ); + + const onSubmit = async (values: IBudget) => { + try { + if (id) { + return updateBudget(id, { + userId, + ...values, + }); + } else { + const verifyAlreadyExistsCategory = await verifyExistsBudgetCategory(userId, values.categoryId); + if (verifyAlreadyExistsCategory) { + return toast({ + description: 'Já existe um orçamento criado para esta categoria!', + status: 'error', + }); + } + + await createBudget({ + userId, + ...values, + }); + } + toast({ + description: `Orçamento ${id ? 'editado' : 'criado'} com sucesso!`, + status: 'success', + }); + router.replace('/budget'); + } catch (error) { + toast({ + description: error.message, + status: 'error', + }); + } + }; + + return ( + <> + + {id ? 'Editar' : 'Criar'} orçamento + + + + id={id} + fields={fields} + fetch={fetch} + onSubmit={onSubmit} + submitLabel={id ? 'Editar' : 'Criar'} + schema={schema} + /> + + ); +}; diff --git a/modules/Budget/container/form-budget.container.tsx b/modules/Budget/container/form-budget.container.tsx new file mode 100644 index 0000000..db320a4 --- /dev/null +++ b/modules/Budget/container/form-budget.container.tsx @@ -0,0 +1,12 @@ +import React from 'react'; + +import { Box } from '@Components/Box'; +import { FormBudget } from '@Modules/Budget/components/form-budget.component'; + +export const FormBudgetContainer = () => { + return ( + + + + ); +}; diff --git a/modules/Budget/container/list-budget.container.tsx b/modules/Budget/container/list-budget.container.tsx new file mode 100644 index 0000000..d89fc27 --- /dev/null +++ b/modules/Budget/container/list-budget.container.tsx @@ -0,0 +1,82 @@ +import React, { useCallback, useEffect, useState } from 'react'; +import { Button } from '@chakra-ui/button'; +import { Badge, Link } from '@chakra-ui/react'; + +import { Box } from '@Components'; +import BaseList from '@Modules/BaseModule/container/BaseList'; +import { BillTypes } from '@Modules/Bill/constants/Types'; +import { useUser } from '@Authentication/context/UserContext'; +import { deleteBudget, getAllBudgets, IBudget } from '@Modules/Budget/services/budget.service'; +import { useCategories } from '@Modules/Category/hooks/useCategories'; +import { FormBudget } from '@Modules/Budget/components/form-budget.component'; + +export const ListBudgetContainer = () => { + const [items, setItems] = useState([]); + const [loading, setLoading] = useState(true); + const { userId } = useUser(); + const categories = useCategories({ type: BillTypes.EXPENSE }); + + const fetchData = useCallback(async () => { + try { + setLoading(true); + + const budgets = await getAllBudgets(userId, setItems); + } catch (error) { + console.error(error); + } finally { + setLoading(false); + } + }, [userId]); + + useEffect(() => { + fetchData(); + }, [fetchData]); + + const onDeleteItem = id => { + deleteBudget(id); + }; + + const renderCategory = useCallback( + categoryId => { + const foundCategory = categories?.find(({ id }) => id === categoryId); + + if (!foundCategory) <>; + + return {foundCategory?.name}; + }, + [categories] + ); + + return ( + + + Criar orçamento + + + + headers={[ + { + label: 'Nome', + field: 'name', + }, + { + label: 'Valor', + field: 'value', + render: ({ value }) => <>R${Number(value).toFixed(2).replace('.', ',')}, + }, + + { + label: 'Categoria', + field: 'categoryId', + render: ({ categoryId }) => renderCategory(categoryId), + }, + ]} + items={items} + isLoading={false} + editComponent={id => } + onDeleteItem={onDeleteItem} + optionsEnabled + /> + + ); +}; diff --git a/modules/Budget/services/budget.service.ts b/modules/Budget/services/budget.service.ts new file mode 100644 index 0000000..4049d3c --- /dev/null +++ b/modules/Budget/services/budget.service.ts @@ -0,0 +1,43 @@ +import { budgetsCollection } from '@Configs/collections.config'; + +export interface IBudget { + id?: string; + name: string; + value: number; + userId: string; + categoryId: string; +} + +export const getAllBudgets = (userId: string, setItems) => { + return budgetsCollection + .where('userId', '==', userId) + .onSnapshot(({ docs }) => setItems(docs.map(budget => ({ id: budget.id, ...budget.data() } as IBudget)))); +}; + +export const getOneBudget = id => { + return budgetsCollection + .doc(id) + .get() + .then(res => res.data() as IBudget); +}; + +export const updateBudget = (id: string, budget: IBudget) => { + return budgetsCollection.doc(id).update(budget); +}; + +export const verifyExistsBudgetCategory = (userId, categoryId) => { + return budgetsCollection + .where('userId', '==', userId) + .where('categoryId', '==', categoryId) + .limit(1) + .get() + .then(({ empty }) => !empty); +}; + +export const createBudget = (budget: IBudget) => { + return budgetsCollection.add(budget); +}; + +export const deleteBudget = (id: string) => { + return budgetsCollection.doc(id).delete(); +}; diff --git a/modules/Category/components/form-category.component.tsx b/modules/Category/components/form-category.component.tsx index bc086fb..8991920 100644 --- a/modules/Category/components/form-category.component.tsx +++ b/modules/Category/components/form-category.component.tsx @@ -10,7 +10,7 @@ import { BillTypes } from '@Modules/Bill/constants/Types'; import { useUser } from '@Authentication/context/UserContext'; interface FormCategoryProps { - id?: string | number; + id?: string; } interface ICategory { id?: string; diff --git a/modules/Category/container/list-categories.container.tsx b/modules/Category/container/list-categories.container.tsx index 5f98f2a..0a314cd 100644 --- a/modules/Category/container/list-categories.container.tsx +++ b/modules/Category/container/list-categories.container.tsx @@ -6,7 +6,7 @@ import { FormCategory } from '@Modules/Category/components/form-category.compone import BaseList from '@Modules/BaseModule/container/BaseList'; import { firestore } from '@Configs/Firebase'; import { BillTypes } from '@Modules/Bill/constants/Types'; -import { useUser } from "@Authentication/context/UserContext"; +import { useUser } from '@Authentication/context/UserContext'; interface ICategory { id?: string; @@ -24,11 +24,14 @@ export const ListCategoriesContainer = () => { const { userId } = useUser(); const fetchData = useCallback(async () => { - firestore.collection('categories').where('userId', '==', userId).onSnapshot(({ docs }) => { - setLoading(true); - setItems(docs.map(category => ({ id: category.id, ...category.data() } as ICategory))); - }); - }, [userId]); + firestore + .collection('categories') + .where('userId', '==', userId) + .onSnapshot(({ docs }) => { + setLoading(true); + setItems(docs.map(category => ({ id: category.id, ...category.data() } as ICategory))); + }); + }, [userId]); useEffect(() => { fetchData(); diff --git a/modules/Category/hooks/useCategories.tsx b/modules/Category/hooks/useCategories.tsx new file mode 100644 index 0000000..9e7cf29 --- /dev/null +++ b/modules/Category/hooks/useCategories.tsx @@ -0,0 +1,41 @@ +import { useState, useEffect, useCallback } from 'react'; + +import { firestore } from '@Configs/Firebase'; +import { useUser } from '@Authentication/context/UserContext'; +import { BillTypes } from '@Modules/Bill/constants/Types'; + +export interface ICategory { + id?: string; + name: string; + color: string; + type: string; +} +interface UseCategoriesOptions { + type?: string; +} +export const useCategories = (options?: UseCategoriesOptions) => { + const [categories, setCategories] = useState(null); + const { userId } = useUser(); + const fetchUserCategories = useCallback(async () => { + if (!userId) return; + + const data = await firestore.collection('categories').where('userId', '==', userId).get(); + const docs = data.docs.map( + category => + ({ + id: category.id, + ...category.data(), + } as ICategory) + ); + + const processedDocs = docs.filter(item => (options?.type ? item.type === options.type : true)); + + setCategories(processedDocs); + }, [setCategories, userId]); + + useEffect(() => { + fetchUserCategories(); + }, [fetchUserCategories]); + + return categories; +}; diff --git a/modules/Category/hooks/useCategoriesSelect.tsx b/modules/Category/hooks/useCategoriesSelect.tsx deleted file mode 100644 index 8287740..0000000 --- a/modules/Category/hooks/useCategoriesSelect.tsx +++ /dev/null @@ -1,26 +0,0 @@ -import { useState, useEffect, useCallback } from 'react'; - -import { firestore } from '@Configs/Firebase'; -import { useUser } from '@Authentication/context/UserContext'; - -export const useCategoriesSelect = () => { - const [categories, setCategories] = useState([]); - const { userId } = useUser(); - const fetchUserCategories = useCallback(async () => { - if (!userId) return; - - const data = await firestore.collection('categories').where('userId', '==', userId).get(); - setCategories( - data.docs.map(category => ({ - id: category.id, - ...category.data(), - })) - ); - }, [setCategories, userId]); - - useEffect(() => { - fetchUserCategories(); - }, [fetchUserCategories]); - - return categories; -}; diff --git a/pages/budget/create.tsx b/pages/budget/create.tsx new file mode 100644 index 0000000..ee73126 --- /dev/null +++ b/pages/budget/create.tsx @@ -0,0 +1,12 @@ +import withLateralMenu from '@/hoc/withLateralMenu'; +import { FormBudgetContainer } from '@Modules/Budget/container/form-budget.container'; + +const FormBudget = () => { + return ( + <> + + + ); +}; + +export default withLateralMenu(FormBudget); diff --git a/pages/budget/index.tsx b/pages/budget/index.tsx new file mode 100644 index 0000000..002ba67 --- /dev/null +++ b/pages/budget/index.tsx @@ -0,0 +1,10 @@ +import React from 'react'; + +import withLateralMenu from '@/hoc/withLateralMenu'; +import { ListBudgetContainer } from '@Modules/Budget/container/list-budget.container'; + +const Budget = () => { + return ; +}; + +export default withLateralMenu(Budget); diff --git a/pages/logout.tsx b/pages/logout.tsx index 3605c40..3f7357e 100644 --- a/pages/logout.tsx +++ b/pages/logout.tsx @@ -1,5 +1,6 @@ import { useRouter } from 'next/router'; import { useEffect } from 'react'; +import { Center } from '@chakra-ui/react'; import { auth } from '@Configs/Firebase'; @@ -9,7 +10,7 @@ export default function Logout() { useEffect(() => { auth.signOut(); router.push('/'); - }, []); + }, [router]); - return <>Loading; + return Loading; } From 939ba0ffa9f940803741f2994eeae9d304bc8340 Mon Sep 17 00:00:00 2001 From: Victor Monteiro Date: Thu, 23 Nov 2023 20:53:13 -0500 Subject: [PATCH 2/2] fix: stats layout --- .../Bill/components/StatsMonth/stats-month.component.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/modules/Bill/components/StatsMonth/stats-month.component.tsx b/modules/Bill/components/StatsMonth/stats-month.component.tsx index 15f76c8..f0d0daa 100644 --- a/modules/Bill/components/StatsMonth/stats-month.component.tsx +++ b/modules/Bill/components/StatsMonth/stats-month.component.tsx @@ -20,7 +20,7 @@ export const StatsMonth = ({ income, expense, balance, isLoaded }: StateMonthPro Receita - + {formatValue(income)} @@ -33,7 +33,7 @@ export const StatsMonth = ({ income, expense, balance, isLoaded }: StateMonthPro Despesas - + {formatValue(expense)} @@ -46,7 +46,7 @@ export const StatsMonth = ({ income, expense, balance, isLoaded }: StateMonthPro Restante - + {formatValue(balance)}