style/leaderboard (#173)

* feat(locales): add second and third place translations in multiple languages and improve leaderboard UI with new badges and animations

* feat(locales): add new translation keys for last activity and registration date in multiple languages; enhance leaderboard UI with improved rank display and user information layout

* feat(leaderboard-item): enhance leaderboard item UI with improved layout and added ClockIcon for last activity time display

* feat(leaderboard): implement leaderboard period filtering and enhance date range handling for top workout users

* feat(leaderboard): add user leaderboard position component and related actions for fetching user position in leaderboard

* fix(Footer.tsx): remove period prop from UserLeaderboardPosition for consistency in usage

* feat(leaderboard): add user authentication check and motivational message for users with no workouts

* feat(leaderboard): enhance leaderboard page with new header and user info cards for better user engagement

* feat(locales): add leaderboard titles and descriptions in multiple languages for improved user experience and localization support

* refactor: clean up imports and simplify code structure across multiple files for better readability and maintainability

* chore(use-user-position.ts): reorganize imports for better readability and maintainability

* refactor(get-user-position.action.ts): remove unused code for counting users ahead to streamline the action logic

* fix(locales): update period labels in English, Spanish, French, and Portuguese for consistency and clarity

* refactor(leaderboard): extract date range logic into a new utility file for better code organization and reusability

* refactor(get-top-workout-users.action.ts): extract date range logic into a separate utility function for better modularity and readability

Author: Snouzy

src/features/leaderboard/actions/get-top-workout-users.action.ts

@@ -1,56 +1,21 @@
 "use server";
 
 import { z } from "zod";
-import utc from "dayjs/plugin/utc";
-import timezone from "dayjs/plugin/timezone";
 import dayjs from "dayjs";
 
 import { prisma } from "@/shared/lib/prisma";
 import { actionClient } from "@/shared/api/safe-actions";
 import { TopWorkoutUser } from "@/features/leaderboard/models/types";
-
-// Initialize dayjs plugins
-dayjs.extend(utc);
-dayjs.extend(timezone);
+import { getDateRangeForPeriod } from "@/features/leaderboard/lib/utils";
 
 const LIMIT_TOP_USERS = 20;
-const PARIS_TZ = "Europe/Paris";
 
 export type LeaderboardPeriod = "all-time" | "weekly" | "monthly";
 
 const inputSchema = z.object({
   period: z.enum(["all-time", "weekly", "monthly"]).default("all-time"),
 });
 
-function getDateRangeForPeriod(period: LeaderboardPeriod): { startDate: Date | undefined; endDate: Date } {
-  const now = dayjs().tz(PARIS_TZ);
-
-  switch (period) {
-    case "weekly": {
-      // Start of current week (Monday) in Paris timezone
-      const startOfWeek = now.startOf("week").add(1, "day"); // dayjs week starts on Sunday, add 1 for Monday
-      return {
-        startDate: startOfWeek.toDate(),
-        endDate: now.toDate(),
-      };
-    }
-    case "monthly": {
-      // Start of current month in Paris timezone
-      const startOfMonth = now.startOf("month");
-      return {
-        startDate: startOfMonth.toDate(),
-        endDate: now.toDate(),
-      };
-    }
-    case "all-time":
-    default:
-      return {
-        startDate: undefined,
-        endDate: now.toDate(),
-      };
-  }
-}
-
 export const getTopWorkoutUsersAction = actionClient.schema(inputSchema).action(async ({ parsedInput }) => {
   const { period } = parsedInput;
 

src/features/leaderboard/actions/get-user-position.action.ts

@@ -1,53 +1,16 @@
 "use server";
 
 import { z } from "zod";
-import utc from "dayjs/plugin/utc";
-import timezone from "dayjs/plugin/timezone";
-import dayjs from "dayjs";
 
 import { prisma } from "@/shared/lib/prisma";
 import { actionClient } from "@/shared/api/safe-actions";
-
-import { LeaderboardPeriod } from "./get-top-workout-users.action";
-
-// Initialize dayjs plugins
-dayjs.extend(utc);
-dayjs.extend(timezone);
-
-const PARIS_TZ = "Europe/Paris";
+import { getDateRangeForPeriod } from "@/features/leaderboard/lib/utils";
 
 const inputSchema = z.object({
   userId: z.string(),
   period: z.enum(["all-time", "weekly", "monthly"]).default("all-time"),
 });
 
-function getDateRangeForPeriod(period: LeaderboardPeriod): { startDate: Date | undefined; endDate: Date } {
-  const now = dayjs().tz(PARIS_TZ);
-
-  switch (period) {
-    case "weekly": {
-      const startOfWeek = now.startOf("week").add(1, "day");
-      return {
-        startDate: startOfWeek.toDate(),
-        endDate: now.toDate(),
-      };
-    }
-    case "monthly": {
-      const startOfMonth = now.startOf("month");
-      return {
-        startDate: startOfMonth.toDate(),
-        endDate: now.toDate(),
-      };
-    }
-    case "all-time":
-    default:
-      return {
-        startDate: undefined,
-        endDate: now.toDate(),
-      };
-  }
-}
-
 export const getUserPositionAction = actionClient.schema(inputSchema).action(async ({ parsedInput }) => {
   const { userId, period } = parsedInput;
 

src/features/leaderboard/lib/utils.ts

@@ -0,0 +1,40 @@
+import utc from "dayjs/plugin/utc";
+import timezone from "dayjs/plugin/timezone";
+import dayjs from "dayjs";
+
+// Initialize dayjs plugins
+dayjs.extend(utc);
+dayjs.extend(timezone);
+
+const PARIS_TZ = "Europe/Paris";
+
+export type LeaderboardPeriod = "all-time" | "weekly" | "monthly";
+
+export function getDateRangeForPeriod(period: LeaderboardPeriod): { startDate: Date | undefined; endDate: Date } {
+  const now = dayjs().tz(PARIS_TZ);
+
+  switch (period) {
+    case "weekly": {
+      // Start of current week (Monday) in Paris timezone
+      const startOfWeek = now.startOf("week").add(1, "day"); // dayjs week starts on Sunday, add 1 for Monday
+      return {
+        startDate: startOfWeek.toDate(),
+        endDate: now.toDate(),
+      };
+    }
+    case "monthly": {
+      // Start of current month in Paris timezone
+      const startOfMonth = now.startOf("month");
+      return {
+        startDate: startOfMonth.toDate(),
+        endDate: now.toDate(),
+      };
+    }
+    case "all-time":
+    default:
+      return {
+        startDate: undefined,
+        endDate: now.toDate(),
+      };
+  }
+}