From 16cc50a958cf01f3a2728e28b04e16a4d4da28b9 Mon Sep 17 00:00:00 2001 From: Kakabay <2kakabayashyrberdyew@gmail.com> Date: Tue, 24 Dec 2024 00:32:36 +0500 Subject: [PATCH] code clean up --- app/(main)/lottery/page.tsx | 105 ++++-------------- components/lottery/LotteryHeader.tsx | 46 ++++++++ .../lottery/winners/LotteryWinnersList.tsx | 9 +- constants/lottery.ts | 6 + lib/hooks/useLottery.ts | 41 +++++++ typings/lottery/lottery.types.ts | 25 +++++ 6 files changed, 146 insertions(+), 86 deletions(-) create mode 100644 components/lottery/LotteryHeader.tsx create mode 100644 constants/lottery.ts create mode 100644 lib/hooks/useLottery.ts create mode 100644 typings/lottery/lottery.types.ts diff --git a/app/(main)/lottery/page.tsx b/app/(main)/lottery/page.tsx index 9b5ad10..4199863 100644 --- a/app/(main)/lottery/page.tsx +++ b/app/(main)/lottery/page.tsx @@ -1,103 +1,42 @@ "use client"; -import { useState } from "react"; import { useLotteryAuth } from "@/store/useLotteryAuth"; import ProtectedRoute from "@/components/lottery/auth/ProtectedRoute"; -import { Queries } from "@/api/queries"; -import Loader from "@/components/Loader"; -import LotteryWinnersSection from "@/components/lottery/LotteryWinnersSection"; -import RollingCounter from "@/components/lottery/RollingCounter/RollingCounter"; -import RollingCounterWorking from "@/components/lottery/RollingCounter/RollingCounterWorking"; -import LotteryCountDown from "@/components/lottery/countDown/LotteryCountDown"; -import LotteryCountDownAllert from "@/components/lottery/countDown/countDownAllert/LotteryCountDownAllert"; -import LotteryForm from "@/components/lottery/form/LotteryForm"; -import LotteryRulesSection from "@/components/lottery/rules/LotteryRulesSection"; -import Image from "next/image"; -import { useRouter } from "next/navigation"; -import { useEffect } from "react"; +import { useLottery } from "@/lib/hooks/useLottery"; +import { LOTTERY_CONFIG } from "@/constants/lottery"; +import LotteryHeader from "@/components/lottery/LotteryHeader"; +import LotteryCounter from "@/components/lottery/RollingCounter/RollingCounter"; -const Page = () => { +import LotteryWinnersSection from "@/components/lottery/LotteryWinnersSection"; +import LotteryRulesSection from "@/components/lottery/rules/LotteryRulesSection"; + +const LotteryPage = () => { const { lotteryData } = useLotteryAuth(); - const [lotteryStatus, setLotteryStatus] = useState< - "not-started" | "started" | "ended" - >("not-started"); - const [currentNumber, setCurrentNumber] = useState("22-22-22-22-22"); + const { status, currentNumber } = useLottery( + LOTTERY_CONFIG.START_DATE, + LOTTERY_CONFIG.END_DATE + ); return (
- - {lotteryData && ( -
-
-
-
- {lotteryData.data.title && ( -

- {lotteryData.data.title} -

- )} - {lotteryData.data.description && ( -

- {lotteryData.data.description} -

- )} - {lotteryData.data.sms_code && ( -
- - - - SMS-kod: {lotteryData.data.sms_code} -
- )} -
- {lotteryData.data.image && ( -
- banner -
- )} - - {lotteryStatus === "not-started" && ( - - )} -
-
-
+ )} -
- {lotteryStatus === "ended" || lotteryStatus === "started" ? ( - - ) : null} -
+ {(status === "ended" || status === "started") && ( + + )}
); }; -export default Page; +export default LotteryPage; diff --git a/components/lottery/LotteryHeader.tsx b/components/lottery/LotteryHeader.tsx new file mode 100644 index 0000000..ec12705 --- /dev/null +++ b/components/lottery/LotteryHeader.tsx @@ -0,0 +1,46 @@ +import Image from "next/image"; + +interface LotteryHeaderProps { + title: string; + description: string; + image: string; + smsCode: string; +} + +const LotteryHeader = ({ + title, + description, + image, + smsCode, +}: LotteryHeaderProps) => { + return ( +
+
+
+

+ {title} +

+

+ {description} +

+
+ SMS-kod: {smsCode} +
+
+ {image && ( +
+ banner +
+ )} +
+
+ ); +}; + +export default LotteryHeader; diff --git a/components/lottery/winners/LotteryWinnersList.tsx b/components/lottery/winners/LotteryWinnersList.tsx index cfdf9ce..6427e50 100644 --- a/components/lottery/winners/LotteryWinnersList.tsx +++ b/components/lottery/winners/LotteryWinnersList.tsx @@ -1,12 +1,15 @@ -import LotteryWinner from './LotteryWinner'; +import { LotteryWinnerData } from "@/typings/lottery/lottery.types"; +import LotteryWinner from "./LotteryWinner"; -const LotteryWinnersList = ({ winners }: { winners: number[] }) => { +const LotteryWinnersList = ({ winners }: { winners: LotteryWinnerData[] }) => { return (

Results

-

The results after each stage will be shown here.

+

+ The results after each stage will be shown here. +

diff --git a/constants/lottery.ts b/constants/lottery.ts new file mode 100644 index 0000000..22250eb --- /dev/null +++ b/constants/lottery.ts @@ -0,0 +1,6 @@ +export const LOTTERY_CONFIG = { + START_DATE: "2024-12-16 18:09:00", + END_DATE: "2024-12-25 16:00:00", + INITIAL_NUMBER: "22-22-22-22-22", + UPDATE_INTERVAL: 10000, // 10 seconds +}; diff --git a/lib/hooks/useLottery.ts b/lib/hooks/useLottery.ts new file mode 100644 index 0000000..4ecf2a6 --- /dev/null +++ b/lib/hooks/useLottery.ts @@ -0,0 +1,41 @@ +import { useState, useEffect } from "react"; +import { LotteryStatus } from "@/typings/lottery/lottery.types"; + +export const useLottery = (startDate: string, endDate: string) => { + const [status, setStatus] = useState("not-started"); + const [currentNumber, setCurrentNumber] = useState("22-22-22-22-22"); + + useEffect(() => { + const calculateStatus = () => { + const now = new Date(); + const start = new Date(startDate); + const end = new Date(endDate); + + if (now < start) return "not-started"; + if (now > end) return "ended"; + return "started"; + }; + + setStatus(calculateStatus()); + const interval = setInterval(() => { + setStatus(calculateStatus()); + }, 1000); + + return () => clearInterval(interval); + }, [startDate, endDate]); + + useEffect(() => { + if (status === "started") { + const timer = setTimeout(() => { + setCurrentNumber("81-34-52-35-61"); + }, 10000); + + return () => clearTimeout(timer); + } + }, [status]); + + return { + status, + currentNumber, + }; +}; diff --git a/typings/lottery/lottery.types.ts b/typings/lottery/lottery.types.ts new file mode 100644 index 0000000..d5f9f93 --- /dev/null +++ b/typings/lottery/lottery.types.ts @@ -0,0 +1,25 @@ +export interface LotteryWinnerData { + no: number; + client: string; + dt: string; + winner_no: number; + ticket: string; +} + +export interface LotteryData { + id: number; + title: string; + description: string; + image: string; + start_time: string; + end_time: string; + sms_code: string; + winners: LotteryWinnerData[]; +} + +export interface LotteryResponse { + data: LotteryData; + user_lottery_numbers: string[]; +} + +export type LotteryStatus = "not-started" | "started" | "ended";