integrated api endpoints

Author: coderKrysio

components/GetForm.tsx

@@ -5,6 +5,7 @@ import Link from 'next/link'
 import { useRouter } from 'next/navigation'
 import { FormData, RoomCode } from '@/lib/types'
 import Form from './Form'
+import { API } from '@/lib/api'
 
 const GetForm = ({ roomCode }: RoomCode) => {
     const router = useRouter()
@@ -19,7 +20,8 @@ const GetForm = ({ roomCode }: RoomCode) => {
         if (formData.name === '') setShowError(true)
         else {
             setShowError(false)
-            //router.push(`/${roomCode}/result`)
+            API.postData(formData);
+            router.push(`/${roomCode}/result`)
         }
     }
 

components/Results.tsx

@@ -1,11 +1,26 @@
 import Timeline from './Timeline'
 import MemberInfo from './MemberInfo'
-import { membersData } from '@/lib/utils'
+import { NumToTime } from '@/lib/utils'
 import Navbar from './Navbar'
 import Link from 'next/link'
 import { MemberData, RoomCode } from '@/lib/types'
+import { useEffect, useState } from 'react'
+import { API } from '@/lib/api'
 
 const Results = ({ roomCode }: RoomCode) => {
+    const [result, setResult] = useState<number[][]>([])
+    const [membersData, setMembersData] = useState<MemberData[]>([])
+
+    useEffect(() => {
+        API.getInterval(roomCode).then((res: any) => {
+            setResult(res)
+        })
+        API.getUsers(roomCode).then((res: any) => {
+            setMembersData(res)
+        })
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [])
+
     return (
         <div className="w-screen min-h-screen flex flex-col justify-center items-center text-white bg-[#16161a] py-[70px]">
             <Navbar />
@@ -31,12 +46,14 @@ const Results = ({ roomCode }: RoomCode) => {
                 Room Code: {roomCode}
             </p>
 
-            <p className="text-3xl text-[#48d399] my-2">
-                14:00 - 15:00 <br /> 18:00 - 23:00
-            </p>
+            {result.map((interval: number[], index: number) => (
+                <p className="text-3xl text-[#48d399] my-1">
+                    {NumToTime(interval[0])} - {NumToTime(interval[1])}
+                </p>
+            ))}
 
             <div className="px-4 flex items-center justify-start w-full overflow-auto">
-                <Timeline />
+                <Timeline timeRanges={result} />
             </div>
 
             <p className="text-3xl text-[#d4d4d4] font-medium pb-3 my-4">
@@ -46,8 +63,8 @@ const Results = ({ roomCode }: RoomCode) => {
             <div className="max-w[1200px] grid grid-flow-row grid-cols-1 md:grid-cols-2 lg:grid-cols-3 justify-center items-start gap-[70px]">
                 {membersData.map((values: MemberData, id: number) => (
                     <MemberInfo
-                        name={values.name}
-                        intervals={values.intervals}
+                        name={values.username}
+                        intervals={values.timeRanges}
                         key={id}
                     />
                 ))}

components/Timeline.tsx

@@ -1,7 +1,11 @@
 import { rajdhani } from '@/lib/fonts'
-import { timeline } from '@/lib/utils'
+import { conditionMet, timeline } from '@/lib/utils'
 
-const Timeline = () => {
+type TimeRange = {
+    timeRanges: number[][]
+}
+
+const Timeline = ({ timeRanges }: TimeRange) => {
     const blockLine = (result: boolean, time: number) => {
         if (result)
             return (
@@ -29,22 +33,18 @@ const Timeline = () => {
             )
     }
 
-    const conditionMet = (time: number) => {
-        return (time >= 14 && time <= 15) || (time >= 18 && time <= 23)
-    }
-
     return (
-        <div className="mx-auto my-[40px] flex text-center px-2">
+        <div className="mx-auto my-[40px] flex text-center px-2 select-none">
             {timeline.map((time: number, index: number) => (
                 <div
                     key={index}
                     className={`w-[1px] text-center text-lg ${rajdhani.className}`}
                 >
                     {time % 60 == 0 ? (
-                        blockLine(conditionMet(time / 60), time / 60)
+                        blockLine(conditionMet(time, timeRanges), time / 60)
                     ) : (
                         <>
-                            {conditionMet(time / 60) ? (
+                            {conditionMet(time, timeRanges) ? (
                                 <div className="py-[20px] relative flex justify-start border-t-4 border-[#48d399]"></div>
                             ) : (
                                 <div className="py-[20px] relative flex justify-start border-t-4 border-[#db696d]"></div>

lib/api.ts

@@ -0,0 +1,56 @@
+import { FormData } from "./types"
+
+export const API = {
+    postData: async (formData: FormData) => {
+        try {
+            const res = await fetch('/api/new-room', {
+                method: 'POST',
+                body: JSON.stringify({
+                    username: formData.name,
+                    roomcode: formData.roomCode,
+                    timeRanges: formData.intervals
+                })
+            })
+
+            return res.json()
+        } catch (err: any) {
+            console.log(err)
+        }
+    },
+
+    getInterval: async (roomCode: string) => {
+        try {
+            const res =  await fetch(`/api/${roomCode}`, {
+                method: 'GET'
+            })
+
+            return res.json()
+        } catch (err: any) {
+            console.log(err)
+        }
+    },
+
+    getUsers: async (roomCode: string) => {
+        try {
+            const res = await fetch(`/api/${roomCode}/review`, {
+                method: 'GET'
+            })
+
+            return res.json()
+        } catch (err: any) {
+            console.log(err)
+        }
+    },
+
+    deleteRoom: async (roomCode: string) => {
+        try {
+            const res = await fetch(`/api/${roomCode}/delete`, {
+                method: 'DELETE'
+            })
+
+            return res.json()
+        } catch (err: any) {
+            console.log(err)
+        }
+    },
+}

lib/types.ts

@@ -29,9 +29,9 @@ export interface Info {
 
 export interface MemberData {
     id: number
-    roomCode: string
-    name: string
-    intervals: number[][]
+    roomcode: string
+    username: string
+    timeRanges: number[][]
 }
 
 export interface SetFormData {

lib/utils.ts

@@ -91,3 +91,11 @@ export const timeline: number[] = []
 for (let x = 0; x < 24 * 60; x++) {
     timeline[x] = x
 }
+
+export const conditionMet = (time: number, timeRanges: number[][]) => {
+        for(let x = 0; x < timeRanges.length; x++) {
+            let range = timeRanges[x]
+            if(time >= range[0] && time <= range[1]) return true;
+        }
+        return false
+    }