Skip to content

Commit 4cbdfdd

Browse files
coderKrysiocoderKrysio
authored
Merge pull request #49 from coderKrysio/dev-1
added custom hooks
2 parents dc521b3 + 4b6ed44 commit 4cbdfdd

File tree

6 files changed

+130
-100
lines changed

6 files changed

+130
-100
lines changed

‎components/Form.tsx‎

Lines changed: 3 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,10 @@
1-
import { useEffect, useState } from 'react'
1+
import { useEffect } from 'react'
22
import ListIntervals from './ListIntervals'
3-
import { intervals, timeIntervals } from '@/lib/utils'
43
import { SetFormData } from '@/lib/types'
4+
import { WriteForm } from '@/lib/hooks'
55

66
const Form = ({ setFormData }: SetFormData) => {
7-
const [intLength, setIntLength] = useState<number>(intervals.length)
8-
9-
const addInterval = () => {
10-
intervals.push(timeIntervals)
11-
setIntLength(intervals.length)
12-
handleChange('intervals', intervals)
13-
}
14-
15-
const removeInterval = () => {
16-
intervals.pop()
17-
setIntLength(intervals.length)
18-
handleChange('intervals', intervals)
19-
}
20-
21-
const handleChange = (name: string, value: any) => {
22-
setFormData((prev: any) => ({
23-
...prev,
24-
[name]: value,
25-
}))
26-
}
7+
const { intLength, addInterval, removeInterval, handleChange } = WriteForm({setFormData})
278

289
const renderForm = () => {
2910
return (

‎components/GetForm.tsx‎

Lines changed: 4 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,12 @@
1-
import { useState } from 'react'
21
import Navbar from './Navbar'
3-
import { svgSrc, timeIntervals } from '@/lib/utils'
2+
import { svgSrc } from '@/lib/utils'
43
import Link from 'next/link'
5-
import { useRouter } from 'next/navigation'
6-
import { FormData, RoomCode } from '@/lib/types'
4+
import { RoomCode } from '@/lib/types'
75
import Form from './Form'
8-
import { API } from '@/lib/api'
6+
import { SetForm } from '@/lib/hooks'
97

108
const GetForm = ({ roomCode }: RoomCode) => {
11-
const router = useRouter()
12-
const [showError, setShowError] = useState<boolean>(false)
13-
const [formData, setFormData] = useState<FormData>({
14-
name: '',
15-
roomCode: roomCode,
16-
intervals: [timeIntervals],
17-
})
18-
19-
const checkFields = () => {
20-
if (formData.name === '') setShowError(true)
21-
else {
22-
setShowError(false)
23-
API.postData(formData)
24-
router.push(`/${roomCode}/result`)
25-
}
26-
}
9+
const { showError, setFormData, checkFields } = SetForm(roomCode)
2710

2811
return (
2912
<div className="w-screen min-h-screen flex flex-col justify-center items-center text-white pb-[70px] pt-[90px]">

‎components/ListIntervals.tsx‎

Lines changed: 2 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1,41 +1,10 @@
11
import { rajdhani } from '@/lib/fonts'
2+
import { SetIntervals } from '@/lib/hooks'
23
import { intervals } from '@/lib/utils'
34
import Image from 'next/image'
4-
import { useEffect, useState } from 'react'
55

66
const ListIntervals = ({ addInterval, removeInterval, setFormData }: any) => {
7-
const [errorMsg, setErrorMsg] = useState<string>('')
8-
const [arrIndex, setArrIndex] = useState<number>(0)
9-
10-
const [timeRange, setTimeRange] = useState({
11-
start: 480,
12-
end: 600,
13-
})
14-
15-
const updatedRange = (e: any, index: number) => {
16-
const { name, value } = e.target
17-
var array = value.split(':')
18-
var minutes = parseInt(array[0], 10) * 60 + parseInt(array[1], 10)
19-
setArrIndex(index)
20-
setTimeRange((prev: any) => ({
21-
...prev,
22-
[name]: minutes,
23-
}))
24-
}
25-
26-
useEffect(() => {
27-
if (timeRange.end <= timeRange.start)
28-
setErrorMsg('Invalid time intervals: End time > Start time.')
29-
else {
30-
setErrorMsg('')
31-
intervals[arrIndex] = [timeRange.start, timeRange.end]
32-
setFormData((prev: any) => ({
33-
...prev,
34-
intervals: intervals,
35-
}))
36-
}
37-
// eslint-disable-next-line react-hooks/exhaustive-deps
38-
}, [timeRange])
7+
const { errorMsg, updatedRange } = SetIntervals({setFormData})
398

409
return (
4110
<>

‎components/Navbar.tsx‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import Image from 'next/image'
2+
import Link from 'next/link'
23

34
const Navbar = () => {
45
return (
@@ -12,9 +13,11 @@ const Navbar = () => {
1213
alt="session-timeout"
1314
/>
1415

15-
<h3 className="text-3xl font-semibold text-[#48d399]">
16+
<Link
17+
href={'/'}
18+
className="text-3xl font-semibold text-[#48d399]">
1619
Get Intervals
17-
</h3>
20+
</Link>
1821
</div>
1922
)
2023
}

‎components/Results.tsx‎

Lines changed: 3 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -4,32 +4,13 @@ import { NumToTime } from '@/lib/utils'
44
import Navbar from './Navbar'
55
import Link from 'next/link'
66
import { MemberData, RoomCode } from '@/lib/types'
7-
import { useEffect, useRef, useState } from 'react'
87
import { API } from '@/lib/api'
98
import { useRouter } from 'next/navigation'
9+
import { GetResult } from '@/lib/hooks'
1010

1111
const Results = ({ roomCode }: RoomCode) => {
1212
const router = useRouter()
13-
const [result, setResult] = useState<number[][]>([])
14-
const [membersData, setMembersData] = useState<MemberData[]>([])
15-
const [time, setTime] = useState<number>(7200000);
16-
17-
const intervalRef = useRef<ReturnType<typeof setInterval>>();
18-
const decreaseNum = () => setTime((prev) => prev - 1);
19-
20-
useEffect(() => {
21-
API.getInterval(roomCode).then((res: any) => {
22-
setResult(res)
23-
})
24-
API.getUsers(roomCode).then((res: any) => {
25-
setMembersData(res)
26-
})
27-
28-
intervalRef.current = setInterval(decreaseNum, 1000);
29-
return () => clearInterval(intervalRef.current);
30-
31-
// eslint-disable-next-line react-hooks/exhaustive-deps
32-
}, [])
13+
const { result, membersData, time } = GetResult(roomCode)
3314

3415
if(time === 0) {
3516
API.deleteRoom(roomCode)
@@ -40,7 +21,7 @@ const Results = ({ roomCode }: RoomCode) => {
4021
<div className="w-screen min-h-screen flex flex-col justify-center items-center text-white bg-[#16161a] py-[70px]">
4122
<Navbar />
4223

43-
<div className="w-full px-10 flex justify-start items-center my-[30px]">
24+
<div className="w-full px-10 flex justify-start items-center my-[30px] max-[600px]:justify-center">
4425
<Link
4526
className="text-2xl font-medium tracking-wide py-2 px-5 border-2 border-white rounded-lg outline outlint-2 outline-transparent hover:outline-white"
4627
href={`/${roomCode}`}

‎lib/hooks.ts‎

Lines changed: 113 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,113 @@
1+
import { useState, useRef, useEffect, SetStateAction, Dispatch } from "react";
2+
import { API } from "./api";
3+
import { FormData, MemberData, RoomCode, SetFormData } from "./types";
4+
import { intervals, timeIntervals } from "./utils";
5+
import { useRouter } from "next/navigation";
6+
7+
export const GetResult = (roomCode: string) => {
8+
const [result, setResult] = useState<number[][]>([])
9+
const [membersData, setMembersData] = useState<MemberData[]>([])
10+
const [time, setTime] = useState<number>(7200000);
11+
12+
const intervalRef = useRef<ReturnType<typeof setInterval>>();
13+
const decreaseNum = () => setTime((prev) => prev - 1);
14+
15+
useEffect(() => {
16+
API.getInterval(roomCode).then((res: any) => {
17+
setResult(res)
18+
})
19+
API.getUsers(roomCode).then((res: any) => {
20+
setMembersData(res)
21+
})
22+
23+
intervalRef.current = setInterval(decreaseNum, 1000);
24+
return () => clearInterval(intervalRef.current);
25+
26+
// eslint-disable-next-line react-hooks/exhaustive-deps
27+
}, [])
28+
29+
return { result, membersData, time }
30+
}
31+
32+
export const WriteForm = ({ setFormData }: SetFormData) => {
33+
const [intLength, setIntLength] = useState<number>(intervals.length)
34+
35+
const addInterval = () => {
36+
intervals.push(timeIntervals)
37+
setIntLength(intervals.length)
38+
handleChange('intervals', intervals)
39+
}
40+
41+
const removeInterval = () => {
42+
intervals.pop()
43+
setIntLength(intervals.length)
44+
handleChange('intervals', intervals)
45+
}
46+
47+
const handleChange = (name: string, value: any) => {
48+
setFormData((prev: any) => ({
49+
...prev,
50+
[name]: value,
51+
}))
52+
}
53+
54+
return { intLength, addInterval, removeInterval, handleChange }
55+
}
56+
57+
export const SetForm = (roomCode: string) => {
58+
const router = useRouter()
59+
const [showError, setShowError] = useState<boolean>(false)
60+
const [formData, setFormData] = useState<FormData>({
61+
name: '',
62+
roomCode: roomCode,
63+
intervals: [timeIntervals],
64+
})
65+
66+
const checkFields = () => {
67+
if (formData.name === '') setShowError(true)
68+
else {
69+
setShowError(false)
70+
API.postData(formData)
71+
router.push(`/${roomCode}/result`)
72+
}
73+
}
74+
75+
return { showError, setFormData, checkFields }
76+
}
77+
78+
export const SetIntervals = ({setFormData}: SetFormData) => {
79+
const [errorMsg, setErrorMsg] = useState<string>('')
80+
const [arrIndex, setArrIndex] = useState<number>(0)
81+
82+
const [timeRange, setTimeRange] = useState({
83+
start: 480,
84+
end: 600,
85+
})
86+
87+
const updatedRange = (e: any, index: number) => {
88+
const { name, value } = e.target
89+
var array = value.split(':')
90+
var minutes = parseInt(array[0], 10) * 60 + parseInt(array[1], 10)
91+
setArrIndex(index)
92+
setTimeRange((prev: any) => ({
93+
...prev,
94+
[name]: minutes,
95+
}))
96+
}
97+
98+
useEffect(() => {
99+
if (timeRange.end <= timeRange.start)
100+
setErrorMsg('Invalid time intervals: End time > Start time.')
101+
else {
102+
setErrorMsg('')
103+
intervals[arrIndex] = [timeRange.start, timeRange.end]
104+
setFormData((prev: any) => ({
105+
...prev,
106+
intervals: intervals,
107+
}))
108+
}
109+
// eslint-disable-next-line react-hooks/exhaustive-deps
110+
}, [timeRange])
111+
112+
return { errorMsg, updatedRange }
113+
}

0 commit comments

Comments
 (0)