added types

Author: coderKrysio

components/Form.tsx

@@ -1,8 +1,9 @@
 import { useEffect, useState } from 'react'
 import ListIntervals from './ListIntervals'
 import { intervals, timeIntervals } from '@/lib/utils'
+import { SetFormData } from '@/lib/types'
 
-const Form = ({ setFormData }: any) => {
+const Form = ({ setFormData }: SetFormData) => {
     const [intLength, setIntLength] = useState<number>(intervals.length)
 
     const addInterval = () => {

components/GetForm.tsx

@@ -1,18 +1,10 @@
-import { useState } from 'react'
-import Form from './Form'
+import { SetStateAction, useState } from 'react'
 import Navbar from './Navbar'
 import { svgSrc, timeIntervals } from '@/lib/utils'
 import Link from 'next/link'
 import { useRouter } from 'next/navigation'
-interface RoomCode {
-    roomCode: string
-}
-
-interface FormData {
-    name: string
-    roomCode: string
-    intervals: number[][]
-}
+import { FormData, RoomCode } from '@/lib/types'
+import Form from './Form'
 
 const GetForm = ({ roomCode }: RoomCode) => {
     const router = useRouter()
@@ -43,7 +35,7 @@ const GetForm = ({ roomCode }: RoomCode) => {
                         Room Code: {roomCode}
                     </p>
 
-                    <Form setFormData={setFormData} />
+                    <Form {...{setFormData}} />                    
                 </div>
 
                 <div className="mt-[20px] ml-[20px] max-[985px]:hidden">

components/MemberInfo.tsx

@@ -1,11 +1,7 @@
 import { rajdhani } from '@/lib/fonts'
+import { Info } from '@/lib/types'
 import { NumToTime } from '@/lib/utils'
 
-interface Info {
-    name: string
-    intervals: number[][]
-}
-
 const MemberInfo = ({ name, intervals }: Info) => {
     return (
         <div className="min-h-36 w-[330px] rounded-lg bg-gradient-to-b from-[#48d399] via-[#21212b] to-[#db696d] p-1">

components/Results.tsx

@@ -3,17 +3,7 @@ import MemberInfo from './MemberInfo'
 import { membersData } from '@/lib/utils'
 import Navbar from './Navbar'
 import Link from 'next/link'
-
-interface MemberData {
-    id: number
-    roomCode: string
-    name: string
-    intervals: number[][]
-}
-
-interface RoomCode {
-    roomCode: string
-}
+import { MemberData, RoomCode } from '@/lib/types'
 
 const Results = ({ roomCode }: RoomCode) => {
     return (

components/Timeline.tsx

@@ -1,9 +1,5 @@
 import { rajdhani } from '@/lib/fonts'
-
-const timeline: number[] = []
-for (let x = 0; x < 24 * 60; x++) {
-    timeline[x] = x
-}
+import { timeline } from '@/lib/utils'
 
 const Timeline = () => {
     const blockLine = (result: boolean, time: number) => {

lib/types.ts

@@ -0,0 +1,27 @@
+import { Dispatch, SetStateAction } from "react"
+
+export interface RoomCode {
+    roomCode: string
+}
+
+export interface FormData {
+    name: string
+    roomCode: string
+    intervals: number[][]
+}
+
+export interface Info {
+    name: string
+    intervals: number[][]
+}
+
+export interface MemberData {
+    id: number
+    roomCode: string
+    name: string
+    intervals: number[][]
+}
+
+export interface SetFormData {
+    setFormData: Dispatch<SetStateAction<FormData>>
+}

lib/utils.ts

@@ -86,3 +86,8 @@ export function ValidateURL(uuidUrl: string) {
 export function GetRoomCode() {
     return uuidv4().substring(0, 13)
 }
+
+export const timeline: number[] = []
+for (let x = 0; x < 24 * 60; x++) {
+    timeline[x] = x
+}