Frontend/create room (#127)

Co-authored-by: dawnglede <50606676+dawnglede@users.noreply.github.com>
Co-authored-by: Enya <26k1234o3@gmail.com>

packages/frontend/cypress/e2e/login.cy.js

@@ -1,12 +1,12 @@
 describe('Login Page Test', () => {
   it('save user name', () => {
-    cy.visit('http://localhost:3001/login');
-    cy.get('#name').type('Snowman');
-    cy.get('.login_button').click();
-    cy.url().should('include', '/rooms');
+    cy.visit('http://localhost:3001/login')
+    cy.get('#name').type('Snowman')
+    cy.get('.login_button').click()
+    cy.url().should('include', '/rooms')
     cy.window().then((win) => {
       // 使用 win.localStorage.getItem() 來獲取 localStorage 的值
-      expect(win.localStorage.getItem('userName')).to.equal('Snowman');
-    });
+      expect(win.localStorage.getItem('userName')).to.equal('Snowman')
+    })
   })
 })

packages/frontend/js/api/index.ts

@@ -1,5 +1,5 @@
 import axiosInstance from '../common/axiosInstance'
-
+import { CreateRoom, SpecificRoom } from '../common/types'
 type Domain = {
   development: string
   production: string
@@ -39,3 +39,15 @@ type player = {
 export const getRoomList = () => {
   return axios.get<RoomList>('/rooms')
 }
+
+export const createRoom = (payload: Object) => {
+  return axios.post<CreateRoom>('/api/citadels/room', payload)
+}
+
+export const getSpecificRoom = (payload: String) => {
+  return axios.get<SpecificRoom>(`/api/citadels/rooms/${payload}`)
+}
+
+export const leaveRoom = (payload: Object, roomId: string) => {
+  return axios.post(`/rooms/${roomId}:leave`, payload)
+}

packages/frontend/js/common/axiosInstance.ts

@@ -0,0 +1,26 @@
+import axios from 'axios'
+
+export default (baseUrl: string) => {
+  const instance = axios.create({
+    baseURL: baseUrl
+  })
+  instance.interceptors.response.use(
+    (res) => {
+      if (res && res.status === 200) {
+        return res.data
+      }
+    },
+    (error) => {
+      if (error.response) {
+        switch (error.response.status) {
+          case 404:
+            break
+          default:
+            console.log(error.message)
+        }
+      }
+      return Promise.reject(error)
+    }
+  )
+  return instance
+}

packages/frontend/js/common/types.ts

@@ -0,0 +1,42 @@
+export type CreateRoom = {
+  createTime: string
+  status: string
+  msg: string
+  rooms: Record<string, UpdatedRooms>
+}
+
+export type UpdatedRooms = {
+  roomId: string
+  roomName: string
+  holderId: string
+  holderName: string
+  users: Array<{
+    userId: string
+    userName: string
+    userImage: string
+  }>
+  status: string
+  totalUsers: number
+}
+
+export type SpecificRoom = {
+  searchTime: string
+  status: string
+  msg: string
+  rooms: Record<string, TimedRooms>
+}
+
+export type TimedRooms = {
+  roomId: string
+  roomName: string
+  createTime: string
+  status: string
+  holderName: string
+  holderId: string
+  totalUsers: number
+  users: Array<{
+    userId: string
+    userName: string
+    userImage: string
+  }>
+}

packages/frontend/js/components/App.jsx

@@ -1,19 +1,20 @@
 import { Routes, Route, Navigate } from 'react-router-dom'
 import RoomList from './RoomList'
 import Game from './Game'
-
 import getAPI from '../api/getAPI'
-
+import { UserProvider } from '../contexts/UserContext'
 const App = () => {
   const { data } = getAPI()
   return (
     <>
       {/* <div>title:{data.msg}</div> */}
-      <Routes>
-        <Route path='/' element={<Navigate to='/rooms' />} />
-        <Route path='/rooms' element={<RoomList />} />
-        <Route path='/game' element={<Game />} />
-      </Routes>
+      <UserProvider>
+        <Routes>
+          <Route path='/' element={<Navigate to='/rooms' />} />
+          <Route path='/rooms' element={<RoomList />} />
+          <Route path='/game/:roomId' element={<Game />} />
+        </Routes>
+      </UserProvider>
     </>
   )
 }

packages/frontend/js/components/ErrorModal.jsx

@@ -0,0 +1,28 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+const ErrorModal = (props) => {
+  const { isErrorVisible, onClose, errorText } = props
+  return (
+    <>
+      {isErrorVisible && (
+        <div className='error-modal'>
+          <div className='error-modal-content'>
+            <span className='error-text'>{errorText}</span>
+            <button className='cancel-btn' onClick={onClose}>
+              Close
+            </button>
+          </div>
+        </div>
+      )}
+    </>
+  )
+}
+
+ErrorModal.propTypes = {
+  isErrorVisible: PropTypes.bool.isRequired,
+  onClose: PropTypes.func.isRequired,
+  errorText: PropTypes.node.isRequired
+}
+
+export default ErrorModal