Skip to content

v0.6.0

Choose a tag to compare

View all tags
@BCFCODE BCFCODE released this 12 Jul 10:39
· 258 commits to main since this release
v0.6.0
dd2b6e3

BCFCODE Release v0.6.0

Release Date: July 12, 2025

We’re thrilled to announce BCFCODE v0.6.0, a dynamic update that elevates the dashboard experience with real-time user tracking, enhanced performance, and a polished UI. This release introduces online user indicators, a new pulse animation, optimized data fetching, and significant code cleanup, all while maintaining our commitment to a seamless and engaging platform for coding enthusiasts. Below, we outline the key features, improvements, and fixes in this release.

🚀 What's New

1. Online Users Tracking and Visualization

Introduced real-time tracking of online users with a dedicated OnlineUsers component:

  • OnlineUsers Component: Added OnlineUsers.tsx, which displays an AvatarGroup of online users with tooltips showing user names, supporting up to thousands of users with a +Xk surplus indicator.
  • Query Key Addition: Added onlineUsers to usersQueryKeys in ReactQuery/queryKeys/users.ts for efficient cache management.
  • Leaderboard Integration: Updated LeaderboardHeader to display online user counts and avatars, enhancing community visibility.

File Additions:

  • app/(dashboard)/components/OnlineUsers.tsx
    File Changes:
  • ReactQuery/queryKeys/users.ts
  • app/(dashboard)/leaderboard/UsersTable/Header.tsx

Impact: Enhances community engagement by showcasing active users in real-time, improving the leaderboard’s interactivity.

2. Pulse Animation for User Status

Added a visually appealing PulseAnimation component to indicate user activity status:

  • Pulse Effect: Implemented PulseAnimation.tsx with a soft pulse animation using MUI’s keyframes and styled components, displaying a blurred, scaling ring effect (yellow-green by default) around user status text.
  • Dynamic Status Display: Integrated into AvatarCell to show "Online" or "Last active" with a timestamp, with opacity and font weight adjustments based on idle status.
  • Conditional Rendering: Pulse effect is disabled for active users, ensuring a clean UI.

File Addition:

  • app/(dashboard)/animations/Pulse.tsx
    File Change:
  • app/(dashboard)/leaderboard/UsersTable/UserRow/Cells/Avatar/index.tsx

Impact: Adds a modern, engaging visual cue for user activity, improving the dashboard’s aesthetic and usability.

3. Optimized Gauge Data Processing

Enhanced the gauge system with performance optimizations using useMemo:

  • Memoized Calculations: Wrapped counts and percents calculations in useGaugeData.ts with useMemo to prevent unnecessary recalculations, improving rendering performance.
  • Dependency Management: Ensured memoization dependencies (list, label) are correctly specified for optimal performance.

File Change:

  • app/(dashboard)/Stats/hooks/useGaugeData.ts

Impact: Improves dashboard performance by reducing redundant computations, ensuring a smoother user experience.

4. Improved Leaderboard Data Management

Refined leaderboard data fetching and state management for better reliability and performance:

  • Pagination Enhancements: Updated usePaginationQuery.ts with a shorter staleTime (10 minutes), refetchOnMount: "always", and a custom retry logic that retries only on network errors.
  • Error Handling: Improved error messages in usePaginationQuery.ts to include specific error details.
  • List Sorting and Merging: Added useMemo in Body.tsx to sort and merge Codewars challenge lists, ensuring no duplicates and maintaining descending order by completion date.

File Changes:

  • app/(dashboard)/leaderboard/UsersTable/Pagination/usePaginationQuery.ts
  • app/(dashboard)/leaderboard/UsersTable/UserRow/Cells/CollapseButton/CodewarsTable/Body/index.tsx

Impact: Enhances leaderboard reliability, reduces stale data, and improves data consistency.

5. Codewars Diamonds Collection Optimization

Optimized the CollectDiamonds component for better performance and maintainability:

  • Dynamic Icon Import: Replaced static DiamondIcon import with dynamic import from @mui/icons-material to reduce bundle size.
  • Callback Optimization: Refactored handleCollectDiamonds into a useCallback hook to prevent unnecessary re-renders.
  • Service Modularization: Added services/index.ts to centralize CodewarsAPIService and DiamondsService instances, improving code organization.
  • Simplified Logic: Removed redundant setIsDiamondIconDisabled and collectButtonDispatch calls in useEffect for cleaner state management.

File Additions:

  • app/(dashboard)/leaderboard/UsersTable/UserRow/Cells/CollapseButton/CodewarsTable/Body/CollectButton/services/index.ts
    File Changes:
  • app/(dashboard)/leaderboard/UsersTable/UserRow/Cells/CollapseButton/CodewarsTable/Body/CollectButton/index.tsx

Impact: Improves performance of the diamonds collection feature and enhances code maintainability.

6. Code Cleanup and File Removal

Removed deprecated and unused files to reduce technical debt:

  • Deleted Files:
    • useIdleActivity.tsx: Replaced by server-side idle tracking logic.
    • IconButton/index.tsx, Tooltip/Tooltips.tsx, Tooltip/styles.ts, Tooltips.tsx, CollectButton/components/styles.ts: Removed unused tooltip and button components.
  • Code Reorganization: Reordered imports in SingleRow/index.tsx for consistency and removed commented-out code in CollectButton/index.tsx.

File Deletions:

  • app/(dashboard)/leaderboard/UsersTable/UserRow/Cells/Avatar/hooks/useIdleActivity.tsx
  • app/(dashboard)/leaderboard/UsersTable/UserRow/Cells/CollapseButton/CodewarsTable/Body/CollectButton/components/IconButton/index.tsx
  • app/(dashboard)/leaderboard/UsersTable/UserRow/Cells/CollapseButton/CodewarsTable/Body/CollectButton/components/Tooltip/Tooltips.tsx
  • app/(dashboard)/leaderboard/UsersTable/UserRow/Cells/CollapseButton/CodewarsTable/Body/CollectButton/components/Tooltip/styles.ts
  • app/(dashboard)/leaderboard/UsersTable/UserRow/Cells/CollapseButton/CodewarsTable/Body/CollectButton/components/Tooltips.tsx
  • app/(dashboard)/leaderboard/UsersTable/UserRow/Cells/CollapseButton/CodewarsTable/Body/CollectButton/components/styles.ts
    File Changes:
  • app/(dashboard)/leaderboard/UsersTable/UserRow/Cells/CollapseButton/CodewarsTable/Body/SingleRow/index.tsx
  • app/(dashboard)/leaderboard/UsersTable/UserRow/Cells/CollapseButton/CodewarsTable/Body/CollectButton/index.tsx

Impact: Reduces codebase bloat, improving maintainability and build times.

7. Minor UI and Type Enhancements

Made small but impactful UI and type improvements:

  • Codewars Stats Margin: Added marginTop: 10 to CodewarsStatsFallback.tsx for better spacing.
  • Role Badge Fix: Updated RoleBadge/index.tsx to conditionally render the tooltip title based on UserRole.SuperAdmin, preventing empty tooltips.
  • Type Updates: Aligned types/codewars.ts with schema by importing CodewarsUser and uncommented UserRole.User in types/users.ts for consistency.
  • Leaderboard Header Labels: Changed Member Since to Since and Last Login to Last Activity in Header.tsx for clarity.

File Changes:

  • app/(dashboard)/components/CodewarsStatsFallback.tsx
  • app/(dashboard)/leaderboard/UsersTable/UserRow/Cells/Avatar/RoleBadge/index.tsx
  • types/codewars.ts
  • types/users.ts
  • app/(dashboard)/leaderboard/UsersTable/Header.tsx

Impact: Improves UI consistency, type safety, and user clarity.

8. Dependency Updates

Updated dependencies to ensure compatibility, security, and performance:

  • Key Updates:
    • eslint: 9.28.0 → 9.30.1
    • @typescript-eslint/*: 8.33.1 → 8.36.0
    • next: 15.3.3 → 15.3.5
    • axios: 1.9.0 → 1.10.0
    • cypress: 14.4.1 → 14.5.1
    • mongoose: 8.15.1 → 8.16.2
    • zod: 3.25.56 → 3.25.76
    • unrs-resolver: 1.7.11 → 1.11.0
    • prettier: 3.4.2 → 3.5.3
    • New: hasha@5.2.2 (dependency for cypress)
  • Removed Dependencies: Removed unused dependencies like vite, rollup, and browserslist to streamline the project.

File Change: package-lock.json

Impact: Ensures a secure and modern development environment with reduced bundle size.

🐛 Bug Fixes

  • Loading UI Simplification: Simplified loading condition in LeaderBoard.tsx to avoid redundant checks.
  • Idle Status Cleanup: Removed unnecessary whitespace in OnlineIndicator.tsx and redundant useEffect logic in CollectDiamonds/index.tsx.
  • Type Consistency: Fixed commented-out UserRole.User in types/users.ts and aligned CodewarsUser type with schema.

🛠️ Technical Improvements

  • Type Safety: Enhanced types/users.ts with IdleSnapshotData integration and types/codewars.ts with schema alignment.
  • Performance: Optimized CollectDiamonds with dynamic imports and useCallback, and improved gauge calculations with useMemo.
  • Code Organization: Centralized services in CollectButton/services/index.ts and reordered imports for consistency.
  • Documentation: Removed commented-out code and unused files to improve codebase clarity.

📝 Upgrade Guide

To upgrade to v0.6.0, follow these steps:

  1. Update Dependencies:

    • Run npm install or yarn install to update package-lock.json dependencies.
    • Verify new dependency hasha@5.2.2 and updated packages (e.g., eslint@9.30.1, next@15.3.5).

  2. Integrate New Components:

    • Add OnlineUsers.tsx to leaderboard routes and pass list and totalUsers props.
    • Integrate PulseAnimation.tsx in AvatarCell for user status display.

  3. Update Query Keys:

    • Ensure usersQueryKeys includes onlineUsers for cache management.
    • Verify useOnlineUsersQuery integration in LeaderboardHeader.

  4. Test Online Tracking:

    • Check online user avatars and surplus rendering in OnlineUsers.
    • Verify pulse animation behavior for idle vs. active users.

  5. Remove Deprecated Files:

    • Delete useIdleActivity.tsx, IconButton/index.tsx, Tooltip/Tooltips.tsx, Tooltip/styles.ts, Tooltips.tsx, and CollectButton/components/styles.ts.
    • Update import paths for CollectDiamonds and SingleRow.

  6. Review UI Changes:

    • Check CodewarsStatsFallback margin and leaderboard header labels.
    • Apply pulse animation styling and verify responsiveness.

🙌 Contributing

Thank you to the BCFCODE community for your invaluable feedback and support! Special thanks to contributors who tested the online user tracking and pulse animation features. Want to contribute? Join us on GitHub Discussions.

📬 Feedback

We love hearing from you! Share your thoughts, report bugs, or suggest features in our GitHub Issues or on the BCFCODE community on X.

🤝 Get Involved

BCFCODE is a thriving community for coding enthusiasts. Join us to code, collaborate, and grow together.

BCFCODE LOGO

Ready to make an impact? Join BCFCODE and start coding!

Our Developers:

Team Members:

© BCFCODE

Join our Telegram | Follow us on X

Assets 2
Loading