Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

refactor: add toggling emoji picker and change some styles to categor… #24

Merged
merged 1 commit into from
Jul 26, 2024
Merged

refactor: add toggling emoji picker and change some styles to categor… #24

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 10 additions & 5 deletions app/lib/utils.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,11 +35,16 @@ export const getTransactionsWithChangedCategory = (
transactions: TTransaction[],
): TTransaction[] => {
return transactions.filter((t) => {
return !t.categories.some((category) => {
return category.items.some(
(item) => `${item.emoji} ${item.name}` === t.category,
)
})
// This will throw an error on previous user transactions without a categories array. Catch and handle this approach achieves by resetCategories function uses before the current function.
try {
return !t.categories.some((category) => {
return category.items.some(
(item) => `${item.emoji} ${item.name}` === t.category,
)
})
} catch (err) {
// Do not throw any error, it is auto-handle to avoid showing a user error page.
}
})
}

Expand Down
2 changes: 1 addition & 1 deletion app/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,7 +61,7 @@ export default async function Home({
getTransactions(userId, offset, limit),
])

const haveCategories = transactions.some((t) => t.categories)
const haveCategories = transactions.every((t) => t.categories)
if (!haveCategories) {
await resetCategories(userId, DEFAULT_CATEGORIES)
}
Expand Down
7 changes: 7 additions & 0 deletions app/ui/categories/categories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -65,6 +65,11 @@ function Categories({ userId, userCategories }: TProps) {
[],
)

const toggleEmojiPicker = useCallback(
() => setShowEmojiPicker((prev) => !prev),
[],
)

const onSaveTargetClick = useCallback(
async (index: number) => {
const updatedCategories = [...categories]
Expand Down Expand Up @@ -148,6 +153,7 @@ function Categories({ userId, userCategories }: TProps) {
}

setIsLoading({ subject: false, item: true, reset: false })
setShowEmojiPicker(false)
try {
await updateCategories(
userId,
Expand Down Expand Up @@ -211,6 +217,7 @@ function Categories({ userId, userCategories }: TProps) {
setNewItemName={setNewItemName}
onSaveItemClick={onSaveItemClick}
showEmojiPicker={showEmojiPicker}
toggleEmojiPicker={toggleEmojiPicker}
isLoading={isLoading}
onEmojiClick={onEmojiClick}
/>
Expand Down
36 changes: 16 additions & 20 deletions app/ui/categories/category-item.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,12 +7,7 @@ import {
} from 'react-icons/pi'

import { Button, Input } from '@nextui-org/react'
import EmojiPicker, {
EmojiClickData,
SkinTonePickerLocation,
SuggestionMode,
Theme,
} from 'emoji-picker-react'
import { EmojiClickData } from 'emoji-picker-react'
import { motion } from 'framer-motion'

import { DEFAULT_CATEGORY, DEFAULT_ICON_SIZE } from '@/config/constants/main'
Expand All @@ -25,6 +20,7 @@ import type {

import { HoverableElement } from '../hoverables'
import InfoBadge from '../info-badge'
import CustomEmojiPicker from './custom-emoji-picker'

type TProps = {
item: TTransaction['categories'][number]['items'][number]
Expand All @@ -40,6 +36,7 @@ type TProps = {
setNewItemName: (name: string) => void
onSaveItemClick: (categoryIndex: number, itemIndex: number) => void
showEmojiPicker: boolean
toggleEmojiPicker: () => void
isLoading: TCategoriesLoading
onEmojiClick: (emojiData: EmojiClickData) => void
}
Expand All @@ -54,6 +51,7 @@ function CategoryItem({
setNewItemName,
onSaveItemClick,
showEmojiPicker,
toggleEmojiPicker,
isLoading,
onEmojiClick,
}: TProps) {
Expand All @@ -65,7 +63,10 @@ function CategoryItem({
<div className='w-full'>
<div className='text-md flex h-auto w-full items-center justify-between gap-2 rounded-medium bg-content1 p-3 text-left font-bold md:text-lg'>
<div className='flex h-[52px] items-center'>
<div className='z-10 mr-2 rounded-medium bg-content2 px-3 py-2 text-xl md:text-2xl'>
<div
className='z-10 mr-2 cursor-pointer rounded-medium bg-success-50 px-3 py-2 text-xl hover:bg-success-100 md:text-2xl'
onClick={toggleEmojiPicker}
>
<motion.div
drag
dragConstraints={{ top: 0, left: 0, bottom: 0, right: 0 }}
Expand All @@ -83,6 +84,7 @@ function CategoryItem({
isInvalid={newItemName.length < 1}
onChange={(e) => setNewItemName(e.target.value)}
size='lg'
color='success'
classNames={{
input:
'border-none focus:ring-0 placeholder:text-default-500 font-bold text-md md:text-lg',
Expand All @@ -92,6 +94,8 @@ function CategoryItem({
<Button
onClick={() => onSaveItemClick(categoryIndex, itemIndex)}
isLoading={isLoading.item}
color='success'
className='font-medium text-background'
>
{!isLoading.item && (
<HoverableElement
Expand All @@ -103,19 +107,10 @@ function CategoryItem({
Save
</Button>
</div>
{showEmojiPicker && (
<EmojiPicker
lazyLoadEmojis
onEmojiClick={onEmojiClick}
searchPlaceHolder='Search emoji...'
// width={300}
// height={400}
theme={Theme.AUTO}
suggestedEmojisMode={SuggestionMode.RECENT}
skinTonePickerLocation={SkinTonePickerLocation.PREVIEW}
className='my-2'
/>
)}
<CustomEmojiPicker
showEmojiPicker={showEmojiPicker}
onEmojiClick={onEmojiClick}
/>
</div>
) : (
<div className='text-md flex h-auto w-full items-center justify-between gap-2 rounded-medium bg-content1 p-3 text-left font-bold md:text-lg'>
Expand All @@ -138,6 +133,7 @@ function CategoryItem({
<Button
onClick={() => onEditItemClick(categoryIndex, itemIndex, item.name)}
isDisabled={item.name === DEFAULT_CATEGORY}
className='bg-foreground font-medium text-default-50'
>
<HoverableElement
element={<PiNotePencil size={DEFAULT_ICON_SIZE} />}
Expand Down
11 changes: 10 additions & 1 deletion app/ui/categories/category.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,7 @@ type TProps = {
setNewItemName: (name: string) => void
onSaveItemClick: (categoryIndex: number, itemIndex: number) => void
showEmojiPicker: boolean
toggleEmojiPicker: () => void
isLoading: TCategoriesLoading
onEmojiClick: (emojiData: EmojiClickData) => void
}
Expand All @@ -56,6 +57,7 @@ function Category({
setNewItemName,
onSaveItemClick,
showEmojiPicker,
toggleEmojiPicker,
isLoading,
onEmojiClick,
}: TProps) {
Expand All @@ -73,6 +75,7 @@ function Category({
isInvalid={newTargetName.length < 1}
onChange={(e) => setNewTargetName(e.target.value)}
size='lg'
color='success'
classNames={{
input:
'border-none focus:ring-0 placeholder:text-default-500 font-bold text-lg md:text-xl',
Expand All @@ -82,6 +85,8 @@ function Category({
<Button
onClick={() => onSaveTargetClick(index)}
isLoading={isLoading.subject}
color='success'
className='font-medium text-background'
>
{!isLoading.subject && (
<HoverableElement
Expand All @@ -98,7 +103,10 @@ function Category({
<h2 className='text-lg font-semibold md:text-xl'>
{category.subject}
</h2>
<Button onClick={() => onEditTargetClick(index, category.subject)}>
<Button
onClick={() => onEditTargetClick(index, category.subject)}
className='bg-foreground font-medium text-default-50'
>
<HoverableElement
element={<PiNotePencil size={DEFAULT_ICON_SIZE} />}
hoveredElement={<PiNotePencilFill size={DEFAULT_ICON_SIZE} />}
Expand All @@ -121,6 +129,7 @@ function Category({
setNewItemName={setNewItemName}
onSaveItemClick={onSaveItemClick}
showEmojiPicker={showEmojiPicker}
toggleEmojiPicker={toggleEmojiPicker}
isLoading={isLoading}
onEmojiClick={onEmojiClick}
/>
Expand Down
36 changes: 36 additions & 0 deletions app/ui/categories/custom-emoji-picker.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
import { memo, useMemo } from 'react'

import EmojiPicker, {
EmojiClickData,
SkinTonePickerLocation,
SuggestionMode,
Theme,
} from 'emoji-picker-react'

type TProps = {
showEmojiPicker: boolean
onEmojiClick: (emojiData: EmojiClickData) => void
}

function CustomEmojiPicker({ showEmojiPicker, onEmojiClick }: TProps) {
const emojiPicker = useMemo(
() => (
<EmojiPicker
lazyLoadEmojis
onEmojiClick={onEmojiClick}
searchPlaceHolder='Search emoji...'
// width={300}
// height={400}
theme={Theme.AUTO}
suggestedEmojisMode={SuggestionMode.RECENT}
skinTonePickerLocation={SkinTonePickerLocation.PREVIEW}
className='my-2'
/>
),
[onEmojiClick],
)

return <>{showEmojiPicker && emojiPicker}</>
}

export default memo(CustomEmojiPicker)
4 changes: 2 additions & 2 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,13 +58,13 @@
"eslint": "^8.57.0",
"eslint-config-next": "14.2.5",
"eslint-config-prettier": "^9.1.0",
"husky": "^9.1.1",
"husky": "^9.1.2",
"jsdom": "^24.1.1",
"lint-staged": "^15.2.7",
"postcss": "^8.4.40",
"prettier": "^3.3.3",
"prettier-plugin-tailwindcss": "^0.6.5",
"tailwindcss": "^3.4.6",
"tailwindcss": "^3.4.7",
"typescript": "^5.5.4",
"vite-tsconfig-paths": "^4.3.2",
"vitest": "^2.0.4",
Expand Down
20 changes: 10 additions & 10 deletions yarn.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8790,7 +8790,7 @@ __metadata:
eslint-config-next: "npm:14.2.5"
eslint-config-prettier: "npm:^9.1.0"
framer-motion: "npm:^11.3.17"
husky: "npm:^9.1.1"
husky: "npm:^9.1.2"
jsdom: "npm:^24.1.1"
lint-staged: "npm:^15.2.7"
mongoose: "npm:^8.5.1"
Expand All @@ -8811,7 +8811,7 @@ __metadata:
react-use: "npm:^17.5.1"
recharts: "npm:^2.12.7"
resend: "npm:^3.5.0"
tailwindcss: "npm:^3.4.6"
tailwindcss: "npm:^3.4.7"
typescript: "npm:^5.5.4"
vite-tsconfig-paths: "npm:^4.3.2"
vitest: "npm:^2.0.4"
Expand Down Expand Up @@ -9581,12 +9581,12 @@ __metadata:
languageName: node
linkType: hard

"husky@npm:^9.1.1":
version: 9.1.1
resolution: "husky@npm:9.1.1"
"husky@npm:^9.1.2":
version: 9.1.2
resolution: "husky@npm:9.1.2"
bin:
husky: bin.js
checksum: 10c0/56394f5a08201badece23a8599bd76fe8c41e4510a956022fe54897645900c5c5a96a740ffb0604e99e808dffc3714bae982f1cbda4a069082cc713414f17ad3
checksum: 10c0/7e25c31ef98ac35d357147005d6e5d87db2abca7297e7c5aac931de3699acd32a3f1a9f8e53f101daeab818f0cfe9d18fa7e34f7cf5c9c4437c3665123456dea
languageName: node
linkType: hard

Expand Down Expand Up @@ -13749,9 +13749,9 @@ __metadata:
languageName: node
linkType: hard

"tailwindcss@npm:^3.4.6":
version: 3.4.6
resolution: "tailwindcss@npm:3.4.6"
"tailwindcss@npm:^3.4.7":
version: 3.4.7
resolution: "tailwindcss@npm:3.4.7"
dependencies:
"@alloc/quick-lru": "npm:^5.2.0"
arg: "npm:^5.0.2"
Expand All @@ -13778,7 +13778,7 @@ __metadata:
bin:
tailwind: lib/cli.js
tailwindcss: lib/cli.js
checksum: 10c0/8d82b697ecf41d8cd100ab3369e3cbcb30e350afc5b595a000b201ba666628a68543154297f96c5b2a3f2614f37bb981af4766556ebaae832079fa9a436e8563
checksum: 10c0/dd74c29ae0ec314d46300a1163b106b84d3ca58d71e4e16c2c8ad9ee3d7ba6cfeab4a97176c0e9bfeebc5e9cd9636531648a3f3874ede376751a572d230dd979
languageName: node
linkType: hard

Expand Down